@datawheel/data-explorer 1.1.10 → 1.1.11

package/dist/main.mjs

@@ -1,6 +1,6 @@
-import { keyframes, createStyles, Select, Center, Text, rem, Input, Box, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, Alert, MantineProvider, Modal, Space, useComponentDefaultProps, Paper, Anchor, Skeleton, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, Divider, Drawer, Checkbox, packSx, Affix, Popover } from '@mantine/core';
-import { useClipboard, useFullscreen, useDebouncedState, useMediaQuery, useDisclosure } from '@mantine/hooks';
-import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconWorldWww, IconClipboardCheck, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconBox, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconLanguage, IconTrash, IconInfoCircleFilled, IconChevronLeft, IconChevronRight, IconSearch, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
+import { keyframes, createStyles, Select, Center, Text, rem, Input, Box, Stack, Group, Button, SimpleGrid, Flex, ScrollArea, LoadingOverlay, Table, MultiSelect, NumberInput, Menu, ActionIcon, UnstyledButton, Loader, Container, Title, useMantineTheme, TextInput, CopyButton, Alert, MantineProvider, Modal, Space, useComponentDefaultProps, Paper, Anchor, Skeleton, Accordion, Tooltip, Tabs, Switch, ThemeIcon, CloseButton, packSx, Divider, Drawer, Checkbox, Popover } from '@mantine/core';
+import { useClipboard, useDebouncedState, useFullscreen, useMediaQuery, useDisclosure } from '@mantine/hooks';
+import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconWorldWww, IconClipboardCheck, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconBox, IconArrowRight, IconArrowLeft, IconBrandGithub, IconCheck, IconShare, IconLanguage, IconTrash, IconInfoCircleFilled, IconX, IconChevronLeft, IconChevronRight, IconSearch, IconArrowsMinimize, IconArrowsMaximize, IconCircleOff, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconClock, IconHelpCircle, IconPhotoDown, IconVectorTriangle } from '@tabler/icons-react';
 import * as React13 from 'react';
 import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, Component, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
