@datawheel/data-explorer 0.1.2 → 0.1.3

package/dist/main.js

@@ -1,4 +1,4 @@
-import { keyframes, createStyles, Select, rem, Flex, Title, Text, Group, Button, Box, Anchor, Input, Stack, SimpleGrid, Table, MultiSelect, Center, Alert, Loader, Modal, NumberInput, Menu, ActionIcon, useMantineTheme, Header, MantineProvider, Paper, useComponentDefaultProps, Switch, ThemeIcon, Tooltip, Tabs, ScrollArea, CloseButton, Drawer, Checkbox, UnstyledButton, TextInput, Accordion, Popover, Divider } from '@mantine/core';
+import { keyframes, createStyles, Select, rem, Flex, Title, Text, Group, Button, Box, Anchor, Input, Stack, SimpleGrid, ScrollArea, Table, MultiSelect, Center, Alert, Loader, Modal, NumberInput, Menu, ActionIcon, useMantineTheme, MantineProvider, Paper, useComponentDefaultProps, Switch, ThemeIcon, Tooltip, Tabs, CloseButton, Drawer, Checkbox, UnstyledButton, TextInput, Accordion, Popover, Divider } from '@mantine/core';
 import { useClipboard, useClickOutside, useFullscreen, useMediaQuery, useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { Prism } from '@mantine/prism';
 import { IconWorld, IconExternalLink, IconClipboard, IconAlertCircle, IconAlertTriangle, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconCopy, IconDownload, IconDotsVertical, IconArrowsMinimize, IconArrowsMaximize, IconInfoCircleFilled, IconTrash, IconSearch, IconPhotoDown, IconVectorTriangle, IconStack3, IconFilterOff, IconFilter, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconLanguage } from '@tabler/icons-react';
@@ -203,6 +203,7 @@ var defaultTranslation = {
     dataset: "Select Dataset"
   },
   comparison: {
+    BT: "Between",
     EQ: "Equal to",
     GT: "Greater than",
     GTE: "Equal or greater than",
@@ -238,12 +239,15 @@ var defaultTranslation = {
     action_clear: "Clear query",
     action_clear_description: "Clear all parameters from your current query",
     action_execute: "Execute query",
+    add_columns: "Add columns",
     column_title: "Parameters",
     current_endpoint: "Current endpoint: {{label}}",
     dimmenu_abbrjoint: ": ",
     dimmenu_dimension: "{{dimension}}",
     dimmenu_hierarchy: "{{abbr}}",
     dimmenu_level: "{{abbr}}",
+    filter_mode: "Filter Mode",
+    filter_by: "Filter by {{name}}",
     error_no_cut_selected_detail: "You can add data filters based on selected drilldowns.",
     error_no_cut_selected_title: "No cuts added",
     error_no_dimension_selected_detail: "You must add at least one drilldown.",
@@ -1362,7 +1366,6 @@ function parseStateFromSearchParams(query) {
       const comparison = cond[0];
       const inputtedValue = cond[1];
       const interpretedValue = Number.parseFloat(cond[1]);
-      console.log("Entro parse", comparison, inputtedValue, interpretedValue);
       return [comparison, inputtedValue, interpretedValue];
     }
   }
@@ -1560,24 +1563,7 @@ function calcMaxMemberCount(query, params, dispatch) {
   });
   const memberLengths = query.getParam("drilldowns").map(
     (level) => Level.isLevel(level) ? drills[level.uniqueName] || ds.fetchMembers(level).then(async (members) => {
-      const { cube, name: name4, dimension, fullName, depth, properties, hierarchy, annotations, key } = level;
-      ({
-        cube: cube.name,
-        dimension: dimension.name,
-        fullName,
-        depth,
-        _type: "level",
-        name: name4,
-        uri: level._source.uri,
-        properties: properties.map((p) => ({
-          name: p.name,
-          annotations: p.annotations,
-          uri: p._source.uri,
-          _type: "property"
-        })),
-        hierarchy: hierarchy.name,
-        annotations
-      });
+      const { dimension } = level;
       const drilldown = Object.values(params.drilldowns).find(
         (d) => d.uniqueName === level.uniqueName
       );
@@ -2183,40 +2169,41 @@ function IconChevronRight() {
   return /* @__PURE__ */ React10__default.createElement("svg", { width: "9", height: "13", viewBox: "0 0 7 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React10__default.createElement("path", { d: "M1 10L5.5 5.5L1 1", stroke: "black", strokeLinecap: "round" }));
 }
 function DataSetSVG() {
-  return /* @__PURE__ */ React10__default.createElement("svg", { width: "25", height: "25", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React10__default.createElement(
-    "path",
-    {
-      d: "M3.33325 5C3.33325 5.66304 4.03563 6.29893 5.28587 6.76777C6.53612 7.23661 8.23181 7.5 9.99992 7.5C11.768 7.5 13.4637 7.23661 14.714 6.76777C15.9642 6.29893 16.6666 5.66304 16.6666 5C16.6666 4.33696 15.9642 3.70107 14.714 3.23223C13.4637 2.76339 11.768 2.5 9.99992 2.5C8.23181 2.5 6.53612 2.76339 5.28587 3.23223C4.03563 3.70107 3.33325 4.33696 3.33325 5Z",
-      stroke: "#212529",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React10__default.createElement(
-    "path",
-    {
-      d: "M3.33325 5V10C3.33325 10.663 4.03563 11.2989 5.28587 11.7678C6.53612 12.2366 8.23181 12.5 9.99992 12.5C11.768 12.5 13.4637 12.2366 14.714 11.7678C15.9642 11.2989 16.6666 10.663 16.6666 10V5",
-      stroke: "#212529",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ), /* @__PURE__ */ React10__default.createElement(
-    "path",
-    {
-      d: "M3.33325 10V15C3.33325 15.663 4.03563 16.2989 5.28587 16.7678C6.53612 17.2366 8.23181 17.5 9.99992 17.5C11.768 17.5 13.4637 17.2366 14.714 16.7678C15.9642 16.2989 16.6666 15.663 16.6666 15V10",
-      stroke: "#212529",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-}
-function HomeSVG() {
-  return /* @__PURE__ */ React10__default.createElement("svg", { width: "22", height: "24", viewBox: "0 0 16 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React10__default.createElement(
-    "path",
+  return /* @__PURE__ */ React10__default.createElement(
+    "svg",
     {
-      d: "M2 16H5V10H11V16H14V7L8 2.5L2 7V16ZM0 18V6L8 0L16 6V18H9V12H7V18H0Z",
-      fill: "#545454"
-    }
-  ));
+      width: "25",
+      height: "25",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React10__default.createElement(
+      "path",
+      {
+        d: "M3.33325 5C3.33325 5.66304 4.03563 6.29893 5.28587 6.76777C6.53612 7.23661 8.23181 7.5 9.99992 7.5C11.768 7.5 13.4637 7.23661 14.714 6.76777C15.9642 6.29893 16.6666 5.66304 16.6666 5C16.6666 4.33696 15.9642 3.70107 14.714 3.23223C13.4637 2.76339 11.768 2.5 9.99992 2.5C8.23181 2.5 6.53612 2.76339 5.28587 3.23223C4.03563 3.70107 3.33325 4.33696 3.33325 5Z",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ React10__default.createElement(
+      "path",
+      {
+        d: "M3.33325 5V10C3.33325 10.663 4.03563 11.2989 5.28587 11.7678C6.53612 12.2366 8.23181 12.5 9.99992 12.5C11.768 12.5 13.4637 12.2366 14.714 11.7678C15.9642 11.2989 16.6666 10.663 16.6666 10V5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ React10__default.createElement(
+      "path",
+      {
+        d: "M3.33325 10V15C3.33325 15.663 4.03563 16.2989 5.28587 16.7678C6.53612 17.2366 8.23181 17.5 9.99992 17.5C11.768 17.5 13.4637 17.2366 14.714 16.7678C15.9642 16.2989 16.6666 15.663 16.6666 15V10",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
 }
 function StackSVG() {
   return /* @__PURE__ */ React10__default.createElement(
@@ -2450,7 +2437,7 @@ function CubeSource() {
 
 // src/components/TableFooter.tsx
 function TableFooter(props) {
-  const { result, table } = props;
+  const { result, table, data = [] } = props;
   const { translate: t } = useTranslation();
   const { url } = result;
   const { copy, copied } = useClipboard({ timeout: 1e3 });
@@ -2465,7 +2452,7 @@ function TableFooter(props) {
       gap: "sm"
     },
     /* @__PURE__ */ React10__default.createElement(CubeSource, null),
-    /* @__PURE__ */ React10__default.createElement(Group, { position: "right", spacing: "sm" }, /* @__PURE__ */ React10__default.createElement(Text, { c: "dimmed" }, t("results.count_rows", { n: result.data.length })), /* @__PURE__ */ React10__default.createElement(MRT_TablePagination, { table }), /* @__PURE__ */ React10__default.createElement(ApiAndCsvButtons, { copied, copyHandler, url }))
+    /* @__PURE__ */ React10__default.createElement(Group, { position: "right", spacing: "sm" }, /* @__PURE__ */ React10__default.createElement(Text, { c: "dimmed" }, t("results.count_rows", { n: data.length })), /* @__PURE__ */ React10__default.createElement(MRT_TablePagination, { table }), /* @__PURE__ */ React10__default.createElement(ApiAndCsvButtons, { copied, copyHandler, url }))
   ));
 }
 var ApiAndCsvButtons = (props) => {
@@ -2672,6 +2659,7 @@ function abbreviateFullName(nameParts, joint = "/") {
 }
 function AddColumnsDrawer() {
   const [opened, { open, close: close2 }] = useDisclosure(false);
+  const { translate: t } = useTranslation();
   const theme = useMantineTheme();
   const smallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
   return /* @__PURE__ */ React10__default.createElement(React10__default.Fragment, null, /* @__PURE__ */ React10__default.createElement(
@@ -2680,8 +2668,8 @@ function AddColumnsDrawer() {
       opened,
       position: "right",
       onClose: close2,
-      title: /* @__PURE__ */ React10__default.createElement(Group, null, /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "0.75rem" }), /* @__PURE__ */ React10__default.createElement(Text, { fw: 700 }, "Add Columns")),
-      styles: (t) => ({
+      title: /* @__PURE__ */ React10__default.createElement(Group, null, /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "1rem" }), /* @__PURE__ */ React10__default.createElement(Text, { fw: 700 }, t("params.add_columns"))),
+      styles: (t2) => ({
         inner: {
           position: "absolute",
           inset: 0
@@ -2690,7 +2678,7 @@ function AddColumnsDrawer() {
           background: "transparent"
         },
         content: {
-          backgroundColor: t.colorScheme === "dark" ? t.colors.dark[8] : t.colors.gray[1]
+          backgroundColor: t2.colorScheme === "dark" ? t2.colors.dark[8] : t2.colors.gray[1]
         }
       }),
       overlayProps: {
@@ -2700,7 +2688,7 @@ function AddColumnsDrawer() {
     },
     /* @__PURE__ */ React10__default.createElement(MeasuresOptions, null),
     /* @__PURE__ */ React10__default.createElement(DrillDownOptions, null)
-  ), /* @__PURE__ */ React10__default.createElement(Group, { position: "center" }, smallerThanMd ? /* @__PURE__ */ React10__default.createElement(ActionIcon, { onClick: open, size: "md", variant: "filled", color: theme.primaryColor }, /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "0.75rem" })) : /* @__PURE__ */ React10__default.createElement(Button, { leftIcon: /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "0.75rem" }), onClick: open, m: "md", size: "xs" }, "Add Columns")));
+  ), /* @__PURE__ */ React10__default.createElement(Group, { position: "center" }, smallerThanMd ? /* @__PURE__ */ React10__default.createElement(ActionIcon, { onClick: open, size: "md", variant: "filled", color: theme.primaryColor }, /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "0.75rem" })) : /* @__PURE__ */ React10__default.createElement(Button, { leftIcon: /* @__PURE__ */ React10__default.createElement(IconStack3, { size: "1rem" }), onClick: open, m: "md", size: "xs" }, t("params.add_columns"))));
 }
 function DrillDownOptions() {
   const locale = useSelector$1(selectLocale);
@@ -2712,7 +2700,7 @@ function DrillDownOptions() {
     cutItem.active = false;
     actions2.updateCut(cutItem);
   }, []);
-  const createHandler = useCallback(
+  useCallback(
     (level) => {
       var _a;
       const drilldownItem = (_a = selectedDimensions.find((item) => item.uniqueName === level.uniqueName)) != null ? _a : buildDrilldown({ ...level });
@@ -2739,7 +2727,6 @@ function DrillDownOptions() {
         dimension,
         locale: locale.code,
         key: dimension.uri,
-        onItemSelect: createHandler,
         activeItems
       }
     )),
@@ -2862,9 +2849,10 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
         actions2.updateDrilldown({ ...currentDrilldown, active: !currentDrilldown.active });
       },
       checked,
-      label
+      label,
+      size: "xs"
     }
-  ), /* @__PURE__ */ React10__default.createElement(Group, null, /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "xs", onClick: () => setActiveFilter((value) => !value) }, activeFilter ? /* @__PURE__ */ React10__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React10__default.createElement(IconFilter, null)), /* @__PURE__ */ React10__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React10__default.createElement(StackSVG, null)))), activeFilter && /* @__PURE__ */ React10__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React10__default.createElement(
+  ), /* @__PURE__ */ React10__default.createElement(Group, null, /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "sm", onClick: () => setActiveFilter((value) => !value) }, activeFilter ? /* @__PURE__ */ React10__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React10__default.createElement(IconFilter, null)), /* @__PURE__ */ React10__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React10__default.createElement(StackSVG, null)))), activeFilter && /* @__PURE__ */ React10__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React10__default.createElement(
     MultiSelect,
     {
       sx: { flex: "1 1 100%" },
@@ -2889,14 +2877,14 @@ function LevelItem({ dimension, hierarchy, isSubMenu, level, locale, activeItems
     }
   )));
 }
-function getFilterfnText(type) {
+function getFilterfnKey(type) {
   switch (type) {
     case "greaterThan":
-      return "Greater Than";
+      return "GT";
     case "lessThan":
-      return "Less Than";
+      return "LT";
     case "between":
-      return "Between";
+      return "BT";
     default:
       return "Not Found";
   }
@@ -2986,7 +2974,8 @@ function MinMax({ filter, ...rest }) {
 }
 function FilterFnsMenu({ filter }) {
   const actions2 = useActions();
-  return /* @__PURE__ */ React10__default.createElement(React10__default.Fragment, null, /* @__PURE__ */ React10__default.createElement(Menu, { shadow: "md", width: 200 }, /* @__PURE__ */ React10__default.createElement(Menu.Target, null, /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "xs" }, /* @__PURE__ */ React10__default.createElement(IconSettings, null))), /* @__PURE__ */ React10__default.createElement(Menu.Dropdown, null, /* @__PURE__ */ React10__default.createElement(Menu.Label, null, "Filter Mode"), /* @__PURE__ */ React10__default.createElement(
+  const { translate: t } = useTranslation();
+  return /* @__PURE__ */ React10__default.createElement(React10__default.Fragment, null, /* @__PURE__ */ React10__default.createElement(Menu, { shadow: "md", width: 200 }, /* @__PURE__ */ React10__default.createElement(Menu.Target, null, /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "xs" }, /* @__PURE__ */ React10__default.createElement(IconSettings, null))), /* @__PURE__ */ React10__default.createElement(Menu.Dropdown, null, /* @__PURE__ */ React10__default.createElement(Menu.Label, null, t("params.filter_mode")), /* @__PURE__ */ React10__default.createElement(
     Menu.Item,
     {
       icon: /* @__PURE__ */ React10__default.createElement(IconMathGreater, { size: 14 }),
@@ -2995,7 +2984,7 @@ function FilterFnsMenu({ filter }) {
         actions2.updateFilter(buildFilter({ ...filter, ...conditions, active: false }));
       }
     },
-    "Greater Than"
+    t("comparison.GT")
   ), /* @__PURE__ */ React10__default.createElement(
     Menu.Item,
     {
@@ -3005,7 +2994,7 @@ function FilterFnsMenu({ filter }) {
         actions2.updateFilter(buildFilter({ ...filter, ...conditions, active: false }));
       }
     },
-    "Less Than"
+    t("comparison.LT")
   ), /* @__PURE__ */ React10__default.createElement(
     Menu.Item,
     {
@@ -3015,16 +3004,15 @@ function FilterFnsMenu({ filter }) {
         actions2.updateFilter(buildFilter({ ...filter, ...conditions, active: false }));
       }
     },
-    "Between"
+    t("comparison.BT")
   ))));
 }
 function MeasuresOptions() {
-  const [activeFilter, setActiveFilter] = useState(false);
-  const { code: locale } = useSelector$1(selectLocale);
+  useSelector$1(selectLocale);
+  useTranslation();
   const itemMap = useSelector$1(selectMeasureMap);
   const filtersMap = useSelector$1(selectFilterMap);
   const filtersItems = useSelector$1(selectFilterItems);
-  useSelector$1(selectOlapMeasureMap);
   const measures = useSelector$1(selectOlapMeasureItems);
   const actions2 = useActions();
   function handlerCreateMeasure(data) {
@@ -3048,40 +3036,49 @@ function MeasuresOptions() {
       });
       return { measure, filter };
     });
-  }, [itemMap, measures, filtersMap, filtersItems, locale]);
+  }, [itemMap, measures, filtersMap, filtersItems]);
   const activeItems = filteredItems.filter((f) => isActiveItem(f.measure));
   const options = filteredItems.map(({ measure, filter }) => {
-    const filterFn = getFilterFn(filter);
-    const text = getFilterfnText(filterFn);
-    const isBetween = filterFn === "between";
-    const checked = activeItems.map((active) => active.measure.name).includes(measure.name);
-    return /* @__PURE__ */ React10__default.createElement(Box, { key: measure.name }, /* @__PURE__ */ React10__default.createElement(Group, { mt: "sm", position: "apart" }, /* @__PURE__ */ React10__default.createElement(
-      Checkbox,
-      {
-        onChange: () => {
-          actions2.updateMeasure({ ...measure, active: !measure.active });
-          actions2.updateFilter({ ...filter, active: checked ? false : true });
-        },
-        checked,
-        label: measure.name
-      }
-    ), /* @__PURE__ */ React10__default.createElement(Group, null, /* @__PURE__ */ React10__default.createElement(FilterFnsMenu, { filter }), /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "xs", onClick: () => setActiveFilter((value) => !value) }, activeFilter ? /* @__PURE__ */ React10__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React10__default.createElement(IconFilter, null)), /* @__PURE__ */ React10__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React10__default.createElement(BarsSVG, null)))), activeFilter && /* @__PURE__ */ React10__default.createElement(Box, { pt: "md" }, isBetween ? /* @__PURE__ */ React10__default.createElement(MinMax, { filter }) : /* @__PURE__ */ React10__default.createElement(NumberInputComponent, { text, filter })));
+    return /* @__PURE__ */ React10__default.createElement(FilterItem4, { measure, filter, activeItems });
   });
   return options;
 }
