@genspectrum/dashboard-components 0.6.14 → 0.6.16

package/custom-elements.json

@@ -70,7 +70,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Wrapper/App', component: 'gs-app', parameters: withComponentDocs({ fetchMock: {}, componentDocs: { opensShadowDom: false, expectsChildren: true, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Wrapper/App', component: 'gs-app', parameters: withComponentDocs({ fetchMock: {}, componentDocs: { opensShadowDom: false, expectsChildren: true, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -227,6 +227,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/errorHandling.mdx",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/index.ts",
@@ -268,7 +274,7 @@
           "type": {
             "text": "Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>>"
           },
-          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'select', }, options: [ PRESET_VALUE_CUSTOM, PRESET_VALUE_ALL_TIMES, PRESET_VALUE_LAST_2_WEEKS, PRESET_VALUE_LAST_MONTH, PRESET_VALUE_LAST_2_MONTHS, PRESET_VALUE_LAST_3_MONTHS, PRESET_VALUE_LAST_6_MONTHS, 'CustomDateRange', ], }, dateColumn: { control: { type: 'text' } }, customSelectOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }], earliestDate: '1970-01-01', initialValue: PRESET_VALUE_LAST_6_MONTHS, dateColumn: 'aDateColumn', width: '100%', initialDateFrom: '', initialDateTo: '', }, decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'select', }, options: [ PRESET_VALUE_CUSTOM, PRESET_VALUE_ALL_TIMES, PRESET_VALUE_LAST_2_WEEKS, PRESET_VALUE_LAST_MONTH, PRESET_VALUE_LAST_2_MONTHS, PRESET_VALUE_LAST_3_MONTHS, PRESET_VALUE_LAST_6_MONTHS, 'CustomDateRange', ], }, dateColumn: { control: { type: 'text' } }, customSelectOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }], earliestDate: '1970-01-01', initialValue: PRESET_VALUE_LAST_6_MONTHS, dateColumn: 'aDateColumn', width: '100%', initialDateFrom: '', initialDateTo: '', }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -489,7 +495,7 @@
           "type": {
             "text": "Meta<Required<LineageFilterProps>>"
           },
-          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: ['gs-lineage-filter-changed'], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: ['gs-lineage-filter-changed', ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -669,7 +675,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Input/Location filter', component: 'gs-location-filter', parameters: withComponentDocs({ actions: { handles: ['gs-location-changed'], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { fields: { control: { type: 'object', }, }, initialValue: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, }, decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Location filter', component: 'gs-location-filter', parameters: withComponentDocs({ actions: { handles: ['gs-location-changed', ...previewHandles], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { fields: { control: { type: 'object', }, }, initialValue: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -881,7 +887,7 @@
           "type": {
             "text": "Meta<MutationFilterProps>"
           },
-          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'object', }, }, width: { control: 'text' }, }, decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'object', }, }, width: { control: 'text' }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1062,7 +1068,7 @@
           "type": {
             "text": "Meta<Required<TextInputProps>>"
           },
-          "default": "{ title: 'Input/Text input', component: 'gs-text-input', parameters: withComponentDocs({ actions: { handles: ['gs-text-input-changed'], }, fetchMock: { mocks: [ { matcher: { name: 'hosts', url: AGGREGATED_ENDPOINT, body: { fields: ['host'], }, }, response: { status: 200, body: data, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { lapisField: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, initialValue: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, decorators: [withActions], tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Text input', component: 'gs-text-input', parameters: withComponentDocs({ actions: { handles: ['gs-text-input-changed', ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'hosts', url: AGGREGATED_ENDPOINT, body: { fields: ['host'], }, }, response: { status: 200, body: data, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { lapisField: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, initialValue: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",

package/dist/dashboard-components.js

@@ -397,17 +397,19 @@ const lapisError = z$1.object({
   error: problemDetail
 });
 class UnknownLapisError extends Error {
-  constructor(message, status) {
+  constructor(message, status, requestedData) {
     super(message);
     this.status = status;
+    this.requestedData = requestedData;
     this.name = "UnknownLapisError";
   }
 }
 class LapisError extends Error {
-  constructor(message, status, problemDetail2) {
+  constructor(message, status, problemDetail2, requestedData) {
     super(message);
     this.status = status;
     this.problemDetail = problemDetail2;
+    this.requestedData = requestedData;
     this.name = "LapisError";
   }
 }
@@ -420,7 +422,7 @@ async function fetchAggregated(lapisUrl, body, signal) {
     body: JSON.stringify(body),
     signal
   });
-  await handleErrors(response);
+  await handleErrors(response, "aggregated data");
   return aggregatedResponse.parse(await response.json());
 }
 async function fetchInsertions(lapisUrl, body, sequenceType, signal) {
@@ -432,7 +434,7 @@ async function fetchInsertions(lapisUrl, body, sequenceType, signal) {
     body: JSON.stringify(body),
     signal
   });
-  await handleErrors(response);
+  await handleErrors(response, `${sequenceType} insertions`);
   return insertionsResponse.parse(await response.json());
 }
 async function fetchSubstitutionsOrDeletions(lapisUrl, body, sequenceType, signal) {
@@ -444,7 +446,7 @@ async function fetchSubstitutionsOrDeletions(lapisUrl, body, sequenceType, signa
     body: JSON.stringify(body),
     signal
   });
