@@ -126,6 +128,8 @@ export const ContinuousTransferFunctionLegend = ({
return valSteps.map((v) => transferFunction(v));
}, [domain, transferFunction]);
+ const dataformat = useDataformat();
+
const classBreaksColorMap = useMemo(() => {
if (transferFunction.classBreaks === undefined) return undefined;
@@ -133,13 +137,13 @@ export const ContinuousTransferFunctionLegend = ({
const start = transferFunction.classBreaks?.[i] || 0;
const end = v;
return {
- label: `${dataformat.formatNumber(start)} - ${dataformat.formatNumber(
+ label: `${dataformat.formatFloat(start)} - ${dataformat.formatFloat(
end
)}`,
color: transferFunction((start + end) / 2),
};
});
- }, [transferFunction]);
+ }, [transferFunction, dataformat]);
if (classBreaksColorMap !== undefined) {
return ;
diff --git a/src/components/shared/Plot/XAxis.tsx b/src/components/shared/Plot/XAxis.tsx
index ac870d9e..289c20cf 100644
--- a/src/components/shared/Plot/XAxis.tsx
+++ b/src/components/shared/Plot/XAxis.tsx
@@ -1,5 +1,5 @@
import * as d3 from 'd3';
-import { formatNumber } from '../../../dataformat';
+import { useDataformat } from '../../../dataformat';
import { FunctionComponent, useContext, useEffect } from 'react';
import { theme } from 'twin.macro';
import PlotContext from './PlotContext';
@@ -23,6 +23,8 @@ function findOrCreateGroup(parentElement: P) {
const XAxis: FunctionComponent = ({ caption }) => {
const { transform, svgRef, width, height, xScale } = useContext(PlotContext);
+ const formatter = useDataformat();
+
useEffect(() => {
if (!transform || !svgRef.current) return;
@@ -40,7 +42,7 @@ const XAxis: FunctionComponent = ({ caption }) => {
)
.ticks(width / 64)
.tickSizeOuter(0)
- .tickFormat((value) => formatNumber(value as number));
+ .tickFormat((value) => formatter.formatFloat(value as number));
group.attr('transform', `translate(0, ${height})`);
group.style('font-size', '0.75rem');
@@ -69,7 +71,7 @@ const XAxis: FunctionComponent = ({ caption }) => {
.attr('color', theme`colors.midnight.600`)
.attr('text-anchor', 'end')
.text(caption ?? '');
- }, [transform, svgRef, width, height, xScale, caption]);
+ }, [transform, svgRef, width, height, xScale, caption, formatter]);
return <>;
};
diff --git a/src/components/shared/Plot/YAxis.tsx b/src/components/shared/Plot/YAxis.tsx
index e67abd55..ad8520ab 100644
--- a/src/components/shared/Plot/YAxis.tsx
+++ b/src/components/shared/Plot/YAxis.tsx
@@ -1,5 +1,5 @@
import * as d3 from 'd3';
-import { formatNumber } from '../../../dataformat';
+import { useDataformat } from '../../../dataformat';
import { FunctionComponent, useContext, useEffect } from 'react';
import { theme } from 'twin.macro';
import PlotContext from './PlotContext';
@@ -23,6 +23,8 @@ function findOrCreateGroup(parentElement: P) {
const YAxis: FunctionComponent = ({ caption }) => {
const { transform, svgRef, width, height, yScale } = useContext(PlotContext);
+ const formatter = useDataformat();
+
useEffect(() => {
if (!transform || !svgRef.current) return;
@@ -40,7 +42,7 @@ const YAxis: FunctionComponent = ({ caption }) => {
)
.ticks(height / 64)
.tickSizeOuter(0)
- .tickFormat((value) => formatNumber(value as number));
+ .tickFormat((value) => formatter.formatFloat(value as number));
group.style('font-size', '0.75rem');
group.style('color', theme`colors.gray.900`);
@@ -68,7 +70,7 @@ const YAxis: FunctionComponent = ({ caption }) => {
.attr('color', theme`colors.midnight.600`)
.attr('text-anchor', 'start')
.text(caption ?? '');
- }, [transform, svgRef, width, height, yScale, caption]);
+ }, [transform, svgRef, width, height, yScale, caption, formatter]);
return <>;
};
diff --git a/src/dataformat.ts b/src/dataformat/index.ts
similarity index 54%
rename from src/dataformat.ts
rename to src/dataformat/index.ts
index 5a8ffac5..61e99e50 100644
--- a/src/dataformat.ts
+++ b/src/dataformat/index.ts
@@ -2,116 +2,101 @@ import * as d3 from 'd3';
import moment from 'moment';
import numbro from 'numbro';
-import { CategoricalDataType, DataKind, DataType } from './datatypes';
-import { ColumnData, DataColumn, IndexArray } from './types';
+import { CategoricalDataType, DataKind, DataType } from '../datatypes';
+import { ColumnData, DataColumn, IndexArray } from '../types';
+import { AppSettings, Notation, useAppSettings } from '../stores/appSettings';
-// format a datatype's kind
-export function formatKind(kind: DataKind, plural = false): string {
- switch (kind) {
- case 'float':
- return plural ? 'Floats' : 'Float';
- case 'int':
- return plural ? 'Integers' : 'Integer';
- case 'bool':
- return plural ? 'Booleans' : 'Boolean';
- case 'str':
- return plural ? 'Strings' : 'String';
- case 'array':
- return plural ? 'Arrays' : 'Array';
- case 'datetime':
- return plural ? 'Datetimes' : 'Datetime';
- case 'Mesh':
- return plural ? 'Meshes' : 'Mesh';
- case 'Sequence1D':
- return plural ? 'Sequences' : 'Sequence';
- case 'Embedding':
- return plural ? 'Embeddings' : 'Embedding';
- case 'Image':
- return plural ? 'Images' : 'Image';
- case 'Audio':
- return plural ? 'Sounds' : 'Sound';
- case 'Video':
- return plural ? 'Videos' : 'Video';
- case 'Window':
- return plural ? 'Windows' : 'Window';
- case 'BoundingBox':
- return plural ? 'BoundingBoxes' : 'BoundingBox';
- case 'Category':
- return plural ? 'Categoricals' : 'Categorical';
- case 'Sequence':
- return plural ? 'Sequences' : 'Sequence';
- case 'Unknown':
- return 'Unknown';
- }
+interface FormatterOptions {
+ notation: Notation;
}
-// format a datatype (either as singular or plural)
-export function formatType(type: DataType, plural = false): string {
- return formatKind(type.kind, plural);
-}
+export class Formatter {
+ notation: Notation;
-// can the format function produce a more meaningful representation than ''?
-export function canFormat(type: DataType): boolean {
- return ['str', 'int', 'float', 'bool', 'datetime', 'Category'].includes(type.kind);
-}
+ constructor(options: FormatterOptions) {
+ this.notation = options.notation;
+ }
-function formatNumericalArray(value: number[], full: boolean): string {
- return (
- '[' +
- value
- .map((x) =>
- formatNumber(x, {
- optionalMantissa: false,
- trimMantissa: false,
- ...(!full && { mantissa: 4 }),
- })
- )
- .join(', ') +
- ']'
- );
-}
+ // can the format function produce a more meaningful representation than ''?
+ canFormat(type: DataType): boolean {
+ return ['str', 'int', 'float', 'bool', 'datetime', 'Category'].includes(
+ type.kind
+ );
+ }
+
+ // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+ format(value: any, type: DataType, full = false): string {
+ // format a single value by it's DataType (usually taken from column.type)
+
+ if (value === null) {
+ return '';
+ }
+
+ switch (type.kind) {
+ case 'str':
+ return value;
+ case 'Category':
+ return (type as CategoricalDataType).invertedCategories[value];
+ case 'int':
+ return numbro(value).format();
+ case 'float':
+ return this.formatFloat(value);
+ case 'bool':
+ return `${value}`;
+ case 'datetime':
+ if (full) {
+ return moment(value).format('YYYY-MM-DD HH:mm:ss.SSSSSS');
+ }
+ return moment(value).format('llll');
+ case 'Window':
+ case 'BoundingBox':
+ return (
+ '[' +
+ value.map((x: number) => this.formatFloat(x, full)).join(', ') +
+ ']'
+ );
+ case 'Audio':
+ case 'Image':
+ case 'Mesh':
+ case 'Video':
+ case 'Sequence1D':
+ case 'Sequence':
+ return value;
+ default:
+ return `<${formatType(type)}>`;
+ }
+ }
+
+ formatFloat(value: number, full = false): string {
+ // return early for NaN values
+ // as they break the following mantissa calculation
+ if (value === null) return '';
+ if (isNaN(value)) return numbro(value).format();
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
-export function format(value: any, type: DataType, full = false): string {
- // format a single value by it's DataType (usually taken from column.type)
+ const lg = Math.floor(Math.abs(Math.log10(Math.abs(value))));
- if (value === null) {
- return '';
+ const formatOptions = {
+ average: false,
+ exponential: this.notation === 'scientific' && lg > 4,
+ trimMantissa: false,
+ optionalMantissa: true,
+ ...(!full && { mantissa: 4 }),
+ };
+
+ const formatted = numbro(value).format(formatOptions);
+ return formatted;
}
+}
- switch (type.kind) {
- case 'str':
- return value;
- case 'Category':
- return (type as CategoricalDataType).invertedCategories[value];
- case 'int':
- return formatNumber(value);
- case 'float':
- return formatNumber(value, {
- optionalMantissa: false,
- trimMantissa: false,
- ...(!full && { mantissa: 4 }),
- });
- case 'bool':
- return `${value}`;
- case 'datetime':
- if (full) {
- return moment(value).format('YYYY-MM-DD HH:mm:ss.SSSSSS');
- }
- return moment(value).format('llll');
- case 'Window':
- case 'BoundingBox':
- return formatNumericalArray(value, full);
- case 'Audio':
- case 'Image':
- case 'Mesh':
- case 'Video':
- case 'Sequence1D':
- case 'Sequence':
- return value;
- default:
- return `<${formatType(type)}>`;
+let sharedFormatter = new Formatter({ notation: 'scientific' });
+const notationSelector = (settings: AppSettings) => settings.numberNotation;
+
+export function useDataformat() {
+ const notation = useAppSettings(notationSelector);
+ if (sharedFormatter.notation != notation) {
+ sharedFormatter = new Formatter({ notation: notation });
}
+ return sharedFormatter;
}
export function parse(
@@ -151,44 +136,6 @@ export function parse(
}
}
-export function formatNumber(value: number, options?: numbro.Format): string {
- // return early for NaN values
- // as they break the following mantissa calculation
- if (value === null) return '';
- if (isNaN(value)) return numbro(value).format();
-
- // parse a number with numbro and return a string
- // format options are guessed but can be overwritten with numbro style in options
- const lg = Math.max(0, Math.floor(Math.log10(Math.abs(value))));
-
- const formatOptions = {
- average: false,
- mantissa: Math.max(0, 3 - lg),
- trimMantissa: true,
- optionalMantissa: true,
- exponential: true,
- };
-
- if (Math.abs(value) < 0.001 && value !== 0) {
- formatOptions.mantissa = 2;
- } else if (lg < 4) {
- formatOptions.exponential = false;
- }
-
- const formatted = numbro(value).format({ ...formatOptions, ...options });
-
- return formatted;
-}
-
-const dataformat = {
- format,
- formatNumber,
- parse,
- canFormat,
- formatType,
- formatKind,
-};
-
type TransferFunction = (val?: number) => number;
const MIN_SIZE = 0.5;
@@ -219,4 +166,47 @@ export const createSizeTransferFunction = (
return constantTransferFunction;
};
-export default dataformat;
+// format a datatype's kind
+export function formatKind(kind: DataKind, plural = false): string {
+ switch (kind) {
+ case 'float':
+ return plural ? 'Floats' : 'Float';
+ case 'int':
+ return plural ? 'Integers' : 'Integer';
+ case 'bool':
+ return plural ? 'Booleans' : 'Boolean';
+ case 'str':
+ return plural ? 'Strings' : 'String';
+ case 'array':
+ return plural ? 'Arrays' : 'Array';
+ case 'datetime':
+ return plural ? 'Datetimes' : 'Datetime';
+ case 'Mesh':
+ return plural ? 'Meshes' : 'Mesh';
+ case 'Sequence1D':
+ return plural ? 'Sequences' : 'Sequence';
+ case 'Embedding':
+ return plural ? 'Embeddings' : 'Embedding';
+ case 'Image':
+ return plural ? 'Images' : 'Image';
+ case 'Audio':
+ return plural ? 'Sounds' : 'Sound';
+ case 'Video':
+ return plural ? 'Videos' : 'Video';
+ case 'Window':
+ return plural ? 'Windows' : 'Window';
+ case 'BoundingBox':
+ return plural ? 'BoundingBoxes' : 'BoundingBox';
+ case 'Category':
+ return plural ? 'Categoricals' : 'Categorical';
+ case 'Sequence':
+ return plural ? 'Sequences' : 'Sequence';
+ case 'Unknown':
+ return 'Unknown';
+ }
+}
+
+// format a datatype (either as singular or plural)
+export function formatType(type: DataType, plural = false): string {
+ return formatKind(type.kind, plural);
+}
diff --git a/src/icons/Number.tsx b/src/icons/Number.tsx
index 81820ebc..e87f48ec 100644
--- a/src/icons/Number.tsx
+++ b/src/icons/Number.tsx
@@ -1,8 +1,8 @@
import type { IconType } from 'react-icons';
-import { VscSymbolNumeric } from 'react-icons/vsc';
+import { GoNumber } from 'react-icons/go';
import tw from 'twin.macro';
const Number: IconType = tw(
- VscSymbolNumeric
+ GoNumber
)`w-4 h-4 font-semibold inline-block align-middle stroke-current`;
export default Number;
diff --git a/src/lenses/RougeScoreLens.tsx b/src/lenses/RougeScoreLens.tsx
index 5c0431de..b0a465c1 100644
--- a/src/lenses/RougeScoreLens.tsx
+++ b/src/lenses/RougeScoreLens.tsx
@@ -1,18 +1,21 @@
import { Lens } from '../types';
import 'twin.macro';
import rouge from 'rouge';
-import { formatNumber } from '../dataformat';
+import { useDataformat } from '../dataformat';
const RougeScoreLens: Lens = ({ values }) => {
const rouge1 = rouge.n(values[0], values[1], 1);
const rouge2 = rouge.n(values[0], values[1], 2);
+
+ const formatter = useDataformat();
+
return (
- Rouge 1: {formatNumber(rouge1)}
+ Rouge 1: {formatter.formatFloat(rouge1)}
- Rouge 2: {formatNumber(rouge2)}
+ Rouge 2: {formatter.formatFloat(rouge2)}
);
diff --git a/src/lib.ts b/src/lib.ts
index 8c18e990..e58713ef 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -72,7 +72,7 @@ export type {
DataKind,
} from './datatypes';
-export { default as dataformat, formatNumber } from './dataformat';
+export { formatType, formatKind, useDataformat as useFormatter } from './dataformat';
export { default as ScalarValue } from './components/ScalarValue';
export { getApplicablePredicates } from './filters';
diff --git a/src/stores/appSettings.ts b/src/stores/appSettings.ts
new file mode 100644
index 00000000..dc4dc5fb
--- /dev/null
+++ b/src/stores/appSettings.ts
@@ -0,0 +1,27 @@
+import configService from '../services/config';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const notations = ['scientific', 'standard'] as const;
+export type Notation = typeof notations[number];
+
+export interface AppSettings {
+ numberNotation: Notation;
+ setNumberNotation: (notation: Notation) => void;
+}
+
+export const useAppSettings = create()(
+ persist(
+ (set) => ({
+ numberNotation: 'scientific',
+ setNumberNotation: (notation) =>
+ set({
+ numberNotation: notation,
+ }),
+ }),
+ {
+ name: 'app_settings',
+ storage: configService,
+ }
+ )
+);
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
deleted file mode 100644
index 5da38c2f..00000000
--- a/src/stores/settings.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { produce } from 'immer';
-import _ from 'lodash';
-import { create } from 'zustand';
-import { DataColumn, Vec2 } from '../types';
-
-type Domain = [number, number];
-
-export interface Settings {
- sequence: {
- yAxis: {
- multiple: boolean;
- setMultiple: (multiple: boolean) => void;
- domains: { [key: string]: [number, number] };
- syncDomain: (key: string, domain: Domain) => void;
- unsyncDomain: (key: string) => void;
- };
- xAxis: {
- extents: Vec2;
- setExtents: (ext: Vec2) => void;
- isSynchronized: boolean;
- setIsSynchronized: (value: boolean) => void;
- };
- visibleColumns: Map;
- setSelectableColumns: (columns: DataColumn[]) => void;
- setIsColumnVisible: (column: DataColumn, isVisible: boolean) => void;
- };
-}
-
-const useSettings = create((set) => {
- const prod = (func: (draft: Settings) => void) =>
- set(produce(func) as (state: Settings) => Settings);
-
- return {
- sequence: {
- yAxis: {
- multiple: false,
- setMultiple: (multiple: boolean) => {
- prod((d) => {
- d.sequence.yAxis.multiple = multiple;
- });
- },
- domains: {},
- syncDomain: (key: string, domain: Domain) => {
- set((s) => ({
- sequence: {
- ...s.sequence,
- yAxis: {
- ...s.sequence.yAxis,
- domains: {
- ...s.sequence.yAxis.domains,
- [key]: domain,
- },
- },
- },
- }));
- },
- unsyncDomain: (key: string) => {
- set((s) => ({
- sequence: {
- ...s.sequence,
- yAxis: {
- ...s.sequence.yAxis,
- domains: _.omit(s.sequence.yAxis.domains, key),
- },
- },
- }));
- },
- },
- xAxis: {
- extents: [-Infinity, Infinity],
- setExtents: (ext: Vec2) => {
- prod((d) => {
- d.sequence.xAxis.extents = ext;
- });
- },
- isSynchronized: true,
- setIsSynchronized: (value: boolean) => {
- prod((d) => {
- d.sequence.xAxis.isSynchronized = value;
- });
- },
- },
- visibleColumns: new Map(),
- setIsColumnVisible: (column: DataColumn, isVisible: boolean) => {
- prod((d) => {
- d.sequence.visibleColumns.set(column, isVisible);
- });
- },
- setSelectableColumns: (columns: DataColumn[]) => {
- prod((d) => {
- columns.forEach(
- (col) =>
- d.sequence.visibleColumns.get(col) === undefined &&
- d.sequence.visibleColumns.set(col, true)
- );
- });
- },
- },
- };
-});
-
-export default useSettings;
diff --git a/src/widgets/ConfusionMatrix/hooks.ts b/src/widgets/ConfusionMatrix/hooks.ts
index 6db8c984..732ec4f3 100644
--- a/src/widgets/ConfusionMatrix/hooks.ts
+++ b/src/widgets/ConfusionMatrix/hooks.ts
@@ -1,5 +1,5 @@
import _ from 'lodash';
-import { DataColumn, dataformat, useDataset } from '../../lib';
+import { DataColumn, useDataset, useFormatter } from '../../lib';
import { useMemo } from 'react';
import { ColumnData } from '../../types';
import type { MatrixData, Bucket } from './types';
@@ -71,19 +71,21 @@ export function useData(
return buckets;
}, [uniqueXValues, uniqueYValues, xValues, yValues, indices]);
+ const formatter = useFormatter();
+
const xNames = useMemo(
() =>
xColumn
- ? uniqueXValues.map((value) => dataformat.format(value, xColumn.type))
+ ? uniqueXValues.map((value) => formatter.format(value, xColumn.type))
: [],
- [uniqueXValues, xColumn]
+ [uniqueXValues, xColumn, formatter]
);
const yNames = useMemo(
() =>
yColumn
- ? uniqueYValues.map((value) => dataformat.format(value, yColumn.type))
+ ? uniqueYValues.map((value) => formatter.format(value, yColumn.type))
: [],
- [uniqueYValues, yColumn]
+ [uniqueYValues, yColumn, formatter]
);
return {
diff --git a/src/widgets/DataGrid/Cell/DefaultCell.tsx b/src/widgets/DataGrid/Cell/DefaultCell.tsx
index 1d37f22c..ab4591b8 100644
--- a/src/widgets/DataGrid/Cell/DefaultCell.tsx
+++ b/src/widgets/DataGrid/Cell/DefaultCell.tsx
@@ -1,7 +1,7 @@
import Tooltip from '../../../components/ui/Tooltip';
-import dataformat from '../../../dataformat';
-import { FunctionComponent, useMemo } from 'react';
+import { FunctionComponent } from 'react';
import { DataColumn } from '../../../types';
+import { useDataformat } from '../../../dataformat';
interface Props {
column: DataColumn;
@@ -10,15 +10,9 @@ interface Props {
}
const DefaultCell: FunctionComponent = ({ value, column }) => {
- const formattedValue = useMemo(
- () => dataformat.format(value, column?.type),
- [value, column?.type]
- );
-
- const preciseValue = useMemo(
- () => dataformat.format(value, column?.type, true),
- [value, column?.type]
- );
+ const formatter = useDataformat();
+ const formattedValue = formatter.format(value, column?.type);
+ const preciseValue = formatter.format(value, column?.type, true);
return (
diff --git a/src/widgets/DataGrid/Cell/HeaderCell.tsx b/src/widgets/DataGrid/Cell/HeaderCell.tsx
index 0f265f94..52ba7c14 100644
--- a/src/widgets/DataGrid/Cell/HeaderCell.tsx
+++ b/src/widgets/DataGrid/Cell/HeaderCell.tsx
@@ -1,6 +1,6 @@
import Tag from '../../../components/ui/Tag';
import Tooltip from '../../../components/ui/Tooltip';
-import dataformat from '../../../dataformat';
+import { useDataformat } from '../../../dataformat';
import { useColorTransferFunction } from '../../../hooks/useColorTransferFunction';
import * as React from 'react';
import { FunctionComponent, useCallback, useContext, useMemo } from 'react';
@@ -84,6 +84,8 @@ const HeaderCell: FunctionComponent = ({ style, columnIndex }) => {
[columnSorting, resetSorting, sortBy]
);
+ const formatter = useDataformat();
+
const tooltipContent = useMemo(
() => (
@@ -103,14 +105,10 @@ const HeaderCell: FunctionComponent
= ({ style, columnIndex }) => {
+
+
-
-
= ({ style, columnIndex }) => {
{column.description}
{values.filtered !== undefined
- ? dataformat.formatNumber(values.filtered)
+ ? formatter.formatFloat(values.filtered)
: '-'}
{values.selected !== undefined
- ? dataformat.formatNumber(values.selected)
+ ? formatter.formatFloat(values.selected)
: '-'}