@datawheel/data-explorer 0.3.21 → 0.3.22

package/dist/main.mjs

@@ -1,4 +1,4 @@
-import { Select, createStyles, rem, keyframes, Input, Box, Text, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, UnstyledButton, Alert, Loader, Container, Title, NumberInput, Menu, ActionIcon, useMantineTheme, MantineProvider, Modal, useComponentDefaultProps, Anchor, Paper, CloseButton, Tooltip, Tabs, Switch, ThemeIcon, Drawer, Divider, Checkbox, packSx, Affix, Accordion, Popover } from '@mantine/core';
+import { Select, createStyles, rem, keyframes, Input, Box, Text, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, UnstyledButton, Alert, Loader, Container, Title, NumberInput, Menu, ActionIcon, useMantineTheme, MantineProvider, Modal, useComponentDefaultProps, Anchor, Paper, TextInput, CloseButton, Tooltip, Tabs, Switch, ThemeIcon, Drawer, Divider, Checkbox, packSx, Affix, Accordion, Popover } from '@mantine/core';
 import { useClipboard, useDebouncedState, useClickOutside, useFullscreen, useMediaQuery, useDisclosure } from '@mantine/hooks';
 import { IconWorld, IconExternalLink, IconClipboard, IconAlertCircle, IconAlertTriangle, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconChevronLeft, IconChevronRight, IconSearch, IconLanguage, IconTrash, IconInfoCircleFilled, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconBox, IconClock, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
 import * as React6 from 'react';
@@ -8832,10 +8832,10 @@ var createContext3 = (name4) => {
 // src/hooks/buildGraph.tsx
 init_esm_shims();
 function useBuildGraph(locale) {
-  const items = useSelector(selectOlapCubeItems);
+  const cubes = useSelector(selectOlapCubeItems);
   const graph = useMemo(() => {
     const graph2 = new graph_default();
-    const filteredItems = items.map((item) => {
+    const filteredItems = cubes.map((item) => {
       const { name: name4 } = item;
       const topic = getAnnotation(item, "topic", locale);
       const topic_order = getAnnotation(item, "topic_order", locale);
@@ -8857,14 +8857,13 @@ function useBuildGraph(locale) {
     }).filter(Boolean);
     graph2.items = filteredItems;
     return graph2;
-  }, [items, locale]);
+  }, [cubes, locale]);
   return graph;
 }
 
 // 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);
@@ -8877,32 +8876,22 @@ function useCubeSearch(input, graph) {
       results: [],
       map: /* @__PURE__ */ new Map()
     };
-  }, [input, graph]);
+  }, [graph, input, locale]);
   return results;
 }
 
 // src/components/SideBar.tsx
 var [useSideBar, Provider] = createContext3("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);
-  return /* @__PURE__ */ React6__default.createElement(
-    Provider,
-    {
-      ...props,
-      value: {
-        expanded,
-        graph,
-        setExpanded,
-        results,
-        input,
-        map,
-        setInput
-      }
-    }
+  const { results, map } = useCubeSearch(graph, input, props.locale);
+  const value = useMemo(
+    () => ({ expanded, setExpanded, input, setInput, graph, results, map }),
+    [expanded, input, setInput, graph, results, map]
   );
+  return /* @__PURE__ */ React6__default.createElement(Provider, { value }, props.children);
 }
 function SideBarControlBtn({ actionIconProps = {} }) {
   const { expanded, setExpanded } = useSideBar();
@@ -8935,7 +8924,7 @@ function SideBarControlBtnFixed() {
   return /* @__PURE__ */ React6__default.createElement(Affix, { position: { left: "1rem", bottom: 150 } }, /* @__PURE__ */ React6__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})`);
@@ -8989,7 +8978,7 @@ function SideBar(props) {
           width: expanded ? "100%" : 0
         }
       },
-      /* @__PURE__ */ React6__default.createElement(Auto, null)
+      /* @__PURE__ */ React6__default.createElement(CubeSearchInput, { expanded, input, setInput })
     ), /* @__PURE__ */ React6__default.createElement(Box, { sx: { flexGrow: 1 } }))), /* @__PURE__ */ React6__default.createElement(
       ScrollArea,
       {
@@ -9026,7 +9015,7 @@ function SideBar(props) {
   ));
 }
 var SideBar_default = SideBar;
-function SideBarItem({ children }) {
+function SideBarItem(props) {
   const { expanded } = useSideBar();
   return /* @__PURE__ */ React6__default.createElement(
     Box,
@@ -9038,22 +9027,24 @@ 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 ref = useRef(null);
   return /* @__PURE__ */ React6__default.createElement(
-    Input,
+    TextInput,
     {
+      ref,
       icon: /* @__PURE__ */ React6__default.createElement(IconSearch, null),
       id: "dex-search",
       radius: "xl",
       size: "md",
       placeholder: t("params.label_search"),
       defaultValue: input,
-      onInput: (e) => setInput(e.currentTarget.value),
+      onInput: useCallback((e) => setInput(e.currentTarget.value), [setInput]),
       styles: {
         wrapper: {
           width: expanded ? "100%" : 0,
@@ -9068,58 +9059,65 @@ function Auto() {
         CloseButton,
         {
           "aria-label": "Clear input",
-          onClick: () => setInput(""),
+          onClick: useCallback(() => {
+            setInput("");
+            if (ref.current) {
+              ref.current.value = "";
+            }
+          }, [setInput]),
           style: { display: input ? void 0 : "none" }
         }
       )
     }
   );
 }
+CubeSearchInput.displayName = "CubeSearchInput";
 
 // src/components/Results.tsx
 function Results(props) {
   const { onSelectCube, graph, selectedItem, locale, getCube: getCube2, isSelected: isSelected2, isSelectionInProgress } = props;
   const { classes } = useStyles();
-  const { setExpanded, setInput, map } = useSideBar();
-  const result = [];
-  if (map) {
-    for (let [key, items] of map) {
-      const [topic, subtopic] = key.split(" - ");
-      const component = /* @__PURE__ */ React6__default.createElement("div", { key }, /* @__PURE__ */ React6__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) {
-            onSelectCube(item, subtopic);
-            setExpanded(false);
-            setInput("");
-          }
-        };
-        return /* @__PURE__ */ React6__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__ */ React6__default.createElement(Box, { px: "sm" }, result);
+  const { map, setExpanded, setInput } = useSideBar();
+  const results = [...map].flatMap((entry) => {
+    const [key, items] = entry;
+    const [topic, subtopic] = key.split(" - ");
+    const topicResults = filterMap(items, (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) {
+          onSelectCube(item, subtopic);
+          setExpanded(false);
+          setInput("");
+        }
+      };
+      return /* @__PURE__ */ React6__default.createElement(
+        Text,
+        {
+          key: cube.name,
+          component: "a",
+          fz: "xs",
+          className: isItemSelected ? `${classes.link} ${classes.linkActive}` : classes.link,
+          sx: (t) => ({
+            opacity: isSelectionInProgress ? 0.5 : 1,
+            cursor: isSelectionInProgress ? "not-allowed" : "pointer",
+            transition: "opacity 0.2s ease",
+            pointerEvents: isSelectionInProgress ? "none" : "auto"
+          }),
+          onClick: handleClick
+        },
+        table
+      );
+    });
+    if (topicResults.length === 0) return [];
+    const label = `${topic} - ${subtopic}`;
+    return [/* @__PURE__ */ React6__default.createElement(Divider, { key: label, my: "xs", label }), ...topicResults];
+  });
+  return /* @__PURE__ */ React6__default.createElement(Box, { px: "sm" }, results.length ? results : "No results");
 }
+Results.displayName = "SearchResults";
 var useStyles = createStyles((t) => ({
   link: {
     ...t.fn.focusStyles(),
@@ -9144,7 +9142,6 @@ var useStyles = createStyles((t) => ({
     fontWeight: 500
   }
 }));
-var Results_default = Results;
 
 // src/components/SelectCubes.tsx
 var EMPTY_RESPONSE = {
@@ -9234,9 +9231,9 @@ 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;
 }
@@ -9284,7 +9281,7 @@ function CubeTree({
     return /* @__PURE__ */ React6__default.createElement(Text, { ta: "center", fz: "xs", my: "sm", italic: true }, t("params.label_no_results"));
   }
   return map && map.size > 0 ? /* @__PURE__ */ React6__default.createElement(
-    Results_default,
+    Results,
     {
       onSelectCube,
       selectedItem,

package/package.json

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