@datawheel/data-explorer 1.4.1 → 1.4.2

package/dist/main.mjs

@@ -4811,10 +4811,15 @@ function useBuildGraph(locale) {
       const hide = getAnnotation(item, "hide_in_ui", locale);
       if (!yn(hide)) {
         graph2.addNode(topic);
-        graph2.addNode(subtopic);
         graph2.addNode(name4);
-        graph2.addEdge(topic, subtopic);
-        graph2.addEdge(subtopic, name4);
+        if (subtopic) {
+          const uniqueSubtopic = `${topic} - ${subtopic}`;
+          graph2.addNode(uniqueSubtopic);
+          graph2.addEdge(topic, uniqueSubtopic);
+          graph2.addEdge(uniqueSubtopic, name4);
+        } else {
+          graph2.addEdge(topic, name4);
+        }
         if (topic_order) {
           graph2.addTopicOrder(topic, topic_order);
         }
@@ -5430,8 +5435,16 @@ function useAccordionValue(key, locale) {
   const [value, setValue] = useState(null);
   useEffect(() => {
     if (selectedItem) {
-      const value2 = getAnnotation(selectedItem, key, locale);
-      setValue(`${key}-${value2}`);
+      const topic = getAnnotation(selectedItem, "topic", locale);
+      const subtopic = getAnnotation(selectedItem, "subtopic", locale);
+      if (key === "subtopic" && subtopic) {
+        setValue(`${key}-${topic} - ${subtopic}`);
+      } else if (key === "topic") {
+        setValue(`${key}-${topic}`);
+      } else {
+        const val = getAnnotation(selectedItem, key, locale);
+        setValue(`${key}-${val}`);
+      }
     }
   }, [key, selectedItem, locale]);
   return { value, setValue };
@@ -5472,19 +5485,18 @@ function RootAccordions({ items, sortItems, graph, locale, selectedItem, sortLoc
       const sortItem = sortItems.find(
         (topic) => graph.topicOrder[topic] === graph.topicOrder[item]
       ) || item;
-      return /* @__PURE__ */ React15__default.createElement(Accordion.Item, { value: `topic-${item}`, key: `topic-${item}` }, /* @__PURE__ */ React15__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React15__default.createElement(Accordion.Panel, null, /* @__PURE__ */ React15__default.createElement(
-        SubtopicAccordion,
+      return /* @__PURE__ */ React15__default.createElement(Accordion.Item, { value: `topic-${item}`, key: `topic-${item}` }, /* @__PURE__ */ React15__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React15__default.createElement(Accordion.Panel, null, /* @__PURE__ */ React15__default.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React15__default.createElement(
+        TopicChildren,
         {
           graph,
           parent: item,
           sortParent: sortItem,
           items: graph.adjList[item],
-          key: item,
           locale,
           sortLocale,
           selectedItem
         }
-      )));
+      ))));
     })
   );
 }
@@ -5528,6 +5540,56 @@ function CubeButton({
     table != null ? table : item
   );
 }
