feat(components): add mutation comparison venn diagram

#78
GenSpectrum · Apr 4, 2024 · c490020 · c490020
1 parent 74308f3
commit c490020
Show file tree

Hide file tree

Showing 12 changed files with 733 additions and 119 deletions.
diff --git a/components/package-lock.json b/components/package-lock.json
diff --git a/components/package.json b/components/package.json
@@ -35,6 +35,7 @@
         "@lit/context": "^1.1.0",
         "@lit/task": "^1.0.0",
         "chart.js": "^4.4.2",
+        "chartjs-chart-venn": "^4.3.0",
         "dayjs": "^1.11.10",
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",

diff --git a/components/src/preact/components/chart.stories.tsx b/components/src/preact/components/chart.stories.tsx
@@ -1,18 +1,22 @@
 import { Meta, StoryObj } from '@storybook/preact';
-import Chart, { GsChartProps } from './chart';
+import GsChart, { GsChartProps } from './chart';
 import { getYAxisScale } from '../shared/charts/getYAxisScale';
+import { Chart, registerables } from 'chart.js';
+import { LogitScale } from '../shared/charts/LogitScale';
 
 const meta: Meta<GsChartProps> = {
     title: 'Component/Chart',
-    component: Chart,
+    component: GsChart,
     parameters: { fetchMock: {} },
 };
 
 export default meta;
 
+Chart.register(...registerables, LogitScale);
+
 export const ChartStory: StoryObj<GsChartProps> = {
     render: (args) => {
-        return <Chart configuration={args.configuration} yAxisScaleType={args.yAxisScaleType} />;
+        return <GsChart configuration={args.configuration} />;
     },
     args: {
         configuration: {

diff --git a/components/src/preact/components/chart.tsx b/components/src/preact/components/chart.tsx
@@ -1,14 +1,11 @@
 import { useEffect, useRef } from 'preact/hooks';
-import { Chart, ChartConfiguration, registerables } from 'chart.js';
-import { getYAxisScale, ScaleType } from '../shared/charts/getYAxisScale';
-import { LogitScale } from '../shared/charts/LogitScale';
+import { Chart, ChartConfiguration } from 'chart.js';
 
 export interface GsChartProps {
     configuration: ChartConfiguration;
-    yAxisScaleType: ScaleType;
 }
 
-const GsChart = ({ configuration, yAxisScaleType }: GsChartProps) => {
+const GsChart = ({ configuration }: GsChartProps) => {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const chartRef = useRef<Chart | null>(null);
 
@@ -22,23 +19,13 @@ const GsChart = ({ configuration, yAxisScaleType }: GsChartProps) => {
             return;
         }
 
-        Chart.register(...registerables, LogitScale);
-
         chartRef.current = new Chart(ctx, configuration);
 
         return () => {
             chartRef.current?.destroy();
         };
     }, [canvasRef, configuration]);
 
-    useEffect(() => {
-        if (chartRef.current) {
-            // @ts-expect-error-next-line -- chart.js typings are not complete with custom scales
-            chartRef.current.options.scales!.y = getYAxisScale(yAxisScaleType);
-            chartRef.current.update();
-        }
-    }, [yAxisScaleType]);
-
     return <canvas ref={canvasRef} />;
 };
 

diff --git a/components/src/preact/mutationComparison/mutation-comparison-venn.tsx b/components/src/preact/mutationComparison/mutation-comparison-venn.tsx
@@ -0,0 +1,102 @@
+import { FunctionComponent } from 'preact';
+import { ArcSlice, extractSets, VennDiagramController } from 'chartjs-chart-venn';
+import { useEffect, useRef } from 'preact/hooks';
+import { ActiveElement, Chart, ChartConfiguration, ChartEvent, registerables } from 'chart.js';
+import GsChart from '../components/chart';
+import { MutationData } from './mutation-comparison';
+import { Dataset } from '../../operator/Dataset';
+
+Chart.register(...registerables, VennDiagramController, ArcSlice);
+
+export interface MutationComparisonVennProps {
+    data: Dataset<MutationData>;
+}
+
+export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennProps> = ({ data }) => {
+    const divRef = useRef<HTMLDivElement>(null);
+    const noElementSelectedMessage = 'You have no elements selected. Click in the venn diagram to select.';
+    useEffect(() => {
+        if (divRef.current === null) {
+            return;
+        }
+        divRef.current.innerText = noElementSelectedMessage;
+    }, [divRef]);
+
+    if (data.content.length > 5) {
+        return <div>Too many variants to display. Maximum are five. </div>;
+    }
+
+    const sets = extractSets(
+        data.content
+            .map((mutationData) => {
+                return {
+                    ...mutationData,
+                    data: mutationData.data.filter((mutationEntry) => mutationEntry.type !== 'insertion'),
+                };
+            })
+            .map((mutationData) => {
+                return {
+                    label: mutationData.displayName,
+                    values: mutationData.data.map((mutationEntry) => mutationEntry.mutation.toString()),
+                };
+            }),
+    );
+
+    const config: ChartConfiguration = {
+        type: 'venn',
+        data: sets,
+        options: {
+            scales: {
+                x: {
+                    ticks: {
+                        color: 'black',
+                        font: {
+                            size: 20,
+                        },
+                    },
+                },
+                y: {
+                    ticks: {
+                        color: 'blue',
+                        font: {
+                            size: 20,
+                        },
+                    },
+                },
+            },
+            events: ['click'],
+            onClick(_: ChartEvent, elements: ActiveElement[]) {
+                if (elements.length === 0) {
+                    divRef.current!.innerText = noElementSelectedMessage;
+                }
+            },
+            backgroundColor: '#f5f5f5',
+            animation: false,
+            layout: {
+                padding: 30,
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                tooltip: {
+                    filter: (tooltipItem: { dataset: { data: { values: string[] }[] }; dataIndex: number }) => {
+                        const values = tooltipItem.dataset.data[tooltipItem.dataIndex].values;
+
+                        divRef.current!.innerText = `Mutations: ${values.join(', ')}` || '';
+                        return false;
+                    },
+                },
+            },
+        },
+    };
+
+    return (
+        <>
+            <GsChart configuration={config} />
+            <div class='flex flex-wrap break-words m-2' ref={divRef}>
+                {''}
+            </div>
+        </>
+    );
+};
diff --git a/components/src/preact/mutationComparison/mutation-comparison.stories.tsx b/components/src/preact/mutationComparison/mutation-comparison.stories.tsx
@@ -17,7 +17,7 @@ const meta: Meta<MutationComparisonProps> = {
             control: { type: 'radio' },
         },
         views: {
-            options: ['table'],
+            options: ['table', 'venn'],
             control: { type: 'check' },
         },
     },
@@ -60,7 +60,7 @@ export const TwoVariants = {
             },
         ],
         sequenceType: 'nucleotide',
