Color updates, improved annotation logging

VoineaguLabUNSW · Apr 16, 2024 · dbed9ce · dbed9ce
1 parent 5b413c4
commit dbed9ce
Show file tree

Hide file tree

Showing 17 changed files with 203 additions and 114 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -24,6 +24,7 @@
     "@bufbuild/protobuf": "^1.5.1",
     "@bufbuild/protoc-gen-es": "^1.5.1",
     "@fortawesome/fontawesome-free": "^6.5.1",
+    "@melloware/coloris": "^0.23.1",
     "@square/svelte-store": "^1.0.17",
     "@tanishiking/aho-corasick": "^0.0.1",
     "ahocorasick": "^1.0.2",

diff --git a/frontend/src/lib/components/logo.svelte b/frontend/src/lib/components/logo.svelte
@@ -1,8 +1,11 @@
+<script>
+    import { primary } from '../utils/colors'
+</script>
+
 <style>
     rect.st0 {
         animation: blinker 1.3s cubic-bezier(.7,0,.3,1) infinite;
     }
-
     @keyframes blinker {
         50% {
             opacity: 0;
@@ -14,10 +17,7 @@
 <svg version="1.1" id="Layer_2_00000177457292130175857980000014700644612307228825_"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 353.4 99.2"
 style="enable-background:new 0 0 353.4 99.2;" xml:space="preserve">
-    <style type="text/css">
-    .st0{fill:#EF6060;}
-    </style>
-    <rect x="322.3" class="st0" width="31.1" height="99.2"/>
+    <rect x="322.3" class="st0" width="31.1" height="99.2" fill={primary[500]}/>
     <g>
     <path d="M0,88V18.2h26.7c5,0,9.2,0.8,12.6,2.4c3.4,1.6,5.9,3.7,7.5,6.5c1.7,2.7,2.5,5.8,2.5,9.3c0,2.8-0.5,5.3-1.6,7.3
         s-2.6,3.6-4.4,4.9c-1.8,1.2-3.9,2.1-6.2,2.7v0.7c2.5,0.1,4.9,0.9,7.1,2.3c2.3,1.4,4.2,3.3,5.6,5.8c1.5,2.5,2.2,5.5,2.2,9.1

diff --git a/frontend/src/lib/components/metadatagraph.svelte b/frontend/src/lib/components/metadatagraph.svelte
@@ -15,6 +15,7 @@
     export let heading;
 
     const core = getContext('core')
+    const { colorWay } = getContext('palettes')
     const metadataStore = createMetadataStore(core)
 
     let datasetsSelect = writable();
@@ -82,7 +83,7 @@
         return () => expressionSub()
     })
 
-    const plotlyArgs = derived([expressionDataObj, metadataSelect1, metadataSelect2, scaleSelect, customSelect], ([$expressionDataObj, $metadataSelect1, $metadataSelect2, $scaleSelect, $customSelect], set) => {
+    const plotlyArgs = derived([expressionDataObj, metadataSelect1, metadataSelect2, scaleSelect, customSelect, colorWay], ([$expressionDataObj, $metadataSelect1, $metadataSelect2, $scaleSelect, $customSelect, $colorWay], set) => {
         if(!$expressionDataObj || !$metadataSelect1) {
             return
         } else if (!$expressionDataObj.expression.data) {
@@ -125,21 +126,19 @@
             if($scaleSelect.id != 'Linear') headingY = `${headingY} (${$scaleSelect.id})`
             
             if((typeof data[0].x) == 'string' || data[0].x instanceof String) {
-                set(getPlotViolinBasic(headingMain, data, headingX, headingY, headingZ, orderX, orderZ, groupLabelsX, groupSizesX))
+                set(getPlotViolinBasic(headingMain, data, headingX, headingY, headingZ, orderX, orderZ, groupLabelsX, groupSizesX, $colorWay))
             } else {
-                set(getPlotScatter(headingMain, data, headingX, headingY, headingZ, orderZ))   
+                set(getPlotScatter(headingMain, data, headingX, headingY, headingZ, orderZ, $colorWay))   
             }
         }
     });
 </script>
 
 <Plot plotlyArgs={plotlyArgs}>
+    <svelte:fragment slot="title">
+        <i class='fas fa-gears'/> Metadata
+    </svelte:fragment>
     <span slot="controls">
-        <div class="flex justify-between">
-            <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
-                <i class='fas fa-gears m-2'/>Metadata
-            </h5>
-        </div>
         <div class='w-48 flex flex-col items-stretch gap-3'>
             <Dropdown title='Dataset' selected={datasetsSelect} groups={$datasetOptsObj.datasetsOpts}/>
             

diff --git a/frontend/src/lib/components/palette.svelte b/frontend/src/lib/components/palette.svelte
@@ -0,0 +1,34 @@
+<script context="module">
+    import "@melloware/coloris/dist/coloris.css";
+    import Coloris from "@melloware/coloris";
+    Coloris.init();
+</script>
+
+<script>
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store'
+
+    export let palette = writable([]);
+    let container;
+    
+    onMount(() => {
+        Coloris({el: '.picker', alpha: false});
+        return Coloris.close
+    })
+</script>
+
+<style>
+    :global(.picker-container .clr-field button) {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+    }
+</style>
+
+<div class="picker-container flex flex-wrap items-center gap-2" bind:this={container}>
+    {#each $palette as p}
+            {#key "{i}-{p}"}
+                <input on:change={() => palette.set(Array.from(container.querySelectorAll('.picker')).map(e => e.value))} type="text" value={p} class="picker w-2 h-2 border-0 cursor-pointer">
+            {/key}
+    {/each} 
+</div>
diff --git a/frontend/src/lib/components/plot.svelte b/frontend/src/lib/components/plot.svelte
@@ -1,21 +1,27 @@
 <script>
     import { Drawer } from 'flowbite-svelte';
     import { sineIn } from 'svelte/easing';
+    import { getContext } from 'svelte';
     import { writable, get } from "@square/svelte-store";
     import Plotly from 'plotly.js-dist-min';
     import { Tabs, TabItem } from 'flowbite-svelte';
-
+    import Palette from '../components/palette.svelte';
+    
     export let plotlyArgs;
     
-    //https://github.com/plotly/plotly.js/blob/v2.14.0/src/components/color/attributes.js#L5-L16
-    const DEFAULT_PALLETE = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
     const CONTROLS_WIDTH = 300;
     const TRANSITION_PARAMS = { x: 50, duration: 250, easing: sineIn };
+    
+    let { colorPrimary, colorWay, colorRange } = getContext('palettes');
 
     let plotContainer = writable(undefined);
     let isHovering = true; // Show initially until cursor enters plot
     let toggleOn = writable();
     let hoverOn = writable();
+    
+    function plotlySizeHelper(legendCount=0) {
+        return {width: 1920, height: 1080}
+    }
 
     let firstRender = true;
     $: {
@@ -26,12 +32,12 @@
                     //https://fontawesome.com/icons/bezier-curve
                     name: 'Download .svg',
                     icon: pathToIcon('M368 80h32v32H368V80zM352 32c-17.7 0-32 14.3-32 32H128c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64v64c0 17.7 14.3 32 32 32V352c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32H320c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V384c0-17.7-14.3-32-32-32V160c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H352zM96 160c17.7 0 32-14.3 32-32H320c0 17.7 14.3 32 32 32V352c-17.7 0-32 14.3-32 32H128c0-17.7-14.3-32-32-32V160zM48 400H80v32H48V400zm320 32V400h32v32H368zM48 112V80H80v32H48z'),
-                    click: (gd) => Plotly.downloadImage(gd, {format: 'svg'})
+                    click: (gd) => Plotly.downloadImage(gd, {format: 'svg', ...plotlySizeHelper()})
                 }, {
                     //https://fontawesome.com/icons/file-image
                     name: 'Download .png',
                     icon: pathToIcon('M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm152 32c5.3 0 10.2 2.6 13.2 6.9l88 128c3.4 4.9 3.7 11.3 1 16.5s-8.2 8.6-14.2 8.6H216 176 128 80c-5.8 0-11.1-3.1-13.9-8.1s-2.8-11.2 .2-16.1l48-80c2.9-4.8 8.1-7.8 13.7-7.8s10.8 2.9 13.7 7.8l12.8 21.4 48.3-70.2c3-4.3 7.9-6.9 13.2-6.9z'),
-                    click: (gd) => Plotly.downloadImage(gd, {format: 'png'})
+                    click: (gd) => Plotly.downloadImage(gd, {format: 'png', ...plotlySizeHelper()})
                 }, 
                 ...($plotlyArgs.downloadCSV ? [{
                     //https://fontawesome.com/icons/file-image
@@ -99,13 +105,22 @@
 
     plotContainer.subscribe((pc) => {
         if(!pc) return;
-        pc.onmouseleave = () => isHovering = false;
-        pc.onmousemove = function(e) {
+        function getSidebarMetrics(e) {
             const plotRect = pc.getBoundingClientRect();
+            const mouseX = e.clientX + document.body.scrollLeft;
+            const mouseY = e.clientY + document.body.scrollTop;
             const thresholdX = (plotRect.width - CONTROLS_WIDTH);
-            const positionX = e.clientX - plotRect.left;
-            if(!isHovering && (positionX - 100) > thresholdX) isHovering = true;
-            else if(isHovering && (positionX < thresholdX)) isHovering = false;
+            const isInSidebar = (mouseX >= (plotRect.left + thresholdX) && mouseX <= plotRect.left + plotRect.width && mouseY >= plotRect.top && mouseY <= plotRect.top + plotRect.height)
+            const positionX = mouseX - plotRect.left;
+            return {plotRect, mouseX, mouseY, thresholdX, isInSidebar, positionX}
+        }
+        pc.onmouseleave = (e) => {
+            if(isHovering && !getSidebarMetrics(e).isInSidebar) isHovering = false;
+        }
+        pc.onmousemove = function(e) {
+            const m = getSidebarMetrics(e);
+            if(!isHovering && (m.positionX - 100) > m.thresholdX) isHovering = true;
+            else if(isHovering && m.positionX < m.thresholdX) isHovering = false;
         }
     });
 
@@ -138,27 +153,26 @@
         visibility: hidden;
     }
 </style>
-
 <div id='plot-container' class="relative h-full w-full overflow-x-hidden" bind:this={$plotContainer}>
     <Drawer placement="right" activateClickOutside={false} backdrop={false} transitionType="fly" transitionParams={TRANSITION_PARAMS} hidden={!($toggleOn || ($hoverOn && isHovering))} id="sidebar1" class='absolute bg-gray-50 rounded-md outline outline-[0.1px] outline-gray-300 m-2 shadow-md backdrop-blur-md bg-white/80' style='width:{CONTROLS_WIDTH}px'>
         <Tabs style="full" defaultClass="flex rounded-lg divide-x rtl:divide-x-reverse divide-gray-200 shadow dark:divide-gray-700 gap-1">
           <TabItem class="w-full" open>
-            <span slot="title">Settings</span>
+            <span slot="title">
+                 <slot name='title'></slot>
+            </span>
             <slot name='controls'></slot>
           </TabItem>
           <TabItem class="w-full">
-            <span slot="title">Colors</span>
+            <span slot="title">
+                <i class="fa-solid fa-palette"></i> Display
+            </span>
             <div class="text-sm text-gray-500 dark:text-gray-400">
-                Violins:
-                <div class="flex flex-wrap items-center gap-2">
-                    {#each DEFAULT_PALLETE as p, i}
-                        <div class="rounded-md border-4 border-white" style="height: 50px; width: 50px; background-color:{p};"></div>
-                    {/each}  
-                    <div class="rounded-md bg-white text-center flex flex-col justify-center align-middle" style="height: 50px; width: 50px;">
-                        <i class="fa-solid fa-plus"></i>
-                    </div>
-                    
-                </div>
+                Color Range:
+                <Palette palette={colorRange}/>
+                Primary Color:
+                <Palette palette={colorPrimary}/>
+                Colorway:
+                <Palette palette={colorWay}/>
             </div>
           </TabItem>
         </Tabs>

diff --git a/frontend/src/lib/components/resultgraph.svelte b/frontend/src/lib/components/resultgraph.svelte
@@ -3,13 +3,13 @@
     import Dropdown from '../components/dropdown.svelte';
     import Plot from '../components/plot.svelte';
     import { writable, get, derived } from "svelte/store";
-    import { primary } from '../utils/colors'
     import { getContext } from 'svelte';
    
     export let filteredStore;
     export let heading;
 
-    const { data } = getContext('core')
+    const { data } = getContext('core');
+    const { colorPrimary } = getContext('palettes');
 
     let datasetSelect1 = writable();
     let datasetSelect2 = writable();
@@ -49,7 +49,7 @@
     const filterObj1 = createFilterObj(datasetSelect1, filterSelect1);
     const filterObj2 = createFilterObj(datasetSelect2, filterSelect2);
 
-    const plotlyArgs = derived([datasetSelect1, datasetSelect2, filterSelect1, filterSelect2, data, filteredStore], ([$datasetSelect1, $datasetSelect2, $filterSelect1, $filterSelect2, $data, $filteredStore], set) => {
+    const plotlyArgs = derived([datasetSelect1, datasetSelect2, filterSelect1, filterSelect2, data, filteredStore, colorPrimary], ([$datasetSelect1, $datasetSelect2, $filterSelect1, $filterSelect2, $data, $filteredStore, $colorPrimary], set) => {
         if(!$datasetSelect1 || !$datasetSelect2 || !$data) {
             set(getPlotEmpty('No data'));
             return
@@ -93,8 +93,9 @@
                         name: '',
                         x: x,
                         y: y,
-                        marker : {color: primary[600], ...extraMarkerArgs},
-                        text: names
+                        marker : {color: $colorPrimary[0], ...extraMarkerArgs},
+                        text: names,
+                        hoverlabel: { bgcolor: "white" },
                     }
                 ],
                 layout: { 
@@ -124,12 +125,10 @@
 </script>
 
 <Plot plotlyArgs={plotlyArgs}>
-    <span slot="controls">
-        <div class="flex justify-between">
-            <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
-                <i class='fas fa-gears m-2'/>Datasets
-            </h5>
-        </div>
+    <svelte:fragment slot="title">
+        <i class='fas fa-gears'/> Datasets
+    </svelte:fragment>
+    <svelte:fragment slot="controls">
         <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
             Select from different datasets to compare z-scores for any number of search results.
         </p>
@@ -144,5 +143,5 @@
                 <Dropdown title={'Dataset 2 Subset (' + $filterObj2.title + ')'} selected={filterSelect2} groups={$filterObj2.filterOpts}/>
             {/if}
         </div>
-    </span>
+    </svelte:fragment>
 </Plot>
diff --git a/frontend/src/lib/components/transcriptgraph.svelte b/frontend/src/lib/components/transcriptgraph.svelte
@@ -5,12 +5,12 @@
     import { getContext } from "svelte";
     import { derived } from 'svelte/store';
     import { getPlotEmpty, getTableDownloader } from '../utils/plot';
-    import { gradientPairs  } from '../utils/colors'
 
     export let filteredStore;
     export let heading;
 
     const { data } = getContext('core');
+    const { colorRange } = getContext('palettes')
 
     let datasetsSelect = writable();
     let transcriptSelect = writable();
@@ -47,7 +47,7 @@
         return () => expressionSub()
     })
 
-    const plotlyArgs = derived([expressionDataObj, transcriptSelect, scaleSelect], ([$expressionDataObj, $transcriptSelect, $scaleSelect], set) => {
+    const plotlyArgs = derived([expressionDataObj, transcriptSelect, scaleSelect, colorRange], ([$expressionDataObj, $transcriptSelect, $scaleSelect, $colorRange], set) => {
         if(!$expressionDataObj) set(getPlotEmpty('No data'));
         else if($expressionDataObj.expression.loading) set(getPlotEmpty('Loading'));
         else {
@@ -80,7 +80,7 @@
                     hoverongaps: false,
                     xgap: 0.5,
                     ygap: 0.5,
-                    colorscale: gradientPairs,
+                    colorscale: [[0, $colorRange[0]], [0.5, $colorRange[1]], [1, $colorRange[2]]],
                     zmin: range[0],
                     zmax: range[1]
                 }],
@@ -123,12 +123,10 @@
 </script>
 
 <Plot plotlyArgs={plotlyArgs}>
+    <svelte:fragment slot="title">
+        <i class='fas fa-gears'/> Dataset
+    </svelte:fragment>
     <span slot="controls">
-        <div class="flex justify-between">
-            <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
-                <i class='fas fa-gears m-2'/>Dataset
-            </h5>
-        </div>
         <div class='w-48 flex flex-col items-stretch gap-3'>
             <Dropdown title='Dataset' selected={datasetsSelect} groups={$datasetOptsObj.datasetsOpts}/>
             <Dropdown title='Transcripts' selected={transcriptSelect} groups={$transcriptOptsObj?.transcriptOpts}/>

diff --git a/frontend/src/lib/components/varpartgraph.svelte b/frontend/src/lib/components/varpartgraph.svelte
@@ -5,12 +5,12 @@
     import { getContext } from "svelte";
     import { derived } from 'svelte/store';
     import { getColumnDownloader, getPlotEmpty, getZipped } from '../utils/plot';
-    import { primary } from '../utils/colors'
 
     export let filteredStore;
     export let heading;
 
     const { data } = getContext('core');
+    const { colorPrimary } = getContext('palettes')
 
     let datasetsSelect = writable();
 
@@ -32,7 +32,7 @@
         return () => expressionSub()
     })
 
-    const plotlyArgs = derived(varianceDataObj, ($varianceDataObj, set) => {
+    const plotlyArgs = derived([varianceDataObj, colorPrimary], ([$varianceDataObj, $colorPrimary], set) => {
         if(!$varianceDataObj) set(getPlotEmpty('No data'));
         else if($varianceDataObj.varpart.loading) set(getPlotEmpty('Loading'));
         else if($varianceDataObj.varpart.error) set(getPlotEmpty($varianceDataObj.varpart.error))
@@ -47,7 +47,7 @@
                     x: x,
                     y: y,
                     orientation: 'v',
-                    //marker: { color: primary[900] }
+                    marker: { color: $colorPrimary[0] }
                 }],
                 layout: { 
                     showlegend: false,
@@ -76,12 +76,10 @@
 </script>
 
 <Plot plotlyArgs={plotlyArgs}>
+    <svelte:fragment slot="title">
+        <i class='fas fa-gears'/> Dataset
+    </svelte:fragment>
     <span slot="controls">
-        <div class="flex justify-between">
-            <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
-                <i class='fas fa-gears m-2'/>Dataset
-            </h5>
-        </div>
         <div class='w-48 flex flex-col items-stretch gap-3'>
             <Dropdown title='Dataset' selected={datasetsSelect} groups={$datasetOptsObj.datasetsOpts}/>
         </div>

diff --git a/frontend/src/lib/stores/core.js b/frontend/src/lib/stores/core.js
@@ -93,7 +93,7 @@ function createCore(url) {
 
         // Perform single combined request
         const controller = new AbortController();
-        const response = await fetch('https://d33ldq8s2ek4w8.cloudfront.net/bithub_data/expression.bin'/*'http://localhost:5501/expression.bin'*/, {
+        const response = await fetch('https://d33ldq8s2ek4w8.cloudfront.net/bithub/expression.bin'/*'http://localhost:5501/expression.bin'*/, {
             signal: controller.signal,
             headers: {'Range': 'bytes=' + `${requests[0].byteStart}-${requests[requests.length-1].byteEnd-1}`},
         });
@@ -136,4 +136,4 @@ function createCore(url) {
     return { data, metadata, progress, row, customs: writable({})}
 }
 
-export { createCore };
+export { createCore };