+function FilterItem4({
+  measure,
+  filter,
+  activeItems
+}) {
+  const [activeFilter, setActiveFilter] = useState(false);
+  const { translate: t } = useTranslation();
+  const filterFn = getFilterFn(filter);
+  const text = t(`comparison.${getFilterfnKey(filterFn)}`);
+  const isBetween = filterFn === "between";
+  const checked = activeItems.map((active) => active.measure.name).includes(measure.name);
+  const actions2 = useActions();
+  return /* @__PURE__ */ React10__default.createElement(Box, { key: measure.name }, /* @__PURE__ */ React10__default.createElement(Group, { mt: "sm", position: "apart" }, /* @__PURE__ */ React10__default.createElement(
+    Checkbox,
+    {
+      onChange: () => {
+        actions2.updateMeasure({ ...measure, active: !measure.active });
+        actions2.updateFilter({ ...filter, active: checked ? false : true });
+      },
+      checked,
+      label: measure.name,
+      size: "xs"
+    }
+  ), /* @__PURE__ */ React10__default.createElement(Group, null, activeFilter && /* @__PURE__ */ React10__default.createElement(FilterFnsMenu, { filter }), /* @__PURE__ */ React10__default.createElement(ActionIcon, { size: "xs", onClick: () => setActiveFilter((value) => !value) }, activeFilter ? /* @__PURE__ */ React10__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React10__default.createElement(IconFilter, null)), /* @__PURE__ */ React10__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React10__default.createElement(BarsSVG, null)))), activeFilter && /* @__PURE__ */ React10__default.createElement(Box, { pt: "md" }, isBetween ? /* @__PURE__ */ React10__default.createElement(MinMax, { filter }) : /* @__PURE__ */ React10__default.createElement(NumberInputComponent, { text, filter })));
+}
 var DrawerMenu_default = AddColumnsDrawer;
 var removeColumn = (actions2, entity, measures, drilldowns) => {
   if (entity._type === "measure") {
     if (entity.name) {
-      const measure = Object.values(measures).find((d) => d.name === entity.name);
+      const measure = measures.find((d) => d.name === entity.name);
       measure && actions2.updateMeasure({ ...measure, active: false });
-      actions2.willRequestQuery();
     }
   }
   if (entity._type === "level") {
-    const drilldown = Object.values(drilldowns).find((d) => d.uniqueName === (entity == null ? void 0 : entity.uniqueName));
+    const drilldown = drilldowns.find((d) => d.uniqueName === (entity == null ? void 0 : entity.uniqueName));
     drilldown && actions2.updateDrilldown({ ...drilldown, active: false });
-    actions2.willRequestQuery();
   }
 };
 function showTrashIcon(columns, type) {
@@ -3105,45 +3102,10 @@ var getEntityText = (entityType) => {
       return "";
   }
 };
