@datawheel/data-explorer 0.2.7 → 0.2.8

package/dist/main.js

@@ -1,8 +1,8 @@
 import { keyframes, createStyles, Select, rem, Flex, Title, Text, Group, Button, Input, Box, Stack, SimpleGrid, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Alert, Loader, Container, Modal, useMantineTheme, MantineProvider, Paper, useComponentDefaultProps, Anchor, Tabs, Switch, ThemeIcon, Tooltip, CloseButton, Drawer, Divider, Checkbox, packSx, Affix, Accordion, Popover } from '@mantine/core';
 import { useClipboard, useClickOutside, useFullscreen, useDebouncedState, useMediaQuery, useDisclosure } from '@mantine/hooks';
-import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowLeft, IconArrowRight, IconArrowsMinimize, IconArrowsMaximize, IconTrash, IconInfoCircleFilled, IconSearch, IconPhotoDown, IconVectorTriangle, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconBox, IconClock, IconHelpCircle, IconLanguage } from '@tabler/icons-react';
+import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconArrowsMinimize, IconArrowsMaximize, IconTrash, IconInfoCircleFilled, IconSearch, IconPhotoDown, IconVectorTriangle, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconBox, IconClock, IconHelpCircle, IconLanguage } from '@tabler/icons-react';
 import * as React13 from 'react';
-import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useState, useEffect, useRef, Suspense, useLayoutEffect } from 'react';
+import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
 import { translationDict, generateCharts, createChartConfig } from '@datawheel/vizbuilder';
 import { createSlice, createSelector, combineReducers, bindActionCreators, configureStore } from '@reduxjs/toolkit';
