Skip to content

Commit fbdc521

Browse files
bprusinowskibprusinowski
committed
refactor: focus -> annotation
1 parent ad9b99f commit fbdc521

5 files changed

Lines changed: 96 additions & 78 deletions

File tree

‎app/charts/map/map-tooltip.tsx‎

Lines changed: 72 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -214,79 +214,81 @@ export const MapTooltip = () => {
214214

215215
return (
216216
<>
217-
{interaction.mouse && interaction.observation && (
218-
<TooltipBox
219-
x={interaction.mouse.x}
220-
y={interaction.mouse.y - 20}
221-
placement={{ x: "center", y: "top" }}
222-
margins={{ bottom: 0, left: 0, right: 0, top: 0 }}
223-
>
224-
<Box sx={{ minWidth: 200 }}>
225-
<Typography
226-
component="div"
227-
variant="caption"
228-
sx={{ fontWeight: "bold" }}
229-
>
230-
{hoverObjectType === "area"
231-
? areaLayer?.getLabel(interaction.observation)
232-
: symbolLayer?.getLabel(interaction.observation)}
233-
</Typography>
234-
<Box
235-
display="grid"
236-
sx={{
237-
mt: 1,
238-
width: "100%",
239-
gridTemplateColumns: "1fr auto",
240-
gap: 1,
241-
alignItems: "center",
242-
}}
243-
>
244-
{
245-
<>
246-
{areaTooltipState && showAreaColorTooltip && (
247-
<TooltipRow
248-
title={areaTooltipState.label}
249-
background={areaTooltipState.color}
250-
color={areaTooltipState.textColor}
251-
value={areaTooltipState.value}
252-
error={areaTooltipState.error}
253-
/>
254-
)}
217+
{interaction.type === "tooltip" &&
218+
interaction.mouse &&
219+
interaction.observation && (
220+
<TooltipBox
221+
x={interaction.mouse.x}
222+
y={interaction.mouse.y - 20}
223+
placement={{ x: "center", y: "top" }}
224+
margins={{ bottom: 0, left: 0, right: 0, top: 0 }}
225+
>
226+
<Box sx={{ minWidth: 200 }}>
227+
<Typography
228+
component="div"
229+
variant="caption"
230+
sx={{ fontWeight: "bold" }}
231+
>
232+
{hoverObjectType === "area"
233+
? areaLayer?.getLabel(interaction.observation)
234+
: symbolLayer?.getLabel(interaction.observation)}
235+
</Typography>
236+
<Box
237+
display="grid"
238+
sx={{
239+
mt: 1,
240+
width: "100%",
241+
gridTemplateColumns: "1fr auto",
242+
gap: 1,
243+
alignItems: "center",
244+
}}
245+
>
246+
{
247+
<>
248+
{areaTooltipState && showAreaColorTooltip && (
249+
<TooltipRow
250+
title={areaTooltipState.label}
251+
background={areaTooltipState.color}
252+
color={areaTooltipState.textColor}
253+
value={areaTooltipState.value}
254+
error={areaTooltipState.error}
255+
/>
256+
)}
255257

256-
{symbolTooltipState && showSymbolMeasureTooltip && (
257-
<TooltipRow
258-
title={symbolTooltipState.measureDimension?.label || ""}
259-
{...(symbolTooltipState.colors.type === "fixed"
260-
? {
261-
background: symbolTooltipState.color,
262-
border: undefined,
263-
color: symbolTooltipState.textColor,
264-
}
265-
: {
266-
background: "#fff",
267-
border: "1px solid #ccc",
268-
color: "#000",
269-
})}
270-
value={symbolTooltipState.value}
271-
error={symbolTooltipState.error}
272-
/>
273-
)}
258+
{symbolTooltipState && showSymbolMeasureTooltip && (
259+
<TooltipRow
260+
title={symbolTooltipState.measureDimension?.label || ""}
261+
{...(symbolTooltipState.colors.type === "fixed"
262+
? {
263+
background: symbolTooltipState.color,
264+
border: undefined,
265+
color: symbolTooltipState.textColor,
266+
}
267+
: {
268+
background: "#fff",
269+
border: "1px solid #ccc",
270+
color: "#000",
271+
})}
272+
value={symbolTooltipState.value}
273+
error={symbolTooltipState.error}
274+
/>
275+
)}
274276

275-
{symbolTooltipState && showSymbolColorTooltip && (
276-
<TooltipRow
277-
title={symbolTooltipState.colors.component?.label || ""}
278-
background={symbolTooltipState.color}
279-
color={symbolTooltipState.textColor}
280-
value={symbolTooltipState.colors.value ?? ""}
281-
error={symbolTooltipState.colors.error}
282-
/>
283-
)}
284-
</>
285-
}
277+
{symbolTooltipState && showSymbolColorTooltip && (
278+
<TooltipRow
279+
title={symbolTooltipState.colors.component?.label || ""}
280+
background={symbolTooltipState.color}
281+
color={symbolTooltipState.textColor}
282+
value={symbolTooltipState.colors.value ?? ""}
283+
error={symbolTooltipState.colors.error}
284+
/>
285+
)}
286+
</>
287+
}
288+
</Box>
286289
</Box>
287-
</Box>
288-
</TooltipBox>
289-
)}
290+
</TooltipBox>
291+
)}
290292
</>
291293
);
292294
};

