From eee7dee608f219c8f67c855691e132d14d42ea66 Mon Sep 17 00:00:00 2001 From: NunoSempere Date: Tue, 19 Apr 2022 23:01:09 -0400 Subject: [PATCH] feat: further improvement to charts --- src/pages/charts/view/[id].tsx | 126 ++++++++++++++++-- src/web/display/DisplayForecast/index.tsx | 19 +-- src/web/display/HistoryChart.tsx | 148 ++++++++++++++-------- src/web/display/HistoryChartFlyout.tsx | 5 - src/web/utils.ts | 18 +++ 5 files changed, 225 insertions(+), 91 deletions(-) delete mode 100644 src/web/display/HistoryChartFlyout.tsx diff --git a/src/pages/charts/view/[id].tsx b/src/pages/charts/view/[id].tsx index f09ed24..8d635eb 100644 --- a/src/pages/charts/view/[id].tsx +++ b/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 = async ( context ) => { let urlQuery = context.query; // this is an object, not a string which I have to parse!! let initialQueryParameters = { - query: "test", - starsThreshold: 2, - forecastsThreshold: 0, - forecastingPlatforms: platforms.map((platform) => platform.name), + id: null, ...urlQuery, }; - let results: FrontendForecast[] = []; - if (initialQueryParameters.query != "") { - results = await searchAccordingToQueryData(initialQueryParameters, 1); - console.log(results); + let question: FrontendForecast; + let history: any[]; // replace with prop def. + if (initialQueryParameters.id != null) { + question = await fakeGetQuestionByIdBinary(initialQueryParameters.id); + history = await fakeGetHistoryQuestionById(initialQueryParameters.id); } return { props: { - question: results[0] || null, - history: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], + question: question, + history: history, }, }; }; @@ -46,12 +99,59 @@ const Chart: NextPage = ({ question, history }) => { return (
-
- -
+
); }; 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' 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&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: [], + }; +} + + + */ diff --git a/src/web/display/DisplayForecast/index.tsx b/src/web/display/DisplayForecast/index.tsx index 2eff8be..78bcdc0 100644 --- a/src/web/display/DisplayForecast/index.tsx +++ b/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"; diff --git a/src/web/display/HistoryChart.tsx b/src/web/display/HistoryChart.tsx index 7180fdc..ab9943f 100644 --- a/src/web/display/HistoryChart.tsx +++ b/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) => ({ - x: getDate(datum.date * (1000 * 60 * 60 * 24)), - y: datum.probability, -})); +let dataAsXy = (data) => + data.map((datum) => ({ + x: getDate(datum.date * (1000 * 60 * 60 * 24)), + y: datum.probability, + })); + +let colors = [ + "royalblue", + "crimson", + "darkgreen", + "dodgerblue", + "darkviolet", + "limegreen", +]; +const getVictoryGroup = (data, i) => { + return ( + + null} + labelComponent={} + /> + { + (active ? 3.75 : 3)} + labels={() => null} + labelComponent={} + /> + // No idea how to disable labels + } + + ); +}; export const HistoryChart: React.FC = ({ question, history }) => { return ( -
+
+ +

+ {question.title} +

+ } + containerComponent={ + `${datum.x}: ${Math.round(datum.y * 100)}%`} + labelComponent={ + + } + voronoiBlacklist={ + Array.from(Array(5).keys()).map((x, i) => `line${i}`) + // see: https://github.com/FormidableLabs/victory/issues/545 + } + /> + } domain={{ y: [0, 1], }} > - - `${datum.x}: ${Math.round(datum.y * 100)}%`} - labelComponent={ - - } - > - - (active ? 3.75 : 3)} /> - + {[data, data2] + .slice(0, 5) + .map((dataset, i) => getVictoryGroup(dataset, i))} = ({ question, history }) => { } /> @@ -120,10 +152,16 @@ export const HistoryChart: React.FC = ({ question, history }) => { grid: { stroke: "#D3D3D3", strokeWidth: 0.5 }, }} tickLabelComponent={ - + } /> + +
); }; diff --git a/src/web/display/HistoryChartFlyout.tsx b/src/web/display/HistoryChartFlyout.tsx deleted file mode 100644 index 0686f40..0000000 --- a/src/web/display/HistoryChartFlyout.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -export const HistoryChartFlyout = ({ x, y, datum, dx, dy }) => { - return
{x}
; -}; diff --git a/src/web/utils.ts b/src/web/utils.ts index ddee0c1..0a96fdc 100644 --- a/src/web/utils.ts +++ b/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 ` 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; +};