From d63fcf5191f6ebefcd3b058d1b1732b7a4548e3e Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Fri, 5 Sep 2025 11:10:12 +0200 Subject: [PATCH 1/4] style: Align toggle to the left --- app/configurator/components/filters.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx index a95f33ac7..fe1b6e767 100644 --- a/app/configurator/components/filters.tsx +++ b/app/configurator/components/filters.tsx @@ -1230,9 +1230,9 @@ export const TimeFilter = (props: TimeFilterProps) => { return (
{!disableInteractiveFilters && ( - + - + )} {rangeActiveFilter ? ( From 1f95f0881116be49a05bbec1b30878bbc66b88c0 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Fri, 5 Sep 2025 11:10:23 +0200 Subject: [PATCH 2/4] style: Add ellipsis where needed --- app/components/multi-select/option.tsx | 16 +++++++++--- app/components/multi-select/tags.tsx | 10 ++++++- app/components/select-tree.tsx | 36 +++++++++++++++++++++++--- 3 files changed, 55 insertions(+), 7 deletions(-) diff --git a/app/components/multi-select/option.tsx b/app/components/multi-select/option.tsx index e531d5f41..c549cb59b 100644 --- a/app/components/multi-select/option.tsx +++ b/app/components/multi-select/option.tsx @@ -65,9 +65,19 @@ export const MultiSelectOption = ({ typography: selectSizeToTypography[size], }} > - {isNoneValue - ? t({ id: "controls.clear-selection", message: "Clear selection" }) - : label} + + {isNoneValue + ? t({ id: "controls.clear-selection", message: "Clear selection" }) + : label} + {option.label} diff --git a/app/components/select-tree.tsx b/app/components/select-tree.tsx index 422d44c1e..91fae75db 100644 --- a/app/components/select-tree.tsx +++ b/app/components/select-tree.tsx @@ -215,7 +215,17 @@ const TreeItemContent = forwardRef< >
{icon}
- + {label} {selectable && hasChildren ? ( @@ -648,11 +658,19 @@ export const SelectTree = ({ alignItems: "center", gap: 0.5, py: 1, + maxWidth: "100%", + overflow: "hidden", }} > {labelsByValue[nodeId]} @@ -695,7 +713,19 @@ export const SelectTree = ({ return No filter; } - return <>{value ? labelsByValue[value as string] : undefined}; + return ( + + {value ? labelsByValue[value as string] : undefined} + + ); }} sx={{ "& svg": { From 74bce703244a18739362203c69c81cf16583bfe6 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Fri, 5 Sep 2025 12:09:59 +0200 Subject: [PATCH 3/4] fix: Jumping charts --- app/charts/shared/annotation-utils.ts | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/app/charts/shared/annotation-utils.ts b/app/charts/shared/annotation-utils.ts index 657b4488d..3a85dcf44 100644 --- a/app/charts/shared/annotation-utils.ts +++ b/app/charts/shared/annotation-utils.ts @@ -1,4 +1,4 @@ -import { useCallback } from "react"; +import { useCallback, useRef } from "react"; import { useInteraction } from "@/charts/shared/use-interaction"; import { @@ -26,10 +26,14 @@ export const useIsEditingAnnotation = () => { export const useGetAnnotationRenderState = () => { const [interaction] = useInteraction(); + const interactionRef = useRef(interaction); + interactionRef.current = interaction; const [state] = useConfiguratorState(); const chartConfig = getChartConfig(state); const { activeField } = chartConfig; const isEditing = useIsEditingAnnotation(); + const annotationsRef = useRef(chartConfig.annotations); + annotationsRef.current = chartConfig.annotations; const getAnnotationRenderState = useCallback( ( @@ -44,7 +48,7 @@ export const useGetAnnotationRenderState = () => { ) => { let annotation: Annotation | undefined; - for (const a of chartConfig.annotations) { + for (const a of annotationsRef.current) { const matches = matchesAnnotationTarget(observation, a.targets); if (matches) { @@ -59,12 +63,14 @@ export const useGetAnnotationRenderState = () => { color = annotation.color; } + const currentInteraction = interactionRef.current; const interactionMatches = - interaction.type === "annotation" && - interaction.visible && - interaction.observation?.[`${axisComponentId}/__iri__`] === axisValue; + currentInteraction.type === "annotation" && + currentInteraction.visible && + currentInteraction.observation?.[`${axisComponentId}/__iri__`] === + axisValue; - const targetsOtherAnnotations = chartConfig.annotations.some( + const targetsOtherAnnotations = annotationsRef.current.some( (a) => a.key !== activeField && matchesAnnotationTarget(observation, a.targets) @@ -81,14 +87,7 @@ export const useGetAnnotationRenderState = () => { isActive, }; }, - [ - activeField, - chartConfig.annotations, - interaction.observation, - interaction.type, - interaction.visible, - isEditing, - ] + [activeField, isEditing] ); return getAnnotationRenderState; From b205a8d8b6e89eb77861d5db43cc08d65f0d0a42 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Fri, 5 Sep 2025 13:16:36 +0200 Subject: [PATCH 4/4] fix: Padding --- app/components/multi-select/tags.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/multi-select/tags.tsx b/app/components/multi-select/tags.tsx index f85d1383d..d79707cd4 100644 --- a/app/components/multi-select/tags.tsx +++ b/app/components/multi-select/tags.tsx @@ -45,7 +45,6 @@ export const MultiSelectTags = ({ display: "inline-flex", alignItems: "center", gap: 0.5, - py: 1, maxWidth: "100%", overflow: "hidden", }}