@@ -223,7 +223,9 @@ var defaultTranslation = {
   formats: {
     csv: "CSV",
     json: "JSON",
-    jsonarrays: "JSON Arrays",
+    tsv: "TSV",
+    parquet: "Parquet",
+    // jsonarrays: "JSON Arrays",
     jsonrecords: "JSON Records",
     xlsx: "XLSX"
   },
@@ -569,7 +571,6 @@ var Comparison = /* @__PURE__ */ ((Comparison2) => {
 })(Comparison || {});
 var Format = /* @__PURE__ */ ((Format2) => {
   Format2["csv"] = "csv";
-  Format2["jsonarrays"] = "jsonarrays";
   Format2["jsonrecords"] = "jsonrecords";
   Format2["parquet"] = "parquet";
   Format2["tsv"] = "tsv";
@@ -1430,7 +1431,7 @@ var ComplexityModuleClient = class {
 init_esm_shims();
 var TesseractModuleClient = class {
   constructor(baseURL, config) {
-    this.baseURL = baseURL || "";
+    this.baseURL = baseURL ? baseURL.replace(/\/?$/, "/") : "";
     this.requestConfig = config || { headers: new Headers() };
   }
   fetchStatus(params) {
@@ -1733,7 +1734,7 @@ function willDownloadQuery(format2) {
     }
     const queryParams = { ...params, pagiLimit: 0, pagiOffset: 0 };
     return tesseract.fetchData({ request: queryParamsToRequest(queryParams), format: format2 }).then((response) => response.blob()).then((result) => ({
-      content: result[0],
+      content: result,
       extension: format2.replace(/json\w+/, "json"),
       name: `${params.cube}_${(/* @__PURE__ */ new Date()).toISOString()}`
     }));
@@ -1971,7 +1972,7 @@ function willReloadCube({ locale }) {
 }
 function willSetupClient(baseURL, defaultLocale, requestConfig) {
   return (dispatch, getState, { tesseract }) => {
-    tesseract.baseURL = baseURL;
+    tesseract.baseURL = baseURL.replace(/\/?$/, "/");
     getState();
     const search = new URLSearchParams(location.search);
     const locale = search.get("locale");
@@ -2556,10 +2557,9 @@ var ApiAndCsvButtons = (props) => {
     Button,
     {
       id: "dex-api-btn",
-      variant: "filled",
-      color: "dark",
+      variant: "subtle",
       leftIcon: /* @__PURE__ */ React13__default.createElement(IconCopy, { size: 20 }),
-      sx: { height: 30, backgroundColor: "#5A5A5A" },
+      sx: { height: 30 },
       onClick: copyHandler
     },
     copied ? t("action_copy_done") : t("action_copy"),
@@ -2575,10 +2575,9 @@ var DownloadQuery = ({ data }) => {
     /* @__PURE__ */ React13__default.createElement(
       ButtonDownload,
       {
-        variant: "filled",
-        color: "dark",
+        variant: "light",
         leftIcon: /* @__PURE__ */ React13__default.createElement(IconDownload, { size: 20 }),
-        sx: { height: 30, backgroundColor: "#5A5A5A" },
+        sx: { height: 30 },
         key: "download_csv",
         provider: () => actions2.willDownloadQuery("csv")
       },
@@ -3222,11 +3221,17 @@ function TableView({
 }) {
   const isData = Boolean(table.getRowModel().rows.length);
   const loadingState = useSelector$1(selectLoadingState);
+  const viewport = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = viewport.current) == null ? void 0 : _a.scrollTo({ top: 0, behavior: "smooth" });
+  }, [pagination == null ? void 0 : pagination.pageIndex, pagination == null ? void 0 : pagination.pageSize]);
   return /* @__PURE__ */ React13__default.createElement(Box, { sx: { height: "100%" } }, /* @__PURE__ */ React13__default.createElement(Flex, { direction: "column", justify: "space-between", sx: { height: "100%", flex: "1 1 auto" } }, /* @__PURE__ */ React13__default.createElement(MRT_ProgressBar, { isTopToolbar: false, table }), /* @__PURE__ */ React13__default.createElement(
     ScrollArea,
     {
       id: "dex-table",
       h: isData ? "100%" : "auto",
+      viewportRef: viewport,
       sx: {
         flex: "1 1 auto",
         position: "relative",
@@ -3960,12 +3965,12 @@ function Toolbar({
 }) {
   const { translate: t } = useTranslation();
   const theme = useMantineTheme();
-  const smallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+  const smallerThanLg = useMediaQuery(`(max-width: ${theme.breakpoints.lg})`);
   const { toolbarConfig } = useSettings();
   const settings = /* @__PURE__ */ React13__default.createElement(
     Flex,
     {
-      direction: { base: "column", md: "row" },
+      direction: { base: "column", lg: "row" },
       justify: "flex-start",
       sx: toolbarSx,
       p: "0.325rem",
@@ -3973,7 +3978,7 @@ function Toolbar({
       wrap: "nowrap",
       gap: "xs"
     },
-    toolbarConfig == null ? void 0 : toolbarConfig.buttons.map((b) => /* @__PURE__ */ React13__default.createElement(ToolbarButton, { ...b })),
+    toolbarConfig == null ? void 0 : toolbarConfig.buttons.map((b) => /* @__PURE__ */ React13__default.createElement(ToolbarButton, { key: b.label, ...b })),
     /* @__PURE__ */ React13__default.createElement(TourButton, null),
     /* @__PURE__ */ React13__default.createElement(
       ToolbarButton,
@@ -3984,7 +3989,7 @@ function Toolbar({
       }
     )
   );
-  return smallerThanMd ? /* @__PURE__ */ React13__default.createElement(Menu, null, /* @__PURE__ */ React13__default.createElement(Menu.Target, null, /* @__PURE__ */ React13__default.createElement(ActionIcon, null, /* @__PURE__ */ React13__default.createElement(IconSettings, null))), /* @__PURE__ */ React13__default.createElement(Menu.Dropdown, null, settings)) : settings;
+  return smallerThanLg ? /* @__PURE__ */ React13__default.createElement(Menu, null, /* @__PURE__ */ React13__default.createElement(Menu.Target, null, /* @__PURE__ */ React13__default.createElement(ActionIcon, null, /* @__PURE__ */ React13__default.createElement(IconSettings, null))), /* @__PURE__ */ React13__default.createElement(Menu.Dropdown, null, settings)) : settings;
 }
 
 // src/components/ExplorerResults.tsx
@@ -4653,7 +4658,7 @@ var useStyles3 = createStyles((theme) => ({
   },
   linkActive: {
     backgroundColor: theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][9], 0.45) : theme.colors[theme.primaryColor][4],
-    color: theme.colorScheme === "dark" ? theme.colors[theme.primaryColor][1] : theme.white,
+    color: theme.white,
     fontWeight: 500
   }
 }));
@@ -5820,13 +5825,15 @@ var useTourSteps = (tourConfig) => {
 // src/components/tour/ExplorerTour.tsx
 function PrevButton(props) {
   const { translate: t } = useTranslation();
+  const theme = useMantineTheme();
+  const isRtl = theme.dir === "rtl";
   const handleClick = () => props.setCurrentStep(
     (s) => s === 0 ? props.steps.length - 1 : s - 1
   );
   return /* @__PURE__ */ React13__default.createElement(
     Button,
     {
-      leftIcon: /* @__PURE__ */ React13__default.createElement(IconArrowLeft, { size: "0.8rem" }),
+      leftIcon: isRtl ? /* @__PURE__ */ React13__default.createElement(IconArrowRight, { size: "0.8rem" }) : /* @__PURE__ */ React13__default.createElement(IconArrowLeft, { size: "0.8rem" }),
       onClick: handleClick,
       radius: 0,
       size: "lg",
@@ -5840,6 +5847,8 @@ function PrevButton(props) {
 }
 function NextButton(props) {
   const { translate: t } = useTranslation();
+  const theme = useMantineTheme();
+  const isRtl = theme.dir === "rtl";
   const handleClick = () => {
     if (props.currentStep === props.steps.length - 1) {
       props.setIsOpen(false);
@@ -5862,13 +5871,56 @@ function NextButton(props) {
       size: "lg",
       sx: { flex: "0 0 50%" },
       onClick: handleClick,
-      rightIcon: /* @__PURE__ */ React13__default.createElement(IconArrowRight, { size: "0.8rem" }),
+      rightIcon: isRtl ? /* @__PURE__ */ React13__default.createElement(IconArrowLeft, { size: "0.8rem" }) : /* @__PURE__ */ React13__default.createElement(IconArrowRight, { size: "0.8rem" }),
       radius: 0
     },
     t("tour.controls.next")
   );
 }
 var withBase = (styles2) => (base) => ({ ...base, ...styles2 });
+var keyboardHandler = (rtl) => (e, clickProps) => {
+  e.stopPropagation();
+  if (!clickProps) return;
+  function next() {
+    if (clickProps.currentStep === clickProps.steps.length - 1) {
+      clickProps.setIsOpen(false);
+      clickProps.setCurrentStep(0);
+    } else {
+      const nextStep = clickProps.steps[clickProps.currentStep + 1];
+      if (nextStep.hasOwnProperty("actionBefore")) {
+        nextStep.actionBefore();
+        setTimeout(() => clickProps.setCurrentStep((s) => s + 1), 250);
+      } else {
+        clickProps.setCurrentStep((s) => s + 1);
+      }
+    }
+  }
+  function prev() {
+    clickProps.setCurrentStep(
+      (s) => s === 0 ? clickProps.steps.length - 1 : s - 1
+    );
+  }
+  if (e.keyCode === 27) {
+    e.preventDefault();
+    clickProps.setIsOpen(false);
+  }
+  if (e.keyCode === 39) {
+    e.preventDefault();
+    if (rtl) {
+      prev();
+    } else {
+      next();
+    }
+  }
+  if (e.keyCode === 37) {
+    e.preventDefault();
+    if (rtl) {
+      next();
+    } else {
+      prev();
+    }
+  }
+};
 function ExplorerTour({ children, tourConfig }) {
   const theme = useMantineTheme();
   const steps = useTourSteps(tourConfig);
@@ -5880,8 +5932,15 @@ function ExplorerTour({ children, tourConfig }) {
       order: -1,
       width: "100%",
       margin: `0 auto ${theme.spacing.xs}`
+    }),
+    dot: (base, { current }) => ({
+      ...base,
+      background: current ? theme.fn.primaryColor() : "transparent",
+      color: theme.fn.primaryColor(),
+      borderColor: theme.colors.gray[5]
     })
   };
+  const rtl = theme.dir === "rtl";
   return /* @__PURE__ */ React13__default.createElement(
     TourProvider,
     {
@@ -5892,6 +5951,7 @@ function ExplorerTour({ children, tourConfig }) {
       showBadge: false,
       styles: styles2,
       rtl: theme.dir === "rtl",
+      keyboardHandler: keyboardHandler(rtl),
       disableInteraction: true,
       ...tourConfig == null ? void 0 : tourConfig.tourProps
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "exports": {
     ".": {
       "import": "./dist/main.js"