-        views: ['table'],
+        views: ['table', 'venn'],
     },
     parameters: {
         fetchMock: {

diff --git a/components/src/preact/mutationComparison/mutation-comparison.tsx b/components/src/preact/mutationComparison/mutation-comparison.tsx
@@ -13,8 +13,9 @@ import Info from '../components/info';
 import Tabs from '../components/tabs';
 import { CheckboxSelector } from '../components/checkbox-selector';
 import { MutationComparisonTable } from './mutation-comparison-table';
+import { MutationComparisonVenn } from './mutation-comparison-venn';
 
-export type View = 'table';
+export type View = 'table' | 'venn';
 
 export interface MutationComparisonVariant {
     lapisFilter: LapisFilter;
@@ -150,6 +151,11 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
                     title: 'Table',
                     content: <MutationComparisonTable data={{ content: filteredData }} />,
                 };
+            case 'venn':
+                return {
+                    title: 'Venn',
+                    content: <MutationComparisonVenn data={{ content: filteredData }} />,
+                };
         }
     };
 

diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx
@@ -1,15 +1,18 @@
-import { ChartConfiguration } from 'chart.js';
+import { Chart, ChartConfiguration, registerables } from 'chart.js';
 import { addUnit, minusTemporal } from '../../utils/temporal';
 import { getMinMaxNumber } from '../../utils/utils';
 import { PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime';
 import { getYAxisScale, ScaleType } from '../shared/charts/getYAxisScale';
 import GsChart from '../components/chart';
+import { LogitScale } from '../shared/charts/LogitScale';
 
 interface PrevalenceOverTimeBubbleChartProps {
     data: PrevalenceOverTimeData;
     yAxisScaleType: ScaleType;
 }
 
+Chart.register(...registerables, LogitScale);
+
 const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverTimeBubbleChartProps) => {
     const firstDate = data[0].content[0].dateRange!;
     const total = data.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
@@ -71,7 +74,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }: PrevalenceOverT
         },
     };
 
