@datawheel/data-explorer 1.0.21 → 1.2.0

package/dist/main.mjs

@@ -1,4 +1,4 @@
-import { keyframes, createStyles, Select, rem, Input, Box, Text, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, Alert, MantineProvider, Modal, Space, useComponentDefaultProps, Paper, Anchor, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, Drawer, Divider, Checkbox, packSx, Affix, Popover } from '@mantine/core';
+import { keyframes, createStyles, Select, Center, Text, rem, Input, Box, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, Alert, MantineProvider, Modal, Space, useComponentDefaultProps, Paper, Anchor, Skeleton, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, Divider, Drawer, Checkbox, packSx, Affix, Popover } from '@mantine/core';
 import { useClipboard, useFullscreen, useDebouncedState, useMediaQuery, useDisclosure } from '@mantine/hooks';
 import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconWorldWww, IconClipboardCheck, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconBox, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconLanguage, IconTrash, IconInfoCircleFilled, IconChevronLeft, IconChevronRight, IconSearch, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
 import * as React13 from 'react';
@@ -12,6 +12,7 @@ import { MRT_ProgressBar, flexRender, MRT_TableBodyCell, MRT_ToolbarAlertBanner,
 import { formatAbbreviate, format } from 'd3plus-format';
 import { QueryClient, useQuery, QueryClientProvider, keepPreviousData, useMutation } from '@tanstack/react-query';
 import _, { debounce } from 'lodash';
+import { debounce as debounce$1 } from 'lodash-es';
 import { TourProvider, useTour } from '@reactour/tour';
 import yn from 'yn';
 import { matchSorter } from 'match-sorter';
@@ -2217,7 +2218,8 @@ function useServerSchema() {
           url: serverURL
         };
       }
