@datawheel/data-explorer 0.2.9 → 0.2.11

package/dist/main.js

@@ -1,6 +1,6 @@
 import { keyframes, createStyles, Select, rem, Flex, Title, Text, Group, Button, Input, Box, Stack, SimpleGrid, ScrollArea, LoadingOverlay, Table, MultiSelect, Center, NumberInput, Menu, ActionIcon, UnstyledButton, Alert, Loader, Container, Modal, useMantineTheme, MantineProvider, Paper, useComponentDefaultProps, Anchor, Tabs, Switch, ThemeIcon, Tooltip, CloseButton, Drawer, Divider, Checkbox, packSx, Affix, Accordion, Popover } from '@mantine/core';
 import { useClipboard, useClickOutside, useFullscreen, useDebouncedState, useMediaQuery, useDisclosure } from '@mantine/hooks';
-import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconArrowsMinimize, IconArrowsMaximize, IconTrash, IconInfoCircleFilled, IconSearch, IconPhotoDown, IconVectorTriangle, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconBox, IconClock, IconHelpCircle, IconLanguage } from '@tabler/icons-react';
+import { IconWorld, IconExternalLink, IconClipboard, IconSettings, IconMathGreater, IconMathLower, IconArrowsLeftRight, IconAlertCircle, IconAlertTriangle, IconCopy, IconDownload, IconDotsVertical, IconArrowRight, IconArrowLeft, IconArrowsMinimize, IconArrowsMaximize, IconTrash, IconInfoCircleFilled, IconSearch, IconPhotoDown, IconVectorTriangle, IconArrowsSort, IconSortDescendingNumbers, IconSortDescendingLetters, IconSortAscendingNumbers, IconSortAscendingLetters, IconPlus, IconStack3, IconFilterOff, IconFilter, IconAdjustments, IconBox, IconClock, IconHelpCircle, IconLanguage } from '@tabler/icons-react';
 import * as React13 from 'react';
 import React13__default, { createContext, forwardRef, useMemo, useCallback, useContext, useRef, useEffect, useState, Suspense, useLayoutEffect } from 'react';
 import { translationFactory } from '@datawheel/use-translation';
@@ -235,6 +235,7 @@ var defaultTranslation = {
     message_default: "Please wait..."
   },
   params: {
+    add_metadata: "Add metadata",
     action_clear: "Clear query",
     action_clear_description: "Clear all parameters from your current query",
     action_execute: "Execute query",
@@ -1265,6 +1266,10 @@ var queriesSlice = createSlice({
       query.params.sortDir = payload.dir;
       query.params.sortKey = payload.key;
     },
+    clearSorting(state) {
+      const query = taintCurrentQuery(state);
+      query.params.sortKey = void 0;
+    },
     /**
      * Registers the result of the current QueryItem in the store.
      */
@@ -1334,7 +1339,7 @@ var selectPaginationParams = createSelector(selectCurrentQueryParams, (params) =
   limit: params.pagiLimit || 0,
   offset: params.pagiOffset || 0
 }));
