@datawheel/data-explorer 0.2.2 → 0.2.3

package/dist/main.js

@@ -3,7 +3,7 @@ import { useClipboard, useClickOutside, useFullscreen, useMediaQuery, useDebounc
 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';
@@ -1565,7 +1565,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 +1574,6 @@ function calcMaxMemberCount(query, params, dispatch) {
           memberCount: members.length,
           members
         };
-        dispatch(actions.updateDrilldown(ddd));
         createCutHandler(params.cuts, ddd, dispatch);
       }
       return members.length;
@@ -1591,6 +1590,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 +1617,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 +1755,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 +2713,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 +2726,7 @@ function DrillDownOptions() {
         activeItems
       }
     )),
-    [dimensions, activeItems, createCutHandler2]
+    [dimensions, activeItems]
   );
   return options;
 }
@@ -2803,12 +2784,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 +2803,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 +2841,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 +2849,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 +3042,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 +3152,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)
@@ -3205,7 +3198,8 @@ function usePrefetch({
   columns,
   cuts,
   filters,
-  pagination
+  pagination,
+  isFetching
 }) {
   const queryClient2 = useQueryClient();
   const actions2 = useActions();
@@ -3223,7 +3217,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 +3230,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 +3270,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,8 +3283,6 @@ function useTable({
     });
   }, [measuresMap, measuresOlap, filtersMap, filterItems]);
   const { isLoading, isFetching, isError, data, isPlaceholderData } = useTableData({
-    offset,
-    limit,
     columns: finalUniqueKeys,
     filters: filterItems.filter(isActiveItem),
     cuts: itemsCuts.filter(isActiveCut),
@@ -3309,14 +3301,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 +3318,7 @@ function useTable({
     const indexColumn = {
       id: "#",
       Header: "#",
-      Cell: ({ row }) => row.index + 1,
+      Cell: ({ row }) => row.index + 1 + offset,
       minWidth: 50,
       maxWidth: 50,
       width: 50,
@@ -3979,6 +3972,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 +4006,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 };
@@ -4383,12 +4382,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 +4397,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 +4442,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 +4456,7 @@ function Results(props) {
               setInput("");
             }
           },
-          item
+          table
         );
       }));
       result.push(component);
@@ -4485,32 +4501,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 +4541,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 +4575,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 +4583,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 +4613,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 +4716,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 +4727,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({

package/package.json

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