@@ -2238,7 +2238,7 @@ var localeSelectorStyle = (theme) => ({
     color: theme.colorScheme === "dark" ? theme.fn.lighten(theme.fn.primaryColor(), 0.7) : theme.fn.primaryColor(),
     fontSize: 12,
     fontWeight: 700,
-    width: 94,
+    width: 84,
     textTransform: "uppercase"
   },
   item: {
@@ -2297,6 +2297,7 @@ function LocaleSelector() {
       onItemSelect: localeChangeHandler,
       selectedItem: currentCode,
       selectProps: {
+        size: "xs",
         styles: localeSelectorStyle,
         icon: /* @__PURE__ */ React13__default.createElement(
           IconLanguage,
@@ -2351,38 +2352,80 @@ function TableFooter(props) {
     },
     [pagination]
   );
-  return /* @__PURE__ */ React13__default.createElement(Box, { w: "100%", sx: { flex: "0 0 70px" } }, /* @__PURE__ */ React13__default.createElement(
-    Flex,
+  return /* @__PURE__ */ React13__default.createElement(
+    Box,
     {
-      p: "md",
-      justify: "space-between",
-      align: "center",
-      direction: { base: "column-reverse", md: "row" },
-      gap: "sm"
+      w: "100%",
+      sx: (t2) => ({
+        flex: "0 0 70px",
+        maxWidth: "100vw",
+        [t2.fn.smallerThan("md")]: {
+          flex: "0 0 180px"
+        },
+        [t2.fn.smallerThan("xs")]: {
+          flex: "0 0 200px"
+        },
+        [t2.fn.smallerThan(345)]: {
+          flex: "0 0 240px"
+        }
+      })
     },
-    /* @__PURE__ */ React13__default.createElement(CubeSource, null),
-    !isLoading && /* @__PURE__ */ React13__default.createElement(Group, { position: "right", spacing: "sm" }, /* @__PURE__ */ React13__default.createElement(LocaleSelector, null), /* @__PURE__ */ React13__default.createElement(Box, { maw: "7rem", miw: "fit" }, /* @__PURE__ */ React13__default.createElement(
-      Select,
+    /* @__PURE__ */ React13__default.createElement(
+      Flex,
       {
-        data: items,
-        defaultValue: String(queryItem.params.pagiLimit),
-        onChange: (value) => {
-          const item = items.find((i) => i.value === value);
-          if (item) onItemSelect(item);
-        }
-      }
-    )), totalRowCount && /* @__PURE__ */ React13__default.createElement(Text, { c: "dimmed" }, t("results.count_rows_plural", { n: formatter.format(totalRowCount) })), showPagination && /* @__PURE__ */ React13__default.createElement(MRT_TablePagination, { table }), /* @__PURE__ */ React13__default.createElement(ApiAndCsvButtons, { copied, copyHandler, url, data }))
-  ));
+        id: "dex-table-footer",
+        px: "sm",
+        pt: { base: 0, xs: "sm" },
+        justify: "space-between",
+        align: "flex-start",
+        direction: { base: "column-reverse", xs: "row" },
+        gap: "xs"
+      },
+      /* @__PURE__ */ React13__default.createElement(CubeSource, null),
+      !isLoading && /* @__PURE__ */ React13__default.createElement(
+        Flex,
+        {
+          justify: { base: "space-between", md: "flex-end" },
+          gap: "xs",
+          w: "100%",
+          direction: { base: "column", md: "row" },
+          align: { base: "flex-end", md: "flex-start", lg: "center" }
+        },
+        /* @__PURE__ */ React13__default.createElement(Box, { display: { base: "none", md: "block" } }, /* @__PURE__ */ React13__default.createElement(LocaleSelector, null)),
+        /* @__PURE__ */ React13__default.createElement(Flex, { align: "center", direction: { base: "column", lg: "row" }, gap: "xs" }, /* @__PURE__ */ React13__default.createElement(Group, { display: { base: "none", md: "flex" }, noWrap: true }, /* @__PURE__ */ React13__default.createElement(Box, { maw: "7rem", miw: "fit", display: { base: "none", md: "block" } }, /* @__PURE__ */ React13__default.createElement(
+          Select,
+          {
+            data: items,
+            defaultValue: String(queryItem.params.pagiLimit),
+            size: "xs",
+            onChange: (value) => {
+              const item = items.find((i) => i.value === value);
+              if (item) onItemSelect(item);
+            }
+          }
+        )), totalRowCount && /* @__PURE__ */ React13__default.createElement(
+          Text,
+          {
+            c: "dimmed",
+            display: { base: "none", md: "block" },
+            sx: { whiteSpace: "nowrap" }
+          },
+          t("results.count_rows_plural", { n: formatter.format(totalRowCount) })
+        )), showPagination && /* @__PURE__ */ React13__default.createElement(MRT_TablePagination, { table })),
+        /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", position: "right" }, /* @__PURE__ */ React13__default.createElement(Box, { display: { base: "block", md: "none" } }, /* @__PURE__ */ React13__default.createElement(LocaleSelector, null)), /* @__PURE__ */ React13__default.createElement(ApiAndCsvButtons, { copied, copyHandler, url, data }))
+      )
+    )
+  );
 }
 var ApiAndCsvButtons = (props) => {
   const { copied, copyHandler, url, data } = props;
   const { translate: t } = useTranslation();
-  return /* @__PURE__ */ React13__default.createElement(Box, { id: "query-results-debug-view" }, /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs" }, url && /* @__PURE__ */ React13__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(Box, { id: "query-results-debug-view" }, /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", noWrap: true }, url && /* @__PURE__ */ React13__default.createElement(
     Button,
     {
       id: "dex-api-btn",
       leftIcon: /* @__PURE__ */ React13__default.createElement(IconCopy, { size: 20 }),
-      sx: { height: 30 },
+      sx: { height: 28 },
       onClick: copyHandler
     },
     copied ? t("action_copy_done") : t("action_copy"),
@@ -2435,7 +2478,7 @@ var DownloadQuery = ({ data }) => {
       ButtonDownload,
       {
         leftIcon: /* @__PURE__ */ React13__default.createElement(IconDownload, { size: 20 }),
-        sx: { height: 30, position: "relative" },
+        sx: { height: 28, position: "relative" },
         key: "download_csv",
         provider: () => downloadQuery({ format: "csv" })
       },
@@ -2445,7 +2488,7 @@ var DownloadQuery = ({ data }) => {
   if (components.length === 0 || data.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React13__default.createElement(Box, { id: "dex-btn-group-download", sx: { position: "relative" } }, errorAlert, /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs" }, components, /* @__PURE__ */ React13__default.createElement(MenuOpts, { formats: formats.filter((f) => f !== "csv") })));
+  return /* @__PURE__ */ React13__default.createElement(Box, { id: "dex-btn-group-download", sx: { position: "relative" } }, errorAlert, /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", noWrap: true }, components, /* @__PURE__ */ React13__default.createElement(MenuOpts, { formats: formats.filter((f) => f !== "csv") })));
 };
 var mimeTypes = {
   csv: "text/csv",
@@ -2626,42 +2669,52 @@ function BarsSVG() {
   );
 }
 function FullScreenSVG() {
-  return /* @__PURE__ */ React13__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", strokeWidth: 1.5 }, /* @__PURE__ */ React13__default.createElement("g", { clipPath: "url(#clip0_905_15763)" }, /* @__PURE__ */ React13__default.createElement(
-    "path",
-    {
-      d: "M3.33325 6.66668V5.00001C3.33325 4.55798 3.50885 4.13406 3.82141 3.8215C4.13397 3.50894 4.55789 3.33334 4.99992 3.33334H6.66659",
-      stroke: "black",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React13__default.createElement(
-    "path",
-    {
-      d: "M3.33325 13.3333V15C3.33325 15.442 3.50885 15.866 3.82141 16.1785C4.13397 16.4911 4.55789 16.6667 4.99992 16.6667H6.66659",
-      stroke: "black",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React13__default.createElement(
-    "path",
-    {
-      d: "M13.3333 3.33334H14.9999C15.4419 3.33334 15.8659 3.50894 16.1784 3.8215C16.491 4.13406 16.6666 4.55798 16.6666 5.00001V6.66668",
-      stroke: "black",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React13__default.createElement(
-    "path",
+  return /* @__PURE__ */ React13__default.createElement(
+    "svg",
     {
-      d: "M13.3333 16.6667H14.9999C15.4419 16.6667 15.8659 16.4911 16.1784 16.1785C16.491 15.866 16.6666 15.442 16.6666 15V13.3333",
-      stroke: "black",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )), /* @__PURE__ */ React13__default.createElement("defs", null, /* @__PURE__ */ React13__default.createElement("clipPath", { id: "clip0_905_15763" }, /* @__PURE__ */ React13__default.createElement("rect", { width: "20", height: "20", fill: "white" }))));
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      strokeWidth: 1.5
+    },
+    /* @__PURE__ */ React13__default.createElement("g", { clipPath: "url(#clip0_905_15763)" }, /* @__PURE__ */ React13__default.createElement(
+      "path",
+      {
+        d: "M3.33325 6.66668V5.00001C3.33325 4.55798 3.50885 4.13406 3.82141 3.8215C4.13397 3.50894 4.55789 3.33334 4.99992 3.33334H6.66659",
+        stroke: "black",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ), /* @__PURE__ */ React13__default.createElement(
+      "path",
+      {
+        d: "M3.33325 13.3333V15C3.33325 15.442 3.50885 15.866 3.82141 16.1785C4.13397 16.4911 4.55789 16.6667 4.99992 16.6667H6.66659",
+        stroke: "black",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ), /* @__PURE__ */ React13__default.createElement(
+      "path",
+      {
+        d: "M13.3333 3.33334H14.9999C15.4419 3.33334 15.8659 3.50894 16.1784 3.8215C16.491 4.13406 16.6666 4.55798 16.6666 5.00001V6.66668",
+        stroke: "black",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ), /* @__PURE__ */ React13__default.createElement(
+      "path",
+      {
+        d: "M13.3333 16.6667H14.9999C15.4419 16.6667 15.8659 16.4911 16.1784 16.1785C16.491 15.866 16.6666 15.442 16.6666 15V13.3333",
+        stroke: "black",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )),
+    /* @__PURE__ */ React13__default.createElement("defs", null, /* @__PURE__ */ React13__default.createElement("clipPath", { id: "clip0_905_15763" }, /* @__PURE__ */ React13__default.createElement("rect", { width: "20", height: "20", fill: "white" })))
+  );
 }
-
-// src/components/TableView.tsx
 function isColumnSorted(column, key) {
   return column == key;
 }
@@ -2891,6 +2944,8 @@ function useTable({
   const { getFormat, getFormatter } = useFormatter();
   const { idFormatters } = useidFormatters();
   const { sortKey, sortDir } = useSelector$1(selectSortingParams);
+  const theme = useMantineTheme();
+  const isSmallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
   const columns = useMemo(() => {
     const indexColumn = {
       id: "#",
@@ -2938,7 +2993,8 @@ function useTable({
         },
         Header: ({ column: column2 }) => {
           const isSorted = isColumnSorted(entity.name, sortKey);
-          return /* @__PURE__ */ React13__default.createElement(Box, { mb: rem(5), key: "header" }, /* @__PURE__ */ React13__default.createElement(Flex, { justify: "center", align: "center" }, /* @__PURE__ */ React13__default.createElement(Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React13__default.createElement(Flex, { gap: "xs", align: "center" }, getActionIcon(entityType), /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, header), /* @__PURE__ */ React13__default.createElement(
+          const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+          const actionSort = /* @__PURE__ */ React13__default.createElement(
             ActionIcon,
             {
               key: `sort-${header}`,
@@ -2983,29 +3039,39 @@ function useTable({
               }
             },
             getSortIcon(isSorted ? sortDir : false, entityType)
-          ))), showTrashIcon(finalKeys, entityType) && /* @__PURE__ */ React13__default.createElement(
-            CustomActionIcon_default,
+          );
+          return /* @__PURE__ */ React13__default.createElement(Box, { mb: rem(5), key: "header" }, /* @__PURE__ */ React13__default.createElement(
+            Flex,
             {
-              label: `At least one ${getEntityText(entityType)} is required.`,
-              key: `remove-${column2.columnDef.header}`,
-              disabled: !showTrashIcon(finalKeys, entityType) || isLoading || isFetching,
-              onClick: () => {
-                removeColumn(
-                  actions2,
-                  entity,
-                  measures,
-                  drilldowns,
-                  entityType,
-                  queryItem,
-                  updateURL
-                );
-              },
-              showTooltip: !showTrashIcon(finalKeys, entityType),
-              size: 25,
-              ml: rem(5)
+              justify: "center",
+              align: { base: "flex-start", sm: "center" },
+              direction: { base: "column", sm: "row" }
             },
-            /* @__PURE__ */ React13__default.createElement(IconTrash, null)
-          )));
+            /* @__PURE__ */ React13__default.createElement(Box, { sx: { flexGrow: 1 }, w: { base: "100%", sm: "auto" } }, /* @__PURE__ */ React13__default.createElement(Flex, { gap: { base: 0, sm: "xs" }, align: "center" }, getActionIcon(entityType), /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, header), !isMobile && actionSort)),
+            /* @__PURE__ */ React13__default.createElement(Group, { position: "apart", w: "100%" }, isMobile && actionSort, showTrashIcon(finalKeys, entityType) && /* @__PURE__ */ React13__default.createElement(
+              CustomActionIcon_default,
+              {
+                label: `At least one ${getEntityText(entityType)} is required.`,
+                key: `remove-${column2.columnDef.header}`,
+                disabled: !showTrashIcon(finalKeys, entityType) || isLoading || isFetching,
+                onClick: () => {
+                  removeColumn(
+                    actions2,
+                    entity,
+                    measures,
+                    drilldowns,
+                    entityType,
+                    queryItem,
+                    updateURL
+                  );
+                },
+                showTooltip: !showTrashIcon(finalKeys, entityType),
+                size: 25,
+                ml: rem(5)
+              },
+              /* @__PURE__ */ React13__default.createElement(IconTrash, null)
+            ))
+          ));
         },
         formatter: formatter2,
         formatterKey,
@@ -3013,7 +3079,9 @@ function useTable({
         dataType: valueType,
         Cell: isNumeric ? ({ cell }) => {
           return /* @__PURE__ */ React13__default.createElement("span", { style: { display: "block", textAlign: "right" } }, formatter2(cell.getValue(), locale));
-        } : ({ cell, renderedCellValue, row }) => {
+        } : ({ cell }) => {
+          const cellValue = cell.getValue();
+          const row = cell.row;
           const cellId = row.original[`${cell.column.id} ID`];
           const idFormatter = idFormatters[`${column.localeLabel} ID`];
           return /* @__PURE__ */ React13__default.createElement(Flex, { justify: "space-between", sx: { width: "100%", maxWidth: 400 }, gap: "sm" }, /* @__PURE__ */ React13__default.createElement(
@@ -3026,7 +3094,7 @@ function useTable({
                 textOverflow: "ellipsis"
               }
             },
-            renderedCellValue
+            cellValue
           ), /* @__PURE__ */ React13__default.createElement(Box, null, cellId && /* @__PURE__ */ React13__default.createElement(Text, { color: "dimmed" }, idFormatter ? idFormatter(cellId) : cellId)));
         }
       };
@@ -3045,9 +3113,10 @@ function useTable({
       enableFilterMatchHighlighting: true,
       enableGlobalFilter: true,
       mantinePaginationProps: {
+        rowsPerPageOptions: ["10", "25", "50", "100"],
         showRowsPerPage: false
       },
-      paginationDisplayMode: "pages",
+      paginationDisplayMode: isSmallerThanMd ? "default" : "pages",
       globalFilterFn: "contains",
       initialState: {
         density: "xs"
@@ -3067,12 +3136,12 @@ function useTable({
       mantinePaperProps: {
         id: "query-results-table-view",
         withBorder: false,
-        sx: (theme) => ({
+        sx: (theme2) => ({
           height: "100%",
           display: "flex",
           flexFlow: "column nowrap",
-          padding: `0 ${theme.spacing.sm}`,
-          [theme.fn.largerThan("md")]: {
+          padding: `0 ${theme2.spacing.sm}`,
+          [theme2.fn.largerThan("md")]: {
             padding: 0
           }
         })
@@ -3105,7 +3174,7 @@ function useTable({
         );
       }
     }),
-    [isError, t]
+    [isError, t, isSmallerThanMd]
   );
   const table = useMantineReactTable({
     columns,
@@ -3179,11 +3248,14 @@ function TableView({
         verticalSpacing: "xs",
         withBorder: true,
         withColumnBorders: true,
-        sx: {
+        sx: (t) => ({
           "thead > tr > th": {
-            padding: "0.5rem 1rem"
+            padding: "0.5rem 1rem",
+            [t.fn.smallerThan("sm")]: {
+              padding: "0.25rem 0.6rem"
+            }
           }
-        }
+        })
       },
       /* @__PURE__ */ React13__default.createElement(
         Box,
@@ -3209,14 +3281,22 @@ function TableView({
             position: "sticky",
             fontSize: theme.fontSizes.sm,
             top: 0,
-            display: "table-cell"
+            display: "table-cell",
+            [theme.fn.smallerThan("sm")]: {
+              minWidth: 180,
+              width: 180
+            }
           });
           const index = (theme) => ({
             ...base(theme),
             minWidth: 10,
             width: 10,
             maxWidth: 10,
-            size: 10
+            size: 10,
+            [theme.fn.smallerThan("sm")]: {
+              minWidth: 5,
+              width: 5
+            }
           });
           return /* @__PURE__ */ React13__default.createElement(
             Box,
@@ -3244,16 +3324,33 @@ function TableView({
           );
         })))
       ),
-      isData && /* @__PURE__ */ React13__default.createElement(Box, { component: "tbody" }, table.getRowModel().rows.map((row) => /* @__PURE__ */ React13__default.createElement("tr", { key: row.id, ref: rowRef }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React13__default.createElement(
-        MRT_TableBodyCell,
+      isData && /* @__PURE__ */ React13__default.createElement(
+        Box,
         {
-          key: cell.id,
-          cell,
-          rowIndex: row.index,
-          table,
-          rowRef
-        }
-      )))))
+          component: "tbody",
+          sx: (t) => ({
+            td: {
+              padding: "0.5rem 1rem !important",
+              fontSize: `${t.fontSizes.sm} !important`
+            },
+            "td:first-of-type": {
+              paddingLeft: "0.5rem !important",
+              paddingRight: "0.5rem !important",
+              minWidth: "0px !important"
+            }
+          })
+        },
+        table.getRowModel().rows.map((row) => /* @__PURE__ */ React13__default.createElement("tr", { key: row.id, ref: rowRef }, row.getVisibleCells().map((cell) => /* @__PURE__ */ React13__default.createElement(
+          MRT_TableBodyCell,
+          {
+            key: cell.id,
+            cell,
+            rowIndex: row.index,
+            table,
+            rowRef
+          }
+        ))))
+      )
     ),
     !isData && !isError && !isLoading && /* @__PURE__ */ React13__default.createElement(NoRecords, null)
   ), /* @__PURE__ */ React13__default.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: true, table }), /* @__PURE__ */ React13__default.createElement(
@@ -3420,8 +3517,8 @@ var AddColumnsDrawer = () => {
       id: "dex-column-btn",
       leftIcon: /* @__PURE__ */ React13__default.createElement(IconPlus, { size: "1.2rem" }),
       onClick: open,
-      m: "md",
-      size: "sm"
+      m: "xs",
+      size: "xs"
     },
     t("params.add_columns")
   )));
@@ -3902,7 +3999,8 @@ var getIconForDimensionType = (dimensionType) => {
 var DrawerMenu_default = AddColumnsDrawer;
 var tabsStyles = (t) => ({
   root: {
-    alignSelf: "flex-end"
+    alignSelf: "flex-start",
+    width: "100%"
   },
   tab: {
     fontWeight: 700,
@@ -3916,12 +4014,17 @@ var tabsStyles = (t) => ({
     }
   }
 });
-function ExplorerTabs({
-  panels,
-  onChange,
-  value
-}) {
+function ExplorerTabs({ panels, onChange, value }) {
   const { translate: t } = useTranslation();
+  const [menuOpened, setMenuOpened] = useState(false);
+  const theme = useMantineTheme();
+  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.xs})`);
+  const visiblePanels = isMobile ? panels.slice(0, 2) : panels;
+  const menuPanels = isMobile ? panels.slice(2) : [];
+  const handleMenuItemClick = (panelKey) => {
+    onChange(panelKey);
+    setMenuOpened(false);
+  };
   return /* @__PURE__ */ React13__default.createElement(
     Tabs,
     {
@@ -3931,7 +4034,25 @@ function ExplorerTabs({
       value,
       styles: tabsStyles
     },
-    /* @__PURE__ */ React13__default.createElement(Tabs.List, null, panels.map((panel) => /* @__PURE__ */ React13__default.createElement(Tabs.Tab, { key: panel.key, id: panel.key, value: panel.key, h: 56 }, t(panel.label))))
+    /* @__PURE__ */ React13__default.createElement(Tabs.List, { sx: { flexWrap: "nowrap", alignItems: "center", justifyContent: "space-between" } }, /* @__PURE__ */ React13__default.createElement("div", { style: { display: "flex" } }, visiblePanels.map((panel) => /* @__PURE__ */ React13__default.createElement(Tabs.Tab, { key: panel.key, id: panel.key, value: panel.key, h: 56 }, t(panel.label)))), menuPanels.length > 0 && /* @__PURE__ */ React13__default.createElement(Menu, { opened: menuOpened, onChange: setMenuOpened, withinPortal: true }, /* @__PURE__ */ React13__default.createElement(Menu.Target, null, /* @__PURE__ */ React13__default.createElement(
+      ActionIcon,
+      {
+        size: "lg",
+        variant: "subtle",
+        color: theme.primaryColor,
+        sx: { display: "flex", alignItems: "center", height: "100%", marginLeft: "auto" }
+      },
+      /* @__PURE__ */ React13__default.createElement(IconDotsVertical, { size: "1.2rem" })
+    )), /* @__PURE__ */ React13__default.createElement(Menu.Dropdown, null, menuPanels.map((panel) => /* @__PURE__ */ React13__default.createElement(
+      Menu.Item,
+      {
+        key: panel.key,
+        onClick: () => handleMenuItemClick(panel.key),
+        color: value === panel.key ? theme.primaryColor : void 0,
+        fw: value === panel.key ? 700 : void 0
+      },
+      t(panel.label)
+    )))))
   );
 }
 var PreviewModeSwitch = (props) => {
@@ -3976,7 +4097,10 @@ var PreviewModeSwitch = (props) => {
 var toolbarSx = (t) => ({
   background: t.colorScheme === "dark" ? t.black : t.white,
   borderRadius: t.radius.xl,
-  height: "fit-content"
+  height: "fit-content",
+  svg: {
+    height: 15
+  }
 });
 function ToolbarButton({ icon, label, onClick = () => void 0 }) {
   const { toolbarConfig } = useSettings();
@@ -3987,7 +4111,7 @@ function ToolbarButton({ icon, label, onClick = () => void 0 }) {
       py: { base: "0.2rem", md: 0 },
       sx: (t) => ({ "& svg path": { stroke: t.colorScheme === "dark" ? "white" : "black" } })
     },
-    /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", noWrap: true }, icon, (toolbarConfig == null ? void 0 : toolbarConfig.showLabels) && label && /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, label))
+    /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", noWrap: true }, icon, (toolbarConfig == null ? void 0 : toolbarConfig.showLabels) && label && /* @__PURE__ */ React13__default.createElement(Text, { size: "sm", sx: { whiteSpace: "nowrap" }, color: "dimmed" }, label))
   );
 }
 function TourButton() {
@@ -4012,15 +4136,17 @@ function Toolbar({
 }) {
   const { translate: t } = useTranslation();
   const theme = useMantineTheme();
-  const smallerThanLg = useMediaQuery(`(max-width: ${theme.breakpoints.lg}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.lg) ? "" : "px"})`);
+  const smallerThanLg = useMediaQuery(
+    `(max-width: ${theme.breakpoints.xs}${/(?:px|em|rem|vh|vw|%)$/.test(theme.breakpoints.xs) ? "" : "px"})`
+  );
   const { toolbarConfig } = useSettings();
   const settings = /* @__PURE__ */ React13__default.createElement(
     Flex,
     {
-      direction: { base: "column", lg: "row" },
+      direction: { base: "column", xs: "row" },
       justify: "flex-start",
       sx: toolbarSx,
-      p: "0.325rem",
+      p: "0.25rem",
       px: "md",
       wrap: "nowrap",
       gap: "xs"
@@ -4036,7 +4162,7 @@ function Toolbar({
       }
     )
   );
-  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;
+  return smallerThanLg ? /* @__PURE__ */ React13__default.createElement(Menu, null, /* @__PURE__ */ React13__default.createElement(Menu.Target, null, /* @__PURE__ */ React13__default.createElement(ActionIcon, { size: "md" }, /* @__PURE__ */ React13__default.createElement(IconSettings, null))), /* @__PURE__ */ React13__default.createElement(Menu.Dropdown, null, settings)) : settings;
 }
 var QueryContext = createContext(void 0);
 function QueryProvider({ children, defaultCube }) {
@@ -4214,267 +4340,85 @@ function useQueryItem() {
   }
   return context;
 }
-
-// src/components/ExplorerResults.tsx
-var useStyles2 = createStyles(() => ({
-  container: {
-    minHeight: "40vh",
-    display: "flex",
-    flexFlow: "column nowrap"
+var createContext4 = (name4) => {
+  const Context = React13__default.createContext(void 0);
+  const useContext4 = () => {
+    const ctx = React13__default.useContext(Context);
+    if (ctx === void 0) {
+      throw new Error(`useContext for must be inside a ${name4}Provider with a value`);
+    }
+    return ctx;
+  };
+  return [useContext4, Context.Provider];
+};
+var Graph = class {
+  constructor() {
+    this.nodes = /* @__PURE__ */ new Set([]);
+    this.adjList = {};
+    this.items = [];
+    this.topicOrder = {};
   }
-}));
-function ExplorerResults(props) {
-  const {
-    data: schema,
-    isLoading: schemaLoading,
-    isError: schemaError,
-    error: schemaErrorDetail
-  } = useServerSchema();
-  const { transintionLocaleLoading } = useQueryItem();
-  const { params } = useSelector$1(selectCurrentQueryItem);
-  const cubeMap = (schema == null ? void 0 : schema.cubeMap) || {};
-  const cube = cubeMap[params.cube];
-  const { online: isServerOnline, url: serverUrl } = schema || {};
-  const { translate: t } = useTranslation();
-  const { classes, cx } = useStyles2();
-  if (typeof window === "object" && window.navigator.onLine === false) {
-    return /* @__PURE__ */ React13__default.createElement(
-      FailureResult,
-      {
-        className: cx(classes.container, props.className),
-        icon: /* @__PURE__ */ React13__default.createElement(IconWorld, { color: "orange", size: "5rem" }),
-        title: t("results.error_disconnected_title")
-      }
-    );
+  addTopicOrder(topic, order) {
+    this.topicOrder[topic] = Number(order);
   }
-  if (isServerOnline === false) {
-    return /* @__PURE__ */ React13__default.createElement(
-      FailureResult,
-      {
-        className: cx(classes.container, props.className),
-        icon: /* @__PURE__ */ React13__default.createElement(IconAlertTriangle, { color: "orange", size: "5rem" }),
-        title: t("results.error_serveroffline_title"),
-        description: /* @__PURE__ */ React13__default.createElement(Text, { span: true }, t("results.error_serveroffline_detail"), /* @__PURE__ */ React13__default.createElement(Anchor, { href: serverUrl, target: "_blank", rel: "noopener noreferrer" }, serverUrl), ".")
+  getTopicOrder(topic) {
+    return this.topicOrder[topic] || 0;
+  }
+  addNode(node) {
+    this.nodes.add(node);
+    if (!this.adjList[node]) this.adjList[node] = /* @__PURE__ */ new Set([]);
+  }
+  addEdge(node1, node2) {
+    this.adjList[node1].add(node2);
+    this.adjList[node2].add(node1);
+  }
+  removeEdge(node1, node2) {
+    const indexOfNode2 = this.adjList[node1] && this.adjList[node1].indexOf(node2);
+    const indexOfNode1 = this.adjList[node2] && this.adjList[node2].indexOf(node1);
+    const badIndices = this.adjList[node1] === void 0 || this.adjList[node2] === void 0;
+    if (badIndices) {
+      return "Please pass in valid indices";
+    } else {
+      this.adjList[node1].splice(indexOfNode2, 1);
+      this.adjList[node2].splice(indexOfNode1, 1);
+    }
+  }
+  isType(locale, node, type) {
+    return this.items.find((item) => getAnnotation(item, type, locale) == node);
+  }
+  isTable(locale, node) {
+    return this.items.filter((item) => getAnnotation(item, "table", locale) == node);
+  }
+  getTopic(startingNode, locale) {
+    let found = false;
+    let topic = null;
+    this.breadthFirstTraversal(startingNode, (node) => {
+      if (this.isType(locale, node, "topic")) {
+        if (!found) {
+          found = true;
+          topic = node;
+        }
       }
-    );
+    });
+    return topic;
   }
-  if (isServerOnline == null || !cube || schemaLoading || transintionLocaleLoading) {
-    return /* @__PURE__ */ React13__default.createElement(
-      Paper,
-      {
-        className: cx(classes.container, props.className),
-        id: "query-results-transient",
-        radius: 0
-      },
-      props.splash || null
-    );
+  getName(node, locale) {
+    const item = this.items.find((item2) => item2.name === node);
+    const name4 = item ? getAnnotation(item, "table", locale) : node;
+    return name4;
   }
-  if (schemaError) {
-    return /* @__PURE__ */ React13__default.createElement(
-      FailureResult,
-      {
-        className: cx(classes.container, props.className),
-        description: /* @__PURE__ */ React13__default.createElement(Stack, { align: "center", spacing: "xs" }, /* @__PURE__ */ React13__default.createElement(Text, null, t("results.error_execquery_detail")), /* @__PURE__ */ React13__default.createElement(Text, null, schemaErrorDetail.message)),
-        icon: /* @__PURE__ */ React13__default.createElement(IconAlertTriangle, { color: "orange", size: "5rem" })
+  getSubtopic(startingNode, locale) {
+    let found = false;
+    let subtopic = null;
+    this.breadthFirstTraversal(startingNode, (node) => {
+      if (this.isType(locale, node, "subtopic")) {
+        if (!found) {
+          found = true;
+          subtopic = node;
+        }
       }
-    );
-  }
-  return /* @__PURE__ */ React13__default.createElement(
-    SuccessResult,
-    {
-      className: cx(classes.container, props.className),
-      cube,
-      panels: props.panels,
-      params,
-      panelKey: null
-    },
-    props.splash
-  );
-}
-function FailureResult(props) {
-  return /* @__PURE__ */ React13__default.createElement(
-    Paper,
-    {
-      id: "query-results-failure",
-      className: props.className,
-      radius: 0,
-      withBorder: true,
-      sx: { justifyContent: "center" }
-    },
-    /* @__PURE__ */ React13__default.createElement(Stack, { align: "center", spacing: "xs" }, props.icon && props.icon, props.title && /* @__PURE__ */ React13__default.createElement(Title, { order: 5 }, props.title), props.description && /* @__PURE__ */ React13__default.createElement(Text, null, props.description), props.children && props.children, props.action && props.action)
-  );
-}
-function SuccessResult(props) {
-  const updateUrl = useUpdateUrl();
-  const { cube, panels, params } = props;
-  const { translate: t } = useTranslation();
-  const { previewLimit, actions: actions2 } = useSettings();
-  const queryItem = useSelector$1(selectCurrentQueryItem);
-  const isPreviewMode = useSelector$1(selectIsPreviewMode);
-  const fullscreen = useFullscreen();
-  const { classes, cx } = useStyles2();
-  const [CurrentComponent, panelKey, panelMeta] = useMemo(() => {
-    const currentPanel = queryItem.panel || `${panels[0].key}-`;
-    const [panelKey2, ...panelMeta2] = currentPanel.split("-");
-    const panel = panels.find((item) => item.key === panelKey2) || panels[0];
-    return [panel.component, panel.key, panelMeta2.join("-")];
-  }, [panels, queryItem.panel]);
-  const tabHandler = (newTab) => {
-    actions2.switchPanel(newTab);
-    updateUrl({ ...queryItem, panel: newTab });
-  };
-  const { table, isError, isLoading, data, columns, result, pagination, isFetching } = useTable({
-    cube
-  });
-  if ((data == null ? void 0 : data.length) === 0 && !isLoading && !isError) {
-    return /* @__PURE__ */ React13__default.createElement(
-      FailureResult,
-      {
-        className: cx(classes.container, props.className),
-        icon: /* @__PURE__ */ React13__default.createElement(IconBox, { color: "orange", size: "5rem" }),
-        title: t("results.error_emptyresult_title"),
-        description: t("results.error_emptyresult_detail")
-      }
-    );
-  }
-  return /* @__PURE__ */ React13__default.createElement(
-    Flex,
-    {
-      gap: "xs",
-      direction: "column",
-      w: "100%",
-      className: props.className,
-      h: "100%",
-      sx: { overflow: "hidden" }
-    },
-    /* @__PURE__ */ React13__default.createElement(
-      Paper,
-      {
-        ref: fullscreen.ref,
-        id: "query-results-success",
-        h: "100%",
-        sx: { display: "flex", flexDirection: "column", overflow: "hidden" }
-      },
-      /* @__PURE__ */ React13__default.createElement(
-        Flex,
-        {
-          sx: (t2) => ({
-            alignItems: "center",
-            background: t2.colorScheme === "dark" ? t2.colors.dark[7] : t2.colors.gray[1],
-            justifyContent: "space-between"
-          }),
-          w: "100%",
-          h: "fit-content"
-        },
-        /* @__PURE__ */ React13__default.createElement(ExplorerTabs, { panels, onChange: tabHandler, value: panelKey }),
-        (!queryItem.panel || queryItem.panel === "table") && /* @__PURE__ */ React13__default.createElement(Group, { sx: { display: "flex", flex: "0 1 auto", gap: "0.5rem" }, mr: "sm", noWrap: true }, table && /* @__PURE__ */ React13__default.createElement(Toolbar, { table, fullscreen }), /* @__PURE__ */ React13__default.createElement(DrawerMenu_default, null))
-      ),
-      isPreviewMode && /* @__PURE__ */ React13__default.createElement(Alert, { id: "alert-load-all-results", color: "yellow", radius: 0, sx: { flex: "0 0 auto" } }, /* @__PURE__ */ React13__default.createElement(Group, { position: "apart" }, /* @__PURE__ */ React13__default.createElement(Text, null, /* @__PURE__ */ React13__default.createElement(Text, { fw: 700, span: true }, t("previewMode.title_preview"), ":", " "), /* @__PURE__ */ React13__default.createElement(Text, { span: true }, t("previewMode.description_preview", { limit: previewLimit }))), /* @__PURE__ */ React13__default.createElement(PreviewModeSwitch, null))),
-      /* @__PURE__ */ React13__default.createElement(
-        Box,
-        {
-          id: "query-results-content",
-          sx: { flex: "1 1 calc(100% - 70px)", maxHeight: "calc(100% - 70px)" }
-        },
-        /* @__PURE__ */ React13__default.createElement(Suspense, { fallback: props.children }, /* @__PURE__ */ React13__default.createElement(Flex, { h: "100%" }, /* @__PURE__ */ React13__default.createElement(Box, { sx: { flex: "1 1", overflowX: "scroll" } }, /* @__PURE__ */ React13__default.createElement(
-          CurrentComponent,
-          {
-            panelKey: `${panelKey}-${panelMeta}`,
-            cube,
-            params,
-            data,
-            result,
-            table,
-            isError,
-            isLoading,
-            columns,
-            pagination,
-            isFetching
-          }
-        ))))
-      )
-    )
-  );
-}
-var createContext4 = (name4) => {
-  const Context = React13__default.createContext(void 0);
-  const useContext4 = () => {
-    const ctx = React13__default.useContext(Context);
-    if (ctx === void 0) {
-      throw new Error(`useContext for must be inside a ${name4}Provider with a value`);
-    }
-    return ctx;
-  };
-  return [useContext4, Context.Provider];
-};
-var Graph = class {
-  constructor() {
-    this.nodes = /* @__PURE__ */ new Set([]);
-    this.adjList = {};
-    this.items = [];
-    this.topicOrder = {};
-  }
-  addTopicOrder(topic, order) {
-    this.topicOrder[topic] = Number(order);
-  }
-  getTopicOrder(topic) {
-    return this.topicOrder[topic] || 0;
-  }
-  addNode(node) {
-    this.nodes.add(node);
-    if (!this.adjList[node]) this.adjList[node] = /* @__PURE__ */ new Set([]);
-  }
-  addEdge(node1, node2) {
-    this.adjList[node1].add(node2);
-    this.adjList[node2].add(node1);
-  }
-  removeEdge(node1, node2) {
-    const indexOfNode2 = this.adjList[node1] && this.adjList[node1].indexOf(node2);
-    const indexOfNode1 = this.adjList[node2] && this.adjList[node2].indexOf(node1);
-    const badIndices = this.adjList[node1] === void 0 || this.adjList[node2] === void 0;
-    if (badIndices) {
-      return "Please pass in valid indices";
-    } else {
-      this.adjList[node1].splice(indexOfNode2, 1);
-      this.adjList[node2].splice(indexOfNode1, 1);
-    }
-  }
-  isType(locale, node, type) {
-    return this.items.find((item) => getAnnotation(item, type, locale) == node);
-  }
-  isTable(locale, node) {
-    return this.items.filter((item) => getAnnotation(item, "table", locale) == node);
-  }
-  getTopic(startingNode, locale) {
-    let found = false;
-    let topic = null;
-    this.breadthFirstTraversal(startingNode, (node) => {
-      if (this.isType(locale, node, "topic")) {
-        if (!found) {
-          found = true;
-          topic = node;
-        }
-      }
-    });
-    return topic;
-  }
-  getName(node, locale) {
-    const item = this.items.find((item2) => item2.name === node);
-    const name4 = item ? getAnnotation(item, "table", locale) : node;
-    return name4;
-  }
-  getSubtopic(startingNode, locale) {
-    let found = false;
-    let subtopic = null;
-    this.breadthFirstTraversal(startingNode, (node) => {
-      if (this.isType(locale, node, "subtopic")) {
-        if (!found) {
-          found = true;
-          subtopic = node;
-        }
-      }
-    });
-    return subtopic;
+    });
+    return subtopic;
   }
   filter(locale, filter) {
     function addItemToSubtopic(map2, subtopic, item) {
@@ -4639,24 +4583,12 @@ function SideBarControlBtn({ actionIconProps = {} }) {
     /* @__PURE__ */ React13__default.createElement(DataSetSVG, null)
   );
 }
-function SideBarControlBtnFixed() {
-  const actionIconProps = {
-    sx: (t) => ({
-      backgroundColor: `${t.colorScheme === "dark" ? t.colors.dark[8] : t.colors.gray[1]} !important`,
-      padding: `calc(${t.spacing.xs} / 2)`,
-      borderRadius: t.radius.xl,
-      width: 50,
-      height: 50
-    })
-  };
-  return /* @__PURE__ */ React13__default.createElement(Affix, { position: { left: "1rem", bottom: 150 } }, /* @__PURE__ */ React13__default.createElement(SideBarControlBtn, { actionIconProps }));
-}
 function SideBar(props) {
   const { expanded, input, setExpanded, setInput } = useSideBar();
   const { translate: t } = useTranslation();
   const theme = useMantineTheme();
   const smallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
-  return /* @__PURE__ */ React13__default.createElement(React13__default.Fragment, null, smallerThanMd && /* @__PURE__ */ React13__default.createElement(SideBarControlBtnFixed, null), /* @__PURE__ */ React13__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement(React13__default.Fragment, null, /* @__PURE__ */ React13__default.createElement(
     Box,
     {
       id: "dex-sidebar",
@@ -4686,6 +4618,7 @@ function SideBar(props) {
       Group,
       {
         position: "apart",
+        align: "center",
         noWrap: true,
         sx: {
           overflow: "hidden",
@@ -4694,7 +4627,18 @@ function SideBar(props) {
           width: expanded ? 300 : 0
         }
       },
-      /* @__PURE__ */ React13__default.createElement(Text, { sx: (t2) => ({ color: t2.colorScheme === "dark" ? t2.white : t2.black }), ml: "sm" }, t("params.label_dataset"))
+      /* @__PURE__ */ React13__default.createElement(Text, { sx: (t2) => ({ color: t2.colorScheme === "dark" ? t2.white : t2.black }), ml: "sm" }, t("params.label_dataset")),
+      /* @__PURE__ */ React13__default.createElement(
+        ActionIcon,
+        {
+          onClick: () => setExpanded(!expanded),
+          variant: "subtle",
+          mt: "auto",
+          color: "primaryColor",
+          sx: (t2) => ({ alignSelf: "flex-end" })
+        },
+        expanded ? smallerThanMd ? /* @__PURE__ */ React13__default.createElement(IconX, { size: "1.5rem" }) : /* @__PURE__ */ React13__default.createElement(IconChevronLeft, { size: "1.5rem" }) : /* @__PURE__ */ React13__default.createElement(IconChevronRight, { size: "1.5rem" })
+      )
     )), /* @__PURE__ */ React13__default.createElement(
       Box,
       {
@@ -4718,27 +4662,6 @@ function SideBar(props) {
         })
       },
       /* @__PURE__ */ React13__default.createElement(Box, { h: expanded ? "auto" : "0px" }, props.children)
-    ), /* @__PURE__ */ React13__default.createElement(
-      Group,
-      {
-        align: "center",
-        position: expanded ? "right" : "center",
-        w: "100%",
-        p: "md",
-        sx: { alignSelf: "flex-end", marginTop: "auto" },
-        noWrap: true
-      },
-      /* @__PURE__ */ React13__default.createElement(
-        ActionIcon,
-        {
-          onClick: () => setExpanded(!expanded),
-          variant: "subtle",
-          mt: "auto",
-          color: "primaryColor",
-          sx: (t2) => ({ alignSelf: "flex-end" })
-        },
-        expanded ? /* @__PURE__ */ React13__default.createElement(IconChevronLeft, { size: "1.5rem" }) : /* @__PURE__ */ React13__default.createElement(IconChevronRight, { size: "1.5rem" })
-      )
     ))
   ));
 }
@@ -4799,6 +4722,229 @@ function CubeSearchInput(props) {
     }
   );
 }
+
+// src/components/ExplorerResults.tsx
+function SideBarControlBtn2({ actionIconProps = {} }) {
+  const { expanded, setExpanded } = useSideBar();
+  const sx = (t) => ({
+    alignSelf: "center",
+    color: t.colorScheme === "dark" ? t.white : t.colors.gray[7]
+  });
+  return /* @__PURE__ */ React13__default.createElement(Group, { spacing: "xs", display: { base: "flex", md: "none" }, align: "center" }, /* @__PURE__ */ React13__default.createElement(
+    ActionIcon,
+    {
+      onClick: () => setExpanded(!expanded),
+      variant: "subtle",
+      ...actionIconProps,
+      sx: [sx, ...packSx(actionIconProps.sx)]
+    },
+    /* @__PURE__ */ React13__default.createElement(DataSetSVG, null)
+  ), /* @__PURE__ */ React13__default.createElement(Text, { size: "sm" }, "Select Dataset"));
+}
+var useStyles2 = createStyles(() => ({
+  container: {
+    minHeight: "40vh",
+    display: "flex",
+    flexFlow: "column nowrap"
+  }
+}));
+function ExplorerResults(props) {
+  const {
+    data: schema,
+    isLoading: schemaLoading,
+    isError: schemaError,
+    error: schemaErrorDetail
+  } = useServerSchema();
+  const { transintionLocaleLoading } = useQueryItem();
+  const { params } = useSelector$1(selectCurrentQueryItem);
+  const cubeMap = (schema == null ? void 0 : schema.cubeMap) || {};
+  const cube = cubeMap[params.cube];
+  const { online: isServerOnline, url: serverUrl } = schema || {};
+  const { translate: t } = useTranslation();
+  const { classes, cx } = useStyles2();
+  if (typeof window === "object" && window.navigator.onLine === false) {
+    return /* @__PURE__ */ React13__default.createElement(
+      FailureResult,
+      {
+        className: cx(classes.container, props.className),
+        icon: /* @__PURE__ */ React13__default.createElement(IconWorld, { color: "orange", size: "5rem" }),
+        title: t("results.error_disconnected_title")
+      }
+    );
+  }
+  if (isServerOnline === false) {
+    return /* @__PURE__ */ React13__default.createElement(
+      FailureResult,
+      {
+        className: cx(classes.container, props.className),
+        icon: /* @__PURE__ */ React13__default.createElement(IconAlertTriangle, { color: "orange", size: "5rem" }),
+        title: t("results.error_serveroffline_title"),
+        description: /* @__PURE__ */ React13__default.createElement(Text, { span: true }, t("results.error_serveroffline_detail"), /* @__PURE__ */ React13__default.createElement(Anchor, { href: serverUrl, target: "_blank", rel: "noopener noreferrer" }, serverUrl), ".")
+      }
+    );
+  }
+  if (isServerOnline == null || !cube || schemaLoading || transintionLocaleLoading) {
+    return /* @__PURE__ */ React13__default.createElement(
+      Paper,
+      {
+        className: cx(classes.container, props.className),
+        id: "query-results-transient",
+        radius: 0
+      },
+      props.splash || null
+    );
+  }
+  if (schemaError) {
+    return /* @__PURE__ */ React13__default.createElement(
+      FailureResult,
+      {
+        className: cx(classes.container, props.className),
+        description: /* @__PURE__ */ React13__default.createElement(Stack, { align: "center", spacing: "xs" }, /* @__PURE__ */ React13__default.createElement(Text, null, t("results.error_execquery_detail")), /* @__PURE__ */ React13__default.createElement(Text, null, schemaErrorDetail.message)),
+        icon: /* @__PURE__ */ React13__default.createElement(IconAlertTriangle, { color: "orange", size: "5rem" })
+      }
+    );
+  }
+  return /* @__PURE__ */ React13__default.createElement(
+    SuccessResult,
+    {
+      className: cx(classes.container, props.className),
+      cube,
+      panels: props.panels,
+      params,
+      panelKey: null
+    },
+    props.splash
+  );
+}
+function FailureResult(props) {
+  return /* @__PURE__ */ React13__default.createElement(
+    Paper,
+    {
+      id: "query-results-failure",
+      className: props.className,
+      radius: 0,
+      withBorder: true,
+      sx: { justifyContent: "center" }
+    },
+    /* @__PURE__ */ React13__default.createElement(Stack, { align: "center", spacing: "xs" }, props.icon && props.icon, props.title && /* @__PURE__ */ React13__default.createElement(Title, { order: 5 }, props.title), props.description && /* @__PURE__ */ React13__default.createElement(Text, null, props.description), props.children && props.children, props.action && props.action)
+  );
+}
+function SuccessResult(props) {
+  const updateUrl = useUpdateUrl();
+  const { cube, panels, params } = props;
+  const { translate: t } = useTranslation();
+  const { previewLimit, actions: actions2 } = useSettings();
+  const queryItem = useSelector$1(selectCurrentQueryItem);
+  const isPreviewMode = useSelector$1(selectIsPreviewMode);
+  const fullscreen = useFullscreen();
+  const { classes, cx } = useStyles2();
+  const [CurrentComponent, panelKey, panelMeta] = useMemo(() => {
+    const currentPanel = queryItem.panel || `${panels[0].key}-`;
+    const [panelKey2, ...panelMeta2] = currentPanel.split("-");
+    const panel = panels.find((item) => item.key === panelKey2) || panels[0];
+    return [panel.component, panel.key, panelMeta2.join("-")];
+  }, [panels, queryItem.panel]);
+  const tabHandler = (newTab) => {
+    actions2.switchPanel(newTab);
+    updateUrl({ ...queryItem, panel: newTab });
+  };
+  const { table, isError, isLoading, data, columns, result, pagination, isFetching } = useTable({
+    cube
+  });
+  if ((data == null ? void 0 : data.length) === 0 && !isLoading && !isError) {
+    return /* @__PURE__ */ React13__default.createElement(
+      FailureResult,
+      {
+        className: cx(classes.container, props.className),
+        icon: /* @__PURE__ */ React13__default.createElement(IconBox, { color: "orange", size: "5rem" }),
+        title: t("results.error_emptyresult_title"),
+        description: t("results.error_emptyresult_detail")
+      }
+    );
+  }
+  return /* @__PURE__ */ React13__default.createElement(
+    Flex,
+    {
+      gap: "xs",
+      direction: "column",
+      w: "100%",
+      className: props.className,
+      h: "100%",
+      sx: { overflow: "hidden" }
+    },
+    /* @__PURE__ */ React13__default.createElement(
+      Paper,
+      {
+        ref: fullscreen.ref,
+        id: "query-results-success",
+        h: "100%",
+        sx: { display: "flex", flexDirection: "column", overflow: "hidden" }
+      },
+      /* @__PURE__ */ React13__default.createElement(
+        Flex,
+        {
+          sx: (t2) => ({
+            alignItems: "center",
+            background: t2.colorScheme === "dark" ? t2.colors.dark[7] : t2.colors.gray[1],
+            justifyContent: "space-between",
+            [t2.fn.smallerThan("md")]: {
+              flexDirection: "column",
+              justifyContent: "flex-start",
+              alignItems: "flex-start"
+            }
+          }),
+          w: "100%",
+          h: "fit-content"
+        },
+        /* @__PURE__ */ React13__default.createElement(ExplorerTabs, { panels, onChange: tabHandler, value: panelKey }),
+        (!queryItem.panel || queryItem.panel === "table") && /* @__PURE__ */ React13__default.createElement(
+          Group,
+          {
+            sx: (t2) => ({
+              display: "flex",
+              flex: "0 1 auto",
+              gap: "0.5rem",
+              [t2.fn.smallerThan("md")]: {
+                width: "100%",
+                order: -1,
+                padding: t2.spacing.sm,
+                justifyContent: "space-between"
+              }
+            }),
+            mr: "sm",
+            noWrap: true
+          },
+          /* @__PURE__ */ React13__default.createElement(SideBarControlBtn2, null),
+          /* @__PURE__ */ React13__default.createElement(Flex, { direction: "row", gap: "xs", align: "center" }, table && /* @__PURE__ */ React13__default.createElement(Toolbar, { table, fullscreen }), /* @__PURE__ */ React13__default.createElement(DrawerMenu_default, null))
+        )
+      ),
+      isPreviewMode && /* @__PURE__ */ React13__default.createElement(Alert, { id: "alert-load-all-results", color: "yellow", radius: 0, sx: { flex: "0 0 auto" } }, /* @__PURE__ */ React13__default.createElement(Group, { position: "apart" }, /* @__PURE__ */ React13__default.createElement(Text, null, /* @__PURE__ */ React13__default.createElement(Text, { fw: 700, span: true }, t("previewMode.title_preview"), ":", " "), /* @__PURE__ */ React13__default.createElement(Text, { span: true }, t("previewMode.description_preview", { limit: previewLimit }))), /* @__PURE__ */ React13__default.createElement(PreviewModeSwitch, null))),
+      /* @__PURE__ */ React13__default.createElement(
+        Box,
+        {
+          id: "query-results-content",
+          sx: { flex: "1 1 calc(100% - 70px)", maxHeight: "calc(100% - 70px)" }
+        },
+        /* @__PURE__ */ React13__default.createElement(Suspense, { fallback: props.children }, /* @__PURE__ */ React13__default.createElement(Flex, { h: "100%" }, /* @__PURE__ */ React13__default.createElement(Box, { sx: { flex: "1 1", overflowX: "scroll" } }, /* @__PURE__ */ React13__default.createElement(
+          CurrentComponent,
+          {
+            panelKey: `${panelKey}-${panelMeta}`,
+            cube,
+            params,
+            data,
+            result,
+            table,
+            isError,
+            isLoading,
+            columns,
+            pagination,
+            isFetching
+          }
+        ))))
+      )
+    )
+  );
+}
 function Results(props) {
   const { graph, selectedItem, locale, getCube: getCube2, isSelected: isSelected2 } = props;
   const { classes } = useStyles3();
@@ -5120,7 +5266,7 @@ function ExplorerContent(props) {
     const SplashComponent = props.splash;
     return SplashComponent ? /* @__PURE__ */ React13__default.createElement(SplashComponent, { translation }) : /* @__PURE__ */ React13__default.createElement(Center, { h: "100%", sx: { flex: 1 } }, /* @__PURE__ */ React13__default.createElement(AnimatedCube, null));
   }, [props.splash, translation]);
-  return /* @__PURE__ */ React13__default.createElement("div", { className: classes.container }, /* @__PURE__ */ React13__default.createElement("div", { className: classes.root }, /* @__PURE__ */ React13__default.createElement(SideBarProvider, { locale: defaultLocale }, /* @__PURE__ */ React13__default.createElement(SideBar_default, null, /* @__PURE__ */ React13__default.createElement(SideBarItem, null, /* @__PURE__ */ React13__default.createElement(SelectCubes, { locale: defaultLocale })))), /* @__PURE__ */ React13__default.createElement(
+  return /* @__PURE__ */ React13__default.createElement("div", { className: classes.container }, /* @__PURE__ */ React13__default.createElement("div", { className: classes.root }, /* @__PURE__ */ React13__default.createElement(SideBarProvider, { locale: defaultLocale }, /* @__PURE__ */ React13__default.createElement(SideBar_default, null, /* @__PURE__ */ React13__default.createElement(SideBarItem, null, /* @__PURE__ */ React13__default.createElement(SelectCubes, { locale: defaultLocale }))), /* @__PURE__ */ React13__default.createElement(
     ExplorerResults,
     {
       className: classes.flexCol,
@@ -5128,7 +5274,7 @@ function ExplorerContent(props) {
       splash,
       serverURL: props.serverURL
     }
-  )));
+  ))));
 }
 function usePivotTableData() {
   const queryItem = useSelector$1(selectCurrentQueryItem);

package/package.json

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