-    return <GsChart configuration={config} yAxisScaleType={yAxisScaleType} />;
+    return <GsChart configuration={config} />;
 };
 
 export default PrevalenceOverTimeBubbleChart;
diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time-line-bar-chart.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time-line-bar-chart.tsx
@@ -1,14 +1,17 @@
-import { ChartConfiguration } from 'chart.js';
+import { Chart, ChartConfiguration, registerables } from 'chart.js';
 import { PrevalenceOverTimeData } from '../../query/queryPrevalenceOverTime';
 import { getYAxisScale, ScaleType } from '../shared/charts/getYAxisScale';
 import GsChart from '../components/chart';
+import { LogitScale } from '../../components/charts/LogitScale';
 
 interface PrevalenceOverTimeLineBarChartProps {
     data: PrevalenceOverTimeData;
     type: 'line' | 'bar';
     yAxisScaleType: ScaleType;
 }
 
+Chart.register(...registerables, LogitScale);
+
 const PrevalenceOverTimeLineBarChart = ({ data, type, yAxisScaleType }: PrevalenceOverTimeLineBarChartProps) => {
     const config: ChartConfiguration = {
         type,
@@ -39,7 +42,7 @@ const PrevalenceOverTimeLineBarChart = ({ data, type, yAxisScaleType }: Prevalen
         },
     };
 
-    return <GsChart configuration={config} yAxisScaleType={yAxisScaleType} />;
+    return <GsChart configuration={config} />;
 };
 
 export default PrevalenceOverTimeLineBarChart;
diff --git a/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx b/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx
@@ -1,7 +1,8 @@
-import { ChartConfiguration } from 'chart.js';
+import { Chart, ChartConfiguration, registerables } from 'chart.js';
 import { YearMonthDay } from '../../utils/temporal';
 import { getYAxisScale, ScaleType } from '../shared/charts/getYAxisScale';
 import GsChart from '../components/chart';
+import { LogitScale } from '../shared/charts/LogitScale';
 
 interface RelativeGrowthAdvantageChartData {
     t: YearMonthDay[];
@@ -16,6 +17,8 @@ interface RelativeGrowthAdvantageChartProps {
     yAxisScaleType: ScaleType;
 }
 
+Chart.register(...registerables, LogitScale);
+
 const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAdvantageChartProps) => {
     const config: ChartConfiguration = {
         type: 'line',
@@ -69,7 +72,7 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }: RelativeGrowthAd
         },
     };
 
-    return <GsChart configuration={config} yAxisScaleType={yAxisScaleType} />;
+    return <GsChart configuration={config} />;
 };
 
 export default RelativeGrowthAdvantageChart;
diff --git a/components/src/web-components/display/mutation-comparison-component.stories.ts b/components/src/web-components/display/mutation-comparison-component.stories.ts
@@ -19,7 +19,7 @@ const meta: Meta<MutationComparisonProps> = {
             control: { type: 'radio' },
         },
         views: {
-            options: ['table', 'grid'],
+            options: ['table', 'venn'],
             control: { type: 'check' },
         },
     },
@@ -44,7 +44,7 @@ const Template: StoryObj<MutationComparisonProps> = {
 const dateTo = '2022-01-01';
 const dateFrom = '2021-01-01';
 
-export const Default = {
+export const Default: StoryObj<MutationComparisonProps> = {
     ...Template,
     args: {
         variants: [
@@ -63,7 +63,7 @@ export const Default = {
             },
         ],
         sequenceType: 'nucleotide',
-        views: ['table'],
+        views: ['table', 'venn'],
     },
     parameters: {
         fetchMock: {
@@ -127,3 +127,11 @@ export const Default = {
         },
     },
 };
+
+export const VennDiagramOnly: StoryObj<MutationComparisonProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        views: ['venn'],
+    },
+};
diff --git a/components/tests/visualizationStories.ts b/components/tests/visualizationStories.ts
@@ -8,4 +8,5 @@ export const visualizationStories = [
     { id: 'visualization-relative-growth-advantage--default', title: 'Relative growth advantage' },
     { id: 'visualization-mutations--default', title: 'Mutations', testDownloadWithFilename: 'mutations.csv' },
     { id: 'visualization-mutation-comparison--default', title: 'Mutation comparison' },
+    { id: 'visualization-mutation-comparison--venn-diagram-only', title: 'Mutation comparison' },
 ];