fix(components): trim trailing slash off the lapis url that is prov…

…ided to `gs-app` (#711) resolves #703
GenSpectrum · Jan 31, 2025 · 091d792 · 091d792
1 parent 574e702
commit 091d792
Show file tree

Hide file tree

Showing 31 changed files with 113 additions and 103 deletions.
diff --git a/components/src/preact/LapisUrlContext.ts b/components/src/preact/LapisUrlContext.ts
@@ -1,3 +1,16 @@
 import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
 
-export const LapisUrlContext = createContext('');
+const LapisUrlContext = createContext('');
+
+export const LapisUrlContextProvider = LapisUrlContext.Provider;
+
+export const useLapisUrl = () => {
+    const lapisUrl = useContext(LapisUrlContext);
+
+    if (lapisUrl.endsWith('/')) {
+        return lapisUrl.slice(0, -1);
+    }
+
+    return lapisUrl;
+};
diff --git a/components/src/preact/aggregatedData/aggregate.stories.tsx b/components/src/preact/aggregatedData/aggregate.stories.tsx
@@ -4,7 +4,7 @@ import { expect, waitFor, within } from '@storybook/test';
 import aggregatedData from './__mockData__/aggregated.json';
 import { Aggregate, type AggregateProps } from './aggregate';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<AggregateProps> = {
@@ -44,9 +44,9 @@ export default meta;
 
 export const Default: StoryObj<AggregateProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <Aggregate {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         fields: ['division', 'host'],

diff --git a/components/src/preact/aggregatedData/aggregate.tsx b/components/src/preact/aggregatedData/aggregate.tsx
@@ -1,11 +1,10 @@
 import { type FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
+import { useLapisUrl } from '../LapisUrlContext';
 import { AggregateTable } from './aggregate-table';
 import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
 import { lapisFilterSchema, views } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -48,7 +47,7 @@ export const Aggregate: FunctionComponent<AggregateProps> = (componentProps) =>
 
 export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps) => {
     const { fields, lapisFilter, initialSortField, initialSortDirection } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(async () => {
         return queryAggregateData(lapisFilter, fields, lapis);
@@ -129,7 +128,7 @@ type AggregateInfoProps = {
 };
 
 const AggregateInfo: FunctionComponent<AggregateInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Aggregated data</InfoHeadline1>

diff --git a/components/src/preact/dateRangeSelector/date-range-selector.stories.tsx b/components/src/preact/dateRangeSelector/date-range-selector.stories.tsx
@@ -6,7 +6,7 @@ import dayjs from 'dayjs/esm';
 import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -65,9 +65,9 @@ export default meta;
 
 export const Primary: StoryObj<DateRangeSelectorProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <DateRangeSelector {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 

diff --git a/components/src/preact/lineageFilter/lineage-filter.stories.tsx b/components/src/preact/lineageFilter/lineage-filter.stories.tsx
@@ -6,7 +6,7 @@ import { LineageFilter, type LineageFilterProps } from './lineage-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta = {
@@ -78,9 +78,9 @@ export default meta;
 
 export const Default: StoryObj<LineageFilterProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <LineageFilter {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);

diff --git a/components/src/preact/lineageFilter/lineage-filter.tsx b/components/src/preact/lineageFilter/lineage-filter.tsx
@@ -1,10 +1,9 @@
 import { type FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { LineageFilterChangedEvent } from './LineageFilterChangedEvent';
+import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
 import { lapisFilterSchema } from '../../types';
 import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -47,7 +46,7 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
     value,
     lapisFilter,
 }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
         () => fetchLineageAutocompleteList({ lapis, field: lapisField, lapisFilter }),

diff --git a/components/src/preact/locationFilter/location-filter.stories.tsx b/components/src/preact/locationFilter/location-filter.stories.tsx
@@ -6,7 +6,7 @@ import data from './__mockData__/aggregated.json';
 import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<LocationFilterProps> = {
@@ -77,9 +77,9 @@ export default meta;
 
 export const Primary: StoryObj<LocationFilterProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <LocationFilter {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);

diff --git a/components/src/preact/locationFilter/location-filter.tsx b/components/src/preact/locationFilter/location-filter.tsx
@@ -1,11 +1,11 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useMemo } from 'preact/hooks';
+import { useMemo } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchAutocompletionList, type LocationEntry } from './fetchAutocompletionList';
-import { LapisUrlContext } from '../LapisUrlContext';
 import { LocationChangedEvent } from './LocationChangedEvent';
+import { fetchAutocompletionList, type LocationEntry } from './fetchAutocompletionList';
 import { lapisFilterSchema, type LapisLocationFilter, lapisLocationFilterSchema } from '../../types';
+import { useLapisUrl } from '../LapisUrlContext';
 import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
@@ -40,7 +40,7 @@ export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) =>
 };
 
 export const LocationFilterInner = ({ value, fields, placeholderText, lapisFilter }: LocationFilterInnerProps) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
         () => fetchAutocompletionList({ fields, lapis, lapisFilter }),

diff --git a/components/src/preact/map/sequences-by-location.stories.tsx b/components/src/preact/map/sequences-by-location.stories.tsx
@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 
 import worldAtlas from './__mockData__/worldAtlas.json';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import aggregatedWorld from './__mockData__/aggregatedWorld.json';
 import { SequencesByLocation, type SequencesByLocationProps } from './sequences-by-location';
 import { expectInvalidAttributesErrorMessage, playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
@@ -37,9 +37,9 @@ const aggregatedWorldMatcher = {
 
 export const Default: StoryObj<SequencesByLocationProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <SequencesByLocation {...args} />
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01' },

diff --git a/components/src/preact/map/sequences-by-location.tsx b/components/src/preact/map/sequences-by-location.tsx
@@ -1,7 +1,7 @@
 import type { FunctionComponent } from 'preact';
-import { useContext } from 'preact/hooks';
 import z from 'zod';
 
+import { useLapisUrl } from '../LapisUrlContext';
 import { SequencesByLocationMap } from './sequences-by-location-map';
 import { SequencesByLocationTable } from './sequences-by-location-table';
 import {
@@ -11,7 +11,6 @@ import {
 } from '../../query/computeMapLocationData';
 import { type AggregateData } from '../../query/queryAggregateData';
 import { querySequencesByLocationData } from '../../query/querySequencesByLocationData';
-import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -58,7 +57,7 @@ export const SequencesByLocation: FunctionComponent<SequencesByLocationProps> =
 const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> = (props) => {
     const { lapisFilter, lapisLocationField, mapSource } = props;
 
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const {
         data,
         error,
@@ -158,7 +157,7 @@ type SequencesByLocationMapInfoProps = {
 };
 
 const SequencesByLocationMapInfo: FunctionComponent<SequencesByLocationMapInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Prevalence by location</InfoHeadline1>

diff --git a/components/src/preact/mutationComparison/mutation-comparison.stories.tsx b/components/src/preact/mutationComparison/mutation-comparison.stories.tsx
@@ -6,7 +6,7 @@ import nucleotideMutationsSomeDataset from './__mockData__/nucleotideMutationsSo
 import { MutationComparison, type MutationComparisonProps } from './mutation-comparison';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
 const dateToSomeDataset = '2022-01-01';
@@ -76,7 +76,7 @@ export default meta;
 
 const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationComparison
                     lapisFilters={args.lapisFilters}
@@ -87,7 +87,7 @@ const Template: StoryObj<MutationComparisonProps> = {
                     pageSize={args.pageSize}
                 />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 

diff --git a/components/src/preact/mutationComparison/mutation-comparison.tsx b/components/src/preact/mutationComparison/mutation-comparison.tsx
@@ -1,13 +1,13 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
 import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
 import { namedLapisFilterSchema, sequenceTypeSchema, views } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -52,7 +52,7 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = (c
 
 const MutationComparisonInner: FunctionComponent<MutationComparisonProps> = (componentProps) => {
     const { lapisFilters, sequenceType } = componentProps;
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(async () => {
         return queryMutationData(lapisFilters, sequenceType, lapis);
@@ -187,7 +187,7 @@ type MutationComparisonInfoProps = {
 };
 
 const MutationComparisonInfo: FunctionComponent<MutationComparisonInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     return (
         <Info>
             <InfoHeadline1>Info for mutation comparison</InfoHeadline1>

diff --git a/components/src/preact/mutationFilter/mutation-filter.stories.tsx b/components/src/preact/mutationFilter/mutation-filter.stories.tsx
@@ -6,7 +6,7 @@ import { MutationFilter, type MutationFilterProps } from './mutation-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
 const meta: Meta<MutationFilterProps> = {
@@ -32,11 +32,11 @@ export default meta;
 
 export const Default: StoryObj<MutationFilterProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationFilter width={args.width} initialValue={args.initialValue} />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         width: '100%',
@@ -184,11 +184,11 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
 
 export const WithInitialValue: StoryObj<MutationFilterProps> = {
     render: (args) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <MutationFilter initialValue={args.initialValue} width={args.width} />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
     args: {
         initialValue: {

diff --git a/components/src/preact/mutations/mutations.stories.tsx b/components/src/preact/mutations/mutations.stories.tsx
@@ -13,7 +13,7 @@ import {
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import baselineNucleotideMutations from '../../preact/mutations/__mockData__/baselineNucleotideMutations.json';
 import overallVariantCount from '../../preact/mutations/__mockData__/overallVariantCount.json';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 
 const meta: Meta<MutationsProps> = {
@@ -39,11 +39,11 @@ export default meta;
 
 const Template = {
     render: (args: MutationsProps) => (
-        <LapisUrlContext.Provider value={LAPIS_URL}>
+        <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
                 <Mutations {...args} />
             </ReferenceGenomeContext.Provider>
-        </LapisUrlContext.Provider>
+        </LapisUrlContextProvider>
     ),
 };
 

diff --git a/components/src/preact/mutations/mutations.tsx b/components/src/preact/mutations/mutations.tsx
@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useContext, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { getInsertionsTableData } from './getInsertionsTableData';
@@ -15,7 +15,7 @@ import {
     type SubstitutionOrDeletionEntry,
     views,
 } from '../../types';
-import { LapisUrlContext } from '../LapisUrlContext';
+import { useLapisUrl } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -59,7 +59,7 @@ export const Mutations: FunctionComponent<MutationsProps> = (componentProps) =>
 };
 
 export const MutationsInner: FunctionComponent<MutationsProps> = (componentProps) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
     const { lapisFilter, baselineLapisFilter, sequenceType } = componentProps;
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -237,7 +237,7 @@ type MutationsInfoProps = {
 };
 
 const MutationsInfo: FunctionComponent<MutationsInfoProps> = ({ originalComponentProps }) => {
-    const lapis = useContext(LapisUrlContext);
+    const lapis = useLapisUrl();
 
     return (
         <Info>