[ALS-6923] Add visualization tool (#138)

Co-authored-by: Samantha Piatt <samantha.piatt@childrens.harvard.edu>

.env.example

@@ -2,6 +2,7 @@
 # You can copy this file and rename it to .env and fill in the values.
 VITE_PROJECT_HOSTNAME=pic-sure.org
 VITE_RESOURCE_HPDS=some-uuid
+VITE_RESOURCE_VIZ=some-uuid
 VITE_OPEN=false
 VITE_AUTH0_TENANT=avillachlab
 
@@ -28,8 +29,10 @@ VITE_AUTH_PROVIDER_MODULE_GOOGLE_ALT=false
 # VITE_GENOMIC_FILTER=true
 # VITE_VARIANT_EXPLORER=true
 # VITE_EXPLORE_TOUR=true
+# VITE_DIST_EXPLORER=true
 
 # VITE_EXPLORE_TOUR_SEARCH_TERM=age
+# VITE_DIST_EXPLORER_GRAPH_COLORS=["#328FFF", "#675AFF", "#FFBC35"]
 
 # Variant Explorer Settings
 # VITE_VARIANT_EXPLORER_TYPE=aggregate

.env.test

@@ -10,6 +10,7 @@ VITE_ALLOW_EXPORT_ENABLED=true
 VITE_DATA_REQUESTS=true
 VITE_GENOMIC_FILTER=true
 VITE_VARIANT_EXPLORER=true
+VITE_DIST_EXPLORER=true
 
 # VITE_AUTH_PROVIDER_MODULE is the prefix for any authorization providers you want to use.
 # We currently support 3 types of authorization providers: AUTH0, Gen3 FENCE, and RAS.

package.json

@@ -26,6 +26,8 @@
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "0.5.13",
     "@types/node": "20.12.11",
+    "@types/plotly.js": "^2.33.3",
+    "@types/plotly.js-dist-min": "^2.3.4",
     "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
@@ -54,8 +56,9 @@
     "@vincjo/datatables": "^1.14.5",
     "auth0-js": "^9.24.1",
     "dotenv": "^16.4.5",
-    "highlight.js": "^11.10.0",
     "driver.js": "^1.3.1",
+    "highlight.js": "^11.10.0",
+    "plotly.js-dist-min": "^2.34.0",
     "svelte-eslint-parser": "^0.40.0",
     "uuid": "^9.0.1"
   }

src/app.postcss

@@ -313,8 +313,17 @@ nav#page-navigation li .nav-dropdown a:focus {
   text-decoration: underline;
 }
 
+#visualizations {
+  .main-svg {
+    border-radius: var(--theme-rounded-container);
+  }
+  .modebar-group:last-child {
+    background-color: transparent !important;
+  }
+}
+
 .main-content .subtitle {
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 .table.align-middle tbody td {

src/lib/components/Content.svelte

@@ -25,6 +25,6 @@
   {#if backUrl}<AngleButton name="back" variant="ghost" on:click={onBack}>{backTitle}</AngleButton
     >{/if}
   {#if title}<h1 class="{backUrl ? 'mb-4' : 'my-4'} text-center">{title}</h1>{/if}
-  {#if subtitle}<p class="subtitle mb-4">{subtitle}</p>{/if}
+  {#if subtitle}<p class="subtitle mb-4 text-center">{subtitle}</p>{/if}
   <slot />
 </section>

src/lib/components/explorer/results/ResultsPanel.svelte

@@ -167,17 +167,20 @@
       </div>
     {/if}
   </div>
-  {#if $filters.length > 0}
+  {#if totalPatients !== 0}
     <div class="flex flex-col items-center mt-8">
       <h5 class="text-center font-bold text-lg py-2">Explore Cohort</h5>
       <div class="flex flex-row flex-wrap justify-items-center gap-4 w-80 justify-center">
-        <CardButton
-          data-testid="distributions-btn"
-          title="Variable Distributions"
-          icon="fa-solid fa-chart-pie"
-          size="md"
-        />
-        {#if totalPatients != ERROR_VALUE && totalPatients !== 0 && features.explorer.variantExplorer && $hasGenomicFilter}
+        {#if features.explorer.distributionExplorer && $filters.length !== 0}
+          <CardButton
+            href="/explorer/distributions"
+            data-testid="distributions-btn"
+            title="Variable Distributions"
+            icon="fa-solid fa-chart-pie"
+            size="md"
+          />
+        {/if}
+        {#if features.explorer.variantExplorer && $hasGenomicFilter}
           <CardButton
             href="/explorer/variant"
             data-testid="variant-explorer-btn"

src/lib/components/plots/PlotlyPlot.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Root, Data, Layout } from 'plotly.js';
+
+  import { type PlotMeta, type PlotlyNewPlot, defaultPlotlyConfig } from '$lib/utilities/Plotly';
+
+  export let index: number;
+  export let data: Data[];
+  export let meta: PlotMeta;
+  export let layout: Partial<Layout>;
+  export let newPlot: PlotlyNewPlot;
+
+  const screenReaderText = meta.isCategorical
+    ? 'Column chart showing the visualization of '
+    : 'Histogram showing the visualization of ';
+
+  let plotContainer: Root;
+
+  onMount(async () => {
+    newPlot(plotContainer, data, layout, {
+      ...defaultPlotlyConfig,
+      toImageButtonOptions: {
+        filename: meta.unformatedTitle,
+      },
+    });
+  });
+</script>
+
+<div
+  id="plot-{index}"
+  aria-label={screenReaderText + meta.unformatedTitle}
+  title={'Visualization of ' + meta.unformatedTitle}
+  bind:this={plotContainer}
+></div>

src/lib/configuration.ts

@@ -182,7 +182,8 @@ export const features: Indexable = {
     exportResultType: (import.meta.env?.VITE_EXPORT_RESULT_TYPE ||
       'DATAFRAME') as ExpectedResultType,
     variantExplorer: import.meta.env?.VITE_VARIANT_EXPLORER === 'true',
-    enableTour: import.meta.env?.EXPLORER_TOUR ? import.meta.env?.EXPLORE_TOUR === 'true' : true, // default to true
+    distributionExplorer: import.meta.env?.VITE_DIST_EXPLORER === 'true',
+    enableTour: import.meta.env?.EXPLORER_TOUR ? import.meta.env?.EXPLORE_TOUR === 'true' : true, // default to true unless set otherwise
   },
   login: {
     open: import.meta.env?.VITE_OPEN === 'true',
@@ -197,10 +198,16 @@ export const settings: Indexable = {
     maxCount: parseInt(import.meta.env?.VITE_VARIANT_EXPLORER_MAX_COUNT || 10000),
     excludeColumns: JSON.parse(import.meta.env?.VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS || '[]'),
   },
+  distributionExplorer: {
+    graphColors: JSON.parse(
+      import.meta.env?.VITE_DIST_EXPLORER_GRAPH_COLORS || '["#328FFF", "#675AFF", "#FFBC35"]',
+    ),
+  },
 };
 
 export const resources = {
   hpds: import.meta.env?.VITE_RESOURCE_HPDS || '',
+  Visualizer: import.meta.env?.VITE_RESOURCE_VIZ || '',
 };
 
 export const auth = {