Add model history plot

frontend/src/App.js

@@ -8,6 +8,7 @@ import WorldMap from './components/WorldMap'
 import AutoComplete from './components/AutoComplete'
 import LanguagePlot from './components/LanguagePlot'
 import SpeakerPlot from './components/SpeakerPlot'
+import HistoryPlot from './components/HistoryPlot'
 import { Carousel } from 'primereact/carousel'
 
 function App () {
@@ -123,20 +124,22 @@ function App () {
                   flex: '100vw 100vw 100vw',
                   maxWidth: 'min(100vw, 800px)',
                   alignItems: 'center',
-                  justifyContent: 'center'
+                  justifyContent: 'center',
+                  width: '100%'
                 }}
               >
                 <Carousel
                   value={[
                     <WorldMap data={data.countries} />,
                     <LanguagePlot data={data} />,
-                    <SpeakerPlot data={data} />
+                    <SpeakerPlot data={data} />,
+                    <HistoryPlot data={data} />,
                   ]}
                   numScroll={1}
                   numVisible={1}
                   itemTemplate={item => item}
                   circular
-                  style={{ width: '800px', minHeight: '650px' }}
+                  style={{ width: '100%', minHeight: '650px' }}
                 />
               </div>
             </>

frontend/src/components/HistoryPlot.js

@@ -0,0 +1,80 @@
+import { useRef, useEffect } from 'react'
+import * as Plot from '@observablehq/plot'
+
+const HistoryPlot = ({ data }) => {
+  const containerRef = useRef()
+  const models = data.model_table
+    .sort((a, b) => new Date(a.creation_date) - new Date(b.creation_date))
+    .reduce((acc, curr) => {
+      const last = acc[acc.length - 1]?.maxAverage || 0
+      acc.push({
+        ...curr,
+        maxAverage: Math.max(last, curr.average),
+        newRecord: curr.average > last
+      })
+      return acc
+    }, [])
+  console.log(models)
+  useEffect(() => {
+    const plot = Plot.plot({
+      width: 750,
+      height: 500,
+      subtitle: 'Model performance over time',
+      x: {
+        label: 'Date',
+        type: 'time',
+        tickFormat: '%Y-%m'
+      },
+      y: {
+        label: 'Language Proficiency Score'
+      },
+      color: {
+        legend: true
+      },
+      marks: [
+        Plot.dot(models, {
+          x: d => d.creation_date,
+          y: d => d.average,
+          fill: d => d.provider_name,
+          title: d =>
+            `${d.provider_name} - ${d.name} (${
+              d.size?.toLocaleString('en-US', { notation: 'compact' }) || '?B'
+            })\nPublished: ${d.creation_date}\nScore: ${d.average.toFixed(2)}`,
+          tip: true
+        }),
+        Plot.line(
+          [
+            ...models.filter(d => d.newRecord),
+            {
+              creation_date: new Date(),
+              maxAverage: models[models.length - 1].maxAverage
+            }
+          ],
+          {
+            x: d => d.creation_date,
+            y: d => d.maxAverage,
+            curve: 'step-after',
+            strokeOpacity: 0.5
+          }
+        )
+      ]
+    })
+    containerRef.current.append(plot)
+    return () => plot.remove()
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    />
+  )
+}
+
+export default HistoryPlot