-    }
+    },
+    staleTime: 3e5
   });
 }
 var useMeasureItems = () => {
@@ -2285,6 +2287,7 @@ function useFetchQuery(queryParams, queryLink, options) {
   const { tesseract } = useLogicLayer();
   const { limit = 0, offset = 0, withoutPagination = false } = options || {};
   const key = withoutPagination ? ["table", queryLink, "withoutPagination"] : ["table", queryLink];
+  const { data: schema } = useServerSchema();
   return useQuery({
     queryKey: key,
     queryFn: async () => {
@@ -2307,10 +2310,10 @@ function useFetchQuery(queryParams, queryLink, options) {
         if (!response.ok) {
           throw new Error(`Backend Error: ${content.detail}`);
         }
-        const cubeData = await tesseract.fetchCube({
-          cube: queryParams.cube,
-          locale: queryParams.locale
-        });
+        if (!(schema == null ? void 0 : schema.cubeMap[queryParams.cube])) {
+          throw new Error("Cube not found");
+        }
+        const cubeData = schema == null ? void 0 : schema.cubeMap[queryParams.cube];
         return {
           data: content.data,
           page: content.page,
@@ -2979,31 +2982,6 @@ function getFiltersConditions(fn, value) {
   ]);
   return (_a = comparisonMap.get(fn)) == null ? void 0 : _a(value);
 }
-var TableRefreshContext = React13__default.createContext(void 0);
-function TableRefreshProvider({
-  children,
-  serverURL
-}) {
-  const [isQueryEnabled, setQueryEnabled] = useState(true);
-  useEffect(() => {
-    setQueryEnabled(true);
-  }, [serverURL]);
-  const value = useMemo(
-    () => ({
-      isQueryEnabled,
-      setQueryEnabled
-    }),
-    [isQueryEnabled]
-  );
-  return /* @__PURE__ */ React13__default.createElement(TableRefreshContext.Provider, { value }, children);
-}
-function useTableRefresh() {
-  const context = useContext(TableRefreshContext);
-  if (context === void 0) {
-    throw new Error("useTableRefresh must be used within a TableRefreshProvider");
-  }
-  return context;
-}
 function useTableData({ pagination }) {
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const queryLink = queryItem.link;
@@ -3041,32 +3019,6 @@ function useTable({
   const { limit, offset } = useSelector$1(selectPaginationParams);
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const updateURL = useUpdateUrl();
-  const pagination = {
-    pageIndex: Math.floor(offset / (limit || 1)),
-    pageSize: limit
-  };
-  const handlePaginationChange = (updatedPagination) => {
-    const paginationUpdated = updatedPagination(pagination);
-    actions2.updatePagination({
-      limit: paginationUpdated.pageSize,
-      offset: paginationUpdated.pageIndex * paginationUpdated.pageSize
-    });
-    updateURL({
-      ...queryItem,
-      params: {
-        ...queryItem.params,
-        pagiOffset: paginationUpdated.pageIndex * paginationUpdated.pageSize,
-        pagiLimit: paginationUpdated.pageSize
-      }
-    });
-  };
-  const finalUniqueKeys = useMemo(
-    () => [
-      ...measures.map((m) => m.active ? m.name : null),
-      ...drilldowns.map((d) => d.active ? d.level : null)
-    ].filter((a) => a !== null),
-    [measures, drilldowns]
-  );
   const handlerCreateMeasure = useCallback((data2) => {
     const measure = buildMeasure(data2);
     actions2.updateMeasure(measure);
@@ -3096,6 +3048,32 @@ function useTable({
     handlerCreateFilter,
     handlerCreateMeasure
   ]);
+  const pagination = {
+    pageIndex: Math.floor(offset / (limit || 1)),
+    pageSize: limit
+  };
+  const handlePaginationChange = (updatedPagination) => {
+    const paginationUpdated = updatedPagination(pagination);
+    actions2.updatePagination({
+      limit: paginationUpdated.pageSize,
+      offset: paginationUpdated.pageIndex * paginationUpdated.pageSize
+    });
+    updateURL({
+      ...queryItem,
+      params: {
+        ...queryItem.params,
+        pagiOffset: paginationUpdated.pageIndex * paginationUpdated.pageSize,
+        pagiLimit: paginationUpdated.pageSize
+      }
+    });
+  };
+  const finalUniqueKeys = useMemo(
+    () => [
+      ...measures.map((m) => m.active ? m.name : null),
+      ...drilldowns.map((d) => d.active ? d.level : null)
+    ].filter((a) => a !== null),
+    [measures, drilldowns]
+  );
   const { isLoading, isFetching, isError, data } = useTableData({
     columns: finalUniqueKeys,
     pagination,
@@ -3333,6 +3311,7 @@ function useTable({
     manualFiltering: true,
     manualPagination: true,
     manualSorting: true,
+    enableRowVirtualization: false,
     rowCount: totalRowCount,
     state: {
       isLoading,
@@ -3367,6 +3346,7 @@ function TableView({
   const viewport = useRef(null);
   const rowRef = useRef(null);
   const url = (result == null ? void 0 : result.url) || "";
+  useSelector$1(selectLocale);
   useEffect(() => {
     var _a;
     (_a = viewport.current) == null ? void 0 : _a.scrollTo({ top: 0, behavior: "smooth" });
@@ -3493,8 +3473,9 @@ var ColumnFilterCell = ({
   if (isNumeric) {
     return /* @__PURE__ */ React13__default.createElement(NumericFilter, { header });
   }
+  return null;
 };
-function NumericFilter({ header }) {
+var NumericFilter = ({ header }) => {
   const filters = useSelector$1(selectFilterItems);
   const { translate: t } = useTranslation();
   const filter = filters.find((f) => f.measure === header.column.id);
@@ -3504,11 +3485,13 @@ function NumericFilter({ header }) {
     const isBetween = filterFn === "between";
     return /* @__PURE__ */ React13__default.createElement(Flex, { gap: "xs", style: { fontWeight: "normal" } }, /* @__PURE__ */ React13__default.createElement(Box, { sx: { flex: "1 1 auto" } }, isBetween ? /* @__PURE__ */ React13__default.createElement(MinMax, { filter, hideControls: true }) : /* @__PURE__ */ React13__default.createElement(NumberInputComponent, { text, filter })), /* @__PURE__ */ React13__default.createElement(Box, { sx: { alignSelf: "flex-end" } }, /* @__PURE__ */ React13__default.createElement(FilterFnsMenu, { filter })));
   }
-}
-function MultiFilter({ header }) {
+  return null;
+};
+var MultiFilter = ({ header }) => {
   const { translate: t } = useTranslation();
   const cutItems = useSelector$1(selectCutItems);
   const drilldownItems = useSelector$1(selectDrilldownItems);
+  useSelector$1(selectLocale);
   header.column.id;
   const localeLabel = header.column.columnDef.header;
   const drilldown = drilldownItems.find((d) => d.level === header.column.id);
@@ -3540,7 +3523,8 @@ function MultiFilter({ header }) {
     [actions2]
   );
   const query = useSelector$1(selectCurrentQueryItem);
-  return drilldown && cut && /* @__PURE__ */ React13__default.createElement(Box, { pt: "md", style: { fontWeight: "normal" } }, /* @__PURE__ */ React13__default.createElement(
+  if (!drilldown || !cut) return null;
+  return /* @__PURE__ */ React13__default.createElement(Box, { pt: "md", style: { fontWeight: "normal" } }, /* @__PURE__ */ React13__default.createElement(
     MultiSelect,
     {
       sx: { flex: "1 1 100%" },
@@ -3569,10 +3553,10 @@ function MultiFilter({ header }) {
       size: "xs"
     }
   ));
-}
-var NoRecords = () => {
-  return /* @__PURE__ */ React13__default.createElement(Center, { style: { height: "calc(100% - 210px)" } }, /* @__PURE__ */ React13__default.createElement(Text, { size: "xl", color: "gray", italic: true }, "No records to display."));
 };
+var NoRecords = React13__default.memo(() => {
+  return /* @__PURE__ */ React13__default.createElement(Center, { style: { height: "calc(100% - 210px)" } }, /* @__PURE__ */ React13__default.createElement(Text, { size: "xl", color: "gray", italic: true }, "No records to display."));
+});
 TableView.displayName = "TesseractExplorer:TableView";
 var styles = (t) => ({
   header: {
@@ -3898,7 +3882,7 @@ function NumberInputComponent({ text, filter }) {
   const updateUrl = useUpdateUrl();
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const debouncedUpdateUrl = useMemo(
-    () => debounce((query) => {
+    () => debounce$1((query) => {
       updateUrl(query);
     }, 1e3),
     []
@@ -3935,7 +3919,6 @@ function NumberInputComponent({ text, filter }) {
 }
 var MinMax = ({ filter, hideControls, ...rest }) => {
   const actions2 = useActions();
-  useTableRefresh();
   function onInputChangeMinMax(props) {
     const { filter: filter2, min: min2, max: max2 } = props;
     const conditions = getFiltersConditions(getFilterFn(filter2) || "greaterThan", [Number(min2), Number(max2)]) || {};
@@ -4259,12 +4242,7 @@ function QueryProvider({ children, defaultCube }) {
   function fetchMembers(level, localeStr, cubeName) {
     return tesseract.fetchMembers({ request: { cube: cubeName || "", level, locale: localeStr } });
   }
-  const {
-    run: runFetchMembers,
-    data: membersData,
-    isSuccess: isMembersSuccess,
-    isLoading: membersLoading
-  } = useAsync();
+  const { run: runFetchMembers, isLoading: membersLoading } = useAsync();
   const [transintionLocaleLoading, setTransintionLocaleLoading] = React13__default.useState(false);
   useEffect(() => {
     if (schemaLoading) {
@@ -4612,14 +4590,14 @@ init_esm_shims();
 init_esm_shims();
 var createContext4 = (name4) => {
   const Context = React13__default.createContext(void 0);
-  const useContext5 = () => {
+  const useContext4 = () => {
     const ctx = React13__default.useContext(Context);
     if (ctx === void 0) {
       throw new Error(`useContext for must be inside a ${name4}Provider with a value`);
     }
     return ctx;
   };
-  return [useContext5, Context.Provider];
+  return [useContext4, Context.Provider];
 };
 
 // src/hooks/buildGraph.tsx
@@ -4804,8 +4782,7 @@ function useBuildGraph(locale) {
 
 // src/hooks/cubeSearch.tsx
 init_esm_shims();
-function useCubeSearch(input, graph) {
-  const { code: locale } = useSelector(selectLocale);
+function useCubeSearch(graph, input, locale) {
   const results = useMemo(() => {
     if (graph.items.length > 0) {
       const { matches, map } = graph.filter(locale, input);
@@ -4818,17 +4795,17 @@ function useCubeSearch(input, graph) {
       results: [],
       map: /* @__PURE__ */ new Map()
     };
-  }, [input, graph]);
+  }, [graph, input, locale]);
   return results;
 }
 
 // src/components/SideBar.tsx
 var [useSideBar, Provider] = createContext4("SideBar");
 function SideBarProvider(props) {
-  const [input, setInput] = useDebouncedState("", 200);
+  const [input, setInput] = useDebouncedState("", 150, { leading: true });
   const [expanded, setExpanded] = useState(true);
   const graph = useBuildGraph(props.locale);
-  const { results, map } = useCubeSearch(input, graph);
+  const { results, map } = useCubeSearch(graph, input, props.locale);
   return /* @__PURE__ */ React13__default.createElement(
     Provider,
     {
@@ -4876,7 +4853,7 @@ function SideBarControlBtnFixed() {
   return /* @__PURE__ */ React13__default.createElement(Affix, { position: { left: "1rem", bottom: 150 } }, /* @__PURE__ */ React13__default.createElement(SideBarControlBtn, { actionIconProps }));
 }
 function SideBar(props) {
-  const { expanded, setExpanded } = useSideBar();
+  const { expanded, input, setExpanded, setInput } = useSideBar();
   const { translate: t } = useTranslation();
   const theme = useMantineTheme();
   const smallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
@@ -4930,7 +4907,7 @@ function SideBar(props) {
           width: expanded ? "100%" : 0
         }
       },
-      /* @__PURE__ */ React13__default.createElement(Auto, null)
+      /* @__PURE__ */ React13__default.createElement(CubeSearchInput, { expanded, input, setInput })
     ), /* @__PURE__ */ React13__default.createElement(Box, { sx: { flexGrow: 1 } }))), /* @__PURE__ */ React13__default.createElement(
       ScrollArea,
       {
@@ -4967,7 +4944,7 @@ function SideBar(props) {
   ));
 }
 var SideBar_default = SideBar;
-function SideBarItem({ children }) {
+function SideBarItem(props) {
   const { expanded } = useSideBar();
   return /* @__PURE__ */ React13__default.createElement(
     Box,
@@ -4979,15 +4956,15 @@ function SideBarItem({ children }) {
         transition: "width 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
       }
     },
-    children
+    props.children
   );
 }
-function Auto() {
+function CubeSearchInput(props) {
+  const { expanded, input, setInput } = props;
   const { translate: t } = useTranslation();
-  const { expanded, input, setInput } = useSideBar();
   const [inputValue, setInputValue] = useState(input);
   return /* @__PURE__ */ React13__default.createElement(
-    Input,
+    TextInput,
     {
       icon: /* @__PURE__ */ React13__default.createElement(IconSearch, null),
       id: "dex-search",
@@ -5030,49 +5007,48 @@ init_esm_shims();
 // src/components/Results.tsx
 init_esm_shims();
 function Results(props) {
-  const { graph, selectedItem, locale, getCube: getCube2, isSelected: isSelected2, isSelectionInProgress } = props;
+  const { graph, selectedItem, locale, getCube: getCube2, isSelected: isSelected2 } = props;
   const { classes } = useStyles3();
   const { setExpanded, setInput, map } = useSideBar();
   const { onChangeCube } = useQueryItem();
-  const result = [];
-  if (map) {
-    for (let [key, items] of map) {
-      const [topic, subtopic] = key.split(" - ");
-      const component = /* @__PURE__ */ React13__default.createElement("div", { key }, /* @__PURE__ */ React13__default.createElement(Divider, { my: "xs", label: key }), items.map((item) => {
-        const cube = getCube2(graph.items, item, subtopic, locale);
-        if (!cube) return null;
-        const table = getAnnotation(cube, "table", locale);
-        const isItemSelected = isSelected2(selectedItem, cube);
-        const handleClick = () => {
-          if (!isSelectionInProgress) {
-            onChangeCube(item, subtopic);
-            setExpanded(false);
-            setInput("");
-          }
-        };
-        return /* @__PURE__ */ React13__default.createElement(
-          Text,
-          {
-            key: cube.name,
-            component: "a",
-            fz: "xs",
-            className: isItemSelected ? `${classes.link} ${classes.linkActive}` : classes.link,
-            sx: (theme) => ({
-              opacity: isSelectionInProgress ? 0.5 : 1,
-              cursor: isSelectionInProgress ? "not-allowed" : "pointer",
-              transition: "opacity 0.2s ease",
-              pointerEvents: isSelectionInProgress ? "none" : "auto"
-            }),
-            onClick: handleClick
-          },
-          table
-        );
-      }));
-      result.push(component);
-    }
-  }
-  return /* @__PURE__ */ React13__default.createElement(Box, { px: "sm" }, result);
+  const results = [...map].flatMap((entry) => {
+    const [key, items] = entry;
+    const [topic, subtopic] = key.split(" - ");
+    const topicResults = items.map((item) => {
+      const cube = getCube2(graph.items, item, subtopic, locale);
+      if (!cube) return null;
+      const table = getAnnotation(cube, "table", locale);
+      const isItemSelected = isSelected2(selectedItem, cube);
+      const handleClick = () => {
+        onChangeCube(item, subtopic);
+        setExpanded(false);
+        setInput("");
+      };
+      return /* @__PURE__ */ React13__default.createElement(
+        Text,
+        {
+          key: cube.name,
+          component: "a",
+          fz: "xs",
+          className: isItemSelected ? `${classes.link} ${classes.linkActive}` : classes.link,
+          sx: (theme) => ({
+            opacity: 1,
+            cursor: "pointer",
+            transition: "opacity 0.2s ease",
+            pointerEvents: "auto"
+          }),
+          onClick: handleClick
+        },
+        table
+      );
+    }).filter(Boolean);
+    if (topicResults.length === 0) return [];
+    const label = `${topic} - ${subtopic}`;
+    return [/* @__PURE__ */ React13__default.createElement(Divider, { key: label, my: "xs", label }), ...topicResults];
+  });
+  return /* @__PURE__ */ React13__default.createElement(Box, { px: "sm" }, results.length ? results : "No results");
 }
+Results.displayName = "SearchResults";
 var useStyles3 = createStyles((t) => ({
   link: {
     ...t.fn.focusStyles(),
@@ -5097,12 +5073,18 @@ var useStyles3 = createStyles((t) => ({
     fontWeight: 500
   }
 }));
-var Results_default = Results;
 
 // src/components/SelectCubes.tsx
+var loadingCubes = Array.from({ length: 10 }, (v, index) => ({
+  id: `loading-cube-${index}`
+}));
 function SelectCubes({ locale }) {
   const items = useCubeItems();
   const selectedItem = useSelectedItem();
+  const { schemaLoading } = useQueryItem();
+  if (schemaLoading) {
+    return loadingCubes.map((cube) => /* @__PURE__ */ React13__default.createElement(Skeleton, { m: 15, h: 40, w: "100%", animate: true, key: cube.id }));
+  }
   if (items.length === 1) {
     return null;
   }
@@ -5132,20 +5114,18 @@ function isSelected(selectedItem, currentItem) {
     return selectedItem.name === currentItem.name;
   }
 }
-function getCube(items, table, subtopic, locale) {
+function getCube(items, name4, subtopic, locale) {
   const cube = items.find(
-    (item) => item.name === table && getAnnotation(item, "subtopic", locale) === subtopic
+    (item) => item.name === name4 && getAnnotation(item, "subtopic", locale) === subtopic
   );
   return cube;
 }
 function CubeTree({
-  items,
   locale,
   selectedItem
 }) {
   const { map, input, graph } = useSideBar();
   const { translate: t } = useTranslation();
-  const [isSelectionInProgress, setIsSelectionInProgress] = useState(false);
   let topics = useMemo(
     () => getKeys2(graph.items, "topic", locale),
     [graph.items, locale]
@@ -5154,25 +5134,15 @@ function CubeTree({
     return /* @__PURE__ */ React13__default.createElement(Text, { ta: "center", fz: "xs", my: "sm", italic: true }, t("params.label_no_results"));
   }
   return map && map.size > 0 ? /* @__PURE__ */ React13__default.createElement(
-    Results_default,
+    Results,
     {
       selectedItem,
       getCube,
       isSelected,
       graph,
-      locale,
-      isSelectionInProgress
-    }
-  ) : graph.items.length > 0 && /* @__PURE__ */ React13__default.createElement(
-    RootAccordions,
-    {
-      items: topics,
-      graph,
-      selectedItem,
-      locale,
-      isSelectionInProgress
+      locale
     }
-  );
+  ) : graph.items.length > 0 && /* @__PURE__ */ React13__default.createElement(RootAccordions, { items: topics, graph, selectedItem, locale });
 }
 function useAccordionValue(key, locale) {
   const selectedItem = useSelectedItem();
@@ -5185,7 +5155,7 @@ function useAccordionValue(key, locale) {
   }, [key, selectedItem, locale]);
   return { value, setValue };
 }
-function RootAccordions({ items, graph, locale, selectedItem, isSelectionInProgress }) {
+function RootAccordions({ items, graph, locale, selectedItem }) {
   const { value, setValue } = useAccordionValue("topic", locale);
   return /* @__PURE__ */ React13__default.createElement(
     Accordion,
@@ -5226,8 +5196,7 @@ function RootAccordions({ items, graph, locale, selectedItem, isSelectionInProgr
           items: graph.adjList[item],
           key: item,
           locale,
-          selectedItem,
-          isSelectionInProgress
+          selectedItem
         }
       )));
     })
@@ -5277,8 +5246,7 @@ function SubtopicAccordion({
   graph,
   parent,
   selectedItem,
-  locale,
-  isSelectionInProgress
+  locale
 }) {
   const { value, setValue } = useAccordionValue("subtopic", locale);
   return /* @__PURE__ */ React13__default.createElement(
@@ -5317,8 +5285,7 @@ function SubtopicAccordion({
           item: table,
           locale,
           selectedItem,
-          parent: item,
-          isSelectionInProgress
+          parent: item
         }
       ))));
     })
@@ -6361,7 +6328,7 @@ function AppProviders({ children }) {
     updateUrl({ ...queryItem, params: { ...queryItem.params, locale: defaultLocale } });
     setLocale(defaultLocale);
   }, [defaultLocale, setLocale, actions2]);
-  return /* @__PURE__ */ React13.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React13.createElement(TableRefreshProvider, { serverURL }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React13.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React13.createElement(
     LogicLayerProvider,
     {
       serverURL,
@@ -6369,7 +6336,7 @@ function AppProviders({ children }) {
       defaultDataLocale
     },
     /* @__PURE__ */ React13.createElement(QueryProvider, { defaultCube, serverURL }, children)
-  )));
+  ));
 }
 var defaultTourConfig = {
   extraSteps: [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "1.0.21",
+  "version": "1.2.0",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [
@@ -8,11 +8,14 @@
     "README.md"
   ],
   "scripts": {
-    "prepublishOnly": "npm run build",
-    "build": "tsup",
-    "dev": "vite serve",
-    "preview": "vite preview",
-    "static": "vite build --mode staging"
+    "dev": "vite",
+    "build:app": "vite build --mode staging",
+    "build:lib": "tsup",
+    "build": "npm run build:lib && npm run build:app",
+    "prepublishOnly": "npm run build:lib",
+    "pretest": "npm run build:lib",
+    "start": "vite serve",
+    "test": "echo 'no tests defined yet'"
   },
   "dependencies": {
     "@datawheel/use-translation": "^0.2.0",
@@ -30,6 +33,7 @@
     "iso-639-1": "^2.1.0",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
+    "lodash-es": "^4.17.21",
     "mantine-react-table": "^1.3.0",
     "match-sorter": "^6.3.4",
     "postcss-modules": "^6.0.0",
@@ -72,4 +76,4 @@
     "vite": "^5.0.0",
     "wrangler": "^3.59.0"
   }
-}
+}