@datawheel/data-explorer 1.1.17 → 1.2.0-rc.2

package/dist/main.d.mts

@@ -782,6 +782,12 @@ declare const defaultTranslation: {
             time_range: string;
             total: string;
         };
+        transient: {
+            title_one_row: string;
+            title_loading: string;
+            title_empty: string;
+            description_empty: string;
+        };
     }>;
     action_copy: string;
     action_copy_done: string;

package/dist/main.mjs

@@ -1,10 +1,10 @@
 import { createStyles, keyframes, Select, Center, Text, rem, Input, Box, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay as LoadingOverlay$1, Table, MultiSelect, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, MantineProvider, Space, Modal, Alert, Paper, Tooltip, useComponentDefaultProps, Skeleton, Anchor, packSx, CloseButton, Tabs, ThemeIcon, Drawer, Switch, Divider, Accordion, Popover, Checkbox } from '@mantine/core';
 import { useClipboard, useDebouncedState, useMediaQuery, useFullscreen, useDisclosure } from '@mantine/hooks';
-import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconWorldWww, IconClipboardCheck, IconCircleOff, IconAlertCircle, IconAlertTriangle, IconVectorTriangle, IconPhotoDown, IconDownload, IconArrowsMinimize, IconArrowsMaximize, IconCheck, IconShare, IconLanguage, IconCopy, IconBrandGithub, IconArrowLeft, IconArrowRight, IconX, IconChevronLeft, IconChevronRight, IconSearch, IconBox, IconDotsVertical, IconTrash, IconPlus, IconStack3, IconInfoCircleFilled, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconHelpCircle, IconFilterOff, IconFilter, IconClock, IconAdjustments } from '@tabler/icons-react';
+import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconWorldWww, IconClipboardCheck, IconCircleOff, IconAlertCircle, IconAlertTriangle, IconBrandGithub, IconVectorTriangle, IconPhotoDown, IconDownload, IconArrowsMinimize, IconArrowsMaximize, IconCheck, IconShare, IconLanguage, IconCopy, IconArrowLeft, IconArrowRight, IconX, IconChevronLeft, IconChevronRight, IconSearch, IconBox, IconDotsVertical, IconTrash, IconPlus, IconStack3, IconInfoCircleFilled, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconHelpCircle, IconFilterOff, IconFilter, IconClock, IconAdjustments } from '@tabler/icons-react';
 import * as React21 from 'react';
-import React21__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Component, Suspense, useLayoutEffect } from 'react';
+import React21__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
-import { VizbuilderProvider, useVizbuilderContext, d3plusConfigBuilder } from '@datawheel/vizbuilder/react';
+import { VizbuilderProvider, useVizbuilderContext, ErrorBoundary, d3plusConfigBuilder } from '@datawheel/vizbuilder/react';
 import { createSlice, createSelector, combineReducers, configureStore, bindActionCreators } from '@reduxjs/toolkit';
 import { assign } from 'd3plus-common';
 import identity2 from 'lodash-es/identity';