-var getColumnFilterOption = (entityType) => {
-  switch (entityType) {
-    case "measure":
-      return {
-        columnFilterModeOptions: ["between", "greaterThan", "lessThan"]
-      };
-    case "level":
-      return { columnFilterModeOptions: true };
-    default:
-      return { columnFilterModeOptions: true };
-  }
-};
-function getMemberFilterFnTypes(member) {
-  return {
-    value: String(member.key),
-    label: member.caption ? `${member.caption} ${member.key}` : member.name
-  };
-}
-function getMantineFilterMultiSelectProps(isId, isNumeric2, range, entity, drilldowns, columnKey, types) {
+function getMantineFilterMultiSelectProps(isId, isNumeric, range) {
   let result = {};
-  const filterVariant = !isId && !isNumeric2 && (!range || range && range[1] - range[0] <= 100) ? "multi-select" : "text";
+  const filterVariant = !isId && !isNumeric && (!range || range && range[1] - range[0] <= 100) ? "multi-select" : "text";
   result = Object.assign({}, result, { filterVariant });
-  if (result.filterVariant === "multi-select") {
-    if (entity._type === "level") {
-      const dd = Object.keys(drilldowns).reduce(
-        (prev, key) => ({ ...prev, [drilldowns[key].uniqueName]: drilldowns[key] }),
-        {}
-      );
-      const drilldwonData = dd[entity.uniqueName];
-      if (drilldwonData && drilldwonData.members) {
-        result = Object.assign({}, result, {
-          mantineFilterMultiSelectProps: {
-            data: drilldwonData.members.map(getMemberFilterFnTypes),
-            placeholder: columnKey
-          }
-        });
-      }
-    }
-  }
   return result;
 }
 function getSortIcon(value, entityType) {
@@ -3190,25 +3152,31 @@ function getFiltersConditions(fn, value) {
 function useTableData({ offset, limit, columns, filters, cuts }) {
   const normalizedFilters = filters.map((filter) => ({
     id: filter.measure,
-    value: getFilterValue(filter),
-    fn: getFilterFn(filter)
+    value: getFilterValue(filter)
+    // fn: getFilterFn(filter)
   }));
   const normalizedCuts = cuts.map((cut) => ({ id: cut.uniqueName, members: cut.members }));
   const filterKey = JSON.stringify(normalizedFilters);
   const cutKey = JSON.stringify(normalizedCuts);
   const actions2 = useActions();
-  const [filterKeydebouced, setDebouncedTerm] = useState("");
+  const columnsStr = JSON.stringify(columns.sort());
   const page = offset;
+  const [filterKeydebouced, setDebouncedTerm] = useState([
+    limit,
+    offset,
+    columnsStr,
+    filterKey,
+    cutKey,
+    page
+  ]);
   useEffect(() => {
     const handler = debounce(() => {
-      const term = [limit, offset, ...columns.sort(), filterKey, cutKey, page];
+      const term = [limit, offset, columnsStr, filterKey, cutKey, page];
       setDebouncedTerm(term);
     }, 700);
     handler();
-    return () => {
-      handler.cancel();
-    };
-  }, [...columns, offset, filterKey, cutKey, page]);
+    return () => handler.cancel();
+  }, [columnsStr, offset, filterKey, cutKey, page]);
   return useQuery({
     queryKey: ["table", filterKeydebouced],
     queryFn: () => {
@@ -3219,7 +3187,6 @@ function useTableData({ offset, limit, columns, filters, cuts }) {
     },
     staleTime: 3e5,
     enabled: !!filterKeydebouced
-    // placeholderData: keepPreviousData
   });
 }
 function useTable({
@@ -3230,24 +3197,12 @@ function useTable({
   ...mantineTableProps
 }) {
   const { types } = result;
-  const { measures, drilldowns } = useSelector$1(selectCurrentQueryParams);
   const filterItems = useSelector$1(selectFilterItems);
-  const finalUniqueKeys = [
-    ...Object.keys(measures).reduce((prev, curr) => {
-      const measure = measures[curr];
-      if (measure.active) {
-        return [...prev, curr];
-      }
-      return prev;
-    }, []),
-    ...Object.keys(drilldowns).reduce((prev, curr) => {
-      const dd = drilldowns[curr];
-      if (dd.active) {
-        return [...prev, curr];
-      }
-      return prev;
-    }, [])
-  ];
+  const filtersMap = useSelector$1(selectFilterMap);
+  const measuresOlap = useSelector$1(selectOlapMeasureItems);
+  const measuresMap = useSelector$1(selectMeasureMap);
+  const drilldowns = useSelector$1(selectDrilldownItems);
+  const measures = useSelector$1(selectMeasureItems);
   const actions2 = useActions();
   const itemsCuts = useSelector$1(selectCutItems);
   const { limit, offset } = useSelector$1(selectPaginationParams);
@@ -3255,7 +3210,36 @@ function useTable({
     pageIndex: offset,
     pageSize: limit
   });
-  const { isLoading, isFetching, isError, data, isPlaceholderData } = useTableData({
+  const finalUniqueKeys = useMemo(
+    () => [
+      ...measures.map((m) => m.active ? m.name : null),
+      ...drilldowns.map((d) => d.active ? d.uniqueName : null)
+    ].filter((a) => a !== null),
+    [measures, drilldowns]
+  );
+  function handlerCreateMeasure(data2) {
+    const measure = buildMeasure(data2);
+    actions2.updateMeasure(measure);
+    return measure;
+  }
+  function handlerCreateFilter(data2) {
+    const filter = buildFilter(data2);
+    actions2.updateFilter(filter);
+    return filter;
+  }
+  useMemo(() => {
+    return filterMap(measuresOlap, (m) => {
+      const measure = measuresMap[m.name] || handlerCreateMeasure({ ...m, active: false });
+      const foundFilter = filtersMap[m.name] || filterItems.find((f) => f.measure === measure.name);
+      const filter = foundFilter || handlerCreateFilter({
+        measure: measure.name,
+        active: false,
+        key: measure.name
+      });
+      return { measure, filter };
+    });
+  }, [measuresMap, measuresOlap, filtersMap, filterItems]);
+  const { isLoading, isFetching, isError, data } = useTableData({
     offset,
     limit,
     columns: finalUniqueKeys,
@@ -3299,19 +3283,11 @@ function useTable({
         range,
         isId
       } = column;
-      const isNumeric2 = valueType === "number" && columnKey !== "Year";
-      const formatterKey = getFormatterKey(columnKey) || (isNumeric2 ? "Decimal" : "identity");
+      const isNumeric = valueType === "number" && columnKey !== "Year";
+      const formatterKey = getFormatterKey(columnKey) || (isNumeric ? "Decimal" : "identity");
       const formatter = getFormatter(formatterKey);
-      const filterOption = getColumnFilterOption(entityType);
-      const mantineFilterVariantObject = getMantineFilterMultiSelectProps(
-        isId,
-        isNumeric2,
-        range,
-        entity,
-        drilldowns,
-        columnKey);
+      const mantineFilterVariantObject = getMantineFilterMultiSelectProps(isId, isNumeric, range);
       return {
-        ...filterOption,
         ...mantineFilterVariantObject,
         entityType,
         header,
@@ -3335,7 +3311,7 @@ function useTable({
               onClick: column2.getToggleSortingHandler()
             },
             getSortIcon(column2.getIsSorted(), entityType)
-          )), /* @__PURE__ */ React10__default.createElement(Text, { ml: rem(30), size: "sm", color: "dimmed", fw: "normal" }, getEntityText(entityType))), /* @__PURE__ */ React10__default.createElement(
+          ))), /* @__PURE__ */ React10__default.createElement(
             CustomActionIcon_default,
             {
               label: `At least one ${getEntityText(entityType)} is required.`,
@@ -3351,10 +3327,10 @@ function useTable({
         },
         formatter,
         formatterKey,
-        id: (_a = entity.fullName) != null ? _a : entity.name,
+        id: (_a = entity.uniqueName) != null ? _a : entity.name,
         dataType: valueType,
         accessorFn: (item) => item[columnKey],
-        Cell: isNumeric2 ? ({ cell }) => formatter(cell.getValue()) : ({ cell, renderedCellValue, row }) => {
+        Cell: isNumeric ? ({ cell }) => formatter(cell.getValue()) : ({ cell, renderedCellValue, row }) => {
           const cellId = row.original[`${cell.column.id} ID`];
           return /* @__PURE__ */ React10__default.createElement(Flex, { justify: "space-between", sx: { width: "100%", maxWidth: 400 }, gap: "sm" }, /* @__PURE__ */ React10__default.createElement(
             Text,
@@ -3466,16 +3442,16 @@ function useTable({
     ...constTableProps,
     ...mantineTableProps
   });
-  return { table, isError, isLoading };
+  return { table, isError, isLoading, data: fetchedTableData };
 }
-function TableView({ table, result, isError, isLoading }) {
+function TableView({ table, result, isError, isLoading, data }) {
   const isData = Boolean(table.getRowModel().rows.length);
   return /* @__PURE__ */ React10__default.createElement(Box, { sx: { height: "100%" } }, /* @__PURE__ */ React10__default.createElement(Flex, { direction: "column", justify: "space-between", sx: { height: "100%", flex: "1 1 auto" } }, /* @__PURE__ */ React10__default.createElement(MRT_ProgressBar, { isTopToolbar: false, table }), /* @__PURE__ */ React10__default.createElement(
-    Box,
+    ScrollArea,
     {
+      h: isData ? "100%" : "auto",
       sx: {
         flex: "1 1 auto",
-        height: isData ? "100%" : "auto",
         position: "relative",
         overflow: "scroll"
       }
@@ -3505,11 +3481,11 @@ function TableView({ table, result, isError, isLoading }) {
         table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React10__default.createElement(Box, { component: "tr", key: headerGroup.id, sx: { fontWeight: "normal" } }, headerGroup.headers.map((header) => {
           var _a;
           const column = table.getColumn(header.id);
-          const isNumeric2 = column.columnDef.dataType === "number";
+          const isNumeric = column.columnDef.dataType === "number";
           const isRowIndex = column.id === "#";
           const base = (theme) => ({
             backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[0],
-            align: isNumeric2 ? "right" : "left",
+            align: isNumeric ? "right" : "left",
             height: 60,
             paddingBottom: 10,
             minWidth: 210,
@@ -3538,7 +3514,7 @@ function TableView({ table, result, isError, isLoading }) {
               (_a = header.column.columnDef.Header) != null ? _a : header.column.columnDef.header,
               header.getContext()
             ),
-            !isRowIndex && /* @__PURE__ */ React10__default.createElement(ColumnFilterCell, { isNumeric: isNumeric2, header, table })
+            !isRowIndex && /* @__PURE__ */ React10__default.createElement(ColumnFilterCell, { isNumeric, header, table })
           );
         })))
       ),
@@ -3553,33 +3529,34 @@ function TableView({ table, result, isError, isLoading }) {
       )))))
     ),
     !isData && !isError && !isLoading && /* @__PURE__ */ React10__default.createElement(NoRecords, null)
-  ), /* @__PURE__ */ React10__default.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: true, table }), /* @__PURE__ */ React10__default.createElement(TableFooter_default, { table, result })));
+  ), /* @__PURE__ */ React10__default.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: true, table }), /* @__PURE__ */ React10__default.createElement(TableFooter_default, { table, data, result })));
 }
 var ColumnFilterCell = ({
   header,
-  table,
-  isNumeric: isNumeric2
+  isNumeric
 }) => {
   const filterVariant = header.column.columnDef.filterVariant;
   const isMulti = filterVariant === "multi-select";
   if (isMulti) {
     return /* @__PURE__ */ React10__default.createElement(MultiFilter, { header });
   }
-  if (isNumeric2) {
+  if (isNumeric) {
     return /* @__PURE__ */ React10__default.createElement(NumericFilter, { header });
   }
 };
 function NumericFilter({ header }) {
   const filters = useSelector$1(selectFilterItems);
+  const { translate: t } = useTranslation();
   const filter = filters.find((f) => f.measure === header.column.id);
   if (filter) {
     const filterFn = getFilterFn(filter);
-    const text = getFilterfnText(filterFn);
+    const text = t(`comparison.${getFilterfnKey(filterFn)}`);
     const isBetween = filterFn === "between";
     return /* @__PURE__ */ React10__default.createElement(Flex, { gap: "xs", style: { fontWeight: "normal" } }, /* @__PURE__ */ React10__default.createElement(Box, { sx: { flex: "1 1 auto" } }, isBetween ? /* @__PURE__ */ React10__default.createElement(MinMax, { filter, hideControls: true }) : /* @__PURE__ */ React10__default.createElement(NumberInputComponent, { text, filter })), /* @__PURE__ */ React10__default.createElement(Box, { sx: { alignSelf: "flex-end" } }, /* @__PURE__ */ React10__default.createElement(FilterFnsMenu, { filter })));
   }
 }
 function MultiFilter({ header }) {
+  const { translate: t } = useTranslation();
   const cutItems = useSelector$1(selectCutItems);
   const drilldownItems = useSelector$1(selectDrilldownItems);
   const label = header.column.id;
@@ -3599,11 +3576,11 @@ function MultiFilter({ header }) {
       onChange: (value) => {
         updatecutHandler({ ...cut, active: true }, value);
       },
-      placeholder: `Filter by ${label}`,
+      placeholder: t("params.filter_by", { name: label }),
       value: cut.members || [],
       data: drilldown.members.map((m) => ({
         value: String(m.key),
-        label: m.caption ? `${m.caption} ${m.key}` : m.name
+        label: m.caption ? `${m.caption} (${m.key})` : m.name
       })),
       clearButtonProps: { "aria-label": "Clear selection" },
       clearable: true,
@@ -3841,7 +3818,7 @@ function SuccessResult(props) {
   const { previewLimit, actions: actions2 } = useSettings();
   const queryItem = useSelector$1(selectCurrentQueryItem);
   const isPreviewMode = useSelector$1(selectIsPreviewMode);
-  const { table, isError, isLoading } = useTable({ cube, result });
+  const { table, isError, isLoading, data } = useTable({ cube, result });
   const fullscreen = useFullscreen();
   const [CurrentComponent, panelKey, panelMeta] = useMemo(() => {
     const currentPanel = queryItem.panel || `${panels[0].key}-`;
@@ -3873,7 +3850,8 @@ function SuccessResult(props) {
       result,
       table,
       isError,
-      isLoading
+      isLoading,
+      data
     }
   )))))));
 }
@@ -4177,12 +4155,13 @@ function SideBar(props) {
       id: "dex-sidebar",
       py: "md",
       sx: (t2) => ({
-        height: "calc(100vh - 75px)",
+        height: "calc(100vh - 50px)",
         backgroundColor: t2.colorScheme === "dark" ? t2.colors.dark[8] : t2.colors.gray[1],
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
         maxWidth: expanded ? 300 : 54,
         padding: 0,
         zIndex: 99,
+        boxSizing: "border-box",
         [t2.fn.smallerThan("md")]: {
           position: "absolute",
           width: expanded ? 300 : 54,
@@ -4333,10 +4312,49 @@ init_esm_shims();
 
 // src/components/Results.tsx
 init_esm_shims();
+
+// src/hooks/useSelectCube.tsx
+init_esm_shims();
+function useSelectCube(onSelectCube) {
+  const { updateMeasure, updateCut, updateDrilldown, willFetchMembers: willFetchMembers2 } = useActions();
+  const createCutHandler2 = React10__default.useCallback((level) => {
+    const cutItem = buildCut({ ...level });
+    cutItem.active = false;
+    updateCut(cutItem);
+  }, []);
+  const addDrilldown = useCallback((level, dimensions) => {
+    const drilldownItem = buildDrilldown(level);
+    createCutHandler2(level);
+    updateDrilldown(drilldownItem);
+    return willFetchMembers2({ ...level, level: level.name }).then((members) => {
+      const dimension = dimensions.find((dim) => dim.name === level.dimension);
+      if (!dimension) return;
+      return updateDrilldown({
+        ...drilldownItem,
+        dimType: dimension.dimensionType,
+        memberCount: members.length,
+        members
+      });
+    });
+  }, []);
+  return (item, subtopic) => () => onSelectCube(item, subtopic).then(({ cube, measures, dimensions }) => {
+    const [measure] = Object.values(measures);
+    const drilldowns = deriveDrilldowns(dimensions);
+    if (measure && drilldowns.length > 0) {
+      updateMeasure({ ...measure, active: true });
+      for (const level of drilldowns) {
+        addDrilldown(level, dimensions);
+      }
+    }
+  });
+}
+
+// src/components/Results.tsx
 function Results(props) {
   const { onSelectCube, graph, selectedItem, locale, getCube: getCube2, isSelected: isSelected2 } = props;
   const { classes } = useStyles3();
   const { setExpanded, setInput, map } = useSideBar();
+  const callback = useSelectCube(onSelectCube);
   const result = [];
   if (map) {
     for (let [key, items] of map) {
@@ -4351,7 +4369,7 @@ function Results(props) {
             fz: "xs",
             className: isSelected2(selectedItem, cube) ? `${classes.link} ${classes.linkActive}` : classes.link,
             onClick: () => {
-              onSelectCube(item, subtopic);
+              callback(item, subtopic)();
               setExpanded(false);
               setInput("");
             }
@@ -4604,28 +4622,8 @@ function CubeButton({
   locale,
   parent
 }) {
-  const { updateMeasure, updateCut, updateDrilldown, willFetchMembers: willFetchMembers2 } = useActions();
+  const callback = useSelectCube(onSelectCube);
   const { classes } = useStyles3();
-  const createCutHandler2 = React10__default.useCallback((level) => {
-    const cutItem = buildCut({ ...level });
-    cutItem.active = false;
-    updateCut(cutItem);
-  }, []);
-  const addDrilldown = useCallback((level, dimensions) => {
-    const drilldownItem = buildDrilldown(level);
-    createCutHandler2(level);
-    updateDrilldown(drilldownItem);
-    return willFetchMembers2({ ...level, level: level.name }).then((members) => {
-      const dimension = dimensions.find((dim) => dim.name === level.dimension);
-      if (!dimension) return;
-      return updateDrilldown({
-        ...drilldownItem,
-        dimType: dimension.dimensionType,
-        memberCount: members.length,
-        members
-      });
-    });
-  }, []);
   const table = item;
   const subtopic = parent != null ? parent : "";
   return /* @__PURE__ */ React10__default.createElement(
@@ -4642,18 +4640,7 @@ function CubeButton({
         background: isSelected(selectedItem, getCube(graph.items, table, subtopic, locale)) ? t.fn.primaryColor() : t.colorScheme === "dark" ? t.colors.dark[6] : t.colors.gray[3],
         overflow: "hidden"
       }),
-      onClick: () => {
-        onSelectCube(item, subtopic).then(({ cube, measures, dimensions }) => {
-          const [measure] = Object.values(measures);
-          const drilldowns = deriveDrilldowns(dimensions);
-          if (measure && drilldowns.length > 0) {
-            updateMeasure({ ...measure, active: true });
-            for (const level of drilldowns) {
-              addDrilldown(level, dimensions);
-            }
-          }
-        });
-      }
+      onClick: callback(item, subtopic)
     },
     item
   );
@@ -4765,7 +4752,7 @@ function ExplorerContent(props) {
     const SplashComponent = props.splash;
     return SplashComponent ? /* @__PURE__ */ React10__default.createElement(SplashComponent, { translation }) : /* @__PURE__ */ React10__default.createElement(Center, { h: "100%", sx: { flex: 1 } }, /* @__PURE__ */ React10__default.createElement(AnimatedCube, null));
   }, [props.splash]);
-  return /* @__PURE__ */ React10__default.createElement("div", { className: classes.container }, /* @__PURE__ */ React10__default.createElement(Header, { height: { base: 50 }, p: "md" }, /* @__PURE__ */ React10__default.createElement("div", { style: { display: "flex", alignItems: "center", height: "100%", padding: 5 } }, /* @__PURE__ */ React10__default.createElement(HomeSVG, null))), /* @__PURE__ */ React10__default.createElement("div", { className: classes.root }, /* @__PURE__ */ React10__default.createElement(AppProviders, null, /* @__PURE__ */ React10__default.createElement(SideBarProvider, null, /* @__PURE__ */ React10__default.createElement(SideBar_default, null, /* @__PURE__ */ React10__default.createElement(SideBarItem, null, /* @__PURE__ */ React10__default.createElement(ParamsExplorer_default, null)))), /* @__PURE__ */ React10__default.createElement(ExplorerResults, { className: classes.flexCol, panels: props.panels, splash }))));
+  return /* @__PURE__ */ React10__default.createElement("div", { className: classes.container }, /* @__PURE__ */ React10__default.createElement("div", { className: classes.root }, /* @__PURE__ */ React10__default.createElement(AppProviders, null, /* @__PURE__ */ React10__default.createElement(SideBarProvider, null, /* @__PURE__ */ React10__default.createElement(SideBar_default, null, /* @__PURE__ */ React10__default.createElement(SideBarItem, null, /* @__PURE__ */ React10__default.createElement(ParamsExplorer_default, null)))), /* @__PURE__ */ React10__default.createElement(ExplorerResults, { className: classes.flexCol, panels: props.panels, splash }))));
 }
 
 // src/components/PivotView.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/data-explorer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "exports": {
     ".": {
       "import": "./dist/main.js"
@@ -37,6 +37,8 @@
     "postcss-modules": "^6.0.0",
     "react-redux": "^7.0.0",
     "react-viewport-list": "^3.0.0",
+    "stylis": "^4.3.4",
+    "stylis-plugin-rtl": "^2.1.1",
     "yn": "^5.0.0"
   },
   "peerDependencies": {