Skip to content

Commit 8d4e1be

Browse files
axelbocaxelboc
committed
Replace middle-click interaction with toolbar control
1 parent 41ed5f9 commit 8d4e1be

File tree

11 files changed

+78
-32
lines changed

11 files changed

+78
-32
lines changed

‎packages/app/src/vis-packs/core/complex/MappedComplexLineVis.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,14 @@ function MappedComplexLineVis(props: Props) {
5656
} = props;
5757

5858
const { visType } = config;
59-
const { customDomain, yScaleType, xScaleType, curveType, showGrid } =
60-
lineConfig;
59+
const {
60+
customDomain,
61+
yScaleType,
62+
xScaleType,
63+
curveType,
64+
showGrid,
65+
exactNotation,
66+
} = lineConfig;
6167

6268
const numAxisArrays = useToNumArrays(axisValues);
6369
const [dataArray, ...auxArrays] = useMappedComplexArrays(
@@ -110,6 +116,7 @@ function MappedComplexLineVis(props: Props) {
110116
label: auxLabels[i],
111117
array,
112118
}))}
119+
exactNotation={exactNotation}
113120
testid={dimMapping.toString()}
114121
/>
115122
</>

‎packages/app/src/vis-packs/core/complex/MappedComplexVis.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ function MappedComplexVis(props: Props) {
6161
keepRatio,
6262
showGrid,
6363
invertColorMap,
64+
exactNotation,
6465
} = heatmapConfig;
6566

