@genspectrum/dashboard-components 0.11.3 → 0.11.4

package/dist/components.js

@@ -582,11 +582,11 @@ function GsAppError(error) {
 var f$1 = 0;
 function u$1(e2, t2, n3, o2, i2, u2) {
   t2 || (t2 = {});
-  var a2, c2, l2 = t2;
-  "ref" in t2 && (a2 = t2.ref, delete t2.ref);
-  var p2 = { type: e2, props: l2, key: n3, ref: a2, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --f$1, __i: -1, __u: 0, __source: i2, __self: u2 };
-  if ("function" == typeof e2 && (a2 = e2.defaultProps)) for (c2 in a2) void 0 === l2[c2] && (l2[c2] = a2[c2]);
-  return options.vnode && options.vnode(p2), p2;
+  var a2, c2, p2 = t2;
+  if ("ref" in p2) for (c2 in p2 = {}, t2) "ref" == c2 ? a2 = t2[c2] : p2[c2] = t2[c2];
+  var l2 = { type: e2, props: p2, key: n3, ref: a2, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --f$1, __i: -1, __u: 0, __source: i2, __self: u2 };
+  if ("function" == typeof e2 && (a2 = e2.defaultProps)) for (c2 in a2) void 0 === p2[c2] && (p2[c2] = a2[c2]);
+  return options.vnode && options.vnode(l2), l2;
 }
 var t, r, u, i, o = 0, f = [], c = options, e = c.__b, a = c.__r, v = c.diffed, l = c.__c, m = c.unmount, s = c.__;
 function d(n3, t2) {
@@ -2037,7 +2037,7 @@ function useQuery(fetchDataCallback, dependencies) {
         setIsLoading(false);
       }
     };
-    fetchData();
+    void fetchData();
   }, [JSON.stringify(dependencies)]);
   if (isLoading) {
     return { isLoading: true };
@@ -2293,7 +2293,7 @@ const tailwindStyle = `*, ::before, ::after {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -2965,6 +2965,7 @@ html {
   display: grid;
   width: 100%;
   overflow: hidden;
+  direction: ltr;
   container-type: inline-size;
   grid-template-columns: auto 1fr;
 }
@@ -8326,7 +8327,7 @@ const AggregateInner = (componentProps) => {
       field: initialSortField,
       direction: initialSortDirection
     });
-  }, [lapisFilter, fields, lapis]);
+  }, [lapisFilter, fields, lapis, initialSortField, initialSortDirection]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
@@ -10100,62 +10101,12 @@ svg.leaflet-image-layer.leaflet-interactive path {\r
 	}\r
 `;
 const leafletStyleModifications = ".leaflet-container {\n    background: transparent;\n}\n";
-const mapSourceSchema = z$1.object({
-  type: z$1.literal("topojson"),
-  url: z$1.string().min(1),
-  topologyObjectsKey: z$1.string().min(1)
-});
-function useGeoJsonMap(mapSource) {
-  const {
-    data: geojsonData,
-    error,
-    isLoading
-  } = useQuery(async () => {
-    switch (mapSource.type) {
-      case "topojson":
-        return await loadTopojsonMap(mapSource);
-    }
-  }, [mapSource]);
-  if (isLoading) {
-    return { isLoading };
-  }
-  if (error) {
-    throw error;
-  }
-  return { geojsonData, isLoading: false };
-}
-async function loadTopojsonMap(mapSource) {
-  var _a;
-  const response = await fetch(mapSource.url);
-  const topology = await response.json();
-  if ((topology == null ? void 0 : topology.type) !== "Topology") {
-    throw new UserFacingError(
-      "Invalid map source",
-      `JSON downloaded from ${mapSource.url} does not look like a topojson Topology definition: missing 'type: "Topology"', got '${JSON.stringify(topology).substring(0, 100)}'`
-    );
-  }
-  const object = topology == null ? void 0 : topology.objects[mapSource.topologyObjectsKey];
-  if ((object == null ? void 0 : object.type) !== "GeometryCollection") {
-    throw new UserFacingError(
-      "Invalid map source",
-      `JSON downloaded from ${mapSource.url} does not have a GeometryCollection at key objects.${mapSource.topologyObjectsKey}, got '${(_a = JSON.stringify(topology)) == null ? void 0 : _a.substring(0, 100)}'`
-    );
-  }
-  return topojson.feature(topology, object);
-}
 const SequencesByLocationMap = ({
-  mapSource,
-  ...otherProps
-}) => {
-  const { isLoading: isLoadingMap, geojsonData } = useGeoJsonMap(mapSource);
-  if (isLoadingMap) {
-    return /* @__PURE__ */ u$1(LoadingDisplay, {});
-  }
-  return /* @__PURE__ */ u$1(SequencesByLocationMapInner$1, { geojsonData, ...otherProps });
-};
-const SequencesByLocationMapInner$1 = ({
-  geojsonData,
-  locationData,
+  locations,
+  totalCount,
+  countOfMatchedLocationData,
+  nullCount,
+  unmatchedLocations,
   enableMapNavigation,
   lapisLocationField,
   zoom,
@@ -10163,22 +10114,7 @@ const SequencesByLocationMapInner$1 = ({
   offsetY,
   hasTableView
 }) => {
-  var _a;
   const ref = A(null);
-  const { locations, totalCount, countOfMatchedLocationData, unmatchedLocations } = T(() => {
-    const countAndProportionByCountry = buildLookupByLocationField(locationData, lapisLocationField);
-    const { locations: locations2, unmatchedLocations: unmatchedLocations2 } = matchLocationDataAndGeoJsonFeatures(
-      geojsonData,
-      countAndProportionByCountry,
-      lapisLocationField
-    );
-    const totalCount2 = locationData.map((value) => value.count).reduce((sum, b3) => sum + b3, 0);
-    const countOfMatchedLocationData2 = locations2.map((location) => {
-      var _a2;
-      return ((_a2 = location.properties.data) == null ? void 0 : _a2.count) ?? 0;
-    }).reduce((sum, b3) => sum + b3, 0);
-    return { locations: locations2, totalCount: totalCount2, countOfMatchedLocationData: countOfMatchedLocationData2, unmatchedLocations: unmatchedLocations2 };
-  }, [geojsonData, locationData, lapisLocationField]);
   y(() => {
     if (!ref.current) {
       return;
@@ -10194,9 +10130,9 @@ const SequencesByLocationMapInner$1 = ({
     });
     Leaflet.geoJson(locations, {
       style: (feature) => {
-        var _a2;
+        var _a;
         return {
-          fillColor: getColor((_a2 = feature == null ? void 0 : feature.properties.data) == null ? void 0 : _a2.proportion),
+          fillColor: getColor((_a = feature == null ? void 0 : feature.properties.data) == null ? void 0 : _a.proportion),
           fillOpacity: 1,
           color: "#666666",
           weight: 1
@@ -10207,7 +10143,6 @@ const SequencesByLocationMapInner$1 = ({
       leafletMap.remove();
     };
   }, [ref, locations, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
-  const nullCount = ((_a = locationData.find((row) => row[lapisLocationField] === null)) == null ? void 0 : _a.count) ?? 0;
   return /* @__PURE__ */ u$1("div", { className: "h-full", children: [
     /* @__PURE__ */ u$1("div", { ref, className: "h-full" }),
     /* @__PURE__ */ u$1("div", { className: "relative", children: /* @__PURE__ */ u$1(
@@ -10273,44 +10208,6 @@ const DataMatchInformation = ({
     ] })
   ] });
 };
-function buildLookupByLocationField(locationData, lapisLocationField) {
-  return new Map(
-    locationData.filter((row) => typeof row[lapisLocationField] === "string").map((row) => [row[lapisLocationField], row])
-  );
-}
-function matchLocationDataAndGeoJsonFeatures(geojsonData, countAndProportionByCountry, lapisLocationField) {
-  const matchedLocations = [];
-  const locations = geojsonData.features.map(
-    (feature) => {
-      var _a;
-      const name = (_a = feature == null ? void 0 : feature.properties) == null ? void 0 : _a.name;
-      if (typeof name !== "string") {
-        throw new Error(
-          `GeoJSON feature with id '${feature.id}' does not have 'properties.name' of type string, was: '${name}'`
-        );
-      }
-      const data = countAndProportionByCountry.get(name) ?? null;
-      if (data !== null) {
-        matchedLocations.push(name);
-      }
-      return {
-        ...feature,
-        properties: {
-          ...feature.properties,
-          data
-        }
-      };
-    }
-  );
-  const unmatchedLocations = [...countAndProportionByCountry.keys()].filter(
-    (name) => !matchedLocations.includes(name)
-  );
-  if (unmatchedLocations.length > 0) {
-    const unmatchedLocationsWarning = `gs-map: Found location data from LAPIS (aggregated by "${lapisLocationField}") that could not be matched on locations on the given map. Unmatched location names are: ${unmatchedLocations.map((it) => `"${it}"`).join(", ")}`;
-    console.warn(unmatchedLocationsWarning);
-  }
-  return { locations, unmatchedLocations };
-}
 function getColor(value) {
   if (value === void 0) {
     return "#DDDDDD";
@@ -10364,12 +10261,150 @@ function p({ innerText, className = "" }) {
   return headline;
 }
 const SequencesByLocationTable = ({
-  locationData,
+  tableData,
   lapisLocationField,
   pageSize
 }) => {
-  return /* @__PURE__ */ u$1(AggregateTable, { data: locationData, fields: [lapisLocationField], pageSize });
+  const headers = [
+    {
+      name: lapisLocationField,
+      sort: {
+        compare: compareAscending
+      }
+    },
+    {
+      name: "count",
+      sort: true
+    },
+    {
+      name: "proportion",
+      sort: true,
+      formatter: (cell) => formatProportion(cell)
+    },
+    ..."isShownOnMap" in tableData[0] ? [{ id: "isShownOnMap", name: "shown on map", sort: true, width: "20%" }] : []
+  ];
+  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: headers, pageSize });
+};
+const MapLocationDataType = {
+  tableDataOnly: "tableDataOnly",
+  tableAndMapData: "tableAndMapData"
 };
+function computeMapLocationData(locationData, geojsonData, lapisLocationField) {
+  var _a;
+  if (geojsonData === void 0) {
+    return { type: MapLocationDataType.tableDataOnly, tableData: locationData };
+  }
+  const countAndProportionByCountry = buildLookupByLocationField(locationData, lapisLocationField);
+  const { locations, unmatchedLocations } = matchLocationDataAndGeoJsonFeatures(
+    geojsonData,
+    countAndProportionByCountry,
+    lapisLocationField
+  );
+  const totalCount = locationData.map((value) => value.count).reduce((sum, b3) => sum + b3, 0);
+  const countOfMatchedLocationData = locations.map((location) => {
+    var _a2;
+    return ((_a2 = location.properties.data) == null ? void 0 : _a2.count) ?? 0;
+  }).reduce((sum, b3) => sum + b3, 0);
+  const nullCount = ((_a = locationData.find((row) => row[lapisLocationField] === null)) == null ? void 0 : _a.count) ?? 0;
+  const tableData = getSequencesByLocationTableData(locationData, unmatchedLocations, lapisLocationField);
+  return {
+    type: MapLocationDataType.tableAndMapData,
+    locations,
+    tableData,
+    totalCount,
+    countOfMatchedLocationData,
+    unmatchedLocations,
+    nullCount
+  };
+}
+function buildLookupByLocationField(locationData, lapisLocationField) {
+  return new Map(
+    locationData.filter((row) => typeof row[lapisLocationField] === "string").map((row) => [row[lapisLocationField], row])
+  );
+}
+function matchLocationDataAndGeoJsonFeatures(geojsonData, countAndProportionByCountry, lapisLocationField) {
+  const matchedLocations = [];
+  const locations = geojsonData.features.map(
+    (feature) => {
+      var _a;
+      const name = (_a = feature == null ? void 0 : feature.properties) == null ? void 0 : _a.name;
+      if (typeof name !== "string") {
+        throw new Error(
+          `GeoJSON feature with id '${feature.id}' does not have 'properties.name' of type string, was: '${name}'`
+        );
+      }
+      const data = countAndProportionByCountry.get(name) ?? null;
+      if (data !== null) {
+        matchedLocations.push(name);
+      }
+      return {
+        ...feature,
+        properties: {
+          ...feature.properties,
+          data
+        }
+      };
+    }
+  );
+  const unmatchedLocations = [...countAndProportionByCountry.keys()].filter(
+    (name) => !matchedLocations.includes(name)
+  );
+  if (unmatchedLocations.length > 0) {
+    const unmatchedLocationsWarning = `gs-map: Found location data from LAPIS (aggregated by "${lapisLocationField}") that could not be matched on locations on the given map. Unmatched location names are: ${unmatchedLocations.map((it) => `"${it}"`).join(", ")}`;
+    console.warn(unmatchedLocationsWarning);
+  }
+  return { locations, unmatchedLocations };
+}
+function getSequencesByLocationTableData(locationData, unmatchedLocations, lapisLocationField) {
+  return locationData.map((row) => ({
+    ...row,
+    isShownOnMap: `${isShownOnMap(row, unmatchedLocations, lapisLocationField)}`
+  }));
+}
+function isShownOnMap(row, unmatchedLocations, lapisLocationField) {
+  const locationValue = row[lapisLocationField];
+  if (locationValue === null) {
+    return false;
+  }
+  return !unmatchedLocations.includes(locationValue);
+}
+const mapSourceSchema = z$1.object({
+  type: z$1.literal("topojson"),
+  url: z$1.string().min(1),
+  topologyObjectsKey: z$1.string().min(1)
+});
+async function loadMapSource(mapSource) {
+  switch (mapSource.type) {
+    case "topojson":
+      return await loadTopojsonMap(mapSource);
+  }
+}
+async function loadTopojsonMap(mapSource) {
+  var _a;
+  const response = await fetch(mapSource.url);
+  const topology = await response.json();
+  if ((topology == null ? void 0 : topology.type) !== "Topology") {
+    throw new UserFacingError(
+      "Invalid map source",
+      `JSON downloaded from ${mapSource.url} does not look like a topojson Topology definition: missing 'type: "Topology"', got '${JSON.stringify(topology).substring(0, 100)}'`
+    );
+  }
+  const object = topology == null ? void 0 : topology.objects[mapSource.topologyObjectsKey];
+  if ((object == null ? void 0 : object.type) !== "GeometryCollection") {
+    throw new UserFacingError(
+      "Invalid map source",
+      `JSON downloaded from ${mapSource.url} does not have a GeometryCollection at key objects.${mapSource.topologyObjectsKey}, got '${(_a = JSON.stringify(topology)) == null ? void 0 : _a.substring(0, 100)}'`
+    );
+  }
+  return topojson.feature(topology, object);
+}
+async function querySequencesByLocationData(lapisFilter, lapisLocationField, lapis, mapSource) {
+  const [locationData, geojsonData] = await Promise.all([
+    queryAggregateData(lapisFilter, [lapisLocationField], lapis),
+    mapSource !== void 0 ? loadMapSource(mapSource) : void 0
+  ]);
+  return computeMapLocationData(locationData, geojsonData, lapisLocationField);
+}
 const sequencesByLocationViewSchema = z$1.union([z$1.literal(views.map), z$1.literal(views.table)]);
 const sequencesByLocationPropsSchema = z$1.object({
   lapisFilter: lapisFilterSchema,
@@ -10390,15 +10425,15 @@ const SequencesByLocation = (componentProps) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, componentProps, schema: sequencesByLocationPropsSchema, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(SequencesByLocationMapInner, { ...componentProps }) }) });
 };
 const SequencesByLocationMapInner = (props) => {
-  const { lapisFilter, lapisLocationField } = props;
+  const { lapisFilter, lapisLocationField, mapSource } = props;
   const lapis = x(LapisUrlContext);
   const {
     data,
     error,
     isLoading: isLoadingLapisData
   } = useQuery(
-    async () => queryAggregateData(lapisFilter, [lapisLocationField], lapis),
-    [lapisFilter, lapisLocationField, lapis]
+    async () => querySequencesByLocationData(lapisFilter, lapisLocationField, lapis, mapSource),
+    [lapisFilter, lapisLocationField, lapis, mapSource]
   );
   if (isLoadingLapisData) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -10414,17 +10449,17 @@ const SequencesByLocationMapTabs = ({
 }) => {
   const getTab = (view) => {
     switch (view) {
-      case views.map:
-        if (originalComponentProps.mapSource === void 0) {
+      case views.map: {
+        if (data.type !== MapLocationDataType.tableAndMapData) {
           throw new Error("mapSource is required when using the map view");
         }
+        const { type: _type, tableData: _tableData, ...dataForMap } = data;
         return {
           title: "Map",
           content: /* @__PURE__ */ u$1(
             SequencesByLocationMap,
             {
-              locationData: data,
-              mapSource: originalComponentProps.mapSource,
+              ...dataForMap,
               enableMapNavigation: originalComponentProps.enableMapNavigation,
               lapisLocationField: originalComponentProps.lapisLocationField,
               zoom: originalComponentProps.zoom,
@@ -10434,13 +10469,14 @@ const SequencesByLocationMapTabs = ({
             }
           )
         };
+      }
       case views.table:
         return {
           title: "Table",
           content: /* @__PURE__ */ u$1(
             SequencesByLocationTable,
             {
-              locationData: data,
+              tableData: data.tableData,
               lapisLocationField: originalComponentProps.lapisLocationField,
               pageSize: originalComponentProps.pageSize
             }
@@ -10449,10 +10485,24 @@ const SequencesByLocationMapTabs = ({
     }
   };
   const tabs = originalComponentProps.views.map((view) => getTab(view));
-  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar, { originalComponentProps }) });
+  return /* @__PURE__ */ u$1(
+    Tabs,
+    {
+      tabs,
+      toolbar: /* @__PURE__ */ u$1(Toolbar, { originalComponentProps, tableData: data.tableData })
+    }
+  );
 };
-const Toolbar = ({ originalComponentProps }) => {
+const Toolbar = ({ originalComponentProps, tableData }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
+    /* @__PURE__ */ u$1(
+      CsvDownloadButton,
+      {
+        className: "mx-1 btn btn-xs",
+        getData: () => tableData,
+        filename: "sequences_by_location.csv"
+      }
+    ),
     /* @__PURE__ */ u$1(SequencesByLocationMapInfo, { originalComponentProps }),
     /* @__PURE__ */ u$1(Fullscreen, {})
   ] });