added loading and added winner to confidence

day-mon · Jan 21, 2024 · aecdc20 · aecdc20
1 parent 9a626b9
commit aecdc20
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
-    <title>Solid App</title>
+    <title>Accuribet</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/ui/src/components/display-card.tsx b/ui/src/components/display-card.tsx
@@ -312,7 +312,7 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
                 <p class="text-sm">
                   The prediction model has a confidence of{' '}
                   {((props.game.prediction?.confidence ?? 0) * 100).toFixed(1)}%
-                  for the winning team.
+                  for the <span class="font-bold">{props.game.prediction?.prediction}</span> to win.
                 </p>
               </div>
             </Show>

diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
@@ -14,7 +14,7 @@ interface Props {
 }
 
 export const Navbar: Component<Props> = (props: Props) => {
-  let storedPreference = localStorage.getItem('theme');
+  // let storedPreference = localStorage.getItem('theme');
   const [theme, setTheme] = createSignal(props.theme);
 
   const changeTheme = (theme: string) => {

diff --git a/ui/src/pages/Games.tsx b/ui/src/pages/Games.tsx
@@ -30,6 +30,7 @@ export const Games = () => {
   const [selectedModel, setSelectedModel] = createSignal<string>('');
   const [liveUpdates, setLiveUpdates] = createSignal<boolean>(false);
   const [predictions, setPredictions] = createSignal<Prediction[]>([]);
+  const [predictionLoading, setPredictionLoading] = createSignal<boolean>(false);
 
   let intervalId: NodeJS.Timeout;
 
@@ -62,11 +63,23 @@ export const Games = () => {
       return;
     }
 
-    const res = await fetch(
-      `https://apidev.accuribet.win/api/v1/model/predict/${model}`,
-    );
+    setPredictionLoading(true);
+
+    let res;
+    try {
+      res = await fetch(
+        `https://apidev.accuribet.win/api/v1/model/predict/${model}`,
+      );
+    } catch (e) {
+      console.log(e);
+    } finally {
+      setPredictionLoading(false);
+    }
+    if (!res) return;
+
     const data = (await res.json()) as Prediction[];
 
+
     localStorage.setItem(cacheKey, JSON.stringify(data));
     setPredictions(data);
     setSelectedModel(model);
@@ -148,6 +161,10 @@ export const Games = () => {
         >
           <div class="mx-2">
             <div class="flex flex-row items-center justify-center mb-10">
+              <Show when={predictionLoading()}>
+                {/* little loading spinner  next to the model select */}
+                <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+              </Show>
               <Select
                 options={models()}
                 placeholder="Select a model"