@datawheel/data-explorer 1.1.15 → 1.1.17

package/dist/main.d.mts

@@ -1102,6 +1102,13 @@ declare function ExplorerComponent<Locale extends string>(props: {
      * @default "en"
      */
     defaultLocale?: Locale;
+    /**
+     * The locale to use for sorting cube items within the SelectCubes component.
+     * This controls the sorting of subtopics and cube buttons.
+     * If not set, the defaultLocale will be used.
+     * @default undefined
+     */
+    sortLocale?: string;
     /**
      * Specifies which property should be used to filter elements in the member
      * selection control of the Cuts parameter area.

package/dist/main.mjs

@@ -1990,11 +1990,11 @@ function QueryProvider({ children, defaultCube }) {
             if (currentDrilldown && currentDrilldown.members && currentDrilldown.members.length > 0 && !localeChanged && cube === queryItem.params.cube) {
               return Promise.resolve({
                 drilldown: currentDrilldown,
-                cut: buildCut({ ...currentDrilldown, active: false })
+                cut: buildCut({ ...currentDrilldown, active: false, members: [] })
               });
             } else {
               return fetchMembers(dd.level, newQuery == null ? void 0 : newQuery.params.locale, cube).then((levelMeta) => {
-                const cut = buildCut({ ...dd, active: false });
+                const cut = buildCut({ ...dd, active: false, members: [] });
                 return {
                   drilldown: {
                     ...dd,
@@ -3388,53 +3388,38 @@ function FullScreenSVG() {
 function isColumnSorted(column, key) {
   return column == key;
 }
-var propertiesUpdateHandler = (actions2, item, activeProps) => {
-  const properties = item.properties.map(
-    (prop) => buildProperty({
-      ...prop,
-      active: activeProps.includes(prop.key)
-    })
-  );
-  actions2.updateDrilldown({ ...item, properties });
-};
-var removeColumn = (actions2, entity, measures, drilldowns, type, queryItem, updateURL) => {
+var removeColumn = (queryItem, entity) => {
   const newQuery = buildQuery(cloneDeep(queryItem));
+  const params = newQuery.params;
   if ("aggregator" in entity) {
-    const measure = measures.find((d) => d.name === entity.name);
+    const measure = params.measures[entity.name];
     if (measure) {
-      const newMeasure = { ...measure, active: false };
-      actions2.updateMeasure(newMeasure);
-      newQuery.params.measures[newMeasure.name] = newMeasure;
-      updateURL({
-        ...newQuery,
-        params: {
-          ...newQuery.params
-        }
-      });
+      params.measures[entity.name] = { ...measure, active: false };
+      return newQuery;
     }
-  }
-  if ("depth" in entity) {
-    const drilldown = drilldowns.find((d) => d.level === entity.name);
+  } else if ("depth" in entity) {
+    const cut = params.cuts[entity.name];
+    if (cut) {
+      params.cuts[cut.key] = { ...cut, active: false };
+    }
+    const drilldown = params.drilldowns[entity.name];
     if (drilldown) {
-      const newDrilldown = { ...drilldown, active: false };
-      actions2.updateDrilldown(newDrilldown);
-      newQuery.params.drilldowns[newDrilldown.key] = newDrilldown;
-      updateURL({
-        ...newQuery,
-        params: {
-          ...newQuery.params
-        }
-      });
+      params.drilldowns[drilldown.key] = { ...drilldown, active: false };
+      return newQuery;
     }
-  }
-  if (isProperty(type)) {
-    const activeDrilldowns = drilldowns.filter((d) => d.active);
-    const drilldown = activeDrilldowns.find(
-      (dd) => dd.properties.some((property) => property.name === entity.name)
+  } else if ("level" in entity) {
+    const mapPropertyToDrilldown = Object.fromEntries(
+      Object.values(params.drilldowns).filter((drilldown2) => drilldown2.active).flatMap((drilldown2) => drilldown2.properties.map((prop) => [prop.name, drilldown2]))
     );
-    const activeProperties = drilldown == null ? void 0 : drilldown.properties.filter((p) => p.active).filter((p) => p.name !== entity.name).filter((p) => p.active).map((p) => p.name);
-    if (drilldown && activeProperties) {
-      propertiesUpdateHandler(actions2, drilldown, activeProperties);
+    const drilldown = mapPropertyToDrilldown[entity.name];
+    if (drilldown) {
+      params.drilldowns[drilldown.key] = {
+        ...drilldown,
+        properties: drilldown.properties.map(
+          (prop) => prop.name === entity.name ? { ...prop, active: false } : prop
+        )
+      };
+      return newQuery;
     }
   }
 };
@@ -3738,15 +3723,11 @@ function useTable({
                 key: `remove-${column2.columnDef.header}`,
                 disabled: !showTrashIcon(finalKeys, entityType) || isLoading || isFetching,
                 onClick: () => {
-                  removeColumn(
-                    actions2,
-                    entity,
-                    measures,
-                    drilldowns,
-                    entityType,
-                    queryItem,
-                    updateURL
-                  );
+                  const nextQueryItem = removeColumn(queryItem, entity);
+                  if (nextQueryItem) {
+                    actions2.resetAllParams(nextQueryItem.params);
+                    updateURL(nextQueryItem);
+                  }
                 },
                 showTooltip: !showTrashIcon(finalKeys, entityType),
                 size: 25,
@@ -4296,12 +4277,11 @@ function LevelItem({
   activeItems,
   depth = 0
 }) {
-  const [activeFilter, setActiveFilter] = useState(false);
   const [activePropertiesFilter, setActiveProperties] = useState(false);
   const { translate: t } = useTranslation();
   const actions2 = useActions();
   const cutItems = useSelector$1(selectCutItems);
-  let drilldowns = useSelector$1(selectDrilldownMap);
+  const drilldowns = useSelector$1(selectDrilldownMap);
   useSelector$1(selectDrilldownItems);
   const { idFormatters } = useidFormatters();
   const label = useMemo(() => {
@@ -4324,12 +4304,7 @@ function LevelItem({
   const isOtherHierarchySelected = activeItems.some(
     (activeItem) => activeItem.dimension === dimension.name && activeItem.hierarchy !== hierarchy.name
   );
-  const cut = cutItems.find((cut2) => {
-    return cut2.level === (currentDrilldown == null ? void 0 : currentDrilldown.level);
-  });
-  const updatecutHandler = (item, members) => {
-    actions2.updateCut({ ...item, members });
-  };
+  const cut = cutItems.find((cut2) => cut2.level === level.name);
   const checked = activeItems.map((i) => i.level).includes(level.name);
   const disableUncheck = activeItems.length === 1 && checked;
   const isDisabled = isOtherHierarchySelected && !checked;
@@ -4345,6 +4320,8 @@ function LevelItem({
           ...currentDrilldown,
           active: !currentDrilldown.active
         });
+        if (cut && cut.members.length > 0)
+          actions2.updateCut({ ...cut, active: !cut.active });
       },
       checked,
       label,
@@ -4356,22 +4333,28 @@ function LevelItem({
     {
       className: "dex-level-filter",
       size: "sm",
-      onClick: () => setActiveFilter((value) => !value),
+      onClick: () => {
+        const nextCut = buildCut(cut || level);
+        if (cut == null ? void 0 : cut.active) {
+          nextCut.active = false;
+          actions2.updateCut(nextCut);
+        } else {
+          actions2.updateDrilldown({ ...currentDrilldown, active: true });
+          nextCut.active = true;
+          actions2.updateCut(nextCut);
+        }
+      },
       disabled: isDisabled
     },
-    activeFilter ? /* @__PURE__ */ React21__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React21__default.createElement(IconFilter, null)
-  ), properties && /* @__PURE__ */ React21__default.createElement(Tooltip, { label: t("params.add_metadata") }, /* @__PURE__ */ React21__default.createElement(ActionIcon, { onClick: () => setActiveProperties((value) => !value) }, /* @__PURE__ */ React21__default.createElement(IconAdjustments, null))), /* @__PURE__ */ React21__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React21__default.createElement(StackSVG, null)))), activeFilter && /* @__PURE__ */ React21__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React21__default.createElement(
+    (cut == null ? void 0 : cut.active) ? /* @__PURE__ */ React21__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React21__default.createElement(IconFilter, null)
+  ), properties && /* @__PURE__ */ React21__default.createElement(Tooltip, { label: t("params.add_metadata") }, /* @__PURE__ */ React21__default.createElement(ActionIcon, { onClick: () => setActiveProperties((value) => !value) }, /* @__PURE__ */ React21__default.createElement(IconAdjustments, null))), /* @__PURE__ */ React21__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React21__default.createElement(StackSVG, null)))), (cut == null ? void 0 : cut.active) && /* @__PURE__ */ React21__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React21__default.createElement(
     MultiSelect,
     {
       sx: { flex: "1 1 100%" },
       searchable: true,
-      onChange: (value) => {
+      onChange: (members) => {
         if (cut) {
-          if (currentDrilldown.active && !cut.active) {
-            updatecutHandler({ ...cut, active: true }, value);
-          } else {
-            updatecutHandler(cut, value);
-          }
+          actions2.updateCut({ ...cut, active: currentDrilldown.active, members });
         }
       },
       placeholder: `Filter by ${label}`,
@@ -4396,7 +4379,7 @@ function PropertiesMultiSelect({ item }) {
   const locale = useSelector$1(selectLocale);
   const actions2 = useActions();
   const { translate: t } = useTranslation();
-  const propertiesUpdateHandler2 = useCallback(
+  const propertiesUpdateHandler = useCallback(
     (activeProps) => {
       const properties = item.properties.map(
         (prop) => buildProperty({
@@ -4428,7 +4411,7 @@ function PropertiesMultiSelect({ item }) {
     {
       sx: { flex: "1 1 100%" },
       searchable: true,
-      onChange: propertiesUpdateHandler2,
+      onChange: propertiesUpdateHandler,
       value: activeProperties || [],
       placeholder: `Filter by ${label}`,
       data: item.properties.map((property) => ({
@@ -5468,14 +5451,20 @@ function SuccessResult(props) {
   );
 }
 function Results(props) {
-  const { graph, selectedItem, locale, getCube: getCube2, isSelected: isSelected2 } = props;
+  const { graph, selectedItem, locale, sortLocale, getCube: getCube2, isSelected: isSelected2 } = props;
   const { classes } = useStyles4();
   const { setExpanded, setInput, map } = useSideBar();
   const { onChangeCube } = useQueryItem();
   const results = [...map].flatMap((entry) => {
     const [key, items] = entry;
     const [topic, subtopic] = key.split(" - ");
-    const topicResults = items.map((item) => {
+    const topicResults = [...items].sort((a, b) => {
+      const cubeA = getCube2(graph.items, a, subtopic, locale);
+      const cubeB = getCube2(graph.items, b, subtopic, locale);
+      const aSort = cubeA ? getAnnotation(cubeA, "table", sortLocale) || a : a;
+      const bSort = cubeB ? getAnnotation(cubeB, "table", sortLocale) || b : b;
+      return aSort.localeCompare(bSort, sortLocale, { sensitivity: "base" });
+    }).map((item) => {
       const cube = getCube2(graph.items, item, subtopic, locale);
       if (!cube) return null;
       const table = getAnnotation(cube, "table", locale);
@@ -5539,7 +5528,7 @@ var useStyles4 = createStyles((t) => ({
 var loadingCubes = Array.from({ length: 10 }, (v, index) => ({
   id: `loading-cube-${index}`
 }));
-function SelectCubes({ locale }) {
+function SelectCubes({ locale, sortLocale }) {
   const items = useCubeItems();
   const selectedItem = useSelectedItem();
   const { schemaLoading } = useQueryItem();
@@ -5549,11 +5538,27 @@ function SelectCubes({ locale }) {
   if (items.length === 1) {
     return null;
   }
-  return /* @__PURE__ */ React21__default.createElement(SelectCubeInternal, { items, selectedItem, locale });
+  return /* @__PURE__ */ React21__default.createElement(
+    SelectCubeInternal,
+    {
+      items,
+      selectedItem,
+      locale,
+      sortLocale: sortLocale || locale
+    }
+  );
 }
 function SelectCubeInternal(props) {
-  const { items, selectedItem, locale } = props;
-  return /* @__PURE__ */ React21__default.createElement(Stack, { id: "dex-select-cube", spacing: "xs", w: "100%" }, /* @__PURE__ */ React21__default.createElement(CubeTree, { items, locale, selectedItem }));
+  const { items, selectedItem, locale, sortLocale } = props;
+  return /* @__PURE__ */ React21__default.createElement(Stack, { id: "dex-select-cube", spacing: "xs", w: "100%" }, /* @__PURE__ */ React21__default.createElement(
+    CubeTree,
+    {
+      items,
+      locale,
+      selectedItem,
+      sortLocale
+    }
+  ));
 }
 function AccordionControl(props) {
   return /* @__PURE__ */ React21__default.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React21__default.createElement(Accordion.Control, { ...props }));
@@ -5571,19 +5576,22 @@ function getKeys2(items, k, locale, filter) {
   return Array.from(keys);
 }
 function isSelected(selectedItem, currentItem) {
-  if (selectedItem && currentItem) {
+  if (selectedItem && currentItem && selectedItem.name && currentItem.name) {
     return selectedItem.name === currentItem.name;
   }
+  return false;
 }
 function getCube(items, name4, subtopic, locale) {
+  if (!Array.isArray(items)) return void 0;
   const cube = items.find(
-    (item) => item.name === name4 && getAnnotation(item, "subtopic", locale) === subtopic
+    (item) => item && item.name === name4 && getAnnotation(item, "subtopic", locale) === subtopic
   );
   return cube;
 }
 function CubeTree({
   locale,
-  selectedItem
+  selectedItem,
+  sortLocale
 }) {
   const { map, input, graph } = useSideBar();
   const { translate: t } = useTranslation();
@@ -5591,6 +5599,10 @@ function CubeTree({
     () => getKeys2(graph.items, "topic", locale),
     [graph.items, locale]
   );
+  const sortTopics = useMemo(
+    () => getKeys2(graph.items, "topic", sortLocale),
+    [graph.items, sortLocale]
+  );
   if (input.length > 0 && map && !(map.size > 0)) {
     return /* @__PURE__ */ React21__default.createElement(Text, { ta: "center", fz: "xs", my: "sm", italic: true }, t("params.label_no_results"));
   }
@@ -5601,9 +5613,20 @@ function CubeTree({
       getCube,
       isSelected,
       graph,
-      locale
+      locale,
+      sortLocale
+    }
+  ) : graph.items.length > 0 && /* @__PURE__ */ React21__default.createElement(
+    RootAccordions,
+    {
+      items: topics,
+      sortItems: sortTopics,
+      graph,
+      selectedItem,
+      locale,
+      sortLocale
     }
-  ) : graph.items.length > 0 && /* @__PURE__ */ React21__default.createElement(RootAccordions, { items: topics, graph, selectedItem, locale });
+  );
 }
 function useAccordionValue(key, locale) {
   const selectedItem = useSelectedItem();
@@ -5616,7 +5639,7 @@ function useAccordionValue(key, locale) {
   }, [key, selectedItem, locale]);
   return { value, setValue };
 }
-function RootAccordions({ items, graph, locale, selectedItem }) {
+function RootAccordions({ items, sortItems, graph, locale, selectedItem, sortLocale }) {
   const { value, setValue } = useAccordionValue("topic", locale);
   return /* @__PURE__ */ React21__default.createElement(
     Accordion,
@@ -5649,14 +5672,19 @@ function RootAccordions({ items, graph, locale, selectedItem }) {
       })
     },
     items.sort((a, b) => graph.topicOrder[a] - graph.topicOrder[b]).map((item) => {
+      const sortItem = sortItems.find(
+        (topic) => graph.topicOrder[topic] === graph.topicOrder[item]
+      ) || item;
       return /* @__PURE__ */ React21__default.createElement(Accordion.Item, { value: `topic-${item}`, key: `topic-${item}` }, /* @__PURE__ */ React21__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React21__default.createElement(Accordion.Panel, null, /* @__PURE__ */ React21__default.createElement(
         SubtopicAccordion,
         {
           graph,
           parent: item,
+          sortParent: sortItem,
           items: graph.adjList[item],
           key: item,
           locale,
+          sortLocale,
           selectedItem
         }
       )));
@@ -5668,12 +5696,13 @@ function CubeButton({
   selectedItem,
   graph,
   locale,
+  sortLocale,
   parent
 }) {
   const { onChangeCube, membersLoading, schemaLoading } = useQueryItem();
   const { classes } = useStyles4();
   const isSelectionInProgress = membersLoading || schemaLoading;
-  const table = graph.getName(item, locale);
+  const table = graph.getName ? graph.getName(item, locale) : item;
   const subtopic = parent != null ? parent : "";
   const handleClick = () => {
     onChangeCube(item, subtopic);
@@ -5706,8 +5735,10 @@ function SubtopicAccordion({
   items,
   graph,
   parent,
+  sortParent,
   selectedItem,
-  locale
+  locale,
+  sortLocale
 }) {
   const { value, setValue } = useAccordionValue("subtopic", locale);
   return /* @__PURE__ */ React21__default.createElement(
@@ -5736,8 +5767,42 @@ function SubtopicAccordion({
         }
       })
     },
-    [...items].sort((a, b) => a.localeCompare(b, locale, { sensitivity: "base" })).map((item, index) => {
-      const filtered = [...graph.adjList[item]].filter((value2) => value2 !== parent);
+    [...items].sort((a, b) => {
+      const aLabel = graph.items.find(
+        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === a
+      );
+      const bLabel = graph.items.find(
+        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === b
+      );
+      const aSort = aLabel ? getAnnotation(aLabel, "subtopic", sortLocale) || a : a;
+      const bSort = bLabel ? getAnnotation(bLabel, "subtopic", sortLocale) || b : b;
+      return aSort.localeCompare(bSort, sortLocale, { sensitivity: "base" });
+    }).map((item, index) => {
+      let sortSubtopic = item;
+      if (sortParent && item) {
+        const hasCubeInLocale = graph.items.some(
+          (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === item
+        );
+        if (hasCubeInLocale) {
+          const matchingCube = graph.items.find(
+            (cube) => getAnnotation(cube, "topic", sortLocale) === sortParent && getAnnotation(cube, "subtopic", locale) === item
+          );
+          if (matchingCube) {
+            const annotatedSubtopic = getAnnotation(matchingCube, "subtopic", sortLocale);
+            if (annotatedSubtopic) {
+              sortSubtopic = annotatedSubtopic;
+            }
+          }
+        }
+      }
+      const adjListItem = graph.adjList[sortSubtopic];
+      const filtered = adjListItem ? [...adjListItem].filter((value2) => value2 !== parent).sort((a, b) => {
+        const aLabel = graph.items.find((cube) => cube && cube.name === a);
+        const bLabel = graph.items.find((cube) => cube && cube.name === b);
+        const aSort = aLabel ? getAnnotation(aLabel, "table", sortLocale) || a : a;
+        const bSort = bLabel ? getAnnotation(bLabel, "table", sortLocale) || b : b;
+        return aSort.localeCompare(bSort, sortLocale, { sensitivity: "base" });
+      }) : [];
       return /* @__PURE__ */ React21__default.createElement(Accordion.Item, { value: `subtopic-${item}`, key: `subtopic-${item}-${index}` }, /* @__PURE__ */ React21__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React21__default.createElement(Accordion.Panel, null, filtered.map((table, index2) => /* @__PURE__ */ React21__default.createElement(
         CubeButton,
         {
@@ -5745,6 +5810,7 @@ function SubtopicAccordion({
           graph,
           item: table,
           locale,
+          sortLocale,
           selectedItem,
           parent: item
         }
@@ -5788,7 +5854,7 @@ function ExplorerContent(props) {
     const SplashComponent = props.splash;
     return SplashComponent ? /* @__PURE__ */ React21__default.createElement(SplashComponent, { translation }) : /* @__PURE__ */ React21__default.createElement(Center, { h: "100%", sx: { flex: 1 } }, /* @__PURE__ */ React21__default.createElement(AnimatedCube, null));
   }, [props.splash, translation]);
-  return /* @__PURE__ */ React21__default.createElement("div", { className: classes.container }, /* @__PURE__ */ React21__default.createElement("div", { className: classes.root }, /* @__PURE__ */ React21__default.createElement(SideBarProvider, { locale: defaultLocale }, /* @__PURE__ */ React21__default.createElement(SideBar_default, null, /* @__PURE__ */ React21__default.createElement(SideBarItem, null, /* @__PURE__ */ React21__default.createElement(SelectCubes, { locale: defaultLocale }))), /* @__PURE__ */ React21__default.createElement(
+  return /* @__PURE__ */ React21__default.createElement("div", { className: classes.container }, /* @__PURE__ */ React21__default.createElement("div", { className: classes.root }, /* @__PURE__ */ React21__default.createElement(SideBarProvider, { locale: defaultLocale }, /* @__PURE__ */ React21__default.createElement(SideBar_default, null, /* @__PURE__ */ React21__default.createElement(SideBarItem, null, /* @__PURE__ */ React21__default.createElement(SelectCubes, { locale: defaultLocale, sortLocale: props.sortLocale || defaultLocale }))), /* @__PURE__ */ React21__default.createElement(
     ExplorerResults,
     {
       className: classes.flexCol,
@@ -6761,6 +6827,7 @@ function ExplorerComponent(props) {
   var _a;
   const {
     defaultLocale = "en",
+    sortLocale,
     defaultOpenParams = "measures",
     height = "100vh",
     withinMantineProvider = true,
@@ -6823,7 +6890,8 @@ function ExplorerComponent(props) {
         serverConfig: props.serverConfig,
         serverURL: props.serverURL,
         splash: props.splash,
-        withMultiQuery
+        withMultiQuery,
+        sortLocale
       }
     ))))
   ));

package/package.json

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