@@ -2234,7 +2234,7 @@ function ChartCard(props) {
   const { chart, isFullMode, onFocus, height } = props;
   const { dataset } = chart.datagroup;
   const { translate } = useVizbuilderTranslation();
-  const { downloadFormats, ErrorBoundary: ErrorBoundary2, showConfidenceInt } = useVizbuilderContext();
+  const { downloadFormats, showConfidenceInt, CardErrorComponent } = useVizbuilderContext();
   const nodeRef = useRef(null);
   const { ref: inViewRef, inView } = useInView({ triggerOnce: false, threshold: 0 });
   const [hasBeenInView, setHasBeenInView] = useState(false);
@@ -2253,6 +2253,7 @@ function ChartCard(props) {
     t: translate
   });
   const downloadButtons = useMemo(() => {
+    if (!config) return null;
     const filename = (typeof config.title === "function" ? config.title(dataset) : config.title || "").replace(/[^\w]/g, "_").replace(/[_]+/g, "_");
     return downloadFormats.map((format2) => {
       const formatLower = format2.toLowerCase();
@@ -2309,24 +2310,16 @@ function ChartCard(props) {
     ));
   }, [translate]);
   const resolvedHeight = height ? height : isFullMode ? "calc(100vh - 3rem)" : 400;
-  if (!ChartComponent) return null;
-  return /* @__PURE__ */ React21__default.createElement(
+  if (!ChartComponent || !config) return null;
+  return /* @__PURE__ */ React21__default.createElement(ErrorBoundary, { ErrorContent: CardErrorComponent }, /* @__PURE__ */ React21__default.createElement(
     Paper,
     {
       className: props.className,
       w: "100%",
       style: { overflow: "hidden", height: resolvedHeight, ...props.style }
     },
-    /* @__PURE__ */ React21__default.createElement(ErrorBoundary2, null, /* @__PURE__ */ React21__default.createElement(Stack, { spacing: "xs", p: "xs", style: { position: "relative" }, h: "100%", w: "100%" }, /* @__PURE__ */ React21__default.createElement(Group, { position: "center", spacing: "xs", align: "center" }, isFullMode && shareButton, downloadButtons, onFocus && focusButton), /* @__PURE__ */ React21__default.createElement(
-      Box,
-      {
-        style: { flex: "1 1 auto" },
-        ref: setRefs,
-        sx: { "& > .viz": { height: "100%" } }
-      },
-      ChartComponent && (inView || hasBeenInView) ? /* @__PURE__ */ React21__default.createElement(ChartComponent, { config }) : /* @__PURE__ */ React21__default.createElement("div", { style: { height: "100%", width: "100%" } })
-    )))
-  );
+    /* @__PURE__ */ React21__default.createElement(Stack, { spacing: "xs", p: "xs", style: { position: "relative" }, h: "100%", w: "100%" }, /* @__PURE__ */ React21__default.createElement(Group, { position: "center", spacing: "xs", align: "center" }, isFullMode && shareButton, downloadButtons, onFocus && focusButton), /* @__PURE__ */ React21__default.createElement(Box, { style: { flex: "1 1 auto" }, ref: setRefs, sx: { "& > .viz": { height: "100%" } } }, ChartComponent && (inView || hasBeenInView) ? /* @__PURE__ */ React21__default.createElement(ChartComponent, { config }) : /* @__PURE__ */ React21__default.createElement("div", { style: { height: "100%", width: "100%" } })))
+  ));
 }
 var getBackground = (node) => {
   if (node.nodeType !== Node.ELEMENT_NODE) return "white";
@@ -2377,14 +2370,7 @@ var useStyles = createStyles((theme) => ({
 function Vizbuilder(props) {
   const datasets = useMemo(() => asArray(props.datasets), [props.datasets]);
   const { t } = useVizbuilderTranslation();
-  const {
-    chartLimits,
-    chartTypes,
-    datacap,
-    getTopojsonConfig,
-    ErrorBoundary: ErrorBoundary2,
-    NonIdealState: NonIdealState3
-  } = useVizbuilderContext();
+  const { chartLimits, chartTypes, datacap, getTopojsonConfig, NonIdealState: NonIdealState3 } = useVizbuilderContext();
   const { actions: actions2 } = useSettings();
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const { classes, cx } = useStyles();
@@ -2412,14 +2398,10 @@ function Vizbuilder(props) {
       return /* @__PURE__ */ React21__default.createElement(Flex, { justify: "center", align: "center", direction: "column", w: "50%" }, /* @__PURE__ */ React21__default.createElement(IconCircleOff, { size: 92 }), /* @__PURE__ */ React21__default.createElement(Title, { mt: "md", mb: "md", order: 4 }, t("vizbuilder.transient.title_empty")), /* @__PURE__ */ React21__default.createElement(Text, null, t("transient.description_empty")));
     }
     const isSingleChart = chartList.length === 1;
-    return /* @__PURE__ */ React21__default.createElement(ErrorBoundary2, null, /* @__PURE__ */ React21__default.createElement("div", { className: cx(classes.grid, { [classes.fill]: isSingleChart }) }, chartList.map((chart2, idx) => {
+    return /* @__PURE__ */ React21__default.createElement("div", { className: cx(classes.grid, { [classes.fill]: isSingleChart }) }, chartList.map((chart2, idx) => {
       let className = classes.fill;
       if (!isSingleChart) {
-        const names = [
-          classes.itemLarge,
-          classes.itemSmallTop,
-          classes.itemSmallBottom
-        ];
+        const names = [classes.itemLarge, classes.itemSmallTop, classes.itemSmallBottom];
         className = names[idx % 3];
       }
       return /* @__PURE__ */ React21__default.createElement(
@@ -2432,8 +2414,8 @@ function Vizbuilder(props) {
           className
         }
       );
-    })));
-  }, [charts, classes, datasets, t, cx, ErrorBoundary2]);
+    }));
+  }, [charts, classes, datasets, t, cx]);
   const currentChart = (queryItem == null ? void 0 : queryItem.chart) || "";
   const chart = charts[currentChart];
   return /* @__PURE__ */ React21__default.createElement("div", { className: cls("vb-wrapper", classes.wrapper, props.className) }, props.customHeader, content, props.customFooter, /* @__PURE__ */ React21__default.createElement(
@@ -2505,72 +2487,6 @@ function VizbuilderView(props) {
   };
   return /* @__PURE__ */ React21__default.createElement(Vizbuilder, { datasets: dataset });
 }
-var ErrorBoundary = class extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      message: "",
-      name: ""
-    };
-    this.clearError = () => this.setState({ message: "", name: "" });
-  }
-  static getDerivedStateFromError(error) {
-    return { message: error.message, name: error.name };
-  }
-  render() {
-    const { message, name: name4 } = this.state;
-    if (!message) {
-      return this.props.children;
-    }
-    return /* @__PURE__ */ React21__default.createElement(TranslationConsumer, null, ({ translate: t }) => {
-      const detailText = t("vizbuilder.error.detail");
-      return /* @__PURE__ */ React21__default.createElement(
-        Flex,
-        {
-          p: "xl",
-          align: "center",
-          justify: "center",
-          direction: "column",
-          className: "chart-card error"
-        },
-        /* @__PURE__ */ React21__default.createElement(Title, { order: 3 }, t("vizbuilder.error.title")),
-        detailText.length ? /* @__PURE__ */ React21__default.createElement(Text, null, detailText) : null,
-        /* @__PURE__ */ React21__default.createElement(Text, null, t("vizbuilder.error.message", { message })),
-        /* @__PURE__ */ React21__default.createElement(Group, { spacing: "xs", my: "sm" }, /* @__PURE__ */ React21__default.createElement(Button, { onClick: this.clearError, size: "xs", variant: "light" }, t("vizbuilder.action_retry")), /* @__PURE__ */ React21__default.createElement(IssueButton, { error: name4, message }))
-      );
-    });
-  }
-};
-function IssueButton(props) {
-  const { error, message } = props;
-  const { t } = useVizbuilderTranslation();
-  const location2 = typeof window === "object" ? window.location : { href: "<SSR>" };
-  const issueParams = new URLSearchParams({
-    title: `[report/vizbuilder] ${error}`,
-    body: [
-      `**URL**: ${location2.href}`,
-      `**Error**: ${error}`,
-      message ? `**Error details:** ${message}
-` : "",
-      "**Detail of the issue:**\n"
-    ].join("\n")
-  });
-  return /* @__PURE__ */ React21__default.createElement(
-    Button,
-    {
-      component: "a",
-      href: `https://github.com/Datawheel/vizbuilder/issues/new?${issueParams}`,
-      leftIcon: /* @__PURE__ */ React21__default.createElement(IconBrandGithub, { size: "1rem" }),
-      rel: "noopener noreferrer",
-      role: "button",
-      size: "xs",
-      tabIndex: 0,
-      target: "_blank",
-      variant: "subtle"
-    },
-    t("action_fileissue")
-  );
-}
 function NonIdealState(props) {
   const { status } = props;
   const { translate: t } = useTranslation();
@@ -2823,7 +2739,7 @@ function CubeSourceAnchor(props) {
   const srcName = getAnnotation(item, "source_name", locale);
   const srcLink = getAnnotation(item, "source_link", locale);
   if (!srcName) return null;
-  return /* @__PURE__ */ React21__default.createElement(Text, { component: "p", ...textProps }, `${t("params.label_source")}: `, srcLink ? /* @__PURE__ */ React21__default.createElement(Anchor, { href: srcLink }, srcName) : /* @__PURE__ */ React21__default.createElement(Text, { span: true }, srcName));
+  return /* @__PURE__ */ React21__default.createElement(Text, { component: "p", ...textProps }, `${t("params.label_source")}: `, srcLink ? /* @__PURE__ */ React21__default.createElement(Anchor, { href: srcLink, target: "_blank" }, srcName) : /* @__PURE__ */ React21__default.createElement(Text, { span: true }, srcName));
 }
 function CubeSource() {
   const selectedItem = useSelectedItem();
@@ -6798,6 +6714,51 @@ function ExplorerTour({ children, tourConfig }) {
     children
   );
 }
+function ReportIssueCard(props) {
+  const { errorMessage, errorClass, onClear: clearHandler } = props;
+  const location2 = typeof window === "object" ? window.location : { href: "<SSR>" };
+  const issueParams = new URLSearchParams({
+    title: `[report/vizbuilder] ${errorClass}`,
+    body: [
+      `**URL**: ${location2.href}`,
+      `**Error**: ${errorClass}`,
+      errorMessage ? `**Error details:** ${errorMessage}
+` : "",
+      "**Detail of the issue:**\n"
+    ].join("\n")
+  });
+  return /* @__PURE__ */ React21__default.createElement(TranslationConsumer, null, ({ translate: t }) => {
+    const detailText = t("vizbuilder.error.detail");
+    return /* @__PURE__ */ React21__default.createElement(Paper, { w: "100%" }, /* @__PURE__ */ React21__default.createElement(
+      Flex,
+      {
+        p: "xl",
+        align: "center",
+        justify: "center",
+        direction: "column",
+        className: "chart-card error"
+      },
+      /* @__PURE__ */ React21__default.createElement(Title, { order: 3 }, t("vizbuilder.error.title")),
+      detailText.length ? /* @__PURE__ */ React21__default.createElement(Text, null, detailText) : null,
+      /* @__PURE__ */ React21__default.createElement(Text, null, t("vizbuilder.error.message", { message: errorMessage })),
+      /* @__PURE__ */ React21__default.createElement(Group, { spacing: "xs", my: "sm" }, /* @__PURE__ */ React21__default.createElement(Button, { onClick: clearHandler, size: "xs", variant: "light" }, t("vizbuilder.action_retry")), /* @__PURE__ */ React21__default.createElement(
+        Button,
+        {
+          component: "a",
+          href: `https://github.com/Datawheel/vizbuilder/issues/new?${issueParams}`,
+          leftIcon: /* @__PURE__ */ React21__default.createElement(IconBrandGithub, { size: "1rem" }),
+          rel: "noopener noreferrer",
+          role: "button",
+          size: "xs",
+          tabIndex: 0,
+          target: "_blank",
+          variant: "subtle"
+        },
+        t("vizbuilder.action_fileissue")
+      ))
+    ));
+  });
+}
 
 // src/components/Explorer.tsx
 var defaultVizbuilderConfig = {
@@ -6815,7 +6776,7 @@ var defaultVizbuilderConfig = {
     TREE_MAP_SHAPE_MAX: 1e3
   },
   downloadFormats: ["SVG", "PNG"],
-  ErrorBoundary,
+  CardErrorComponent: ReportIssueCard,
   NonIdealState
 };
 var defaultTourConfig = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "1.1.17",
+  "version": "1.2.0-rc.2",
   "main": "./dist/main.mjs",
   "types": "./dist/main.d.mts",
   "files": [
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@datawheel/use-translation": "^0.2.0",
-    "@datawheel/vizbuilder": "^0.7.0",
+    "@datawheel/vizbuilder": "^0.7.4",
     "@reactour/tour": "^3.7.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@tabler/icons-react": "^2.7.0",
@@ -79,4 +79,4 @@
     "vite": "^6.3.0",
     "wrangler": "^4.11.0"
   }
-}
+}