@datawheel/data-explorer 0.2.2 → 0.2.4

package/dist/main.js

@@ -1,9 +1,9 @@
-import { keyframes, createStyles, Select, rem, Flex, Title, Text, Group, Button, Box, Anchor, Input, Stack, SimpleGrid, ScrollArea, 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, useMantineTheme, MantineProvider, Paper, useComponentDefaultProps, Switch, ThemeIcon, Tooltip, 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 * as React10 from 'react';
-import React10__default, { createContext, forwardRef, useMemo, useCallback, useContext, useState, useEffect, useRef, Suspense } from 'react';
+import React10__default, { createContext, forwardRef, useMemo, useCallback, useContext, useState, useEffect, useRef, Suspense, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
 import { translationDict, generateCharts, createChartConfig } from '@datawheel/vizbuilder';
 import { createSlice, createSelector, combineReducers, bindActionCreators, configureStore } from '@reduxjs/toolkit';
@@ -913,8 +913,8 @@ var queriesSlice = createSlice({
       delete query.params.drilldowns[action.payload];
     },
     /**
-      * Remove a single DrilldownItem from the current QueryItem.
-    */
+     * Remove a single DrilldownItem from the current QueryItem.
+     */
     removeMeasure(state, action) {
       const query = taintCurrentQuery(state);
       delete query.params.measures[action.payload];
@@ -1002,14 +1002,14 @@ var queriesSlice = createSlice({
      */
     updateCut(state, { payload }) {
       const query = taintCurrentQuery(state);
-      query.params.cuts[payload.fullName] = payload;
+      query.params.cuts[payload.key] = payload;
     },
     /**
      * Replaces a single DrilldownItem in the current QueryItem.
      */
     updateDrilldown(state, { payload }) {
       const query = taintCurrentQuery(state);
-      query.params.drilldowns[payload.fullName] = payload;
+      query.params.drilldowns[payload.key] = payload;
     },
     /**
      * Replaces a single FilterItem in the current QueryItem.
@@ -1083,10 +1083,7 @@ var selectCurrentQueryParams = createSelector(
   selectCurrentQueryItem,
   (query) => query.params
 );
-var selectCubeName = createSelector(
-  selectCurrentQueryParams,
-  (params) => params.cube
-);
+var selectCubeName = createSelector(selectCurrentQueryParams, (params) => params.cube);
 var selectLocale = createSelector(
   [selectCurrentQueryParams, selectServerState],
   (params, server) => {
@@ -1098,10 +1095,7 @@ var selectLocale = createSelector(
     };
   }
 );
-var selectCutMap = createSelector(
-  selectCurrentQueryParams,
-  (params) => params.cuts
-);
+var selectCutMap = createSelector(selectCurrentQueryParams, (params) => params.cuts);
 createSelector(selectCutMap, getKeys);
 var selectCutItems = createSelector(selectCutMap, getValues);
 var selectDrilldownMap = createSelector(
@@ -1110,34 +1104,25 @@ var selectDrilldownMap = createSelector(
 );
 createSelector(selectDrilldownMap, getKeys);
 var selectDrilldownItems = createSelector(selectDrilldownMap, getValues);
-var selectFilterMap = createSelector(
-  selectCurrentQueryParams,
-  (params) => params.filters
-);
+var selectFilterMap = createSelector(selectCurrentQueryParams, (params) => params.filters);
 createSelector(selectFilterMap, getKeys);
 var selectFilterItems = createSelector(selectFilterMap, getValues);
-var selectMeasureMap = createSelector(
-  selectCurrentQueryParams,
-  (params) => params.measures
-);
+var selectMeasureMap = createSelector(selectCurrentQueryParams, (params) => params.measures);
 createSelector(selectMeasureMap, getKeys);
 var selectMeasureItems = createSelector(selectMeasureMap, getValues);
-createSelector(
-  selectCurrentQueryParams,
-  (params) => params.booleans
-);
+createSelector(selectCurrentQueryParams, (params) => params.booleans);
 var selectIsPreviewMode = createSelector(
   selectCurrentQueryParams,
   (params) => params.isPreview
 );
-var selectPaginationParams = createSelector(
-  selectCurrentQueryParams,
-  (params) => ({ limit: params.pagiLimit || 0, offset: params.pagiOffset || 0 })
-);
-createSelector(
-  selectCurrentQueryParams,
-  (params) => ({ sortKey: params.sortKey || "", sortDir: params.sortDir })
-);
+var selectPaginationParams = createSelector(selectCurrentQueryParams, (params) => ({
+  limit: params.pagiLimit || 0,
+  offset: params.pagiOffset || 0
+}));
+createSelector(selectCurrentQueryParams, (params) => ({
+  sortKey: params.sortKey || "",
+  sortDir: params.sortDir
+}));
 createSelector(
   selectCurrentQueryParams,
   (params) => isValidQueryVerbose(params)
@@ -1565,7 +1550,7 @@ function calcMaxMemberCount(query, params, dispatch) {
     (level) => Level.isLevel(level) ? drills[level.uniqueName] || ds.fetchMembers(level).then(async (members) => {
       const { dimension } = level;
       const drilldown = Object.values(params.drilldowns).find(
-        (d) => d.uniqueName === level.uniqueName
+        (d) => d.uniqueName === buildDrilldown(level).uniqueName
       );
       if (drilldown) {
         const ddd = {
@@ -1574,7 +1559,7 @@ function calcMaxMemberCount(query, params, dispatch) {
           memberCount: members.length,
           members
         };
-        dispatch(actions.updateDrilldown(ddd));
+        dispatch(actions.updateDrilldown(buildDrilldown({ ...ddd, key: stringifyName(ddd) })));
         createCutHandler(params.cuts, ddd, dispatch);
       }
       return members.length;
@@ -1591,6 +1576,7 @@ function hydrateDrilldownProperties(cube, drilldownItem) {
     if (level.matches(drilldownItem)) {
       return buildDrilldown({
         ...drilldownItem,
+        // key: stringifyName(drilldownItem),
         fullName: level.fullName,
         uniqueName: level.uniqueName,
         dimType: level.dimension.dimensionType,
@@ -1617,9 +1603,15 @@ function deriveDrilldowns(dimensions) {
   }
   for (const dim of dimensions) {
     if (dim.type !== "time" && drilldowns.length < 4) {
-      const { levels } = findDefaultHierarchy(dim);
-      const levelIndex = dim.type === "geo" ? levels.length - 1 : 0;
-      drilldowns.push(levels[levelIndex]);
+      if (dim.hierarchies.length === 1) {
+        const { levels } = dim.hierarchies[0];
+        const levelIndex = dim.type === "geo" ? levels.length - 1 : 0;
+        drilldowns.push(levels[levelIndex]);
+      } else {
+        const { levels } = findDefaultHierarchy(dim);
+        const levelIndex = dim.type === "geo" ? levels.length - 1 : 0;
+        drilldowns.push(levels[levelIndex]);
+      }
     }
   }
   return drilldowns;
@@ -1749,7 +1741,7 @@ function willExecuteQuery({ limit, offset } = {}) {
           const { data, headers, status } = aggregation;
           !isPrefetch && dispatch(
             queriesActions.updateResult({
-              data,
+              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,
               headers: { ...headers },
               sourceCall: query.toSource(),
@@ -2707,33 +2699,8 @@ function AddColumnsDrawer() {
 }
 function DrillDownOptions() {
   const locale = useSelector$1(selectLocale);
-  const actions2 = useActions();
   const selectedDimensions = useSelector$1(selectDrilldownItems);
   const dimensions = useSelector$1(selectOlapDimensionItems) || [];
-  const createCutHandler2 = React10__default.useCallback((level) => {
-    const cutItem = buildCut({ ...level, key: level.fullName, members: [] });
-    cutItem.active = false;
-    actions2.updateCut(cutItem);
-  }, []);
-  useCallback(
-    (level) => {
-      var _a;
-      const drilldownItem = (_a = selectedDimensions.find((item) => item.uniqueName === level.uniqueName)) != null ? _a : buildDrilldown({ ...level });
-      createCutHandler2(level);
-      actions2.updateDrilldown(drilldownItem);
-      actions2.willFetchMembers({ ...level, level: level.name }).then((members) => {
-        const dimension = dimensions.find((dim) => dim.name === level.dimension);
-        if (!dimension) return;
-        actions2.updateDrilldown({
-          ...drilldownItem,
-          dimType: dimension.dimensionType,
-          memberCount: members.length,
-          members
-        });
-      });
-    },
-    [dimensions]
-  );
   const activeItems = selectedDimensions.filter((i) => i.active);
   const options = useMemo(
     () => dimensions.map((dimension) => /* @__PURE__ */ React10__default.createElement(
@@ -2745,7 +2712,7 @@ function DrillDownOptions() {
         activeItems
       }
     )),
-    [dimensions, activeItems, createCutHandler2]
+    [dimensions, activeItems]
   );
   return options;
 }
@@ -2803,12 +2770,9 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
   const { translate: t } = useTranslation();
   const actions2 = useActions();
   const cutItems = useSelector$1(selectCutItems);
-  useSelector$1(selectOlapDimensionItems);
+  const dimensions = useSelector$1(selectOlapDimensionItems);
   const drilldowns = useSelector$1(selectDrilldownMap);
-  const stringifyNameInternal = (level2) => joinName(levelRefToArray(level2));
-  const [currentDrilldown, setCurrentDrilldown] = useState(
-    drilldowns[stringifyNameInternal(level)] || drilldowns[stringifyName(level)]
-  );
+  const ditems = useSelector$1(selectDrilldownItems);
   const label = useMemo(() => {
     const captions = [
       getCaption(dimension, locale),
@@ -2825,20 +2789,36 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
       level: captions[2]
     });
   }, [locale, dimension, hierarchy, level, isSubMenu]);
-  React10__default.useCallback((level2) => {
+  const createCutHandler2 = React10__default.useCallback((level2) => {
     const cutItem = buildCut({ ...level2, members: [], key: level2.fullName });
     cutItem.active = false;
     actions2.updateCut(cutItem);
   }, []);
   function createDrilldown(level2, cuts) {
     const drilldown = buildDrilldown({ ...level2, key: stringifyName(level2), active: false });
+    actions2.updateDrilldown(drilldown);
+    const cut2 = cuts.find((cut3) => cut3.uniqueName === drilldown.uniqueName);
+    if (!cut2) {
+      createCutHandler2({ ...level2, key: stringifyName(level2) });
+    }
+    actions2.willFetchMembers({ ...level2, level: level2.name }).then((members) => {
+      const dimension2 = dimensions.find((dim) => dim.name === level2.dimension);
+      if (!dimension2) return;
+      actions2.updateDrilldown({
+        ...drilldown,
+        dimType: dimension2.dimensionType,
+        memberCount: members.length,
+        members
+      });
+    });
     return drilldown;
   }
-  React10__default.useEffect(() => {
-    if (!currentDrilldown) {
-      setCurrentDrilldown(createDrilldown(level));
+  const currentDrilldown = drilldowns[stringifyName(level)];
+  useLayoutEffect(() => {
+    if (!drilldowns[stringifyName(level)] && !ditems.find((d) => d.uniqueName === buildDrilldown(level).uniqueName)) {
+      createDrilldown(level, cutItems);
     }
-  }, []);
+  }, [level, ditems]);
   const cut = cutItems.find((cut2) => {
     return cut2.uniqueName === (currentDrilldown == null ? void 0 : currentDrilldown.uniqueName);
   });
@@ -2847,7 +2827,7 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
   }, []);
   const checked = activeItems.map(stringifyName).includes(stringifyName(level));
   if (!currentDrilldown) return;
-  return /* @__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(
+  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,
     {
       onChange: () => {
@@ -2855,7 +2835,6 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
           const active = checked ? false : cut.members.length ? true : false;
           actions2.updateCut({ ...cut, active });
         }
-        console.log({ currentDrilldown });
         actions2.updateDrilldown({ ...currentDrilldown, active: !currentDrilldown.active });
       },
       checked,
@@ -3049,7 +3028,7 @@ function MeasuresOptions() {
   }, [itemMap, measures, filtersMap, filtersItems]);
   const activeItems = filteredItems.filter((f) => isActiveItem(f.measure));
   const options = filteredItems.map(({ measure, filter }) => {
-    return /* @__PURE__ */ React10__default.createElement(FilterItem4, { measure, filter, activeItems });
+    return /* @__PURE__ */ React10__default.createElement(FilterItem4, { key: measure.key, measure, filter, activeItems });
   });
   return options;
 }
