@datawheel/data-explorer 1.0.16 → 1.0.18

package/dist/main.d.mts

@@ -1187,8 +1187,7 @@ declare namespace ExplorerComponent {
     var displayName: string;
 }
 
-/** */
-declare function PivotView<TData extends Record<string, unknown>>(props: {} & ViewProps<TData> & MRT_TableOptions<TData>): React.JSX.Element | null;
+declare function PivotView<TData extends Record<string, unknown>>(props: {} & ViewProps<TData> & MRT_TableOptions<TData>): React.JSX.Element;
 
 type TData = Record<string, string | number> & Record<string, any>;
 type TableView = {

package/dist/main.mjs

@@ -1,6 +1,6 @@
-import { keyframes, createStyles, Select, rem, Input, Box, Text, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Alert, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, MantineProvider, Modal, Space, useComponentDefaultProps, Anchor, Paper, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, Drawer, Divider, Checkbox, packSx, Affix, Popover } from '@mantine/core';
+import { keyframes, createStyles, Select, rem, Input, Box, Text, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, Alert, MantineProvider, Modal, Space, useComponentDefaultProps, Paper, Anchor, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, Drawer, Divider, Checkbox, packSx, Affix, Popover } from '@mantine/core';
 import { useClipboard, useFullscreen, useDebouncedState, useMediaQuery, useDisclosure } from '@mantine/hooks';
-import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconWorldWww, IconClipboardCheck, IconCopy, IconDownload, IconDotsVertical, IconBox, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconLanguage, IconTrash, IconInfoCircleFilled, IconChevronLeft, IconChevronRight, IconSearch, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
+import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconWorldWww, IconClipboardCheck, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconBox, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconLanguage, IconTrash, IconInfoCircleFilled, IconChevronLeft, IconChevronRight, IconSearch, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
 import * as React13 from 'react';
 import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, Component, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
@@ -1397,11 +1397,14 @@ function httpFetch(url, params) {
   return fetch(url, params).then((response) => {
     if (!response.ok) {
       return response.json().then((content) => {
+        var _a;
         console.debug("CONTENT", content);
         if (response.status === 500) {
           throw new Error("");
         }
-        throw new Error(`Request failed with error code ${response.status}`);
+        throw new Error(
+          `${(_a = content.detail) != null ? _a : `Request failed with error code ${response.status}`} `
+        );
       });
     }
     return response;
@@ -2317,8 +2320,9 @@ function useDownloadQuery() {
         throw new Error("The current query is not valid.");
       }
       const queryParams = { ...params, pagiLimit: 0, pagiOffset: 0 };
+      const request = queryParamsToRequest(queryParams);
       const response = await tesseract.fetchData({
-        request: queryParamsToRequest(queryParams),
+        request,
         format: format2
       });
       const blob = await response.blob();
@@ -2579,13 +2583,49 @@ var DownloadQuery = ({ data }) => {
   const { translate: t } = useTranslation();
   const formats = Object.values(Format);
   const components = [];
-  const { mutateAsync: downloadQuery } = useDownloadQuery();
+  const { mutateAsync: downloadQuery, isError, error } = useDownloadQuery();
+  const [showError, setShowError] = useState(false);
+  useEffect(() => {
+    if (isError && error) {
+      setShowError(true);
+      const timer = setTimeout(() => {
+        setShowError(false);
+      }, 7e3);
+      return () => clearTimeout(timer);
+    }
+  }, [isError, error]);
+  const errorAlert = isError && error && showError ? /* @__PURE__ */ React13__default.createElement(
+    Paper,
+    {
+      sx: {
+        position: "absolute",
+        bottom: "calc(100% + 15px)",
+        right: 0,
+        minWidth: "400px",
+        maxWidth: "700px",
+        width: "fit-content",
+        zIndex: 1e3
+      },
+      shadow: "md"
+    },
+    /* @__PURE__ */ React13__default.createElement(
+      Alert,
+      {
+        icon: /* @__PURE__ */ React13__default.createElement(IconAlertCircle, { size: "1rem" }),
+        color: "red",
+        p: "xs",
+        withCloseButton: true,
+        onClose: () => setShowError(false)
+      },
+      error.message
+    )
+  ) : null;
   components.push(
     /* @__PURE__ */ React13__default.createElement(
       ButtonDownload,
       {
         leftIcon: /* @__PURE__ */ React13__default.createElement(IconDownload, { size: 20 }),
-        sx: { height: 30 },
+        sx: { height: 30, position: "relative" },
         key: "download_csv",
         provider: () => downloadQuery({ format: "csv" })
       },
@@ -2595,7 +2635,7 @@ var DownloadQuery = ({ data }) => {
   if (components.length === 0 || data.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React13__default.createElement(Box, { id: "dex-btn-group-download" }, /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs" }, components, /* @__PURE__ */ React13__default.createElement(MenuOpts, { formats: formats.filter((f) => f !== "csv") })));
+  return /* @__PURE__ */ React13__default.createElement(Box, { id: "dex-btn-group-download", sx: { position: "relative" } }, errorAlert, /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs" }, components, /* @__PURE__ */ React13__default.createElement(MenuOpts, { formats: formats.filter((f) => f !== "csv") })));
 };
 var mimeTypes = {
   csv: "text/csv",
@@ -2688,19 +2728,30 @@ function MenuOpts({ formats }) {
     },
     /* @__PURE__ */ React13__default.createElement(Text, { size: "xs" }, t(`formats.${format2}`))
   ));
-  return /* @__PURE__ */ React13__default.createElement(Menu, { shadow: "md", width: 200, opened }, /* @__PURE__ */ React13__default.createElement(Menu.Target, null, /* @__PURE__ */ React13__default.createElement(
-    ActionIcon,
+  return /* @__PURE__ */ React13__default.createElement(
+    Menu,
     {
-      onClick: () => setOpened((o) => !o),
-      variant: "filled",
-      color: "primary",
-      sx: {
-        width: 20,
-        minWidth: 0
-      }
+      shadow: "md",
+      width: 200,
+      opened,
+      onClose: () => setOpened(false),
+      closeOnItemClick: false
     },
-    /* @__PURE__ */ React13__default.createElement(IconDotsVertical, { size: "0.8rem" })
-  )), /* @__PURE__ */ React13__default.createElement(Menu.Dropdown, null, /* @__PURE__ */ React13__default.createElement(Menu.Label, null, t("params.title_downloaddata")), buttons));
+    /* @__PURE__ */ React13__default.createElement(Menu.Target, null, /* @__PURE__ */ React13__default.createElement(
+      ActionIcon,
+      {
+        onClick: () => setOpened((o) => !o),
+        variant: "filled",
+        color: "primary",
+        sx: {
+          width: 20,
+          minWidth: 0
+        }
+      },
+      /* @__PURE__ */ React13__default.createElement(IconDotsVertical, { size: "0.8rem" })
+    )),
+    /* @__PURE__ */ React13__default.createElement(Menu.Dropdown, null, /* @__PURE__ */ React13__default.createElement(Menu.Label, null, t("params.title_downloaddata")), buttons)
+  );
 }
 var TableFooter_default = TableFooter;
 
@@ -4247,28 +4298,56 @@ function QueryProvider({ children, defaultCube }) {
       let newQuery = parsePermalink(cubeMap[cube], searchParams);
       newQuery = isValidQuery(newQuery == null ? void 0 : newQuery.params) ? newQuery : buildQuery({ params: { cube } });
       newQuery.params.locale = defaultLocale || newQuery.params.locale;
+      const dimensions = {};
+      const hierarchies = {};
+      const levels = Object.fromEntries(
+        cubeMap[cube].dimensions.flatMap(
+          (dim) => dim.hierarchies.flatMap(
+            (hie) => hie.levels.map((lvl) => {
+              dimensions[lvl.name] = dim.name;
+              hierarchies[lvl.name] = hie.name;
+              return [lvl.name, lvl];
+            })
+          )
+        )
+      );
+      const restDrilldownsKeys = Object.keys(levels).filter(
+        (key) => !newQuery.params.drilldowns[key]
+      );
+      const restDrilldowns = restDrilldownsKeys.map((name4) => {
+        const lvl = levels[name4];
+        return buildDrilldown({
+          active: false,
+          key: lvl.name,
+          dimension: dimensions[name4],
+          hierarchy: hierarchies[name4],
+          level: name4
+        });
+      });
       if (newQuery) {
-        const promises = Object.values(newQuery.params.drilldowns).map((dd) => {
-          const currentDrilldown = queryItem.params.drilldowns[dd.key];
-          const localeChanged = prevLocaleRef.current !== (newQuery == null ? void 0 : newQuery.params.locale);
-          if (currentDrilldown && currentDrilldown.members && currentDrilldown.members.length > 0 && !localeChanged) {
-            return Promise.resolve({
-              drilldown: currentDrilldown,
-              cut: buildCut({ ...currentDrilldown, active: false })
-            });
-          } else {
-            return fetchMembers(dd.level, newQuery == null ? void 0 : newQuery.params.locale, cube).then((levelMeta) => {
-              const cut = buildCut({ ...dd, active: false });
-              return {
-                drilldown: {
-                  ...dd,
-                  members: levelMeta.members
-                },
-                cut
-              };
-            });
+        const promises = [...restDrilldowns, ...Object.values(newQuery.params.drilldowns)].map(
+          (dd) => {
+            const currentDrilldown = queryItem.params.drilldowns[dd.key];
+            const localeChanged = prevLocaleRef.current !== (newQuery == null ? void 0 : newQuery.params.locale);
+            if (currentDrilldown && currentDrilldown.members && currentDrilldown.members.length > 0 && !localeChanged) {
+              return Promise.resolve({
+                drilldown: currentDrilldown,
+                cut: buildCut({ ...currentDrilldown, active: false })
+              });
+            } else {
+              return fetchMembers(dd.level, newQuery == null ? void 0 : newQuery.params.locale, cube).then((levelMeta) => {
+                const cut = buildCut({ ...dd, active: false });
+                return {
+                  drilldown: {
+                    ...dd,
+                    members: levelMeta.members
+                  },
+                  cut
+                };
+              });
+            }
           }
-        });
+        );
         runFetchMembers(Promise.all(promises)).then((data) => {
           setTransintionLocaleLoading(false);
           prevLocaleRef.current = newQuery == null ? void 0 : newQuery.params.locale;
@@ -5310,6 +5389,20 @@ function ExplorerContent(props) {
 // src/components/PivotView.tsx
 init_esm_shims();
 
+// src/vizbuilder/hooks/usePivotTableData.ts
+init_esm_shims();
+function usePivotTableData() {
+  const queryItem = useSelector$1(selectCurrentQueryItem);
+  const queryLink = queryItem.link;
+  const query = useFetchQuery(queryItem.params, queryLink, {
+    withoutPagination: true
+  });
+  return query;
+}
+
+// src/components/PivotViewTable.tsx
+init_esm_shims();
+
 // src/hooks/pivot.ts
 init_esm_shims();
 
@@ -5528,16 +5621,27 @@ function useFormatParams(measures, valueProperty) {
 function usePivottedData(data, colProp, rowProp, valProp, initialState4 = null) {
   const [pivottedData, setPivottedData] = useState(initialState4);
   const [error, setError] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   useEffect(() => {
     setPivottedData(initialState4);
     setError(null);
-    serializeToArray(data, { colProp, rowProp, valProp }).then(setPivottedData, setError);
+    if (data.length !== 0) {
+      setIsProcessing(true);
+      serializeToArray(data, { colProp, rowProp, valProp }).then((result) => {
+        setPivottedData(result);
+        setIsProcessing(false);
+      }).catch((err) => {
+        setError(err);
+        setIsProcessing(false);
+      });
+    }
     return () => {
       setPivottedData(null);
       setError(null);
+      setIsProcessing(false);
     };
-  }, [data, colProp, rowProp, valProp]);
-  return [pivottedData, error];
+  }, [data, colProp, rowProp, valProp, initialState4]);
+  return [pivottedData, error, isProcessing];
 }
 function serializeToArray(data, sides) {
   return new Promise((resolve, reject) => {
@@ -5619,7 +5723,7 @@ var NonIdealState = (props) => /* @__PURE__ */ React13__default.createElement(
   /* @__PURE__ */ React13__default.createElement(Stack, { align: "center", spacing: "xs" }, props.icon && props.icon, props.title && /* @__PURE__ */ React13__default.createElement(Title, { order: 5 }, props.title), props.description && /* @__PURE__ */ React13__default.createElement(Text, null, props.description), props.children && props.children, props.action && props.action)
 );
 
-// src/components/PivotView.tsx
+// src/components/PivotViewTable.tsx
 var SelectOption = forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ React13__default.createElement(SelectObject, { ref, ...props });
@@ -5645,50 +5749,44 @@ var useStyles5 = createStyles((theme) => ({
     }
   }
 }));
-function PivotView(props) {
+function PivotViewTable(props) {
   var _a;
-  const { cube, params, result, isLoading, ...mantineReactTableProps } = props;
-  const locale = params.locale;
+  const { cube, params, className, panelKey, data: result, ...mantineReactTableProps } = props;
   const { translate: t } = useTranslation();
   const { data: schema } = useServerSchema();
-  const measures = (_a = schema == null ? void 0 : schema.cubeMap[cube.name]) == null ? void 0 : _a.measures;
-  if (!result || !measures) return null;
-  const measureMap = Object.fromEntries(measures.map((item) => [item.name, item]));
   const { classes, cx } = useStyles5();
-  const measureOptions = useMemo(
-    () => filterMap(Object.values(params.measures), (item) => {
-      const entity = measureMap[item.name];
-      return !isActiveItem(item) ? null : {
-        value: item.name,
-        label: getCaption(entity, locale),
-        type: entity.aggregator
-      };
-    }),
-    [measureMap, params.measures, locale]
-  );
-  const drilldownOptions = useMemo(() => {
-    const levelMap = mapDimensionHierarchyLevels(cube);
-    return Object.values(params.drilldowns).filter(isActiveItem).flatMap((item) => {
-      const [level, hierarchy, dimension] = levelMap[item.level];
-      const caption = getCaption(level, locale);
-      const type = dimension.type;
-      const propertyMap = keyBy(level.properties, "name");
-      const levelOptions = [{ value: item.level, label: caption, type }];
-      if (result.data.length && `${item.level} ID` in result.data[0]) {
-        levelOptions.push({ value: `${item.level} ID`, label: `${caption} ID`, type });
-      }
-      return levelOptions.concat(
-        filterMap(item.properties, (item2) => {
-          const entity = propertyMap[item2.name];
-          return !isActiveItem(item2) ? null : {
-            value: item2.name,
-            label: `${caption} \u203A ${getCaption(entity, locale)}`,
-            type: "prop"
-          };
-        })
-      );
-    });
-  }, [cube, params.drilldowns, locale]);
+  const locale = params.locale;
+  const measures = ((_a = schema == null ? void 0 : schema.cubeMap[cube.name]) == null ? void 0 : _a.measures) || [];
+  const measureMap = Object.fromEntries(measures.map((item) => [item.name, item]));
+  const measureOptions = filterMap(Object.values(params.measures), (item) => {
+    const entity = measureMap[item.name];
+    return !isActiveItem(item) ? null : {
+      value: item.name,
+      label: getCaption(entity, locale),
+      type: entity.aggregator
+    };
+  });
+  const levelMap = mapDimensionHierarchyLevels(cube);
+  const drilldownOptions = Object.values(params.drilldowns).filter(isActiveItem).flatMap((item) => {
+    const [level, hierarchy, dimension] = levelMap[item.level];
+    const caption = getCaption(level, locale);
+    const type = dimension.type;
+    const propertyMap = keyBy(level.properties, "name");
+    const levelOptions = [{ value: item.level, label: caption, type }];
+    if (result.length && `${item.level} ID` in result[0]) {
+      levelOptions.push({ value: `${item.level} ID`, label: `${caption} ID`, type });
+    }
+    return levelOptions.concat(
+      filterMap(item.properties, (item2) => {
+        const entity = propertyMap[item2.name];
+        return !isActiveItem(item2) ? null : {
+          value: item2.name,
+          label: `${caption} \u203A ${getCaption(entity, locale)}`,
+          type: "prop"
+        };
+      })
+    );
+  });
   const [colProp, setColumnProp] = useState(
     () => drilldownOptions.find((item) => item.type === "time") || drilldownOptions[0]
   );
@@ -5697,8 +5795,8 @@ function PivotView(props) {
   );
   const [valProp, setValueProp] = useState(() => measureOptions[0]);
   const fileName = [params.cube, colProp.label, rowProp.label, valProp.value].join("_");
-  const [pivottedData, pivottingError] = usePivottedData(
-    result.data,
+  const [pivottedData, pivottingError, isProcessing] = usePivottedData(
+    result,
     colProp.value,
     rowProp.value,
     valProp.value
@@ -5798,7 +5896,7 @@ function PivotView(props) {
         data: pivottedData.data,
         headers: pivottedData.headers,
         formatter: formatter2,
-        tableProps: mantineReactTableProps
+        tableProps: { ...mantineReactTableProps, data: result }
       }
     );
   }
@@ -5875,7 +5973,7 @@ function MatrixTable(props) {
         }
       })
     ),
-    [headers]
+    [headers, formatter2]
   );
   const tableProps = useMemo(
     () => ({
@@ -5944,6 +6042,30 @@ function stringifyMatrix(matrix, formatter2, format2) {
   ].join("\n");
 }
 
+// src/components/PivotView.tsx
+function PivotView(props) {
+  const { translate: t } = useTranslation();
+  const { isLoading, data: result } = usePivotTableData();
+  const { isLoading: schemaLoading } = useServerSchema();
+  if (isLoading || schemaLoading) {
+    return /* @__PURE__ */ React13__default.createElement(
+      NonIdealState,
+      {
+        icon: /* @__PURE__ */ React13__default.createElement(Loader, { size: "xl" }),
+        title: t("pivot_view.loading_title"),
+        description: t("pivot_view.loading_details")
+      }
+    );
+  }
+  return /* @__PURE__ */ React13__default.createElement(
+    PivotViewTable,
+    {
+      ...props,
+      data: (result == null ? void 0 : result.data) || []
+    }
+  );
+}
+
 // src/components/tour/ExplorerTour.tsx
 init_esm_shims();
 
@@ -7701,7 +7823,7 @@ function useVizbuilderData() {
 
 // src/components/LoadingOverlay.jsx
 init_esm_shims();
-var LoadingOverlay2 = () => {
+var LoadingOverlay3 = () => {
   const { translate: t } = useTranslation();
   const { loading: isLoading, message } = useSelector$1(selectLoadingState);
   const description = !message ? void 0 : message.type === "HEAVY_QUERY" ? t("loading.message_heavyquery", message) : (
@@ -7740,7 +7862,7 @@ function VizbuilderView(props) {
   const { cube, params } = props;
   const query = useVizbuilderData();
   if (query.isLoading) {
-    return /* @__PURE__ */ React13__default.createElement(LoadingOverlay2, { visible: true });
+    return /* @__PURE__ */ React13__default.createElement(LoadingOverlay3, { visible: true });
   }
   const data = query.data;
   const types = (_a = query.data) == null ? void 0 : _a.types;
@@ -7752,7 +7874,7 @@ function VizbuilderView(props) {
     data: (data == null ? void 0 : data.data) || [],
     locale: params.locale || "en"
   };
-  return !query.isLoading && /* @__PURE__ */ React13__default.createElement(React13__default.Fragment, null, /* @__PURE__ */ React13__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(React13__default.Fragment, null, /* @__PURE__ */ React13__default.createElement(
     Vizbuilder,
     {
       datasets: dataset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [