Skip to content

Commit

Permalink
Develop (#106)
Browse files Browse the repository at this point in the history
  • Loading branch information
@walbuc
walbuc authored Oct 17, 2024
2 parents f1c4621 + fb39b78 commit e238ee3
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 18 deletions.
98 changes: 91 additions & 7 deletions src/components/DrawerMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ import {
Text,
ThemeIcon,
useMantineTheme,
MantineTheme
MantineTheme,
Tooltip
} from "@mantine/core";
import {useDisclosure, useMediaQuery} from "@mantine/hooks";
import {
IconAdjustments,
IconArrowsLeftRight,
IconBox,
IconClock,
Expand All @@ -29,7 +31,7 @@ import {
IconStack3,
IconWorld
} from "@tabler/icons-react";
import React, {useCallback, useLayoutEffect, useMemo, useState} from "react";
import React, {PropsWithChildren, useCallback, useLayoutEffect, useMemo, useState} from "react";
import {useSelector} from "react-redux";
import {Comparison} from "../api";
import type {TesseractDimension, TesseractHierarchy, TesseractLevel} from "../api/tesseract/schema";
Expand All @@ -44,7 +46,11 @@ import {
selectLocale,
selectMeasureMap
} from "../state/queries";
import {selectOlapDimensionItems, selectOlapMeasureItems} from "../state/selectors";
import {
selectLevelTriadMap,
selectOlapDimensionItems,
selectOlapMeasureItems
} from "../state/selectors";
import {filterMap} from "../utils/array";
import {abbreviateFullName} from "../utils/format";
import {getCaption} from "../utils/string";
Expand All @@ -56,11 +62,13 @@ import {
buildCut,
buildDrilldown,
buildFilter,
buildMeasure
buildMeasure,
buildProperty
} from "../utils/structs";
import {isActiveItem} from "../utils/validation";
import {getFiltersConditions} from "./TableView";
import {BarsSVG, StackSVG} from "./icons";
import {keyBy} from "../utils/transform";

const styles = (t: MantineTheme) => ({
header: {
Expand Down Expand Up @@ -106,7 +114,13 @@ function AddColumnsDrawer() {
<IconStack3 size="0.75rem" />
</ActionIcon>
) : (
<Button id="dex-column-btn" leftIcon={<IconPlus size="1.2rem" />} onClick={open} m="md" size="sm">
<Button
id="dex-column-btn"
leftIcon={<IconPlus size="1.2rem" />}
onClick={open}
m="md"
size="sm"
>
{t("params.add_columns")}
</Button>
)}
Expand Down Expand Up @@ -172,7 +186,11 @@ function DimensionItem({
// return options[0];
// }
return (
<div key={dimension.name} className="dex-dimension-control" id={`dex-dimension-${dimension.name}`}>
<div
key={dimension.name}
className="dex-dimension-control"
id={`dex-dimension-${dimension.name}`}
>
<Divider
my="md"
label={
Expand Down Expand Up @@ -254,6 +272,7 @@ function LevelItem({
depth?: number;
}) {
const [activeFilter, setActiveFilter] = useState(false);
const [activePropertiesFilter, setActiveProperties] = useState(false);
const {translate: t} = useTranslation();
const actions = useActions();
const cutItems = useSelector(selectCutItems);
Expand Down Expand Up @@ -329,6 +348,7 @@ function LevelItem({

const paddingLeft = `${5 * depth + 5}px`;

const properities = currentDrilldown.properties.length ? currentDrilldown.properties : null;
return (
currentDrilldown && (
<>
Expand Down Expand Up @@ -359,7 +379,13 @@ function LevelItem({
>
{activeFilter ? <IconFilterOff /> : <IconFilter />}
</ActionIcon>

{properities && (
<Tooltip label={t("params.add_metadata")}>
<ActionIcon onClick={() => setActiveProperties(value => !value)}>
<IconAdjustments />
</ActionIcon>
</Tooltip>
)}
<ThemeIcon size="xs" color="gray" variant="light" bg="transparent">
<StackSVG />
</ThemeIcon>
Expand Down Expand Up @@ -391,11 +417,69 @@ function LevelItem({
/>
</Box>
)}
{activePropertiesFilter && <PropertiesMultiSelect item={currentDrilldown} />}
</>
)
);
}

type PropertiesMultiSelectType = {
item: DrilldownItem;
};
function PropertiesMultiSelect({item}: PropsWithChildren<PropertiesMultiSelectType>) {
const levelTriadMap = useSelector(selectLevelTriadMap);
const locale = useSelector(selectLocale);
const actions = useActions();
const {translate: t} = useTranslation();

const propertiesUpdateHandler = useCallback(
(activeProps: string[]) => {
const properties = item.properties.map(prop =>
buildProperty({
...prop,
active: activeProps.includes(prop.key)
})
);
actions.updateDrilldown({...item, properties});
},
[item]
);

const activeProperties = filterMap(item.properties, item =>
isActiveItem(item) ? item.key : null
);

const label = useMemo(() => {
const triad = levelTriadMap[`${item.level}`];
const triadCaptions = triad.map(item => getCaption(item, 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 (
<Box pt="md">
<MultiSelect
sx={{flex: "1 1 100%"}}
searchable
onChange={propertiesUpdateHandler}
value={activeProperties || []}
placeholder={`Filter by ${label}`}
data={item.properties.map(property => ({
value: String(property.key),
label: property.name
}))}
clearable
nothingFound="Nothing found"
/>
</Box>
);
}

export function getFilterfnKey(type) {
switch (type) {
case "greaterThan":
Expand Down
41 changes: 36 additions & 5 deletions src/components/TableView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ import {
import {selectOlapMeasureItems} from "../state/selectors";
import {filterMap} from "../utils/array";
import type {CutItem, DrilldownItem, FilterItem, MeasureItem, QueryResult} from "../utils/structs";
import {type AnyResultColumn, buildFilter, buildMeasure} from "../utils/structs";
import {type AnyResultColumn, buildFilter, buildMeasure, buildProperty} from "../utils/structs";
import type {ViewProps} from "../utils/types";
import CustomActionIcon from "./CustomActionIcon";
import {
Expand All @@ -78,11 +78,22 @@ function isColumnSorted(column: string, key: string) {
return column == key;
}

const propertiesUpdateHandler = (actions, item: DrilldownItem, activeProps: string[]) => {
const properties = item.properties.map(prop =>
buildProperty({
...prop,
active: activeProps.includes(prop.key)
})
);
actions.updateDrilldown({...item, properties});
};

const removeColumn = (
actions: ExplorerBoundActionMap,
entity: TesseractMeasure | TesseractProperty | TesseractLevel,
measures: MeasureItem[],
drilldowns: DrilldownItem[]
drilldowns: DrilldownItem[],
type: EntityTypes
) => {
if ("aggregator" in entity) {
const measure = measures.find(d => d.name === entity.name);
Expand All @@ -92,12 +103,30 @@ const removeColumn = (
const drilldown = drilldowns.find(d => d.level === entity.name);
drilldown && actions.updateDrilldown({...drilldown, active: false});
}
// maybe need to handle case for property columns.

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?.properties
.filter(p => p.active)
.filter(p => p.name !== entity.name)
.filter(p => p.active)
.map(p => p.name);

if (drilldown && activeProperties) {
propertiesUpdateHandler(actions, drilldown, activeProperties);
}
}
};

const isProperty = (entity: EntityTypes) => entity === "property";

function showTrashIcon(columns: AnyResultColumn[], type: EntityTypes) {
const result = columns.filter(c => c.entityType === type);
return result.length > 1;
return result.length > 1 || isProperty(type);
}

const getActionIcon = (entityType: EntityTypes) => {
Expand All @@ -122,6 +151,8 @@ const getEntityText = (entityType: EntityTypes) => {
return "Metric";
case "level":
return "Dimension";
case "property":
return "Property";
default:
return "";
}
Expand Down Expand Up @@ -499,7 +530,7 @@ export function useTable({
label={`At least one ${getEntityText(entityType)} is required.`}
key={`remove-${column.columnDef.header}`}
disabled={!showTrashIcon(finalKeys, entityType)}
onClick={() => removeColumn(actions, entity, measures, drilldowns)}
onClick={() => removeColumn(actions, entity, measures, drilldowns, entityType)}
showTooltip={!showTrashIcon(finalKeys, entityType)}
size={25}
ml={rem(5)}
Expand Down
17 changes: 11 additions & 6 deletions src/hooks/translation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const 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",
Expand Down Expand Up @@ -193,13 +194,14 @@ export const defaultTranslation = {
controls: {
prev: "Previous",
next: "Next",
help: "Help",
help: "Help"
},
steps: {
welcome: {
title: "Welcome to the Data Explorer",
text1: "This tutorial will guide you through the steps on how to use the Data Explorer",
text2: "By following this tutorial, you will be able to find data of interest and generate your own data tables and visualizations."
text2:
"By following this tutorial, you will be able to find data of interest and generate your own data tables and visualizations."
},
locale: {
title: "Multilingual",
Expand All @@ -214,7 +216,7 @@ export const defaultTranslation = {
search: {
title: "Searching for a Dataset",
text1: "You can also explore the list of topics and datasets.",
text2: "Start typing to filter the list of datasets with your search",
text2: "Start typing to filter the list of datasets with your search"
},
table: {
title: "Data Table",
Expand All @@ -224,12 +226,15 @@ export const defaultTranslation = {
columns: {
title: "Columns",
text1: "Select the columns that you are interested in viewing.",
text2: "When you toggle any column checkbox, the data table will automatically update to reflect your selection."
text2:
"When you toggle any column checkbox, the data table will automatically update to reflect your selection."
},
filters: {
title: "Filters",
text1: "You can filter the elements of each column that you want to display in the data table and visualization.",
text2: "If you want all available elements to be displayed, you don't need to apply filters."
text1:
"You can filter the elements of each column that you want to display in the data table and visualization.",
text2:
"If you want all available elements to be displayed, you don't need to apply filters."
},
download: {
title: "Downloading the Data",
Expand Down

0 comments on commit e238ee3

Please sign in to comment.