-createSelector(selectCurrentQueryParams, (params) => ({
+var selectSortingParams = createSelector(selectCurrentQueryParams, (params) => ({
   sortKey: params.sortKey || "",
   sortDir: params.sortDir
 }));
@@ -2193,7 +2198,7 @@ createSelector(
   selectOlapDimensionItems,
   (dimensions) => Object.fromEntries(dimensions.map((item) => [item.name, item]))
 );
-createSelector(
+var selectLevelTriadMap = createSelector(
   selectOlapCube,
   (cube) => cube ? mapDimensionHierarchyLevels(cube) : {}
 );
@@ -2797,7 +2802,19 @@ function FullScreenSVG() {
 }
 
 // src/components/TableView.tsx
-var removeColumn = (actions2, entity, measures, drilldowns) => {
+function isColumnSorted(column, key) {
+  return column == key;
+}
+var propertiesUpdateHandler = (actions2, item, activeProps) => {
+  const properties = item.properties.map(
+    (prop) => buildProperty({
+      ...prop,
+      active: activeProps.includes(prop.key)
+    })
+  );
+  actions2.updateDrilldown({ ...item, properties });
+};
+var removeColumn = (actions2, entity, measures, drilldowns, type) => {
   if ("aggregator" in entity) {
     const measure = measures.find((d) => d.name === entity.name);
     measure && actions2.updateMeasure({ ...measure, active: false });
@@ -2806,10 +2823,21 @@ var removeColumn = (actions2, entity, measures, drilldowns) => {
     const drilldown = drilldowns.find((d) => d.level === entity.name);
     drilldown && actions2.updateDrilldown({ ...drilldown, active: false });
   }
+  if (isProperty(type)) {
+    const activeDrilldowns = drilldowns.filter((d) => d.active);
+    const drilldown = activeDrilldowns.find(
+      (dd) => dd.properties.some((property) => property.name === entity.name)
+    );
+    const activeProperties = drilldown == null ? void 0 : drilldown.properties.filter((p) => p.active).filter((p) => p.name !== entity.name).filter((p) => p.active).map((p) => p.name);
+    if (drilldown && activeProperties) {
+      propertiesUpdateHandler(actions2, drilldown, activeProperties);
+    }
+  }
 };
+var isProperty = (entity) => entity === "property";
 function showTrashIcon(columns, type) {
   const result = columns.filter((c) => c.entityType === type);
-  return result.length > 1;
+  return result.length > 1 || isProperty(type);
 }
 var getActionIcon = (entityType) => {
   if (entityType === "measure") {
@@ -2824,6 +2852,8 @@ var getEntityText = (entityType) => {
       return "Metric";
     case "level":
       return "Dimension";
+    case "property":
+      return "Property";
     default:
       return "";
   }
@@ -3026,6 +3056,7 @@ function useTable({
   const { currentFormats, getAvailableKeys, getFormatter, getFormatterKey, setFormat } = useFormatter(
     cube.measures
   );
+  const { sortKey, sortDir } = useSelector$1(selectSortingParams);
   const columns = useMemo(() => {
     const indexColumn = {
       id: "#",
@@ -3066,22 +3097,33 @@ function useTable({
           return 0;
         },
         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(
             ActionIcon,
             {
               key: `sort-${header}`,
               size: 22,
               ml: rem(5),
-              onClick: column2.getToggleSortingHandler()
+              onClick: () => {
+                if (!isSorted) {
+                  actions2.updateSorting({ key: entity.name, dir: "desc" });
+                }
+                if (isSorted && sortDir === "desc") {
+                  actions2.updateSorting({ key: entity.name, dir: "asc" });
+                }
+                if (isSorted && sortDir === "asc") {
+                  actions2.clearSorting();
+                }
+              }
             },
-            getSortIcon(column2.getIsSorted(), entityType)
+            getSortIcon(isSorted ? sortDir : false, entityType)
           ))), /* @__PURE__ */ React13__default.createElement(
             CustomActionIcon_default,
             {
               label: `At least one ${getEntityText(entityType)} is required.`,
               key: `remove-${column2.columnDef.header}`,
               disabled: !showTrashIcon(finalKeys, entityType),
-              onClick: () => removeColumn(actions2, entity, measures, drilldowns),
+              onClick: () => removeColumn(actions2, entity, measures, drilldowns, entityType),
               showTooltip: !showTrashIcon(finalKeys, entityType),
               size: 25,
               ml: rem(5)
@@ -3197,7 +3239,7 @@ function useTable({
     enableHiding: false,
     manualFiltering: true,
     manualPagination: true,
-    manualSorting: false,
+    manualSorting: true,
     rowCount: totalRowCount,
     state: {
       isLoading: isLoading || data === void 0 || isTransitionState,
@@ -3430,7 +3472,17 @@ function AddColumnsDrawer() {
     },
     /* @__PURE__ */ React13__default.createElement(MeasuresOptions, null),
     /* @__PURE__ */ React13__default.createElement(DrillDownOptions, null)
-  ), /* @__PURE__ */ React13__default.createElement(Group, { position: "center", sx: { flexWrap: "nowrap" } }, smallerThanMd ? /* @__PURE__ */ React13__default.createElement(ActionIcon, { onClick: open, size: "md", variant: "filled", color: theme.primaryColor }, /* @__PURE__ */ React13__default.createElement(IconStack3, { size: "0.75rem" })) : /* @__PURE__ */ React13__default.createElement(Button, { id: "dex-column-btn", leftIcon: /* @__PURE__ */ React13__default.createElement(IconPlus, { size: "1.2rem" }), onClick: open, m: "md", size: "sm" }, t("params.add_columns"))));
+  ), /* @__PURE__ */ React13__default.createElement(Group, { position: "center", sx: { flexWrap: "nowrap" } }, smallerThanMd ? /* @__PURE__ */ React13__default.createElement(ActionIcon, { onClick: open, size: "md", variant: "filled", color: theme.primaryColor }, /* @__PURE__ */ React13__default.createElement(IconStack3, { size: "0.75rem" })) : /* @__PURE__ */ React13__default.createElement(
+    Button,
+    {
+      id: "dex-column-btn",
+      leftIcon: /* @__PURE__ */ React13__default.createElement(IconPlus, { size: "1.2rem" }),
+      onClick: open,
+      m: "md",
+      size: "sm"
+    },
+    t("params.add_columns")
+  )));
 }
 function DrillDownOptions() {
   const locale = useSelector$1(selectLocale);
@@ -3468,13 +3520,22 @@ function DimensionItem({
       activeItems
     }
   ));
-  return /* @__PURE__ */ React13__default.createElement("div", { key: dimension.name, className: "dex-dimension-control", id: `dex-dimension-${dimension.name}` }, /* @__PURE__ */ React13__default.createElement(
-    Divider,
+  return /* @__PURE__ */ React13__default.createElement(
+    "div",
     {
-      my: "md",
-      label: /* @__PURE__ */ React13__default.createElement(Group, null, getIconForDimensionType(dimension.type), /* @__PURE__ */ React13__default.createElement(Text, { italic: true }, getCaption(dimension, locale)))
-    }
-  ), options);
+      key: dimension.name,
+      className: "dex-dimension-control",
+      id: `dex-dimension-${dimension.name}`
+    },
+    /* @__PURE__ */ React13__default.createElement(
+      Divider,
+      {
+        my: "md",
+        label: /* @__PURE__ */ React13__default.createElement(Group, null, getIconForDimensionType(dimension.type), /* @__PURE__ */ React13__default.createElement(Text, { italic: true }, getCaption(dimension, locale)))
+      }
+    ),
+    options
+  );
 }
 function HierarchyItem({
   dimension,
@@ -3524,6 +3585,7 @@ function LevelItem({
   depth = 0
 }) {
   const [activeFilter, setActiveFilter] = useState(false);
+  const [activePropertiesFilter, setActiveProperties] = useState(false);
   const { translate: t } = useTranslation();
   const actions2 = useActions();
   const cutItems = useSelector$1(selectCutItems);
@@ -3584,6 +3646,7 @@ function LevelItem({
   const isDisabled = isOtherHierarchySelected && !checked;
   if (!currentDrilldown) return;
   const paddingLeft = `${5 * depth + 5}px`;
+  const properities = currentDrilldown.properties.length ? currentDrilldown.properties : null;
   return currentDrilldown && /* @__PURE__ */ React13__default.createElement(React13__default.Fragment, null, /* @__PURE__ */ React13__default.createElement(Group, { className: "dex-level-control", mt: "sm", position: "apart", key: level.name, noWrap: true }, /* @__PURE__ */ React13__default.createElement(
     Checkbox,
     {
@@ -3612,7 +3675,7 @@ function LevelItem({
       disabled: isDisabled
     },
     activeFilter ? /* @__PURE__ */ React13__default.createElement(IconFilterOff, null) : /* @__PURE__ */ React13__default.createElement(IconFilter, null)
-  ), /* @__PURE__ */ React13__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React13__default.createElement(StackSVG, null)))), activeFilter && /* @__PURE__ */ React13__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React13__default.createElement(
+  ), properities && /* @__PURE__ */ React13__default.createElement(Tooltip, { label: t("params.add_metadata") }, /* @__PURE__ */ React13__default.createElement(ActionIcon, { onClick: () => setActiveProperties((value) => !value) }, /* @__PURE__ */ React13__default.createElement(IconAdjustments, null))), /* @__PURE__ */ React13__default.createElement(ThemeIcon, { size: "xs", color: "gray", variant: "light", bg: "transparent" }, /* @__PURE__ */ React13__default.createElement(StackSVG, null)))), activeFilter && /* @__PURE__ */ React13__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React13__default.createElement(
     MultiSelect,
     {
       sx: { flex: "1 1 100%" },
@@ -3636,7 +3699,56 @@ function LevelItem({
       nothingFound: "Nothing found",
       disabled: isDisabled
     }
-  )));
+  )), activePropertiesFilter && /* @__PURE__ */ React13__default.createElement(PropertiesMultiSelect, { item: currentDrilldown }));
+}
+function PropertiesMultiSelect({ item }) {
+  const levelTriadMap = useSelector$1(selectLevelTriadMap);
+  const locale = useSelector$1(selectLocale);
+  const actions2 = useActions();
+  const { translate: t } = useTranslation();
+  const propertiesUpdateHandler2 = useCallback(
+    (activeProps) => {
+      const properties = item.properties.map(
+        (prop) => buildProperty({
+          ...prop,
+          active: activeProps.includes(prop.key)
+        })
+      );
+      actions2.updateDrilldown({ ...item, properties });
+    },
+    [item]
+  );
+  const activeProperties = filterMap(
+    item.properties,
+    (item2) => isActiveItem(item2) ? item2.key : null
+  );
+  const label = useMemo(() => {
+    const triad = levelTriadMap[`${item.level}`];
+    const triadCaptions = triad.map((item2) => getCaption(item2, locale.code));
+    return t("params.tag_drilldowns", {
+      abbr: abbreviateFullName(triadCaptions, t("params.tag_drilldowns_abbrjoint")),
+      dimension: triadCaptions[0],
+      hierarchy: triadCaptions[1],
+      level: triadCaptions[2],
+      propCount: activeProperties.length
+    });
+  }, [activeProperties.join("-"), item, locale.code]);
+  return /* @__PURE__ */ React13__default.createElement(Box, { pt: "md" }, /* @__PURE__ */ React13__default.createElement(
+    MultiSelect,
+    {
+      sx: { flex: "1 1 100%" },
+      searchable: true,
+      onChange: propertiesUpdateHandler2,
+      value: activeProperties || [],
+      placeholder: `Filter by ${label}`,
+      data: item.properties.map((property) => ({
+        value: String(property.key),
+        label: property.name
+      })),
+      clearable: true,
+      nothingFound: "Nothing found"
+    }
+  ));
 }
 function getFilterfnKey(type) {
   switch (type) {

package/package.json

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