Added Focused mode as default. Also finally adding the icons correctly.

bicorder-app/src/components/AnalysisDisplay.svelte

@@ -4,6 +4,7 @@
   import Tooltip from './Tooltip.svelte';
 
   export let gradient: AnalysisGradient;
+  export let focusedMode: boolean = false;
 
   const dispatch = createEventDispatcher<{
     change: number | null;
@@ -98,12 +99,14 @@
 </script>
 
 <div class="analysis-gradient">
-  <div class="gradient-row">
-    <div class="term left">
-      <Tooltip text={gradient.term_left_description}>
-        {gradient.term_left}
-      </Tooltip>
-    </div>
+  <div class="gradient-row" class:focused={focusedMode}>
+    {#if !focusedMode}
+      <div class="term left">
+        <Tooltip text={gradient.term_left_description}>
+          {gradient.term_left}
+        </Tooltip>
+      </div>
+    {/if}
 
     <div class="bar-container">
       <button
@@ -124,11 +127,13 @@
       </button>
     </div>
 
-    <div class="term right">
-      <Tooltip text={gradient.term_right_description}>
-        {gradient.term_right}
-      </Tooltip>
-    </div>
+    {#if !focusedMode}
+      <div class="term right">
+        <Tooltip text={gradient.term_right_description}>
+          {gradient.term_right}
+        </Tooltip>
+      </div>
+    {/if}
   </div>
 
   <div class="value-display">
@@ -200,6 +205,15 @@
     margin-bottom: 0.5rem;
   }
 
+  .gradient-row.focused {
+    display: flex;
+    justify-content: center;
+  }
+
+  .gradient-row.focused .bar-container {
+    width: 100%;
+  }
+
   .term {
     text-align: center;
     font-size: 0.9rem;
@@ -257,6 +271,11 @@
     font-size: 0.9rem;
   }
 
+  .analysis-gradient .value-display {
+    margin-top: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+
   .auto-label {
     opacity: 0.6;
     font-size: 0.8rem;