@@ -3159,7 +3138,7 @@ function getFiltersConditions(fn, value) {
   ]);
   return (_a = comparisonMap.get(fn)) == null ? void 0 : _a(value);
 }
-function useTableData({ offset, limit, columns, filters, cuts, pagination }) {
+function useTableData({ columns, filters, cuts, pagination }) {
   const normalizedFilters = filters.map((filter) => ({
     id: filter.measure,
     value: getFilterValue(filter)
@@ -3179,7 +3158,7 @@ function useTableData({ offset, limit, columns, filters, cuts, pagination }) {
     const handler = debounce(() => {
       const term = [columnsStr, filterKey, cutKey, page];
       setDebouncedTerm(term);
-    }, 700);
+    }, 800);
     handler();
     return () => handler.cancel();
   }, [columnsStr, filterKey, cutKey, page, enabled]);
@@ -3205,7 +3184,8 @@ function usePrefetch({
   columns,
   cuts,
   filters,
-  pagination
+  pagination,
+  isFetching
 }) {
   const queryClient2 = useQueryClient();
   const actions2 = useActions();
@@ -3223,7 +3203,7 @@ function usePrefetch({
   const columnsStr = JSON.stringify(columns.sort());
   const key = [columnsStr, filterKey, cutKey, page];
   React10__default.useEffect(() => {
-    if (!isPlaceholderData && hasMore) {
+    if (!isPlaceholderData && hasMore && !isFetching) {
       queryClient2.prefetchQuery({
         queryKey: ["table", key],
         queryFn: () => {
@@ -3236,7 +3216,7 @@ function usePrefetch({
         staleTime: 3e5
       });
     }
-  }, [data, limit, offset, page, isPlaceholderData, key, queryClient2, hasMore, off]);
+  }, [limit, page, isPlaceholderData, key, queryClient2, hasMore, off, isFetching]);
 }
 function useTable({
   cube,
@@ -3276,8 +3256,8 @@ function useTable({
     actions2.updateFilter(filter);
     return filter;
   }
-  useMemo(() => {
-    return filterMap(measuresOlap, (m) => {
+  useLayoutEffect(() => {
+    filterMap(measuresOlap, (m) => {
       const measure = measuresMap[m.name] || handlerCreateMeasure({ ...m, active: false });
       const foundFilter = filtersMap[m.name] || filterItems.find((f) => f.measure === measure.name);
       const filter = foundFilter || handlerCreateFilter({
@@ -3289,10 +3269,10 @@ function useTable({
     });
   }, [measuresMap, measuresOlap, filtersMap, filterItems]);
   const { isLoading, isFetching, isError, data, isPlaceholderData } = useTableData({
-    offset,
-    limit,
     columns: finalUniqueKeys,
-    filters: filterItems.filter(isActiveItem),
+    filters: filterItems.filter(
+      (f) => isActiveItem(f) && isActiveItem(measures.find((m) => m.name === f.measure) || { active: false })
+    ),
     cuts: itemsCuts.filter(isActiveCut),
     pagination
   });
@@ -3309,14 +3289,15 @@ function useTable({
     columns: finalUniqueKeys,
     filters: filterItems.filter(isActiveItem),
     cuts: itemsCuts.filter(isActiveCut),
-    pagination
+    pagination,
+    isFetching: isFetching || isLoading
   });
   useEffect(() => {
     actions2.updatePagination({
       limit: pagination.pageSize,
       offset: pagination.pageIndex * pagination.pageSize
     });
-  }, [pagination]);
+  }, [pagination, actions2]);
   const { translate: t } = useTranslation();
   const { currentFormats, getAvailableKeys, getFormatter, getFormatterKey, setFormat } = useFormatter(
     cube.measures
@@ -3325,7 +3306,7 @@ function useTable({
     const indexColumn = {
       id: "#",
       Header: "#",
-      Cell: ({ row }) => row.index + 1,
+      Cell: ({ row }) => row.index + 1 + offset,
       minWidth: 50,
       maxWidth: 50,
       width: 50,
@@ -3502,9 +3483,9 @@ function useTable({
     ...constTableProps,
     ...mantineTableProps
   });
-  return { table, isError, isLoading, data: tableData };
+  return { table, isError, isLoading, data: tableData, columns };
 }
-function TableView({ table, result, isError, isLoading, data }) {
+function TableView({ table, result, isError, isLoading = false, data, columns }) {
   const isData = Boolean(table.getRowModel().rows.length);
   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,
@@ -3516,6 +3497,7 @@ function TableView({ table, result, isError, isLoading, data }) {
         overflow: "scroll"
       }
     },
+    /* @__PURE__ */ React10__default.createElement(LoadingOverlay, { visible: columns.length === 0 && isLoading }),
     /* @__PURE__ */ React10__default.createElement(
       Table,
       {
@@ -3878,7 +3860,7 @@ function SuccessResult(props) {
   const { previewLimit, actions: actions2 } = useSettings();
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const isPreviewMode = useSelector$1(selectIsPreviewMode);
-  const { table, isError, isLoading, data } = useTable({ cube, result });
+  const { table, isError, isLoading, data, columns } = useTable({ cube, result });
   const fullscreen = useFullscreen();
   const [CurrentComponent, panelKey, panelMeta] = useMemo(() => {
     const currentPanel = queryItem.panel || `${panels[0].key}-`;
@@ -3911,7 +3893,8 @@ function SuccessResult(props) {
       table,
       isError,
       isLoading,
-      data
+      data,
+      columns
     }
   )))))));
 }
@@ -3979,6 +3962,11 @@ var Graph = class {
     });
     return topic;
   }
+  getName(node, locale) {
+    const item = this.items.find((item2) => item2.name === node);
+    const name4 = getAnnotation(item, "table", locale);
+    return name4;
+  }
   getSubtopic(startingNode, locale) {
     let found = false;
     let subtopic = null;
@@ -4008,15 +3996,16 @@ var Graph = class {
           "name",
           (item) => getAnnotation(item, "topic", locale) || "",
           (item) => getAnnotation(item, "subtopic", locale) || "",
-          (item) => getAnnotation(item, "table", locale) || ""
+          (item) => getAnnotation(item, "table", locale) || "",
+          (item) => item.name.replace(/_/g, " ")
         ]
       });
       for (const item of results) {
         const topic = getAnnotation(item, "topic", locale);
         const subtopic = getAnnotation(item, "subtopic", locale);
-        const title = getAnnotation(item, "table", locale);
-        addItemToSubtopic(map, `${topic} - ${subtopic}`, title);
-        matches.push(title);
+        getAnnotation(item, "table", locale);
+        addItemToSubtopic(map, `${topic} - ${subtopic}`, item.name);
+        matches.push(item.name);
       }
     }
     return { matches, map };
@@ -4187,7 +4176,7 @@ function LocaleSelector() {
 var [useSideBar, Provider] = createContext2("SideBar");
 function SideBarProvider(props) {
   const [input, setInput] = useState("");
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(true);
   const [results, setResults] = useState([]);
   const [map, setMap] = useState();
   const [graph, setGraph] = useState(new graph_default());
@@ -4383,12 +4372,7 @@ init_esm_shims();
 init_esm_shims();
 function useSelectCube(onSelectCube) {
   const { updateMeasure, updateCut, updateDrilldown, willFetchMembers: willFetchMembers2 } = useActions();
-  const createCutHandler2 = React10__default.useCallback((level) => {
-    const cutItem = buildCut({ ...level });
-    cutItem.active = false;
-    updateCut(cutItem);
-  }, []);
-  const addDrilldown = useCallback((level, dimensions) => {
+  useCallback((level, dimensions) => {
     const drilldownItem = buildDrilldown(level);
     createCutHandler2(level);
     updateDrilldown(drilldownItem);
@@ -4403,13 +4387,34 @@ function useSelectCube(onSelectCube) {
       });
     });
   }, []);
+  const createCutHandler2 = React10__default.useCallback((level) => {
+    const cutItem = buildCut({ ...level });
+    cutItem.active = false;
+    updateCut(cutItem);
+  }, []);
+  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) => {
+      const dimension = dimensions.find((dim) => dim.name === level.dimension);
+      if (!dimension) return;
+      updateDrilldown({
+        ...drilldown,
+        dimType: dimension.dimensionType,
+        memberCount: members.length,
+        members
+      });
+    });
+    return drilldown;
+  }
   return (item, subtopic) => () => onSelectCube(item, subtopic).then(({ cube, measures, dimensions }) => {
     const [measure] = Object.values(measures);
     const drilldowns = deriveDrilldowns(dimensions);
     if (measure && drilldowns.length > 0) {
       updateMeasure({ ...measure, active: true });
       for (const level of drilldowns) {
-        addDrilldown(level, dimensions);
+        createDrilldown(level, dimensions);
       }
     }
   });
@@ -4427,6 +4432,7 @@ function Results(props) {
       const [topic, subtopic] = key.split(" - ");
       const component = /* @__PURE__ */ React10__default.createElement("div", { key }, /* @__PURE__ */ React10__default.createElement(Divider, { my: "xs", label: key }), items.map((item) => {
         const cube = getCube2(graph.items, item, subtopic, locale);
+        const table = getAnnotation(cube, "table", locale);
         return /* @__PURE__ */ React10__default.createElement(
           Text,
           {
@@ -4440,7 +4446,7 @@ function Results(props) {
               setInput("");
             }
           },
-          item
+          table
         );
       }));
       result.push(component);
@@ -4485,32 +4491,38 @@ function SelectCubeInternal(props) {
   useTranslation();
   const { code: locale } = useSelector$1(selectLocale);
   const { updateMeasure, updateDrilldown, willFetchMembers: willFetchMembers2, updateCut } = useActions();
+  const cutItems = useSelector$1(selectCutItems);
   const cube = useSelector$1(selectCubeName);
   const itemMap = useSelector$1(selectMeasureMap);
   const dimensions = useSelector$1(selectOlapDimensionItems);
+  const drilldowns = useSelector$1(selectDrilldownMap);
+  const ditems = useSelector$1(selectDrilldownItems);
   const createCutHandler2 = React10__default.useCallback((level) => {
     const cutItem = buildCut({ ...level });
     cutItem.active = false;
     updateCut(cutItem);
   }, []);
-  const addDrilldown = useCallback(
-    (level) => {
-      const drilldownItem = buildDrilldown(level);
-      createCutHandler2(level);
-      updateDrilldown(drilldownItem);
-      return willFetchMembers2({ ...level, level: level.name }).then((members) => {
+  function createDrilldown(level, cuts) {
+    if (!drilldowns[stringifyName(level)] && !ditems.find((d) => d.uniqueName === buildDrilldown(level).uniqueName)) {
+      const drilldown = buildDrilldown({ ...level, key: stringifyName(level), active: true });
+      updateDrilldown(drilldown);
+      const cut = cuts.find((cut2) => cut2.uniqueName === drilldown.uniqueName);
+      if (!cut) {
+        createCutHandler2({ ...level, key: stringifyName(level) });
+      }
+      willFetchMembers2({ ...level, level: level.name }).then((members) => {
         const dimension = dimensions.find((dim) => dim.name === level.dimension);
         if (!dimension) return;
-        return updateDrilldown({
-          ...drilldownItem,
+        updateDrilldown({
+          ...drilldown,
           dimType: dimension.dimensionType,
           memberCount: members.length,
           members
         });
       });
-    },
-    [dimensions]
-  );
+      return drilldown;
+    }
+  }
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     const cubeParam = params.get("cube");
@@ -4519,11 +4531,11 @@ function SelectCubeInternal(props) {
       const [dimension] = dimensions;
       if (measure && dimension) {
         updateMeasure({ ...measure, active: true });
-        const drilldowns = deriveDrilldowns(dimensions);
-        if (measure && drilldowns.length > 0) {
+        const drilldowns2 = deriveDrilldowns(dimensions);
+        if (measure && drilldowns2.length > 0) {
           updateMeasure({ ...measure, active: true });
-          for (const level of drilldowns) {
-            addDrilldown(level, dimensions);
+          for (const level of drilldowns2) {
+            createDrilldown(level, cutItems);
           }
         }
       }
@@ -4553,7 +4565,7 @@ function isSelected(selectedItem, currentItem) {
 }
 function getCube(items, table, subtopic, locale) {
   const cube = items.find(
-    (item) => getAnnotation(item, "table", locale) === table && getAnnotation(item, "subtopic", locale) === subtopic
+    (item) => item.name === table && getAnnotation(item, "subtopic", locale) === subtopic
   );
   return cube;
 }
@@ -4561,16 +4573,17 @@ function useBuildGraph(items, locale, graph, setGraph) {
   useEffect(() => {
     const graph2 = new graph_default();
     items.map((item) => {
+      const { name: name4 } = item;
       const topic = getAnnotation(item, "topic", locale);
       const subtopic = getAnnotation(item, "subtopic", locale);
-      const table = getAnnotation(item, "table", locale);
+      getAnnotation(item, "table", locale);
       const hide = getAnnotation(item, "hide_in_ui", locale);
       if (!yn(hide)) {
         graph2.addNode(topic);
         graph2.addNode(subtopic);
-        graph2.addNode(table);
+        graph2.addNode(name4);
         graph2.addEdge(topic, subtopic);
-        graph2.addEdge(subtopic, table);
+        graph2.addEdge(subtopic, name4);
       }
       return item;
     });
@@ -4590,9 +4603,12 @@ function CubeTree({
   const actions2 = useActions();
   const onSelectCube = (table, subtopic) => {
     const cube = items.find(
-      (item) => getAnnotation(item, "table", locale) === table && getAnnotation(item, "subtopic", locale) === subtopic
+      (item) => item.name === table && getAnnotation(item, "subtopic", locale) === subtopic
     );
     if (cube) {
+      actions2.resetDrilldowns({});
+      actions2.resetCuts({});
+      actions2.resetMeasures({});
       return actions2.willSetCube(cube.name);
     }
   };
@@ -4690,7 +4706,7 @@ function CubeButton({
 }) {
   const callback = useSelectCube(onSelectCube);
   const { classes } = useStyles3();
-  const table = item;
+  const table = graph.getName(item, locale);
   const subtopic = parent != null ? parent : "";
   return /* @__PURE__ */ React10__default.createElement(
     Text,
@@ -4701,14 +4717,14 @@ function CubeButton({
       maw: "100%",
       pr: "md",
       component: "a",
-      className: isSelected(selectedItem, getCube(graph.items, table, subtopic, locale)) ? `${classes.link} ${classes.linkActive}` : classes.link,
+      className: isSelected(selectedItem, getCube(graph.items, item, subtopic, locale)) ? `${classes.link} ${classes.linkActive}` : classes.link,
       sx: (t) => ({
-        background: isSelected(selectedItem, getCube(graph.items, table, subtopic, locale)) ? t.fn.primaryColor() : t.colorScheme === "dark" ? t.colors.dark[6] : t.colors.gray[3],
+        background: isSelected(selectedItem, getCube(graph.items, item, subtopic, locale)) ? t.fn.primaryColor() : t.colorScheme === "dark" ? t.colors.dark[6] : t.colors.gray[3],
         overflow: "hidden"
       }),
       onClick: callback(item, subtopic)
     },
-    item
+    table
   );
 }
 function SubtopicAccordion({
@@ -6601,7 +6617,6 @@ function createVizbuilderView(settings) {
   return VizbuilderView;
   function VizbuilderView(props) {
     const { cube, panelKey, params, result } = props;
-    console.log(result);
     const { actions: actions2, formatters } = useSettings();
     const [panelName, currentChart] = useMemo(() => `${panelKey || ""}-`.split("-"), [panelKey]);
     const resetCurrentPanel = useCallback(() => {
@@ -6612,7 +6627,7 @@ function createVizbuilderView(settings) {
         [
           {
             cube,
-            dataset: result.data.data,
+            dataset: result.data,
             params: {
               locale: params.locale || defaultLocale,
               booleans: params.booleans,
@@ -6645,7 +6660,7 @@ function createVizbuilderView(settings) {
         ],
         chartGenOptions
       ),
-      [cube, result.data.data, params]
+      [cube, result.data, params]
     );
     const content = useMemo(() => {
       const isSingleChart = charts.length === 1;

package/package.json

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