@datawheel/data-explorer 0.2.4 → 0.2.5

package/dist/main.js

@@ -1,7 +1,7 @@
-import { keyframes, createStyles, Select, rem, Flex, Title, Text, Group, Button, Box, Anchor, Input, Stack, SimpleGrid, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, Alert, Loader, Modal, NumberInput, Menu, ActionIcon, useMantineTheme, MantineProvider, Paper, useComponentDefaultProps, Switch, ThemeIcon, Tooltip, Tabs, CloseButton, Drawer, Checkbox, UnstyledButton, TextInput, Accordion, Popover, Divider } from '@mantine/core';
+import { keyframes, createStyles, Select, rem, Flex, Title, Text, Group, Button, Box, Anchor, Input, Stack, SimpleGrid, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, Alert, Loader, Modal, NumberInput, Menu, ActionIcon, MantineProvider, Paper, useComponentDefaultProps, Switch, ThemeIcon, Tooltip, useMantineTheme, Tabs, CloseButton, Drawer, Checkbox, UnstyledButton, TextInput, Accordion, Popover, Divider } from '@mantine/core';
 import { useClipboard, useClickOutside, useFullscreen, useMediaQuery, useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { Prism } from '@mantine/prism';
-import { IconWorld, IconExternalLink, IconClipboard, IconAlertCircle, IconAlertTriangle, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconCopy, IconDownload, IconDotsVertical, IconArrowsMinimize, IconArrowsMaximize, IconInfoCircleFilled, IconTrash, IconSearch, IconPhotoDown, IconVectorTriangle, IconStack3, IconFilterOff, IconFilter, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconLanguage } from '@tabler/icons-react';
+import { IconWorld, IconExternalLink, IconClipboard, IconAlertCircle, IconAlertTriangle, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconCopy, IconDownload, IconDotsVertical, IconArrowsMinimize, IconArrowsMaximize, IconInfoCircleFilled, IconTrash, IconSearch, IconPhotoDown, IconVectorTriangle, IconPlus, IconStack3, IconFilterOff, IconFilter, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconLanguage } from '@tabler/icons-react';
 import * as React10 from 'react';
 import React10__default, { createContext, forwardRef, useMemo, useCallback, useContext, useState, useEffect, useRef, Suspense, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
@@ -228,7 +228,7 @@ var defaultTranslation = {
     json: "JSON",
     jsonarrays: "JSON Arrays",
     jsonrecords: "JSON Records",
-    xls: "XLS"
+    xlsx: "XLSX"
   },
   loading: {
     title: "Loading...",
@@ -803,6 +803,9 @@ var serverSlice = createSlice({
     updateServer(state, action) {
       return { ...state, ...action.payload };
     },
+    resetServer(state, action) {
+      return { ...initialState };
+    },
     /**
      * Updates the type of endpoint to use in the current query.
      */
@@ -827,16 +830,18 @@ var selectServerSoftware = createSelector(selectServerState, (server) => server.
 var selectServerEndpoint = createSelector(selectServerState, (server) => server.endpoint);
 var selectServerFormatsEnabled = createSelector(
   selectServerSoftware,
-  (software) => software === TesseractDataSource.softwareName ? [Format.csv, Format.jsonarrays, Format.jsonrecords] : [Format.csv, Format.json, Format.jsonrecords, Format.xls]
+  (software) => software === TesseractDataSource.softwareName ? [Format.csv, Format.jsonarrays, Format.jsonrecords] : [
+    Format.csv,
+    // Format.jsonarrays,
+    Format.jsonrecords,
+    Format.xlsx
+  ]
 );
 createSelector(
   selectServerSoftware,
   (software) => software === TesseractDataSource.softwareName ? ["debug", "exclude_default_members", "parents", "sparse"] : ["debug", "distinct", "nonempty", "parents", "sparse"]
 );
-var selectOlapCubeMap = createSelector(
-  selectServerState,
-  (server) => server.cubeMap
-);
+var selectOlapCubeMap = createSelector(selectServerState, (server) => server.cubeMap);
 createSelector(selectOlapCubeMap, getKeys);
 var selectOlapCubeItems = createSelector(selectOlapCubeMap, getValues);
 
@@ -1178,6 +1183,9 @@ var loadingActions = {
     return { type: `${name3}/setLoadingState:${status}`, payload: message };
   }
 };
+function selectLoadingState(state) {
+  return state[name3];
+}
 function isFetchingAction(action) {
   return action.type.endsWith(`:${LOADINGSTATUS.FETCHING}`);
 }
@@ -1367,9 +1375,12 @@ function parseStateFromSearchParams(query) {
 function usePermalink(isEnabled, options) {
   const cubeMap = useSelector(selectOlapCubeMap);
   const { isDirty, panel, params } = useSelector(selectCurrentQueryItem);
-  const listener = useCallback((evt) => {
-    evt.state && options.onChange(evt.state);
-  }, [options.onChange]);
+  const listener = useCallback(
+    (evt) => {
+      evt.state && options.onChange(evt.state);
+    },
+    [options.onChange]
+  );
   useEffect(() => {
     if (isEnabled) {
       window.addEventListener("popstate", listener);
@@ -1392,6 +1403,31 @@ function usePermalink(isEnabled, options) {
   }, [cubeMap, isDirty, panel]);
   return null;
 }
+function useUpdatePermaLink({
+  isFetched,
+  cube,
+  enabled,
+  isLoading
+}) {
+  const { panel, params } = useSelector(selectCurrentQueryItem);
+  useEffect(() => {
+    if (isFetched && cube && enabled && !isLoading) {
+      const currPermalink = window.location.search.slice(1);
+      const nextPermalink = serializePermalink(params, panel);
+      if (currPermalink !== nextPermalink) {
+        const nextLocation = `${window.location.pathname}?${nextPermalink}`;
+        window.history.pushState(params, "", nextLocation);
+      }
+    }
+  }, [isFetched, cube, params, panel, enabled, isLoading]);
+}
+function useKey() {
+  const { panel, params } = useSelector(selectCurrentQueryItem);
+  if (Object.keys(params.drilldowns).length > 0 && Object.keys(params.measures).length > 0) {
+    return serializePermalink(params, panel);
+  }
+  return false;
+}
 
 // src/hooks/settings.tsx
 var SettingsContext = createContext(void 0);
@@ -1691,6 +1727,7 @@ function willDownloadQuery(format2) {
     return olapClient.getCube(params.cube).then((cube) => {
       const filename = `${cube.name}_${(/* @__PURE__ */ new Date()).toISOString()}`;
       const queryParams = { ...params, pagiLimit: 0, pagiOffset: 0 };
+      console.log({ format: format2 });
       const query = applyQueryParams(cube.query, queryParams, { previewLimit }).setFormat(format2);
       const dataURL = query.toString("logiclayer").replace(olapClient.datasource.serverUrl, "");
       return Promise.all([
@@ -1739,7 +1776,7 @@ function willExecuteQuery({ limit, offset } = {}) {
         (result) => {
           const [aggregation] = result;
           const { data, headers, status } = aggregation;
-          !isPrefetch && dispatch(
+          dispatch(
             queriesActions.updateResult({
               data: data == null ? void 0 : data.data,
               types: (data == null ? void 0 : data.data.length) ? describeData(cube.toJSON(), params, data == null ? void 0 : data.data) : currentResult.types,
@@ -1751,7 +1788,7 @@ function willExecuteQuery({ limit, offset } = {}) {
           );
           return {
             data,
-            types: (data == null ? void 0 : data.data.length) ? describeData(cube.toJSON(), params, data == null ? void 0 : data.data) : currentResult.types
+            types: (data == null ? void 0 : data.data.length) ? describeData(cube.toJSON(), params, data == null ? void 0 : data.data) : {}
           };
         },
         (error) => {
@@ -1948,6 +1985,8 @@ function useSetup(serverConfig, locale, defaultCube) {
     actions2.updateLocaleList(cleanLocale);
   }, [cleanLocale]);
   useEffect(() => {
+    actions2.resetServer({});
+    actions2.resetAllParams({});
     actions2.setLoadingState("FETCHING");
     setDone(false);
     actions2.willSetupClient(serverConfig).then(() => actions2.willReloadCubes()).then((cubeMap) => {
@@ -2439,7 +2478,8 @@ function CubeSource() {
 
 // src/components/TableFooter.tsx
 function TableFooter(props) {
-  const { result, table } = props;
+  const loading = useSelector$1(selectLoadingState);
+  const { result, table, data = [], isLoading } = props;
   const { translate: t } = useTranslation();
   const { url } = result;
   const { copy, copied } = useClipboard({ timeout: 1e3 });
@@ -2459,11 +2499,11 @@ function TableFooter(props) {
       gap: "sm"
     },
     /* @__PURE__ */ React10__default.createElement(CubeSource, null),
-    /* @__PURE__ */ React10__default.createElement(Group, { position: "right", spacing: "sm" }, /* @__PURE__ */ React10__default.createElement(Text, { c: "dimmed" }, t("results.count_rows", { n: totalRowCount })), showPagination && /* @__PURE__ */ React10__default.createElement(MRT_TablePagination, { table }), /* @__PURE__ */ React10__default.createElement(ApiAndCsvButtons, { copied, copyHandler, url }))
+    !loading.loading && !isLoading && /* @__PURE__ */ React10__default.createElement(Group, { position: "right", spacing: "sm" }, totalRowCount && /* @__PURE__ */ React10__default.createElement(Text, { c: "dimmed" }, t("results.count_rows", { n: totalRowCount })), showPagination && /* @__PURE__ */ React10__default.createElement(MRT_TablePagination, { table }), /* @__PURE__ */ React10__default.createElement(ApiAndCsvButtons, { copied, copyHandler, url, data }))
   ));
 }
 var ApiAndCsvButtons = (props) => {
-  const { copied, copyHandler, url } = props;
+  const { copied, copyHandler, url, data } = props;
   const { translate: t } = useTranslation();
   return /* @__PURE__ */ React10__default.createElement(Box, { id: "query-results-debug-view" }, /* @__PURE__ */ React10__default.createElement(Group, { spacing: "xs" }, url && /* @__PURE__ */ React10__default.createElement(
     Button,
@@ -2476,12 +2516,11 @@ var ApiAndCsvButtons = (props) => {
     },
     copied ? t("action_copy_done") : t("action_copy"),
     " API"
-  ), /* @__PURE__ */ React10__default.createElement(DownloadQuery, null)));
+  ), /* @__PURE__ */ React10__default.createElement(DownloadQuery, { data })));
 };
-var DownloadQuery = () => {
+var DownloadQuery = ({ data }) => {
   const actions2 = useActions();
   const { translate: t } = useTranslation();
-  const { isDirty, result } = useSelector$1(selectCurrentQueryItem);
   const formats = useSelector$1(selectServerFormatsEnabled);
   const csv = formats.find((format2) => format2 === "csv");
   const components = [];
@@ -2501,7 +2540,7 @@ var DownloadQuery = () => {
       )
     );
   }
-  if (components.length === 0 || result.data.length === 0) {
+  if (components.length === 0 || data.length === 0) {
     return null;
   }
   return /* @__PURE__ */ React10__default.createElement(Box, { id: "button-group-download-results" }, /* @__PURE__ */ React10__default.createElement(Group, { spacing: "xs" }, components, /* @__PURE__ */ React10__default.createElement(MenuOpts, { formats: formats.filter((f) => f !== "csv") })));
@@ -2675,7 +2714,7 @@ function AddColumnsDrawer() {
       opened,
       position: "right",
       onClose: close2,
-      title: /* @__PURE__ */ React10__default.createElement(Group, null, /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "1rem" }), /* @__PURE__ */ React10__default.createElement(Text, { fw: 700 }, t("params.add_columns"))),
+      title: /* @__PURE__ */ React10__default.createElement(Group, null, /* @__PURE__ */ React10__default.createElement(IconPlus, { size: "1.2rem" }), /* @__PURE__ */ React10__default.createElement(Text, { fw: 700 }, t("params.add_columns"))),
       styles: (t2) => ({
         inner: {
           position: "absolute",
@@ -2695,13 +2734,14 @@ function AddColumnsDrawer() {
     },
     /* @__PURE__ */ React10__default.createElement(MeasuresOptions, null),
     /* @__PURE__ */ React10__default.createElement(DrillDownOptions, null)
-  ), /* @__PURE__ */ React10__default.createElement(Group, { position: "center" }, smallerThanMd ? /* @__PURE__ */ React10__default.createElement(ActionIcon, { onClick: open, size: "md", variant: "filled", color: theme.primaryColor }, /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "0.75rem" })) : /* @__PURE__ */ React10__default.createElement(Button, { leftIcon: /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "1rem" }), onClick: open, m: "md", size: "xs" }, t("params.add_columns"))));
+  ), /* @__PURE__ */ React10__default.createElement(Group, { position: "center", sx: { flexWrap: "nowrap" } }, smallerThanMd ? /* @__PURE__ */ React10__default.createElement(ActionIcon, { onClick: open, size: "md", variant: "filled", color: theme.primaryColor }, /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "0.75rem" })) : /* @__PURE__ */ React10__default.createElement(Button, { leftIcon: /* @__PURE__ */ React10__default.createElement(IconPlus, { size: "1.2rem" }), onClick: open, m: "md", size: "sm" }, t("params.add_columns"))));
 }
 function DrillDownOptions() {
   const locale = useSelector$1(selectLocale);
   const selectedDimensions = useSelector$1(selectDrilldownItems);
   const dimensions = useSelector$1(selectOlapDimensionItems) || [];
   const activeItems = selectedDimensions.filter((i) => i.active);
+  const activeCount = activeItems.length;
   const options = useMemo(
     () => dimensions.map((dimension) => /* @__PURE__ */ React10__default.createElement(
       DimensionItem,
@@ -2709,14 +2749,15 @@ function DrillDownOptions() {
         dimension,
         locale: locale.code,
         key: dimension.uri,
-        activeItems
+        activeItems,
+        activeCount
       }
     )),
-    [dimensions, activeItems]
+    [dimensions, activeItems, activeCount]
   );
   return options;
 }
-function DimensionItem({ dimension, locale, activeItems }) {
+function DimensionItem({ dimension, locale, activeItems, activeCount }) {
   const isChildSubMenu = dimension.hierarchies.length !== 1;
   const options = dimension.hierarchies.map((hie) => /* @__PURE__ */ React10__default.createElement(
     HierarchyItem,
@@ -2726,7 +2767,8 @@ function DimensionItem({ dimension, locale, activeItems }) {
       isSubMenu: isChildSubMenu,
       key: hie.uri,
       locale,
-      activeItems
+      activeItems,
+      activeCount
     }
   ));
   if (!isChildSubMenu) {
@@ -2734,7 +2776,7 @@ function DimensionItem({ dimension, locale, activeItems }) {
   }
   return options;
 }
-function HierarchyItem({ dimension, hierarchy, isSubMenu, locale, activeItems }) {
+function HierarchyItem({ dimension, hierarchy, isSubMenu, locale, activeItems, activeCount }) {
   const { translate: t } = useTranslation();
   useMemo(() => {
     const captions = [getCaption(dimension, locale), getCaption(hierarchy, locale)];
@@ -2757,7 +2799,8 @@ function HierarchyItem({ dimension, hierarchy, isSubMenu, locale, activeItems })
       key: lvl.uri,
       level: lvl,
       locale,
-      activeItems
+      activeItems,
+      activeCount
     }
   ));
   if (!isChildSubMenu) {
@@ -2765,14 +2808,14 @@ function HierarchyItem({ dimension, hierarchy, isSubMenu, locale, activeItems })
   }
   return options;
 }
-function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems }) {
+function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems, activeCount }) {
   const [activeFilter, setActiveFilter] = useState(false);
   const { translate: t } = useTranslation();
   const actions2 = useActions();
   const cutItems = useSelector$1(selectCutItems);
-  const dimensions = useSelector$1(selectOlapDimensionItems);
   const drilldowns = useSelector$1(selectDrilldownMap);
   const ditems = useSelector$1(selectDrilldownItems);
+  const dimensions = useSelector$1(selectOlapDimensionItems);
   const label = useMemo(() => {
     const captions = [
       getCaption(dimension, locale),
@@ -2814,6 +2857,9 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
     return drilldown;
   }
   const currentDrilldown = drilldowns[stringifyName(level)];
+  const isOtherHierarchySelected = activeItems.some(
+    (activeItem) => activeItem.dimension === dimension.name && activeItem.hierarchy !== hierarchy.name
+  );
   useLayoutEffect(() => {
     if (!drilldowns[stringifyName(level)] && !ditems.find((d) => d.uniqueName === buildDrilldown(level).uniqueName)) {
       createDrilldown(level, cutItems);
@@ -2826,10 +2872,13 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
     actions2.updateCut({ ...item, members });
   }, []);
   const checked = activeItems.map(stringifyName).includes(stringifyName(level));
+  const disableUncheck = activeCount === 1 && checked;
+  const isDisabled = isOtherHierarchySelected && !checked;
   if (!currentDrilldown) return;
   return currentDrilldown && /* @__PURE__ */ React10__default.createElement(React10__default.Fragment, null, /* @__PURE__ */ React10__default.createElement(Group, { mt: "sm", position: "apart", key: level.uri, noWrap: true }, /* @__PURE__ */ React10__default.createElement(
     Checkbox,
     {
+      sx: { cursor: "pointer" },
       onChange: () => {
         if (cut) {
           const active = checked ? false : cut.members.length ? true : false;
@@ -2839,9 +2888,18 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
       },
       checked,
       label,
-      size: "xs"
+      size: "xs",
+      disabled: isDisabled || disableUncheck
     }
-  ), /* @__PURE__ */ React10__default.createElement(Group, null, /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "sm", onClick: () => setActiveFilter((value) => !value) }, activeFilter ? /* @__PURE__ */ React10__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React10__default.createElement(IconFilter, null)), /* @__PURE__ */ React10__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React10__default.createElement(StackSVG, null)))), activeFilter && /* @__PURE__ */ React10__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React10__default.createElement(
+  ), /* @__PURE__ */ React10__default.createElement(Group, { sx: { flexWrap: "nowrap" } }, /* @__PURE__ */ React10__default.createElement(
+    ActionIcon,
+    {
+      size: "sm",
+      onClick: () => setActiveFilter((value) => !value),
+      disabled: isDisabled
+    },
+    activeFilter ? /* @__PURE__ */ React10__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React10__default.createElement(IconFilter, null)
+  ), /* @__PURE__ */ React10__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React10__default.createElement(StackSVG, null)))), activeFilter && /* @__PURE__ */ React10__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React10__default.createElement(
     MultiSelect,
     {
       sx: { flex: "1 1 100%" },
@@ -2862,7 +2920,8 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
         label: m.caption ? `${m.caption} ${m.key}` : m.name
       })),
       clearable: true,
-      nothingFound: "Nothing found"
+      nothingFound: "Nothing found",
+      disabled: isDisabled
     }
   )));
 }
@@ -2891,20 +2950,12 @@ function getFilterFn(filter) {
     return "lessThan";
   }
 }
-function getFilterValue(filter) {
-  const filterFn = getFilterFn(filter);
-  const isBetween = filterFn === "between";
-  if (isBetween && filter.conditionTwo) {
-    return [filter.conditionOne[2], filter.conditionTwo[2]];
-  }
-  return filter.conditionOne[2];
-}
 function isNotValid(value) {
   return value === null || value === void 0 || Number.isNaN(value);
 }
 function NumberInputComponent({ text, filter }) {
   const actions2 = useActions();
-  function getFilterValue2(filter2) {
+  function getFilterValue(filter2) {
     return isNotValid(filter2.conditionOne[2]) || filter2.conditionOne[2] === 0 ? "" : filter2.conditionOne[2];
   }
   function onInputChange({ filter: filter2, value }) {
@@ -2918,7 +2969,7 @@ function NumberInputComponent({ text, filter }) {
     {
       description: text,
       placeholder: text,
-      value: getFilterValue2(filter),
+      value: getFilterValue(filter),
       onChange: (value) => onInputChange({ filter, value }),
       sx: { flex: "1 1 auto" },
       size: "xs"
@@ -2933,14 +2984,14 @@ function MinMax({ filter, ...rest }) {
     const active = Boolean(min2) && Boolean(max2);
     actions2.updateFilter(buildFilter({ ...filter2, active, ...conditions }));
   }
-  function getFilterValue2(condition) {
+  function getFilterValue(condition) {
     if (condition) {
       return isNotValid(condition[2]) || condition[2] === 0 ? "" : condition[2];
     }
     return "";
   }
-  const min = getFilterValue2(filter.conditionOne);
-  const max = getFilterValue2(filter.conditionTwo);
+  const min = getFilterValue(filter.conditionOne);
+  const max = getFilterValue(filter.conditionTwo);
   return /* @__PURE__ */ React10__default.createElement(Flex, { gap: "xs" }, /* @__PURE__ */ React10__default.createElement(
     NumberInput,
     {
@@ -3044,18 +3095,23 @@ function FilterItem4({
   const isBetween = filterFn === "between";
   const checked = activeItems.map((active) => active.measure.name).includes(measure.name);
   const actions2 = useActions();
+  const isLastSelected = activeItems.length === 1 && checked;
   return /* @__PURE__ */ React10__default.createElement(Box, { key: measure.name }, /* @__PURE__ */ React10__default.createElement(Group, { mt: "sm", position: "apart" }, /* @__PURE__ */ React10__default.createElement(
     Checkbox,
     {
+      sx: { cursor: "pointer" },
       onChange: () => {
-        actions2.updateMeasure({ ...measure, active: !measure.active });
-        actions2.updateFilter({ ...filter, active: checked ? false : true });
+        if (!isLastSelected) {
+          actions2.updateMeasure({ ...measure, active: !measure.active });
+          actions2.updateFilter({ ...filter, active: checked ? false : true });
+        }
       },
       checked,
       label: measure.name,
-      size: "xs"
+      size: "xs",
+      disabled: isLastSelected
     }
-  ), /* @__PURE__ */ React10__default.createElement(Group, null, activeFilter && /* @__PURE__ */ React10__default.createElement(FilterFnsMenu, { filter }), /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "xs", onClick: () => setActiveFilter((value) => !value) }, activeFilter ? /* @__PURE__ */ React10__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React10__default.createElement(IconFilter, null)), /* @__PURE__ */ React10__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React10__default.createElement(BarsSVG, null)))), activeFilter && /* @__PURE__ */ React10__default.createElement(Box, { pt: "md" }, isBetween ? /* @__PURE__ */ React10__default.createElement(MinMax, { filter }) : /* @__PURE__ */ React10__default.createElement(NumberInputComponent, { text, filter })));
+  ), /* @__PURE__ */ React10__default.createElement(Group, { sx: { flexWrap: "nowrap" } }, activeFilter && /* @__PURE__ */ React10__default.createElement(FilterFnsMenu, { filter }), /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "xs", onClick: () => setActiveFilter((value) => !value) }, activeFilter ? /* @__PURE__ */ React10__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React10__default.createElement(IconFilter, null)), /* @__PURE__ */ React10__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React10__default.createElement(BarsSVG, null)))), activeFilter && /* @__PURE__ */ React10__default.createElement(Box, { pt: "md" }, isBetween ? /* @__PURE__ */ React10__default.createElement(MinMax, { filter }) : /* @__PURE__ */ React10__default.createElement(NumberInputComponent, { text, filter })));
 }
 var DrawerMenu_default = AddColumnsDrawer;
 var removeColumn = (actions2, entity, measures, drilldowns) => {
@@ -3138,31 +3194,28 @@ function getFiltersConditions(fn, value) {
   ]);
   return (_a = comparisonMap.get(fn)) == null ? void 0 : _a(value);
 }
-function useTableData({ columns, filters, cuts, pagination }) {
-  const normalizedFilters = filters.map((filter) => ({
-    id: filter.measure,
-    value: getFilterValue(filter)
-    // fn: getFilterFn(filter)
-  }));
-  const normalizedCuts = cuts.map((cut) => ({ id: cut.uniqueName, members: cut.members }));
-  const filterKey = JSON.stringify(normalizedFilters);
-  const cutKey = JSON.stringify(normalizedCuts);
+function useTableData({ columns, pagination, cube }) {
+  const { code: locale } = useSelector$1(selectLocale);
+  const permaKey = useKey();
+  const loadingState = useSelector$1(selectLoadingState);
   const actions2 = useActions();
-  const columnsStr = JSON.stringify(columns.sort());
   const page = pagination.pageIndex;
-  const enabled = Boolean(columns.length) || Boolean(filters.length) || Boolean(cuts.length);
-  const initialKey = enabled ? [columnsStr, filterKey, cutKey, page] : "";
+  const enabled = Boolean(columns.length);
+  const initialKey = permaKey ? [permaKey, page] : permaKey;
   const [filterKeydebouced, setDebouncedTerm] = useState(initialKey);
   useEffect(() => {
-    if (!enabled) return;
-    const handler = debounce(() => {
-      const term = [columnsStr, filterKey, cutKey, page];
-      setDebouncedTerm(term);
-    }, 800);
+    if (!enabled && permaKey) return;
+    const handler = debounce(
+      () => {
+        const term = [permaKey, page];
+        setDebouncedTerm(term);
+      },
+      loadingState.loading ? 0 : 800
+    );
     handler();
     return () => handler.cancel();
-  }, [columnsStr, filterKey, cutKey, page, enabled]);
-  return useQuery({
+  }, [page, enabled, cube, locale, permaKey]);
+  const query = useQuery({
     queryKey: ["table", filterKeydebouced],
     queryFn: () => {
       return actions2.willExecuteQuery().then((res) => {
@@ -3174,49 +3227,52 @@ function useTableData({ columns, filters, cuts, pagination }) {
     staleTime: 3e5,
     enabled: enabled && !!filterKeydebouced
   });
+  const client = useQueryClient();
+  const cachedData = client.getQueryData(["table", filterKeydebouced]);
+  useUpdatePermaLink({ isFetched: Boolean(cachedData), cube, enabled, isLoading: query.isLoading });
+  return query;
 }
 function usePrefetch({
-  data,
   isPlaceholderData,
   limit,
-  offset,
   totalRowCount,
-  columns,
-  cuts,
-  filters,
   pagination,
   isFetching
 }) {
+  const { code: locale } = useSelector$1(selectLocale);
   const queryClient2 = useQueryClient();
   const actions2 = useActions();
+  const paramKey = useKey();
   const page = pagination.pageIndex + 1;
   const hasMore = page * pagination.pageSize <= totalRowCount;
   const off = page * pagination.pageSize;
-  const normalizedFilters = filters.map((filter) => ({
-    id: filter.measure,
-    value: getFilterValue(filter)
-    // fn: getFilterFn(filter)
-  }));
-  const normalizedCuts = cuts.map((cut) => ({ id: cut.uniqueName, members: cut.members }));
-  const filterKey = JSON.stringify(normalizedFilters);
-  const cutKey = JSON.stringify(normalizedCuts);
-  const columnsStr = JSON.stringify(columns.sort());
-  const key = [columnsStr, filterKey, cutKey, page];
+  const key = [paramKey, page];
   React10__default.useEffect(() => {
     if (!isPlaceholderData && hasMore && !isFetching) {
       queryClient2.prefetchQuery({
         queryKey: ["table", key],
         queryFn: () => {
           return actions2.willExecuteQuery({ offset: off, limit }).then((res) => {
-            const { data: data2, types } = res;
-            const { data: tableData, page: page2 } = data2;
+            const { data, types } = res;
+            const { data: tableData, page: page2 } = data;
             return { data: tableData != null ? tableData : [], types, page: page2 };
           });
         },
         staleTime: 3e5
       });
     }
-  }, [limit, page, isPlaceholderData, key, queryClient2, hasMore, off, isFetching]);
+  }, [
+    limit,
+    page,
+    isPlaceholderData,
+    key,
+    queryClient2,
+    hasMore,
+    off,
+    isFetching,
+    locale,
+    paramKey
+  ]);
 }
 function useTable({
   cube,
@@ -3225,16 +3281,16 @@ function useTable({
   columnSorting = () => 0,
   ...mantineTableProps
 }) {
-  const { types } = result;
   const filterItems = useSelector$1(selectFilterItems);
   const filtersMap = useSelector$1(selectFilterMap);
   const measuresOlap = useSelector$1(selectOlapMeasureItems);
   const measuresMap = useSelector$1(selectMeasureMap);
   const drilldowns = useSelector$1(selectDrilldownItems);
   const measures = useSelector$1(selectMeasureItems);
+  useSelector$1(selectCutItems);
   const actions2 = useActions();
-  const itemsCuts = useSelector$1(selectCutItems);
   const { limit, offset } = useSelector$1(selectPaginationParams);
+  useSelector$1(selectLoadingState);
   const [pagination, setPagination] = useState({
     pageIndex: offset,
     pageSize: limit
@@ -3268,27 +3324,19 @@ function useTable({
       return { measure, filter };
     });
   }, [measuresMap, measuresOlap, filtersMap, filterItems]);
-  const { isLoading, isFetching, isError, data, isPlaceholderData } = useTableData({
+  const { isLoading, isFetching, isFetched, isError, data, isPlaceholderData, status, fetchStatus } = useTableData({
     columns: finalUniqueKeys,
-    filters: filterItems.filter(
-      (f) => isActiveItem(f) && isActiveItem(measures.find((m) => m.name === f.measure) || { active: false })
-    ),
-    cuts: itemsCuts.filter(isActiveCut),
-    pagination
+    pagination,
+    cube: cube.name
   });
   const tableData = (data == null ? void 0 : data.data) || [];
-  const tableTypes = (data == null ? void 0 : data.types) || types;
+  const tableTypes = (data == null ? void 0 : data.types) || {};
   const totalRowCount = data == null ? void 0 : data.page.total;
   const finalKeys = Object.values(tableTypes).filter((t2) => !t2.isId).filter(columnFilter).sort(columnSorting);
   usePrefetch({
-    data: tableData,
     isPlaceholderData,
-    offset,
     limit,
     totalRowCount,
-    columns: finalUniqueKeys,
-    filters: filterItems.filter(isActiveItem),
-    cuts: itemsCuts.filter(isActiveCut),
     pagination,
     isFetching: isFetching || isLoading
   });
@@ -3465,6 +3513,8 @@ function useTable({
     }),
     [isError]
   );
+  const isTransitionState = status !== "success" && !isError;
+  const isLoad = isLoading || data === void 0 || isTransitionState;
   const table = useMantineReactTable({
     columns,
     data: tableData,
@@ -3475,7 +3525,7 @@ function useTable({
     manualSorting: false,
     rowCount: totalRowCount,
     state: {
-      isLoading: isLoading || isFetching || data === void 0,
+      isLoading: isLoading || data === void 0 || isTransitionState,
       pagination,
       showAlertBanner: isError,
       showProgressBars: isFetching || isLoading
@@ -3483,10 +3533,11 @@ function useTable({
     ...constTableProps,
     ...mantineTableProps
   });
-  return { table, isError, isLoading, data: tableData, columns };
+  return { table, isError, isLoading: isLoad, data: tableData, columns };
 }
-function TableView({ table, result, isError, isLoading = false, data, columns }) {
+function TableView({ table, result, isError, isLoading = false, data }) {
   const isData = Boolean(table.getRowModel().rows.length);
+  const loadingState = useSelector$1(selectLoadingState);
   return /* @__PURE__ */ React10__default.createElement(Box, { sx: { height: "100%" } }, /* @__PURE__ */ React10__default.createElement(Flex, { direction: "column", justify: "space-between", sx: { height: "100%", flex: "1 1 auto" } }, /* @__PURE__ */ React10__default.createElement(MRT_ProgressBar, { isTopToolbar: false, table }), /* @__PURE__ */ React10__default.createElement(
     ScrollArea,
     {
@@ -3497,7 +3548,7 @@ function TableView({ table, result, isError, isLoading = false, data, columns })
         overflow: "scroll"
       }
     },
-    /* @__PURE__ */ React10__default.createElement(LoadingOverlay, { visible: columns.length === 0 && isLoading }),
+    /* @__PURE__ */ React10__default.createElement(LoadingOverlay, { visible: isLoading || loadingState.loading }),
     /* @__PURE__ */ React10__default.createElement(
       Table,
       {
@@ -3571,7 +3622,7 @@ function TableView({ table, result, isError, isLoading = false, data, columns })
       )))))
     ),
     !isData && !isError && !isLoading && /* @__PURE__ */ React10__default.createElement(NoRecords, null)
-  ), /* @__PURE__ */ React10__default.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: true, table }), /* @__PURE__ */ React10__default.createElement(TableFooter_default, { table, data, result })));
+  ), /* @__PURE__ */ React10__default.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: true, table }), /* @__PURE__ */ React10__default.createElement(TableFooter_default, { table, data, result, isLoading })));
 }
 var ColumnFilterCell = ({
   header,
@@ -3882,7 +3933,7 @@ function SuccessResult(props) {
       w: "100%"
     },
     /* @__PURE__ */ React10__default.createElement(ExplorerTabs, { panels, onChange: tabHandler, value: panelKey }),
-    (!queryItem.panel || queryItem.panel === "table") && /* @__PURE__ */ React10__default.createElement(Group, { sx: { display: "flex", flex: "0 1 auto" }, mr: "sm", noWrap: true }, /* @__PURE__ */ React10__default.createElement(DrawerMenu_default, null), /* @__PURE__ */ React10__default.createElement(Toolbar, { table, fullscreen }))
+    (!queryItem.panel || queryItem.panel === "table") && /* @__PURE__ */ React10__default.createElement(Group, { sx: { display: "flex", flex: "0 1 auto", gap: "0.5rem" }, mr: "sm", noWrap: true }, /* @__PURE__ */ React10__default.createElement(Toolbar, { table, fullscreen }), /* @__PURE__ */ React10__default.createElement(DrawerMenu_default, null))
   ), isPreviewMode && /* @__PURE__ */ React10__default.createElement(Alert, { id: "alert-load-all-results", color: "yellow", radius: 0, sx: { flex: "0 0 auto" } }, /* @__PURE__ */ React10__default.createElement(Group, { position: "apart" }, /* @__PURE__ */ React10__default.createElement(Text, null, /* @__PURE__ */ React10__default.createElement(Text, { fw: 700, span: true }, t("previewMode.title_preview"), ":", " "), /* @__PURE__ */ React10__default.createElement(Text, { span: true }, t("previewMode.description_preview", { limit: previewLimit }))), /* @__PURE__ */ React10__default.createElement(PreviewModeSwitch, null))), /* @__PURE__ */ React10__default.createElement(Box, { id: "query-results-content", sx: { flex: "1 1", height: "calc(100% - 60px)" } }, /* @__PURE__ */ React10__default.createElement(Suspense, { fallback: props.children }, /* @__PURE__ */ React10__default.createElement(Flex, { h: "100%" }, /* @__PURE__ */ React10__default.createElement(Box, { sx: { flex: "1 1", overflowX: "scroll" } }, /* @__PURE__ */ React10__default.createElement(
     CurrentComponent,
     {
@@ -4372,31 +4423,17 @@ init_esm_shims();
 init_esm_shims();
 function useSelectCube(onSelectCube) {
   const { updateMeasure, updateCut, updateDrilldown, willFetchMembers: willFetchMembers2 } = useActions();
-  useCallback((level, dimensions) => {
-    const drilldownItem = buildDrilldown(level);
-    createCutHandler2(level);
-    updateDrilldown(drilldownItem);
-    return willFetchMembers2({ ...level, level: level.name }).then((members) => {
-      const dimension = dimensions.find((dim) => dim.name === level.dimension);
-      if (!dimension) return;
-      return updateDrilldown({
-        ...drilldownItem,
-        dimType: dimension.dimensionType,
-        memberCount: members.length,
-        members
-      });
-    });
-  }, []);
+  const actions2 = useActions();
   const createCutHandler2 = React10__default.useCallback((level) => {
     const cutItem = buildCut({ ...level });
     cutItem.active = false;
     updateCut(cutItem);
   }, []);
-  function createDrilldown(level, dimensions) {
+  async function createDrilldown(level, dimensions) {
     const drilldown = buildDrilldown({ ...level, key: stringifyName(level), active: true });
     updateDrilldown(drilldown);
     createCutHandler2({ ...level, key: stringifyName(level) });
-    willFetchMembers2({ ...level, level: level.name }).then((members) => {
+    await willFetchMembers2({ ...level, level: level.name }).then((members) => {
       const dimension = dimensions.find((dim) => dim.name === level.dimension);
       if (!dimension) return;
       updateDrilldown({
@@ -4413,9 +4450,8 @@ function useSelectCube(onSelectCube) {
     const drilldowns = deriveDrilldowns(dimensions);
     if (measure && drilldowns.length > 0) {
       updateMeasure({ ...measure, active: true });
-      for (const level of drilldowns) {
-        createDrilldown(level, dimensions);
-      }
+      const promises = drilldowns.map((level) => createDrilldown(level, dimensions));
+      return Promise.all(promises).then(() => actions2.setLoadingState("SUCCESS"));
     }
   });
 }
@@ -4570,9 +4606,10 @@ function getCube(items, table, subtopic, locale) {
   return cube;
 }
 function useBuildGraph(items, locale, graph, setGraph) {
+  const [filteredItems, setFilteredItems] = useState([]);
   useEffect(() => {
     const graph2 = new graph_default();
-    items.map((item) => {
+    const filteredItems2 = items.map((item) => {
       const { name: name4 } = item;
       const topic = getAnnotation(item, "topic", locale);
       const subtopic = getAnnotation(item, "subtopic", locale);
@@ -4584,13 +4621,15 @@ function useBuildGraph(items, locale, graph, setGraph) {
         graph2.addNode(name4);
         graph2.addEdge(topic, subtopic);
         graph2.addEdge(subtopic, name4);
+        return item;
       }
-      return item;
-    });
-    graph2.items = items;
+      return null;
+    }).filter(Boolean);
+    setFilteredItems(filteredItems2);
+    graph2.items = filteredItems2;
     setGraph(graph2);
   }, [items, locale, setGraph]);
-  return { graph };
+  return { graph, filteredItems };
 }
 function CubeTree({
   items,
@@ -4599,20 +4638,26 @@ function CubeTree({
 }) {
   const { graph, setGraph, map, input } = useSideBar();
   const { translate: t } = useTranslation();
-  useBuildGraph(items, locale, graph, setGraph);
+  const { filteredItems } = useBuildGraph(items, locale, graph, setGraph);
   const actions2 = useActions();
+  const query = useSelector$1(selectCurrentQueryParams);
   const onSelectCube = (table, subtopic) => {
     const cube = items.find(
       (item) => item.name === table && getAnnotation(item, "subtopic", locale) === subtopic
     );
     if (cube) {
-      actions2.resetDrilldowns({});
-      actions2.resetCuts({});
-      actions2.resetMeasures({});
+      const { drilldowns, cuts, filters, measures, ...newQuery } = query;
+      actions2.setLoadingState("FETCHING");
+      actions2.resetAllParams(newQuery);
+      actions2.updateResult({ data: [], types: {}, url: "", status: 200 });
       return actions2.willSetCube(cube.name);
     }
   };
-  const topics = useMemo(() => getKeys2(items, "topic", locale), [items, locale]);
+  let topics = useMemo(
+    () => getKeys2(filteredItems, "topic", locale),
+    [filteredItems, locale]
+  );
+  topics = [topics[0], topics[1]];
   if (input.length > 0 && map && !(map.size > 0)) {
     return /* @__PURE__ */ React10__default.createElement(Text, { ta: "center", fz: "xs", my: "sm", italic: true }, t("params.label_no_results"));
   }
@@ -4822,10 +4867,14 @@ var useStyles4 = createStyles((theme, params) => ({
   }
 }));
 function ExplorerContent(props) {
-  useMantineTheme();
-  useState(false);
+  const { setSource } = props;
   const translation = useTranslation();
-  useSetup(props.source, props.dataLocale, props.defaultCube);
+  const done = useSetup(props.source, props.dataLocale, props.defaultCube);
+  useEffect(() => {
+    if (setSource) {
+      setSource({ loading: !done });
+    }
+  }, [setSource, done]);
   const { classes } = useStyles4({ height: props.height });
   useEffect(() => {
     if (props.uiLocale) translation.setLocale(props.uiLocale);
@@ -5506,7 +5555,9 @@ function ExplorerComponent(props) {
     previewLimit = 50,
     withinMantineProvider = true,
     withinReduxProvider = false,
-    withMultiQuery = false
+    withMultiQuery = false,
+    setSource,
+    source
   } = props;
   const locale = useMemo(() => dataLocale.toString().split(","), [dataLocale]);
   const panels = useMemo(
@@ -5540,11 +5591,12 @@ function ExplorerComponent(props) {
     /* @__PURE__ */ React10__default.createElement(TranslationProvider, { defaultLocale: props.uiLocale, translations: props.translations }, /* @__PURE__ */ React10__default.createElement(
       ExplorerContent,
       {
+        setSource,
         dataLocale: locale,
         defaultOpenParams,
         height,
         panels,
-        source: props.source,
+        source,
         splash: props.splash,
         uiLocale: props.uiLocale,
         defaultCube: props.defaultCube,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "exports": {
     ".": {
       "import": "./dist/main.js"