save

lilacai · Jul 6, 2023 · 9303f8c · 9303f8c
1 parent 9e4d9ff
commit 9303f8c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/...mponents/concepts/ConceptPillHover.svelte → ...mponents/concepts/ConceptHoverPill.svelte b/...mponents/concepts/ConceptPillHover.svelte → ...mponents/concepts/ConceptHoverPill.svelte
@@ -1,9 +1,23 @@
 <script lang="ts">
-  import {formatValue, type ConceptMetrics} from '$lilac';
+  import {formatValue, type ConceptMetrics, type OverallScore} from '$lilac';
+  import {scoreToColor} from './colors';
   export let metrics: ConceptMetrics;
+
+  const scoreToText: Record<OverallScore, string> = {
+    not_good: 'Not good',
+    ok: 'OK',
+    good: 'Good',
+    very_good: 'Very good',
+    great: 'Great'
+  };
 </script>
 
 <table>
+  <tr
+    ><td>Overall score</td><td class={scoreToColor[metrics.overall]}
+      >{scoreToText[metrics.overall]}</td
+    ></tr
+  >
   <tr><td>F1</td><td>{formatValue(metrics.f1)}</td></tr>
   <tr><td>Recall</td><td>{formatValue(metrics.recall)}</td></tr>
   <tr><td>Precision</td><td>{formatValue(metrics.precision)}</td></tr>

diff --git a/web/blueprint/src/lib/components/concepts/ConceptView.svelte b/web/blueprint/src/lib/components/concepts/ConceptView.svelte
@@ -27,7 +27,8 @@
   import ThumbsUpFilled from 'carbon-icons-svelte/lib/ThumbsUpFilled.svelte';
   import {hoverTooltip} from '../common/HoverTooltip';
   import ConceptExampleList from './ConceptExampleList.svelte';
-  import ConceptPillHover from './ConceptPillHover.svelte';
+  import ConceptHoverPill from './ConceptHoverPill.svelte';
+  import {scoreToColor} from './colors';
 
   export let concept: Concept;
   const conceptMutation = editConceptMutation();
@@ -46,14 +47,6 @@
     }
   }
 
-  const scoreToColor: Record<OverallScore, string> = {
-    not_good: 'text-red-600',
-    ok: 'text-yellow-600',
-    good: 'text-green-600',
-    very_good: 'text-blue-600',
-    great: 'text-purple-600'
-  };
-
   const scoreToIcon: Record<OverallScore, typeof CarbonIcon> = {
     not_good: ThumbsDown,
     ok: SkillLevel,
@@ -120,23 +113,29 @@
             $modelMutation.variables &&
             $modelMutation.variables[2] == embedding.name}
           <div
-            class="flex w-36 flex-col items-center gap-y-2 rounded-md border border-gray-200 p-4"
+            class="flex w-36 flex-col items-center gap-y-2 rounded-md border border-gray-300 p-4"
           >
             <div class="text-gray-500">{embedding.name}</div>
             {#if $conceptModels.isLoading}
               <InlineLoading />
             {:else if model && model.metrics}
               <div
-                class="concept-score-pill text-4xl font-light {scoreToColor[model.metrics.overall]}"
+                class="flex cursor-default flex-col items-center"
                 use:hoverTooltip={{
-                  component: ConceptPillHover,
+                  component: ConceptHoverPill,
                   props: {metrics: model.metrics}
                 }}
               >
-                {formatValue(model.metrics.f1)}
-              </div>
-              <div>
-                <svelte:component this={scoreToIcon[model.metrics.overall]} />
+                <div
+                  class="concept-score-pill text-4xl font-light {scoreToColor[
+                    model.metrics.overall
+                  ]}"
+                >
+                  {formatValue(model.metrics.f1)}
+                </div>
+                <div>
+                  <svelte:component this={scoreToIcon[model.metrics.overall]} />
+                </div>
               </div>
             {:else}
               <Button

diff --git a/web/blueprint/src/lib/components/concepts/colors.ts b/web/blueprint/src/lib/components/concepts/colors.ts
@@ -0,0 +1,9 @@
+import type {OverallScore} from '$lilac';
+
+export const scoreToColor: Record<OverallScore, string> = {
+  not_good: 'text-red-600',
+  ok: 'text-yellow-600',
+  good: 'text-green-600',
+  very_good: 'text-blue-600',
+  great: 'text-purple-600'
+};