‎app/charts/shared/annotation-utils.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const useGetAnnotationRenderState = () => {
5757
}
5858

5959
const interactionMatches =
60-
interaction.type === "focus" &&
60+
interaction.type === "annotation" &&
6161
interaction.visible &&
6262
interaction.observation?.[axisComponentId] === axisValue;
6363

‎app/charts/shared/interaction/hover-annotation-dot.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useChartState } from "@/charts/shared/chart-state";
1111
import { useInteraction } from "@/charts/shared/use-interaction";
1212

1313
export const HoverAnnotationDot = () => {
14-
const [{ type, visible, observation, segment }] = useInteraction();
14+
const [interaction] = useInteraction();
1515
const {
1616
getAnnotationInfo,
1717
bounds: { margins },
@@ -25,11 +25,18 @@ export const HoverAnnotationDot = () => {
2525
| ColumnsState
2626
| StackedColumnsState;
2727

28-
if (type !== "focus" || !visible || !observation) {
28+
if (
29+
interaction.type !== "annotation" ||
30+
!interaction.visible ||
31+
!interaction.observation
32+
) {
2933
return null;
3034
}
3135

32-
const { x, y, color } = getAnnotationInfo(observation, segment ?? "");
36+
const { x, y, color } = getAnnotationInfo(
37+
interaction.observation,
38+
interaction.segment ?? ""
39+
);
3340

3441
return (
3542
<AnnotationCircle

‎app/charts/shared/use-annotation-interactions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export const useAnnotationInteractions = () => {
6060
dispatchInteraction({
6161
type: "INTERACTION_UPDATE",
6262
value: {
63-
type: isEditingAnnotation ? "focus" : "tooltip",
63+
type: isEditingAnnotation ? "annotation" : "tooltip",
6464
visible: true,
6565
observation,
6666
segment,

‎app/charts/shared/use-interaction.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,26 @@ import {
99

1010
import { Observation } from "@/domain/data";
1111

12-
type InteractionState = {
13-
type: "tooltip" | "focus";
12+
type BaseInteraction = {
1413
visible: boolean;
1514
observation: Observation | undefined;
16-
segment?: string;
15+
};
16+
17+
type TooltipInteraction = BaseInteraction & {
18+
type: "tooltip";
1719
mouse?: {
1820
x: number;
1921
y: number;
2022
};
2123
};
2224

25+
type AnnotationInteraction = BaseInteraction & {
26+
type: "annotation";
27+
segment?: string;
28+
};
29+
30+
type InteractionState = TooltipInteraction | AnnotationInteraction;
31+
2332
type InteractionStateAction =
2433
| {
2534
type: "INTERACTION_UPDATE";

0 commit comments

Comments
 (0)