feat: further improvement to charts

src/pages/charts/view/[id].tsx

@@ -15,29 +15,82 @@ interface Props {
   history: number[];
 }
 
+async function fakeGetQuestionByIdBinary(id) {
+  return {
+    id: "infer-958",
+    title:
+      "In the next six months, will U.S. and China announce the establishment of an ongoing bilateral dialog mechanism that includes discussions of emerging technologies?",
+    url: "https://www.infer-pub.com/questions/958-in-the-next-six-months-will-u-s-and-china-announce-the-establishment-of-an-ongoing-bilateral-dialog-mechanism-that-includes-discussions-of-emerging-technologies",
+    platform: "infer",
+    platformLabel: "Infer",
+    description:
+      "The National Security Commission on Artificial Intelligence argues that establishing a regular, high-level diplomatic dialogue with China about artificial intelligence is key to developing and executing a strategy on how to remain competitive and safe as AI technology changes the world ([NSCAI Report Chapter 9](https://reports.nscai.gov/final-report/chapter-9/)). Examples of ongoing bilateral dialog mechanisms are the [Strategic and Economic Dialog](https://china.usc.edu/statements-obama-hu-bilateral-meeting-april-1-2009) under President Obama ([National Committee on American Foreign Policy—NCAFP](https://www.ncafp.org)), the [Comprehensive Economic Dialog](https://www.deccanherald.com/content/605333/trump-xi-establish-us-china.html) under President Trump, and the [Strategic Economic Dialog](https://www.treasury.gov/press-center/press-releases/pages/hp107.aspx) under President George W. Bush. Emerging technologies (e.g. artificial intelligence, quantum computing, and biotech) must be a core component of the dialog structure. \n",
+    options: [
+      {
+        name: "Yes",
+        type: "PROBABILITY",
+        probability: 0.0351,
+      },
+      {
+        name: "No",
+        type: "PROBABILITY",
+        probability: 0.9649,
+      },
+    ],
+    timestamp: "2022-04-19T13:09:13.000Z",
+    stars: 2,
+    qualityindicators: {
+      stars: 2,
+      numforecasts: 164,
+      comments_count: 171,
+      numforecasters: 64,
+    },
+    extra: [],
+  };
+}
+
+async function fakeGetHistoryQuestionById(id) {
+  let l = 30;
+
+  let history = Array.from(Array(l).keys()).map((x) => ({
+    timestamp: `2022-04-${`0${x}`.slice(-2)}T13:09:13.000Z`,
+    options: [
+      {
+        name: "Yes",
+        type: "PROBABILITY",
+        probability: 0.0351 + Math.abs(Math.sin(3 * x)),
+      },
+      {
+        name: "No",
+        type: "PROBABILITY",
+        probability: 0.9649 - Math.abs(Math.sin(3 * x)),
+      },
+    ],
+  }));
+  return history;
+}
+
 export const getServerSideProps: GetServerSideProps<Props> = async (
   context
 ) => {
   let urlQuery = context.query; // this is an object, not a string which I have to parse!!
 
   let initialQueryParameters = {
-    query: "test",
+    id: null,
-    starsThreshold: 2,
-    forecastsThreshold: 0,
-    forecastingPlatforms: platforms.map((platform) => platform.name),
     ...urlQuery,
   };
 
-  let results: FrontendForecast[] = [];
+  let question: FrontendForecast;
-  if (initialQueryParameters.query != "") {
+  let history: any[]; // replace with prop def.
-    results = await searchAccordingToQueryData(initialQueryParameters, 1);
+  if (initialQueryParameters.id != null) {
-    console.log(results);
+    question = await fakeGetQuestionByIdBinary(initialQueryParameters.id);
+    history = await fakeGetHistoryQuestionById(initialQueryParameters.id);
   }
 
   return {
     props: {
-      question: results[0] || null,
+      question: question,
-      history: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      history: history,
     },
   };
 };
@@ -46,12 +99,59 @@ const Chart: NextPage<Props> = ({ question, history }) => {
   return (
     <Layout page={"chart"}>
       <div className="flex flex-col w-12/12 mb-4 mt-8 justify-center items-center self-center">
-        <div className="grid bg-white p-10">
+        <HistoryChart question={question} history={history} />
-          <HistoryChart question={question} history={history} />
-        </div>
       </div>
     </Layout>
   );
 };
 
 export default Chart;
+
+/*
+
+async function fakeGetQuestionByIdMultipleOptions(id) {
+  return {
+    id: "infer-954",
+    title:
+      "Will the U.S. Congress pass a tax credit for semiconductor manufacturing or design before 1 January 2023?",
+    url: "https://www.infer-pub.com/questions/954-will-the-u-s-congress-pass-a-tax-credit-for-semi-conductor-manufacturing-or-design-before-1-january-2023",
+    platform: "infer",
+    platformLabel: "Infer",
+    description:
+      "The National Security Commission on Artificial Intelligence identified developments in micro-electronics and semiconductors as critical to the United States&#39; competitive strategy ([NSCAI Chapter 13](https://reports.nscai.gov/final-report/chapter-13/)). The Facilitating American-Built Semiconductors Act would offer an investment tax credit for investments in semiconductor manufacturing ([Congress.Gov](https://www.congress.gov/bill/117th-congress/senate-bill/2107/text?r=68&amp;s=1), [Senate Finance](https://www.finance.senate.gov/chairmans-news/wyden-crapo-cornyn-warner-daines-stabenow-introduce-bill-to-boost-domestic-manufacturing-of-semiconductors)). Tech companies are lobbying not only for passage, but for expansion of the credit to cover semiconductor design as well ([Bloomberg](https://www.bloomberg.com/news/articles/2021-12-01/corporate-leaders-push-congress-to-speed-aid-for-semiconductors), [SIA](https://www.semiconductors.org/sia-applauds-senate-introduction-of-fabs-act/)).\n",
+    options: [
+      {
+        name: "Yes, for both manufacturing and design ",
+        type: "PROBABILITY",
+        probability: 0.4129,
+      },
+      {
+        name: "Yes, for only manufacturing",
+        type: "PROBABILITY",
+        probability: 0.3103,
+      },
+      {
+        name: "Yes, for only design",
+        type: "PROBABILITY",
+        probability: 0.0235,
+      },
+      {
+        name: "No",
+        type: "PROBABILITY",
+        probability: 0.2533,
+      },
+    ],
+    timestamp: "2022-04-19T13:09:21.000Z",
+    stars: 2,
+    qualityindicators: {
+      stars: 2,
+      numforecasts: 156,
+      comments_count: 168,
+      numforecasters: 66,
+    },
+    extra: [],
+  };
+}
+
+
+ */

src/web/display/DisplayForecast/index.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown from "react-markdown";
 import { FrontendForecast } from "../../platforms";
 import { Card } from "../Card";
 import { ForecastFooter } from "./ForecastFooter";
+import { cleanText } from "../../utils";
 
 const truncateText = (length: number, text: string): string => {
   if (!text) {
@@ -76,24 +77,6 @@ if (!String.prototype.replaceAll) {
   };
 }
 
-const cleanText = (text: string): string => {
-  // Note: should no longer be necessary
-  let textString = !!text ? text : "";
-  textString = textString
-    .replaceAll("] (", "](")
-    .replaceAll(") )", "))")
-    .replaceAll("( [", "([")
-    .replaceAll(") ,", "),")
-    .replaceAll("==", "") // Denotes a title in markdown
-    .replaceAll("Background\n", "")
-    .replaceAll("Context\n", "")
-    .replaceAll("--- \n", "- ")
-    .replaceAll(/\[(.*?)\]\(.*?\)/g, "$1");
-  textString = textString.slice(0, 1) == "=" ? textString.slice(1) : textString;
-  //console.log(textString)
-  return textString;
-};
-
 const primaryForecastColor = (probability: number) => {
   if (probability < 0.03) {
     return "bg-red-600";

src/web/display/HistoryChart.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import { FrontendForecast } from "../platforms";
 import * as V from "victory";
-import { HistoryChartFlyout } from "./HistoryChartFlyout";
 import {
   VictoryBar,
   VictoryLabel,
@@ -15,86 +14,119 @@ import {
   VictoryGroup,
   VictoryVoronoiContainer,
 } from "victory";
+import ReactMarkdown from "react-markdown";
+import { cleanText } from "../utils";
+import gfm from "remark-gfm";
 
 interface Props {
   question: FrontendForecast;
   history: number[];
 }
 
-const data0 = [
-  { date: 1, probability: 0.1 },
-  { date: 2, probability: 0.2 },
-  { date: 3, probability: 0.4 },
-  { date: 4, probability: 0.6 },
-  { date: 5, probability: 0.6 },
-  { date: 6, probability: 0.65 },
-  { date: 7, probability: 0.65 },
-  { date: 8, probability: 0.65 },
-  { date: 9, probability: 0.7 },
-];
-
 let l = 50;
 const data = Array.from(Array(l).keys()).map((x) => ({
   date: x,
   probability: Math.abs(Math.sin((5 * x) / l)),
 }));
 
+const data2 = Array.from(Array(l).keys()).map((x) => ({
+  date: x,
+  probability: 1 - Math.abs(Math.sin((5 * x) / l)),
+}));
+
 let getDate = (x) => {
   let date = new Date(x);
   return date.toISOString().slice(5, 10).replaceAll("-", "/");
 };
 
-let dataAsXy = data.map((datum) => ({
+let dataAsXy = (data) =>
-  x: getDate(datum.date * (1000 * 60 * 60 * 24)),
+  data.map((datum) => ({
-  y: datum.probability,
+    x: getDate(datum.date * (1000 * 60 * 60 * 24)),
-}));
+    y: datum.probability,
+  }));
+
+let colors = [
+  "royalblue",
+  "crimson",
+  "darkgreen",
+  "dodgerblue",
+  "darkviolet",
+  "limegreen",
+];
+const getVictoryGroup = (data, i) => {
+  return (
+    <VictoryGroup color={colors[i] || "darkgray"} data={dataAsXy(data)}>
+      <VictoryLine
+        name={`line${i}`}
+        style={{ labels: { display: "none" } }}
+        labels={() => null}
+        labelComponent={<span></span>}
+      />
+      {
+        <VictoryScatter
+          style={{ labels: { display: "none" } }}
+          size={({ active }) => (active ? 3.75 : 3)}
+          labels={() => null}
+          labelComponent={<span></span>}
+        />
+        // No idea how to disable labels
+      }
+    </VictoryGroup>
+  );
+};
 
 export const HistoryChart: React.FC<Props> = ({ question, history }) => {
   return (
-    <div className="">
+    <div className="grid grid-rows-1 bg-white p-10">
+      <a
+        className="text‑inherit no-underline"
+        href={question.url}
+        target="_blank"
+      >
+        <h1 className="text-3xl font-normal text-center mt-5">
+          {question.title}
+        </h1>
+      </a>
       <VictoryChart
         domainPadding={20}
+        padding={{ top: 20, bottom: 50, left: 50, right: 50 }}
         theme={VictoryTheme.material}
-        height={400}
+        height={340}
         width={500}
-        containerComponent={<VictoryVoronoiContainer />}
+        containerComponent={
+          <VictoryVoronoiContainer
+            labels={({ datum }) => `${datum.x}: ${Math.round(datum.y * 100)}%`}
+            labelComponent={
+              <VictoryTooltip
+                pointerLength={0}
+                dy={-12}
+                style={{
+                  fontSize: 10,
+                  fill: "black",
+                  strokeWidth: 0.05,
+                }}
+                flyoutStyle={{
+                  stroke: "black",
+                  fill: "white",
+                }}
+                flyoutWidth={80}
+                cornerRadius={0}
+                flyoutPadding={7}
+              />
+            }
+            voronoiBlacklist={
+              Array.from(Array(5).keys()).map((x, i) => `line${i}`)
+              // see: https://github.com/FormidableLabs/victory/issues/545
+            }
+          />
+        }
         domain={{
           y: [0, 1],
         }}
       >
-        <VictoryLabel
+        {[data, data2]
-          text="Chart Title"
+          .slice(0, 5)
-          x={250}
+          .map((dataset, i) => getVictoryGroup(dataset, i))}
-          y={25}
-          textAnchor="middle"
-          style={{ fontSize: 20 }}
-        />
-        <VictoryGroup
-          color="darkblue"
-          data={dataAsXy}
-          labels={({ datum }) => `${datum.x}: ${Math.round(datum.y * 100)}%`}
-          labelComponent={
-            <VictoryTooltip
-              pointerLength={0}
-              dy={-12}
-              style={{
-                fontSize: 16,
-                fill: "black",
-                strokeWidth: 0.05,
-              }}
-              flyoutStyle={{
-                stroke: "black",
-                fill: "white",
-              }}
-              flyoutWidth={110}
-              cornerRadius={0}
-              flyoutPadding={7}
-            />
-          }
-        >
-          <VictoryLine />
-          <VictoryScatter size={({ active }) => (active ? 3.75 : 3)} />
-        </VictoryGroup>
         <VictoryAxis
           // tickValues specifies both the number of ticks and where
           // they are placed on the axis
@@ -108,7 +140,7 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
             <VictoryLabel
               dy={0}
               angle={-30}
-              style={{ fontSize: 12, fill: "gray" }}
+              style={{ fontSize: 10, fill: "gray" }}
             />
           }
         />
@@ -120,10 +152,16 @@ export const HistoryChart: React.FC<Props> = ({ question, history }) => {
             grid: { stroke: "#D3D3D3", strokeWidth: 0.5 },
           }}
           tickLabelComponent={
-            <VictoryLabel dy={0} style={{ fontSize: 12, fill: "gray" }} />
+            <VictoryLabel dy={0} style={{ fontSize: 10, fill: "gray" }} />
           }
         />
       </VictoryChart>
+
+      <ReactMarkdown
+        remarkPlugins={[gfm]}
+        children={question.description}
+        className="m-5 text-lg"
+      />
     </div>
   );
 };

src/web/display/HistoryChartFlyout.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const HistoryChartFlyout = ({ x, y, datum, dx, dy }) => {
-  return <div>{x}</div>;
-};

src/web/utils.ts

@@ -9,3 +9,21 @@ export const reqToBasePath = (req: IncomingMessage) => {
   // we could just hardcode http://localhost:3000 here, but then `next dev -p <CUSTOM_PORT>` would break
   return "http://" + req.headers.host;
 };
+
+export const cleanText = (text: string): string => {
+  // Note: should no longer be necessary
+  let textString = !!text ? text : "";
+  textString = textString
+    .replaceAll("] (", "](")
+    .replaceAll(") )", "))")
+    .replaceAll("( [", "([")
+    .replaceAll(") ,", "),")
+    .replaceAll("==", "") // Denotes a title in markdown
+    .replaceAll("Background\n", "")
+    .replaceAll("Context\n", "")
+    .replaceAll("--- \n", "- ")
+    .replaceAll(/\[(.*?)\]\(.*?\)/g, "$1");
+  textString = textString.slice(0, 1) == "=" ? textString.slice(1) : textString;
+  //console.log(textString)
+  return textString;
+};