6667
const numAxisArrays = useToNumArrays(axisValues);
@@ -111,6 +112,7 @@ function MappedComplexVis(props: Props) {
111112
scaleType={scaleType}
112113
aspect={keepRatio ? 'equal' : 'auto'}
113114
showGrid={showGrid}
115+
exactNotation={exactNotation}
114116
invertColorMap={invertColorMap}
115117
abscissaParams={{
116118
label: axisLabels[xDimIndex],

‎packages/app/src/vis-packs/core/heatmap/HeatmapToolbar.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
1414
import {
1515
MdAspectRatio,
1616
MdGridOn,
17+
MdQueryStats,
1718
MdSwapHoriz,
1819
MdSwapVert,
1920
} from 'react-icons/md';
@@ -39,6 +40,7 @@ function HeatmapToolbar(props: Props) {
3940
invertColorMap,
4041
flipXAxis,
4142
flipYAxis,
43+
exactNotation,
4244
setCustomDomain,
4345
setColorMap,
4446
setScaleType,
@@ -47,6 +49,7 @@ function HeatmapToolbar(props: Props) {
4749
toggleColorMapInversion,
4850
toggleXAxisFlip,
4951
toggleYAxisFlip,
52+
toggleExactNotation,
5053
} = config;
5154

5255
return (
@@ -105,6 +108,13 @@ function HeatmapToolbar(props: Props) {
105108
onToggle={toggleGrid}
106109
/>
107110

111+
<ToggleBtn
112+
label="Exact"
113+
Icon={MdQueryStats}
114+
value={exactNotation}
115+
onToggle={toggleExactNotation}
116+
/>
117+
108118
<Separator />
109119

110120
{exportEntries.length > 0 && (

‎packages/app/src/vis-packs/core/heatmap/MappedHeatmapVis.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ function MappedHeatmapVis(props: Props) {
6262
invertColorMap,
6363
flipXAxis,
6464
flipYAxis,
65+
exactNotation,
6566
} = config;
6667

6768
const numArray = useToNumArray(value);
@@ -116,6 +117,7 @@ function MappedHeatmapVis(props: Props) {
116117
}}
117118
flipXAxis={flipXAxis}
118119
flipYAxis={flipYAxis}
120+
exactNotation={exactNotation}
119121
ignoreValue={ignoreValue}
120122
/>
121123
</>

‎packages/app/src/vis-packs/core/heatmap/config.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ export interface HeatmapConfig {
3333

3434
flipYAxis: boolean;
3535
toggleYAxisFlip: () => void;
36+
37+
exactNotation: boolean;
38+
toggleExactNotation: () => void;
3639
}
3740

3841
function createHeatmapConfigStore() {
@@ -69,6 +72,10 @@ function createHeatmapConfigStore() {
6972
flipXAxis: false,
7073
toggleXAxisFlip: () =>
7174
set((state) => ({ flipXAxis: !state.flipXAxis })),
75+
76+
exactNotation: false,
77+
toggleExactNotation: () =>
78+
set((state) => ({ exactNotation: !state.exactNotation })),
7279
}),
7380
{
7481
name: 'h5web:heatmap',

‎packages/app/src/vis-packs/core/line/LineToolbar.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
} from '@h5web/lib';
1111
import { type Domain, type ExportEntry } from '@h5web/shared/vis-models';
1212
import { AXIS_SCALE_TYPES } from '@h5web/shared/vis-utils';
13-
import { MdGridOn } from 'react-icons/md';
13+
import { MdGridOn, MdQueryStats } from 'react-icons/md';
1414

1515
import { INTERACTIONS_WITH_AXIAL_ZOOM } from '../utils';
1616
import { type LineConfig } from './config';
@@ -34,12 +34,14 @@ function LineToolbar(props: Props) {
3434
xScaleType,
3535
yScaleType,
3636
showErrors,
37+
exactNotation,
3738
setCustomDomain,
3839
setCurveType,
3940
toggleGrid,
4041
setXScaleType,
4142
setYScaleType,
4243
toggleErrors,
44+
toggleExactNotation,
4345
} = config;
4446

4547
return (
@@ -82,6 +84,13 @@ function LineToolbar(props: Props) {
8284
onToggle={toggleGrid}
8385
/>
8486

87+
<ToggleBtn
88+
label="Exact"
89+
Icon={MdQueryStats}
90+
value={exactNotation}
91+
onToggle={toggleExactNotation}
92+
/>
93+
8594
<Separator />
8695

8796
<ToggleGroup

‎packages/app/src/vis-packs/core/line/MappedLineVis.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ function MappedLineVis(props: Props) {
7575
curveType,
7676
showGrid,
7777
showErrors,
78+
exactNotation,
7879
} = config;
7980

8081
const { shape: dims } = dataset;
@@ -160,6 +161,7 @@ function MappedLineVis(props: Props) {
160161
errorsArray={errorsArray}
161162
showErrors={showErrors}
162163
auxiliaries={auxiliaries}
164+
exactNotation={exactNotation}
163165
testid={dimMapping.toString()}
164166
ignoreValue={ignoreValue}
165167
/>

‎packages/app/src/vis-packs/core/line/config.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ export interface LineConfig {
2525

2626
showErrors: boolean;
2727
toggleErrors: () => void;
28+
29+
exactNotation: boolean;
30+
toggleExactNotation: () => void;
2831
}
2932

3033
function createLineConfigStore() {
@@ -47,6 +50,10 @@ function createLineConfigStore() {
4750

4851
showErrors: true,
4952
toggleErrors: () => set((state) => ({ showErrors: !state.showErrors })),
53+
54+
exactNotation: false,
55+
toggleExactNotation: () =>
56+
set((state) => ({ exactNotation: !state.exactNotation })),
5057
}),
5158
{
5259
name: 'h5web:line',

‎packages/lib/src/vis/heatmap/HeatmapVis.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ interface Props extends ClassStyleAttrs {
5050
minFilter?: MinificationTextureFilter;
5151
flipXAxis?: boolean;
5252
flipYAxis?: boolean;
53+
exactNotation?: boolean;
5354
renderTooltip?: (data: TooltipData) => ReactElement;
5455
children?: ReactNode;
5556
interactions?: DefaultInteractionsConfig;
@@ -74,13 +75,15 @@ function HeatmapVis(props: Props) {
7475
minFilter,
7576
flipXAxis,
7677
flipYAxis,
78+
exactNotation,
7779
renderTooltip,
7880
children,
7981
interactions,
8082
ignoreValue,
8183
className = '',
8284
style,
8385
} = props;
86+
8487
const { label: abscissaLabel, value: abscissaValue } = abscissaParams;
8588
const { label: ordinateLabel, value: ordinateValue } = ordinateParams;
8689
const { rows, cols } = getDims(dataArray);
@@ -142,12 +145,17 @@ function HeatmapVis(props: Props) {
142145

143146
return (
144147
<>
145-
{`${abscissaLabel ?? 'x'}=${formatTooltipVal(abscissa)}, `}
146-
{`${ordinateLabel ?? 'y'}=${formatTooltipVal(ordinate)}`}
148+
{`${abscissaLabel ?? 'x'}=${exactNotation ? abscissa : formatTooltipVal(abscissa)}, `}
149+
{`${ordinateLabel ?? 'y'}=${exactNotation ? ordinate : formatTooltipVal(ordinate)}`}
147150
<div className={styles.tooltipValue}>
148-
<strong>{formatTooltipVal(dataArray.get(yi, xi))}</strong>
151+
<strong>
152+
{exactNotation
153+
? dataArray.get(yi, xi)
154+
: formatTooltipVal(dataArray.get(yi, xi))}
155+
</strong>
149156
{dtype && <em>{` (${dtype})`}</em>}
150-
{alpha && ` (${formatTooltipVal(alpha.array.get(yi, xi))})`}
157+
{alpha &&
158+
` (${exactNotation ? alpha.array.get(yi, xi) : formatTooltipVal(alpha.array.get(yi, xi))})`}
151159
</div>
152160
</>
153161
);

‎packages/lib/src/vis/line/LineVis.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ interface Props extends ClassStyleAttrs {
3737
errorsArray?: NdArray<NumArray>;
3838
showErrors?: boolean;
3939
auxiliaries?: AuxiliaryParams[];
40+
exactNotation?: boolean;
4041
renderTooltip?: (data: TooltipData) => ReactElement;
4142
children?: ReactNode;
4243
interactions?: DefaultInteractionsConfig;
@@ -58,6 +59,7 @@ function LineVis(props: Props) {
5859
errorsArray,
5960
showErrors = false,
6061
auxiliaries = [],
62+
exactNotation,
6163
renderTooltip,
6264
children,
6365
interactions,
@@ -124,7 +126,7 @@ function LineVis(props: Props) {
124126

125127
<TooltipMesh
126128
guides="vertical"
127-
renderTooltip={(x, _, exact) => {
129+
renderTooltip={(x) => {
128130
const xi = abscissaToIndex(x);
129131
const abscissa = abscissas[xi];
130132

@@ -137,7 +139,7 @@ function LineVis(props: Props) {
137139

138140
return (
139141
<>
140-
{`${abscissaLabel ?? 'x'} = ${exact ? abscissa : formatTooltipVal(abscissa)}`}
142+
{`${abscissaLabel ?? 'x'} = ${exactNotation ? abscissa : formatTooltipVal(abscissa)}`}
141143

142144
<div className={styles.tooltipValue}>
143145
{auxiliaries.length > 0 && (
@@ -148,9 +150,11 @@ function LineVis(props: Props) {
148150
/>
149151
)}
150152
<span>
151-
<strong>{exact ? value : formatTooltipVal(value)}</strong>
153+
<strong>
154+
{exactNotation ? value : formatTooltipVal(value)}
155+
</strong>
152156
{error !== undefined &&
153-
` ±${exact ? error : formatTooltipErr(error)}`}
157+
` ±${exactNotation ? error : formatTooltipErr(error)}`}
154158
{dtype && <em>{` (${dtype})`}</em>}
155159
</span>
156160
</div>
@@ -163,9 +167,11 @@ function LineVis(props: Props) {
163167
style={{ color: auxColors[index % auxColors.length] }}
164168
/>
165169
{label ? `${label} = ` : ''}
166-
{exact ? array.get(xi) : formatTooltipVal(array.get(xi))}
170+
{exactNotation
171+
? array.get(xi)
172+
: formatTooltipVal(array.get(xi))}
167173
{errors &&
168-
` ±${exact ? errors.get(xi) : formatTooltipErr(errors.get(xi))}`}
174+
` ±${exactNotation ? errors.get(xi) : formatTooltipErr(errors.get(xi))}`}
169175
</div>
170176
))}
171177
</>

0 commit comments

Comments
 (0)