+function TopicChildren({
+  items,
+  graph,
+  parent,
+  sortParent,
+  selectedItem,
+  locale,
+  sortLocale
+}) {
+  const { directCubes, subtopics } = useMemo(() => {
+    const cubes = [];
+    const folders = [];
+    items.forEach((item) => {
+      const cube = graph.items.find((c) => c.name === item);
+      if (cube) {
+        cubes.push(item);
+      } else {
+        folders.push(item);
+      }
+    });
+    return { directCubes: cubes, subtopics: folders };
+  }, [items, graph]);
+  return /* @__PURE__ */ React15__default.createElement(React15__default.Fragment, null, directCubes.sort((a, b) => {
+    const aLabel = graph.getName(a, sortLocale);
+    const bLabel = graph.getName(b, sortLocale);
+    return aLabel.localeCompare(bLabel, sortLocale, { sensitivity: "base" });
+  }).map((cube, index) => /* @__PURE__ */ React15__default.createElement(
+    CubeButton,
+    {
+      key: `direct-${cube}-${index}`,
+      graph,
+      item: cube,
+      locale,
+      sortLocale,
+      selectedItem,
+      parent: ""
+    }
+  )), subtopics.length > 0 && /* @__PURE__ */ React15__default.createElement(
+    SubtopicAccordion,
+    {
+      items: subtopics,
+      graph,
+      parent,
+      sortParent,
+      selectedItem,
+      locale,
+      sortLocale
+    }
+  ));
+}
 function SubtopicAccordion({
   items,
   graph,
@@ -5565,29 +5627,32 @@ function SubtopicAccordion({
       })
     },
     [...items].sort((a, b) => {
+      const aName = a.split(" - ").pop();
+      const bName = b.split(" - ").pop();
       const aLabel = graph.items.find(
-        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === a
+        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === aName
       );
       const bLabel = graph.items.find(
-        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === b
+        (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === bName
       );
-      const aSort = aLabel ? getAnnotation(aLabel, "subtopic", sortLocale) || a : a;
-      const bSort = bLabel ? getAnnotation(bLabel, "subtopic", sortLocale) || b : b;
+      const aSort = (aLabel ? getAnnotation(aLabel, "subtopic", sortLocale) : null) || aName || "";
+      const bSort = (bLabel ? getAnnotation(bLabel, "subtopic", sortLocale) : null) || bName || "";
       return aSort.localeCompare(bSort, sortLocale, { sensitivity: "base" });
     }).map((item, index) => {
       let sortSubtopic = item;
+      const itemName = item.split(" - ").pop();
       if (sortParent && item) {
         const hasCubeInLocale = graph.items.some(
-          (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === item
+          (cube) => getAnnotation(cube, "topic", locale) === parent && getAnnotation(cube, "subtopic", locale) === itemName
         );
         if (hasCubeInLocale) {
           const matchingCube = graph.items.find(
-            (cube) => getAnnotation(cube, "topic", sortLocale) === sortParent && getAnnotation(cube, "subtopic", locale) === item
+            (cube) => getAnnotation(cube, "topic", sortLocale) === sortParent && getAnnotation(cube, "subtopic", locale) === itemName
           );
           if (matchingCube) {
             const annotatedSubtopic = getAnnotation(matchingCube, "subtopic", sortLocale);
             if (annotatedSubtopic) {
-              sortSubtopic = annotatedSubtopic;
+              sortSubtopic = `${sortParent} - ${annotatedSubtopic}`;
             }
           }
         }
@@ -5600,7 +5665,7 @@ function SubtopicAccordion({
         const bSort = bLabel ? getAnnotation(bLabel, "table", sortLocale) || b : b;
         return aSort.localeCompare(bSort, sortLocale, { sensitivity: "base" });
       }) : [];
-      return /* @__PURE__ */ React15__default.createElement(Accordion.Item, { value: `subtopic-${item}`, key: `subtopic-${item}-${index}` }, /* @__PURE__ */ React15__default.createElement(AccordionControl, null, item), /* @__PURE__ */ React15__default.createElement(Accordion.Panel, null, filtered.map((table, index2) => /* @__PURE__ */ React15__default.createElement(
+      return /* @__PURE__ */ React15__default.createElement(Accordion.Item, { value: `subtopic-${item}`, key: `subtopic-${item}-${index}` }, /* @__PURE__ */ React15__default.createElement(AccordionControl, null, item.split(" - ").pop()), /* @__PURE__ */ React15__default.createElement(Accordion.Panel, null, filtered.map((table, index2) => /* @__PURE__ */ React15__default.createElement(
         CubeButton,
         {
           key: index2,
@@ -5609,7 +5674,7 @@ function SubtopicAccordion({
           locale,
           sortLocale,
           selectedItem,
-          parent: item
+          parent: item.split(" - ").pop()
         }
       ))));
     })

package/package.json

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