feat(components): set minimal proportion on MutationComparison to 50% #…

…97

components/src/preact/mutationComparison/__mockData__/nucleotideMutationsOtherVariant.json

@@ -284,7 +284,7 @@
         },
         {
             "mutation": "G199-",
-            "proportion": 0.1,
+            "proportion": 0.55,
             "count": 10,
             "sequenceName": null,
             "mutationFrom": "G",

components/src/preact/mutationComparison/mutation-comparison.tsx

@@ -80,7 +80,7 @@ type MutationComparisonTabsProps = {
 };
 
 const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({ data, views, segments }) => {
-    const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 1 });
+    const [proportionInterval, setProportionInterval] = useState({ min: 0.5, max: 1 });
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },

components/src/web-components/display/mutation-comparison-component.stories.ts

@@ -105,21 +105,34 @@ export const Default: StoryObj<MutationComparisonProps> = {
             ],
         },
     },
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');
+
+        await step('Min and max proportions should be 50% and 100%', async () => {
+            const minInput = () => canvas.getAllByLabelText('%')[0];
+            const maxInput = () => canvas.getAllByLabelText('%')[1];
+
+            await waitFor(() => expect(minInput()).toHaveValue(50));
+            await waitFor(() => expect(maxInput()).toHaveValue(100));
+        });
+    },
 };
 
 export const VennDiagram: StoryObj<MutationComparisonProps> = {
     ...Default,
-    play: async ({ canvasElement }) => {
+    play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-comparison-component');
 
-        await waitFor(() => expect(canvas.getByLabelText('Venn', { selector: 'input' })).toBeInTheDocument());
+        await step('Switch to Venn diagram view', async () => {
+            await waitFor(() => expect(canvas.getByLabelText('Venn', { selector: 'input' })).toBeInTheDocument());
 
-        await fireEvent.click(canvas.getByLabelText('Venn', { selector: 'input' }));
+            await fireEvent.click(canvas.getByLabelText('Venn', { selector: 'input' }));
 
-        await waitFor(() =>
-            expect(
-                canvas.getByText('You have no elements selected. Click in the venn diagram to select.'),
-            ).toBeVisible(),
-        );
+            await waitFor(() =>
+                expect(
+                    canvas.getByText('You have no elements selected. Click in the venn diagram to select.'),
+                ).toBeVisible(),
+            );
+        });
     },
 };

components/tests/snapshots.spec.ts-snapshots/Mutation-comparison-Download-of-visualization-mutation-comparison--default-should-match-snapshot-1-chromium-linux.txt

@@ -1,5 +1,5 @@
 mutation,Some variant prevalence,Other variant prevalence
-G199-,0.00006128577557148986,0.1
+G199-,0.00006128577557148986,0.55
 C241T,0.9940932894897089,0.9940534575772437
 C3037T,0.9993348249380177,0.9993303707311134
 C14408T,0.9990330573517858,0.9990265863600414

components/tests/snapshots.spec.ts-snapshots/Mutation-comparison-Download-of-visualization-mutation-comparison--default-should-match-snapshot-1-firefox-linux.txt

@@ -1,5 +1,5 @@
 mutation,Some variant prevalence,Other variant prevalence
-G199-,0.00006128577557148986,0.1
+G199-,0.00006128577557148986,0.55
 C241T,0.9940932894897089,0.9940534575772437
 C3037T,0.9993348249380177,0.9993303707311134
 C14408T,0.9990330573517858,0.9990265863600414