From b1433e6fed9aed99f05bc4f36a4ef12fac48fbf9 Mon Sep 17 00:00:00 2001
From: Theodore Chang <tlcfem@gmail.com>
Date: Thu, 28 Nov 2024 04:44:12 +0100
Subject: [PATCH] Add histogram

---
 gui/src/API.tsx    |  2 +-
 gui/src/About.tsx  | 10 ++++----
 gui/src/Server.tsx | 59 +++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/gui/src/API.tsx b/gui/src/API.tsx
index aea651e..9b16c06 100644
--- a/gui/src/API.tsx
+++ b/gui/src/API.tsx
@@ -147,7 +147,7 @@ class AggregationBucket {
     public buckets: AggregationItem[];
 }
 
-class AggregationItem {
+export class AggregationItem {
     public key: number;
     public doc_count: number;
 }
diff --git a/gui/src/About.tsx b/gui/src/About.tsx
index 3dfa0db..95538c4 100644
--- a/gui/src/About.tsx
+++ b/gui/src/About.tsx
@@ -22,12 +22,12 @@ import beanie_logo from "./assets/beanie.svg";
 import solid_logo from "./assets/solid.svg";
 import tippy_logo from "./assets/tippy.svg";
 import plotly_logo from "./assets/plotly.svg";
-import leafllet_logo from "./assets/leaflet.svg";
+import leaflet_logo from "./assets/leaflet.svg";
 import mb_logo from "./assets/logo.svg";
 import mongoengine_logo from "./assets/mongoengine.png";
 import celery_logo from "./assets/celery.png";
 import scipy_logo from "./assets/scipy.svg";
-import { get_stats, post_total_api, QueryConfig } from "./API";
+import { post_total_api, QueryConfig } from "./API";
 
 export default function AboutModal() {
     const [open, setOpen] = createSignal(false);
@@ -47,8 +47,6 @@ export default function AboutModal() {
         configs.push(config);
 
         setStats(await post_total_api(configs));
-
-        console.log(await get_stats());
     });
 
     const commit_link = <Link href="https://github.com/TLCFEM/motion-base/tree/git-commit-long">git-commit-short</Link>;
@@ -78,7 +76,7 @@ export default function AboutModal() {
                         border: "1px solid lightgrey",
                         borderRadius: "4px",
                         boxShadow: "24px",
-                        p: 4,
+                        p: 4
                     }}
                 >
                     <Stack direction="row" spacing={2} sx={{ p: 1 }} alignItems="center">
@@ -143,7 +141,7 @@ export default function AboutModal() {
                             <img src={solid_logo} alt="solid" height="40px" />
                         </Link>
                         <Link href="https://leafletjs.com/">
-                            <img src={leafllet_logo} alt="leaflet" height="40px" />
+                            <img src={leaflet_logo} alt="leaflet" height="40px" />
                         </Link>
                         <Link href="https://plotly.com/javascript/">
                             <img src={plotly_logo} alt="plotly" height="40px" />
diff --git a/gui/src/Server.tsx b/gui/src/Server.tsx
index 7d92320..ea28132 100644
--- a/gui/src/Server.tsx
+++ b/gui/src/Server.tsx
@@ -13,16 +13,65 @@
 //  You should have received a copy of the GNU General Public License
 //  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-import { Box, Button, CircularProgress, LinearProgress, Modal, Stack, TextField } from "@suid/material";
+import { Box, Button, LinearProgress, Modal, Paper, Stack, TextField } from "@suid/material";
 import useTheme from "@suid/material/styles/useTheme";
-import { createSignal } from "solid-js";
+import { Component, createEffect, createSignal, onMount } from "solid-js";
 import axios from "axios";
+import { AggregationItem, get_stats } from "./API";
+import Plotly from "plotly.js-dist-min";
+
+interface HistogramProps {
+    id: string;
+    item: string;
+    data: AggregationItem[];
+}
+
+const Histogram: Component<HistogramProps> = (props) => {
+    createEffect(async () => {
+        await Plotly.newPlot(
+            props.id,
+            [
+                {
+                    x: props.data.map(item => item.key),
+                    y: props.data.map(item => item.doc_count),
+                    type: "bar"
+                }
+            ],
+            {
+                title: props.item + " Histogram",
+                xaxis: {
+                    title: props.item,
+                    autorange: true,
+                    automargin: true
+                },
+                yaxis: {
+                    title: "Counts",
+                    autorange: true,
+                    automargin: true
+                },
+                width: 450,
+                height: 400
+            },
+            { autosizable: true, responsive: true }
+        );
+    });
+
+    return <Paper id={props.id} sx={{ width: 450, height: 400 }} />;
+};
 
 export default function ServerModal() {
     const [open, setOpen] = createSignal(false);
     const [newServer, setNewServer] = createSignal(axios.defaults.baseURL);
     const [loading, setLoading] = createSignal(false);
     const theme = useTheme();
+    const [magnitudeHist, setMagnitudeHist] = createSignal([] as AggregationItem[]);
+    const [pgaHist, setPgaHist] = createSignal([] as AggregationItem[]);
+
+    onMount(async () => {
+        const allStats = await get_stats();
+        setMagnitudeHist(allStats.magnitude.buckets);
+        setPgaHist(allStats.pga.buckets);
+    });
 
     return (
         <>
@@ -41,7 +90,7 @@ export default function ServerModal() {
                         top: "50%",
                         left: "50%",
                         transform: "translate(-50%, -50%)",
-                        width: "60ch",
+                        // width: "60ch",
                         bgcolor: theme.palette.background.paper,
                         border: "1px solid lightgrey",
                         borderRadius: "4px",
@@ -74,6 +123,10 @@ export default function ServerModal() {
                         </Button>
                     </Stack>
                     {loading() ? <LinearProgress /> : <LinearProgress variant="determinate" value={0} />}
+                    <Stack direction="row" spacing={1} sx={{ p: 1 }} alignItems="center" justifyContent="center">
+                        <Histogram id="magnitude-hist" item="Magnitude" data={magnitudeHist()} />
+                        <Histogram id="pga-hist" item="PGA" data={pgaHist()} />
+                    </Stack>
                 </Box>
             </Modal>
         </>