@datawheel/data-explorer 1.1.15 → 1.1.16

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

@@ -5468,14 +5468,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 +5545,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 +5555,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 +5593,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 +5616,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 +5630,20 @@ function CubeTree({
       getCube,
       isSelected,
       graph,
-      locale
+      locale,
+      sortLocale
     }
-  ) : graph.items.length > 0 && /* @__PURE__ */ React21__default.createElement(RootAccordions, { items: topics, graph, selectedItem, locale });
+  ) : graph.items.length > 0 && /* @__PURE__ */ React21__default.createElement(
+    RootAccordions,
+    {
+      items: topics,
+      sortItems: sortTopics,
+      graph,
+      selectedItem,
+      locale,
+      sortLocale
+    }
+  );
 }
 function useAccordionValue(key, locale) {
   const selectedItem = useSelectedItem();
@@ -5616,7 +5656,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 +5689,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 +5713,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 +5752,10 @@ function SubtopicAccordion({
   items,
   graph,
   parent,
+  sortParent,
   selectedItem,
-  locale
+  locale,
+  sortLocale
 }) {
   const { value, setValue } = useAccordionValue("subtopic", locale);
   return /* @__PURE__ */ React21__default.createElement(
@@ -5736,8 +5784,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 +5827,7 @@ function SubtopicAccordion({
           graph,
           item: table,
           locale,
+          sortLocale,
           selectedItem,
           parent: item
         }
@@ -5788,7 +5871,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 +6844,7 @@ function ExplorerComponent(props) {
   var _a;
   const {
     defaultLocale = "en",
+    sortLocale,
     defaultOpenParams = "measures",
     height = "100vh",
     withinMantineProvider = true,
@@ -6823,7 +6907,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.16",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [