retrieve db query

CambioML · Sep 28, 2023 · ad1ec2a · ad1ec2a
1 parent e3d4fc2
commit ad1ec2a
Showing 1 changed file with 3 additions and 88 deletions.
diff --git a/pykoi/frontend/src/lib/Comparison/ComparisonChart.svelte b/pykoi/frontend/src/lib/Comparison/ComparisonChart.svelte
@@ -3,16 +3,11 @@
   import { scaleOrdinal } from "d3-scale";
   import { onMount } from "svelte";
   import HorizontalBar from "./HorizontalBar.svelte";
-  import { writable } from "svelte/store";
   import Table from "./Table.svelte";
-  import { data } from "./data";
   import { comparisonData } from "./store";
 
   import Heatmap from "./Heatmap.svelte";
 
-  let options = {
-    /* Your options here */
-  };
   $: models = Array.from(new Set($comparisonData.map((d) => d.model)));
   $: colorScale = scaleOrdinal()
     .domain($comparisonData.map((d) => d.model))
@@ -33,7 +28,7 @@
   }
 
   onMount(() => {
-    // retrieveDBData();
+    retrieveDBData();
   });
 
   function highLight(i) {
@@ -61,21 +56,12 @@
 </script>
 
 <div class="main-container">
-  <div class="instructions">
-    <h5 class="underline bold">Comparisons</h5>
-    <p>This panes represents the training performance of your model.</p>
-    <button>Download Data</button>
-  </div>
-
   {#if $comparisonData.length > 0}
     <div class="eval-container">
       <div class="left-charts">
         <div class="chart-captions">
           <h4>Model Comparisons</h4>
-          <!-- <p>
-            View the performance of your model over time. GPU stats are
-            available to the right.
-          </p> -->
+
           {#each models as model, i}
             <button
               data-model={model}
@@ -114,8 +100,6 @@
   {/if}
 </div>
 
-<!-- <Linechart /> -->
-
 <style>
   .holder {
     height: 100vh;
@@ -124,30 +108,12 @@
     justify-content: center;
     align-items: center;
   }
-  .buttons {
-    justify-content: center;
-  }
 
-  .rating-button {
-    text-transform: uppercase;
-    margin: 0;
-    /* transition: all 0.1s; */
-  }
   button {
     margin: 0;
   }
 
-  .rating-button:hover {
-    color: var(--white);
-    background: var(--black);
-  }
-
-  /* Remove the space between buttons */
-  .rating-button + .rating-button {
-    margin: 0;
-  }
   .chart-captions {
-    /* border: 1px solid black; */
     margin: auto;
     width: 100%;
     text-align: left;
@@ -157,45 +123,9 @@
     padding: 0;
     margin: 0;
   }
-  .chart-captions p {
-    font-size: var(--smallText);
-  }
-  .instructions {
-    text-align: left;
-    /* padding: 5%; */
-    padding-left: 0;
-  }
-
-  .instructions h4 {
-    text-align: left;
-  }
-
-  .instructions p {
-    font-size: var(--smallText);
-    text-align: left;
-  }
-
-  .instructions button {
-    font-size: var(--smallText);
-  }
-
-  .underline {
-    border-bottom: var(--line);
-  }
-
-  .bold {
-    font-weight: bold;
-    font-size: var(--smallText);
-    margin: 0;
-    padding: 0;
-  }
 
-  .instructions {
-    border-right: 1px solid #eee;
-  }
   .main-container {
-    display: grid;
-    grid-template-columns: 20% 80%;
+    margin: auto;
   }
   .eval-container {
     display: grid;
@@ -216,24 +146,9 @@
   }
 
   .right-charts {
-    /* display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 33.3% 33.3% 33.3%;
-    height: 100vh; */
-    /* border: 2px solid black; */
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: 10% 33% 33%;
     gap: 1%;
   }
-
-  .right-chart-1 {
-    /* border: 1px solid black; */
-  }
-  .right-chart-2 {
-    /* border: 1px solid black; */
-  }
-  .right-chart-3 {
-    /* border: 1px solid black; */
-  }
 </style>