cleanups

src/web/display/DisplayQuestion/QuestionFooter.tsx

@@ -1,4 +1,5 @@
 import { QuestionFragment } from "../../fragments.generated";
+import { Stars } from "../Stars";
 
 type QualityIndicator = QuestionFragment["qualityIndicators"];
 type IndicatorName = keyof QualityIndicator;
@@ -137,69 +138,6 @@ const QualityIndicatorsList: React.FC<{
   );
 };
 
-// Database-like functions
-export function getstars(numstars: number) {
-  let stars = "★★☆☆☆";
-  switch (numstars) {
-    case 0:
-      stars = "☆☆☆☆☆";
-      break;
-    case 1:
-      stars = "★☆☆☆☆";
-      break;
-    case 2:
-      stars = "★★☆☆☆";
-      break;
-    case 3:
-      stars = "★★★☆☆";
-      break;
-    case 4:
-      stars = "★★★★☆";
-      break;
-    case 5:
-      stars = "★★★★★";
-      break;
-    default:
-      stars = "★★☆☆☆";
-  }
-  return stars;
-}
-
-function getStarsColor(numstars: number) {
-  let color = "text-yellow-400";
-  switch (numstars) {
-    case 0:
-      color = "text-red-400";
-      break;
-    case 1:
-      color = "text-red-400";
-      break;
-    case 2:
-      color = "text-orange-400";
-      break;
-    case 3:
-      color = "text-yellow-400";
-      break;
-    case 4:
-      color = "text-green-400";
-      break;
-    case 5:
-      color = "text-blue-400";
-      break;
-    default:
-      color = "text-yellow-400";
-  }
-  return color;
-}
-
-export function getStarsElement(numStars) {
-  return (
-    <div className={`self-center col-span-1 ${getStarsColor(numStars)}`}>
-      {getstars(numStars)}
-    </div>
-  );
-}
-
 interface Props {
   question: QuestionFragment;
   expandFooterToFullWidth: boolean;
@@ -215,7 +153,7 @@ export const QuestionFooter: React.FC<Props> = ({
         expandFooterToFullWidth ? "justify-between" : ""
       } text-gray-500 mb-2 mt-1`}
     >
-      {getStarsElement(question.qualityIndicators.stars)}
+      <Stars num={question.qualityIndicators.stars} />
       <div
         className={`${
           expandFooterToFullWidth ? "place-self-center" : "self-center"

src/web/display/Stars.tsx

@@ -0,0 +1,62 @@
+// Database-like functions
+export function getstars(numstars: number) {
+  let stars = "★★☆☆☆";
+  switch (numstars) {
+    case 0:
+      stars = "☆☆☆☆☆";
+      break;
+    case 1:
+      stars = "★☆☆☆☆";
+      break;
+    case 2:
+      stars = "★★☆☆☆";
+      break;
+    case 3:
+      stars = "★★★☆☆";
+      break;
+    case 4:
+      stars = "★★★★☆";
+      break;
+    case 5:
+      stars = "★★★★★";
+      break;
+    default:
+      stars = "★★☆☆☆";
+  }
+  return stars;
+}
+
+function getStarsColor(numstars: number) {
+  let color = "text-yellow-400";
+  switch (numstars) {
+    case 0:
+      color = "text-red-400";
+      break;
+    case 1:
+      color = "text-red-400";
+      break;
+    case 2:
+      color = "text-orange-400";
+      break;
+    case 3:
+      color = "text-yellow-400";
+      break;
+    case 4:
+      color = "text-green-400";
+      break;
+    case 5:
+      color = "text-blue-400";
+      break;
+    default:
+      color = "text-yellow-400";
+  }
+  return color;
+}
+
+export const Stars: React.FC<{ num: number }> = ({ num }) => {
+  return (
+    <div className={`self-center col-span-1 ${getStarsColor(num)}`}>
+      {getstars(num)}
+    </div>
+  );
+};

src/web/questions/components/HistoryChart.tsx

@@ -1,15 +1,7 @@
 import React from "react";
 import {
-  VictoryAxis,
+    VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLegend, VictoryLine,
-  VictoryChart,
+    VictoryScatter, VictoryTheme, VictoryTooltip, VictoryVoronoiContainer
-  VictoryGroup,
-  VictoryLabel,
-  VictoryLegend,
-  VictoryScatter,
-  VictoryLine,
-  VictoryTheme,
-  VictoryTooltip,
-  VictoryVoronoiContainer,
 } from "victory";
 
 import { QuestionWithHistoryFragment } from "../../fragments.generated";
@@ -18,19 +10,6 @@ interface Props {
   question: QuestionWithHistoryFragment;
 }
 
-const buildDataset = (n, fn) => {
-  return Array.from(Array(n).keys()).map((x) => ({
-    date: x,
-    probability: fn(x),
-  }));
-};
-
-let getDate0 = (x) => {
-  // for fake data
-  let date = new Date(x);
-  return date.toISOString().slice(5, 10).replaceAll("-", "/");
-};
-
 let formatOptionName = (name) => {
   return name.length > 20 ? name.slice(0, 17) + "..." : name;
 };
@@ -166,11 +145,6 @@ export const HistoryChart: React.FC<Props> = ({ question }) => {
   return (
     <div className="flex justify-center items-center w-full">
       <div className="w-10/12">
-        <a
-          className="text‑inherit no-underline"
-          href={question.url}
-          target="_blank"
-        ></a>
         <VictoryChart
           domainPadding={20}
           padding={padding}

src/web/questions/pages/QuestionPage.tsx

@@ -6,10 +6,11 @@ import { Query } from "../../common/Query";
 import { Card } from "../../display/Card";
 import { DisplayOneQuestionForCapture } from "../../display/DisplayOneQuestionForCapture";
 import {
-    formatIndicatorValue, getStarsElement, qualityIndicatorLabels, UsedIndicatorName
+    formatIndicatorValue, qualityIndicatorLabels, UsedIndicatorName
 } from "../../display/DisplayQuestion/QuestionFooter";
 import { Layout } from "../../display/Layout";
 import { LineHeader } from "../../display/LineHeader";
+import { Stars } from "../../display/Stars";
 import { QuestionWithHistoryFragment } from "../../fragments.generated";
 import { ssrUrql } from "../../urql";
 import { HistoryChart } from "../components/HistoryChart";
@@ -44,7 +45,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (
 const QuestionCardContents: React.FC<{
   question: QuestionWithHistoryFragment;
 }> = ({ question }) => (
-  <div className="grid grid-cols-1 space-y-4 place-items-center mb-5">
+  <div className="grid grid-cols-1 space-y-4 place-items-center">
     <h1 className="text-4xl place-self-center w-full text-center mt-10 pl-5 pr-5">
       <a
         className="text-black no-underline hover:text-gray-600"
@@ -56,18 +57,9 @@ const QuestionCardContents: React.FC<{
       </a>
     </h1>
     <HistoryChart question={question} />
-    {/*
-        <div className="flex justify-center items-center w-full">
-      <div className="w-6/12">
-        <QuestionFooter question={question} expandFooterToFullWidth={true} />
-      </div>
-    </div>
-    <QuestionOptions options={question.options} />
-
-    */}
 
     <h2 className="pt-10 text-xl place-self-center w-full text-center text-gray-900">
-      {"Question description"}
+      Question description
     </h2>
     <ReactMarkdown
       linkTarget="_blank"
@@ -77,11 +69,11 @@ const QuestionCardContents: React.FC<{
     </ReactMarkdown>
 
     <h2 className="pt-2 text-xl place-self-center w-full text-center text-gray-900">
-      {"Indicators"}
+      Indicators
     </h2>
     <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
-      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+      <table className="w-full text-sm text-left text-gray-500">
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <thead className="text-xs text-gray-700 uppercase bg-gray-100">
           <tr>
             <th scope="col" className="px-6 py-3">
               Indicator
@@ -92,41 +84,39 @@ const QuestionCardContents: React.FC<{
           </tr>
         </thead>
         <tbody>
-          <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <tr className="border-b">
             <th
               scope="row"
-              className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+              className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
             >
-              {"Stars"}
+              Stars
             </th>
             <td className="px-6 py-4">
-              {getStarsElement(question.qualityIndicators["stars"])}
+              <Stars num={question.qualityIndicators.stars} />
             </td>
           </tr>
-          <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <tr className="border-b">
             <th
               scope="row"
-              className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+              className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
             >
-              {"Platform"}
+              Platform
             </th>
             <td className="px-6 py-4">{question.platform.label}</td>
           </tr>
-          {!!question.qualityIndicators["numForecasts"] ? (
+          {question.qualityIndicators.numForecasts ? (
-            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+            <tr className="border-b">
               <th
                 scope="row"
-                className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+                className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
               >
-                {"Number of forecasts"}
+                Number of forecasts
               </th>
               <td className="px-6 py-4">
-                {question.qualityIndicators["numForecasts"]}
+                {question.qualityIndicators.numForecasts}
               </td>
             </tr>
-          ) : (
+          ) : null}
-            ""
-          )}
           {Object.keys(question.qualityIndicators)
             .filter(
               (indicator) =>
@@ -135,10 +125,10 @@ const QuestionCardContents: React.FC<{
             )
             .map((indicator: UsedIndicatorName) => {
               return (
-                <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+                <tr className="bg-white border-b" key={indicator}>
                   <th
                     scope="row"
-                    className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+                    className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
                   >
                     {qualityIndicatorLabels[indicator]}
                   </th>