-  await handleErrors(response);
+  await handleErrors(response, `${sequenceType} mutations`);
   return mutationsResponse.parse(await response.json());
 }
 async function fetchReferenceGenome(lapisUrl, signal) {
@@ -455,10 +457,10 @@ async function fetchReferenceGenome(lapisUrl, signal) {
     },
     signal
   });
-  await handleErrors(response);
+  await handleErrors(response, "the reference genomes");
   return referenceGenomeResponse.parse(await response.json());
 }
-const handleErrors = async (response) => {
+const handleErrors = async (response, requestedData) => {
   if (!response.ok) {
     if (response.status >= 400 && response.status < 500) {
       const json = await response.json();
@@ -467,7 +469,8 @@ const handleErrors = async (response) => {
         throw new LapisError(
           response.statusText + lapisErrorResult.data.error.detail,
           response.status,
-          lapisErrorResult.data.error
+          lapisErrorResult.data.error,
+          requestedData
         );
       }
       const problemDetailResult = problemDetail.safeParse(json);
@@ -475,12 +478,17 @@ const handleErrors = async (response) => {
         throw new LapisError(
           response.statusText + problemDetailResult.data.detail,
           response.status,
-          problemDetailResult.data
+          problemDetailResult.data,
+          requestedData
         );
       }
-      throw new UnknownLapisError(`${response.statusText}: ${JSON.stringify(json)}`, response.status);
+      throw new UnknownLapisError(
+        `${response.statusText}: ${JSON.stringify(json)}`,
+        response.status,
+        requestedData
+      );
     }
-    throw new UnknownLapisError(`${response.statusText}: ${response.status}`, response.status);
+    throw new UnknownLapisError(`${response.statusText}: ${response.status}`, response.status, requestedData);
   }
 };
 const aggregatedEndpoint = (lapisUrl) => `${lapisUrl}/sample/aggregated`;
@@ -1200,6 +1208,16 @@ const CsvDownloadButton = ({
   };
   return /* @__PURE__ */ u$1("button", { className, onClick: download, children: label });
 };
+const GS_ERROR_EVENT_TYPE = "gs-error";
+class ErrorEvent extends Event {
+  constructor(error) {
+    super(GS_ERROR_EVENT_TYPE, {
+      bubbles: true,
+      composed: true
+    });
+    this.error = error;
+  }
+}
 class UserFacingError extends Error {
   constructor(headline, message) {
     super(message);
@@ -1209,36 +1227,72 @@ class UserFacingError extends Error {
 }
 const ErrorDisplay = ({ error }) => {
   console.error(error);
+  const containerRef = A(null);
   const ref = A(null);
-  return /* @__PURE__ */ u$1("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col", children: [
-    /* @__PURE__ */ u$1("div", { className: "text-red-700 font-bold", children: "Error" }),
-    /* @__PURE__ */ u$1("div", { children: [
-      "Oops! Something went wrong.",
-      error instanceof UserFacingError && /* @__PURE__ */ u$1(Fragment, { children: [
-        " ",
-        /* @__PURE__ */ u$1(
-          "button",
-          {
-            className: "text-sm text-gray-600 hover:text-gray-300",
-            onClick: () => {
+  y(() => {
+    var _a;
+    (_a = containerRef.current) == null ? void 0 : _a.dispatchEvent(new ErrorEvent(error));
+  });
+  const { headline, details } = getDisplayedErrorMessage(error);
+  return /* @__PURE__ */ u$1(
+    "div",
+    {
+      ref: containerRef,
+      className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col",
+      children: [
+        /* @__PURE__ */ u$1("div", { className: "text-red-700 font-bold", children: headline }),
+        /* @__PURE__ */ u$1("div", { children: [
+          "Oops! Something went wrong.",
+          details !== void 0 && /* @__PURE__ */ u$1(Fragment, { children: [
+            " ",
+            /* @__PURE__ */ u$1("button", { className: "underline hover:text-gray-400", onClick: () => {
               var _a;
               return (_a = ref.current) == null ? void 0 : _a.showModal();
-            },
-            children: "Show details."
-          }
-        ),
-        /* @__PURE__ */ u$1("dialog", { ref, class: "modal", children: [
-          /* @__PURE__ */ u$1("div", { class: "modal-box", children: [
-            /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
-            /* @__PURE__ */ u$1("h1", { class: "text-lg", children: error.headline }),
-            /* @__PURE__ */ u$1("p", { class: "py-4", children: error.message })
-          ] }),
-          /* @__PURE__ */ u$1("form", { method: "dialog", class: "modal-backdrop", children: /* @__PURE__ */ u$1("button", { children: "close" }) })
+            }, children: "Show details." }),
+            /* @__PURE__ */ u$1("dialog", { ref, class: "modal", children: [
+              /* @__PURE__ */ u$1("div", { class: "modal-box", children: [
+                /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
+                /* @__PURE__ */ u$1("h1", { class: "text-lg", children: details.headline }),
+                /* @__PURE__ */ u$1("p", { class: "py-4", children: details.message })
+              ] }),
+              /* @__PURE__ */ u$1("form", { method: "dialog", class: "modal-backdrop", children: /* @__PURE__ */ u$1("button", { children: "close" }) })
+            ] })
+          ] })
         ] })
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  );
 };
+function getDisplayedErrorMessage(error) {
+  if (error instanceof UserFacingError) {
+    return {
+      headline: `Error - ${error.headline}`,
+      details: {
+        headline: error.headline,
+        message: error.message
+      }
+    };
+  }
+  if (error instanceof LapisError) {
+    return {
+      headline: `Error - Failed fetching ${error.requestedData} from LAPIS`,
+      details: {
+        headline: `LAPIS request failed: ${error.requestedData} - ${error.problemDetail.status} ${error.problemDetail.title}`,
+        message: error.problemDetail.detail ?? error.message
+      }
+    };
+  }
+  if (error instanceof UnknownLapisError) {
+    return {
+      headline: `Error - Failed fetching ${error.requestedData} from LAPIS`,
+      details: {
+        headline: `LAPIS request failed: An unexpected error occurred while fetching ${error.requestedData}`,
+        message: error.message
+      }
+    };
+  }
+  return { headline: "Error", details: void 0 };
+}
 const ResizeContainer = ({ children, size }) => {
   return /* @__PURE__ */ u$1("div", { style: size, className: "bg-white", children });
 };
@@ -1748,10 +1802,12 @@ const ProportionSelector = ({
 const ProportionSelectorDropdown = ({
   proportionInterval,
   setMinProportion,
-  setMaxProportion
+  setMaxProportion,
+  labelPrefix = "Proportion"
 }) => {
-  const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
-  return /* @__PURE__ */ u$1("div", { className: "w-44", children: /* @__PURE__ */ u$1(Dropdown, { buttonTitle: `Proportion ${label}`, placement: "bottom-start", children: /* @__PURE__ */ u$1(
+  const percentLabel = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
+  const width = "w-[calc(1.5 * var(--tw-space-x-reverse) + 1.5 * var(--tw-space-x))]";
+  return /* @__PURE__ */ u$1("div", { className: width, children: /* @__PURE__ */ u$1(Dropdown, { buttonTitle: `${labelPrefix} ${percentLabel}`, placement: "bottom-start", children: /* @__PURE__ */ u$1(
     ProportionSelector,
     {
       proportionInterval,
@@ -4664,9 +4720,6 @@ input.tab:checked + .tab-content,
 .w-32 {
   width: 8rem;
 }
-.w-44 {
-  width: 11rem;
-}
 .w-64 {
   width: 16rem;
 }
@@ -5000,9 +5053,9 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
-.hover\\:text-gray-300:hover {
+.hover\\:text-gray-400:hover {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 .hover\\:text-gray-700:hover {
   --tw-text-opacity: 1;
@@ -7250,7 +7303,7 @@ const PrevalenceOverTimeInner = (componentProps) => {
       lapis,
       lapisDateField
     ),
-    [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow]
+    [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapisDateField]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7704,7 +7757,7 @@ const RelativeGrowthAdvantageInner = ({
   const [yAxisScaleType, setYAxisScaleType] = h("linear");
   const { data, error, isLoading } = useQuery(
     () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
-    [lapis, numeratorFilter, denominatorFilter, generationTime, views]
+    [lapis, numeratorFilter, denominatorFilter, generationTime, views, lapisDateField]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -8976,7 +9029,8 @@ const Toolbar = ({
       {
         proportionInterval,
         setMinProportion: (min) => setProportionInterval((prev) => ({ ...prev, min })),
-        setMaxProportion: (max) => setProportionInterval((prev) => ({ ...prev, max }))
+        setMaxProportion: (max) => setProportionInterval((prev) => ({ ...prev, max })),
+        labelPrefix: "Mean proportion"
       }
     ),
     /* @__PURE__ */ u$1(
@@ -9390,18 +9444,7 @@ DateRangeSelectorComponent = __decorateClass$4([
 async function fetchAutocompletionList(fields, lapis, signal) {
   const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
   const fetchAggregatedOperator = new FetchAggregatedOperator({}, fields);
-  let data;
-  try {
-    data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
-  } catch (error) {
-    if (error instanceof LapisError) {
-      throw new UserFacingError(
-        `Failed to fetch autocomplete list from LAPIS: ${error.problemDetail.status} ${error.problemDetail.title ?? ""}`,
-        error.problemDetail.detail ?? error.message
-      );
-    }
-    throw error;
-  }
+  const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
   const locationValues = data.map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {})).reduce((setOfAllHierarchies, entry) => {
     setOfAllHierarchies.add(JSON.stringify(entry));
     toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
@@ -10316,6 +10359,7 @@ export {
   NumberSequencesOverTimeComponent,
   PrevalenceOverTimeComponent,
   RelativeGrowthAdvantageComponent,
-  TextInputComponent
+  TextInputComponent,
+  UserFacingError
 };
 //# sourceMappingURL=dashboard-components.js.map