Merge branch 'main' into feature/230-rebuild-old-style-h5-datasets

Renumics · Oct 27, 2023 · 867f3e1 · 867f3e1
2 parents 2f3fa4f + d6e9c10
commit 867f3e1
Show file tree

Hide file tree

Showing 16 changed files with 167 additions and 141 deletions.
diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
         "react-virtualized-auto-sizer": "^1.0.7",
         "react-window": "^1.8.8",
         "recharts": "^2.4.3",
+        "rouge": "^1.0.3",
         "seedrandom": "^3.0.5",
         "shallowequal": "^1.1.0",
         "short-uuid": "^4.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
@@ -19,7 +19,6 @@ import MainWalkthrough, {
     Handle as MainWalkthroughRef,
 } from './walkthrough/MainWalkthrough';
 import { useColors } from '../stores/colors';
-import type { ColorsState } from '../stores/colors';
 import ColorPaletteSelect from './ui/ColorPaletteSelect';
 import { categoricalPalettes, continuousPalettes } from '../palettes';
 
@@ -137,16 +136,8 @@ const HelpMenu = (): JSX.Element => {
     );
 };
 
-const useRobustColorScalesSelector = (c: ColorsState) => ({
-    useRobustColorScales: c.useRobustColorScales,
-    setUseRobustColorScales: c.setUseRobustColorScales,
-});
-
 const ColorMenu = () => {
     const colors = useColors();
-    const { useRobustColorScales, setUseRobustColorScales } = useColors(
-        useRobustColorScalesSelector
-    );
 
     const content = (
         <div tw="flex flex-col w-72 pb-1">
@@ -167,13 +158,27 @@ const ColorMenu = () => {
                         onChangeColorPalette={colors.setCategoricalPalette}
                     />
                 </Menu.Item>
-                <Menu.Title>Robust Coloring</Menu.Title>
+
+                <Menu.Title>Continuous Ints</Menu.Title>
                 <Menu.Switch
-                    value={useRobustColorScales}
-                    onChange={setUseRobustColorScales}
+                    value={colors.continuousInts}
+                    onChange={colors.setContinuousInts}
                 >
                     Enable
                 </Menu.Switch>
+
+                <Menu.Title>Continuous Categories</Menu.Title>
+                <Menu.Switch
+                    value={colors.continuousCategories}
+                    onChange={colors.setContinuousCategories}
+                >
+                    Enable
+                </Menu.Switch>
+
+                <Menu.Title>Robust Coloring</Menu.Title>
+                <Menu.Switch value={colors.robust} onChange={colors.setRobust}>
+                    Enable
+                </Menu.Switch>
             </Menu>
         </div>
     );

diff --git a/src/components/ScalarValue.tsx b/src/components/ScalarValue.tsx
@@ -41,7 +41,7 @@ const ScalarValue: FunctionComponent<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const colorTransferFunctionSelector = useCallback(
         (d: Dataset) =>
-            d.colorTransferFunctions[column.key]?.[filtered ? 'filtered' : 'full'][0],
+            d.colorTransferFunctions[column.key]?.[filtered ? 'filtered' : 'full'],
         [column.key, filtered]
     );
 

diff --git a/src/hooks/useColorTransferFunction.ts b/src/hooks/useColorTransferFunction.ts
@@ -109,36 +109,40 @@ export const createConstantTransferFunction = (
     return tf as ConstantTransferFunction;
 };
 
-const createColorTransferFunction = (
+export const createColorTransferFunction = (
     data: ColumnData | undefined,
     dType: DataType | undefined,
+    robust = false,
+    continuousInts = false,
+    continuousCategories = false,
     classBreaks?: number[]
 ): TransferFunction => {
-    const robustColoring = useColors.getState().useRobustColorScales;
-
     if (dType === undefined) return createConstantTransferFunction(unknownDataType);
     if (data === undefined) return createConstantTransferFunction(dType);
 
-    if (['int', 'bool', 'Category', 'str'].includes(dType.kind)) {
-        const uniqValues = _.uniq(data);
+    if (['bool', 'str'].includes(dType.kind)) {
+        return createCategoricalTransferFunction(_.uniq(data), dType);
+    }
 
+    if (dType.kind === 'int' && !continuousInts) {
+        const uniqValues = _.uniq(data);
         const tooManyInts =
             dType.kind === 'int' && uniqValues.length > MAX_VALUES_FOR_INT_CATEGORY;
 
         if (!tooManyInts) {
-            const transferFunction = createCategoricalTransferFunction(
-                uniqValues,
-                dType
-            );
-            return transferFunction;
+            return createCategoricalTransferFunction(uniqValues, dType);
         }
     }
 
-    if (['int', 'float'].includes(dType.kind)) {
+    if (dType.kind === 'Category' && !continuousCategories) {
+        return createCategoricalTransferFunction(_.uniq(data), dType);
+    }
+
+    if (['int', 'float', 'Category'].includes(dType.kind)) {
         const stats = makeStats(dType, data);
         return createContinuousTransferFunction(
-            (robustColoring ? stats?.p5 : stats?.min) ?? 0,
-            (robustColoring ? stats?.p95 : stats?.max) ?? 1,
+            (robust ? stats?.p5 : stats?.min) ?? 0,
+            (robust ? stats?.p95 : stats?.max) ?? 1,
             dType,
             classBreaks
         );
@@ -148,7 +152,19 @@ const createColorTransferFunction = (
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const useColorTransferFunction = (data: any[], dtype: DataType) =>
-    useMemo(() => createColorTransferFunction(data, dtype), [dtype, data]);
+export const useColorTransferFunction = (data: any[], dtype: DataType) => {
+    const colors = useColors();
+    return useMemo(
+        () =>
+            createColorTransferFunction(
+                data,
+                dtype,
+                colors.robust,
+                colors.continuousInts,
+                colors.continuousCategories
+            ),
+        [dtype, data, colors.robust, colors.continuousInts, colors.continuousCategories]
+    );
+};
 
 export default useColorTransferFunction;
diff --git a/src/lenses/RougeScoreLens.tsx b/src/lenses/RougeScoreLens.tsx
@@ -0,0 +1,39 @@
+import { Lens } from '../types';
+import 'twin.macro';
+import rouge from 'rouge';
+import { formatNumber } from '../dataformat';
+
+const RougeScoreLens: Lens = ({ values }) => {
+    const rouge1 = rouge.n(values[0], values[1], 1);
+    const rouge2 = rouge.n(values[0], values[1], 2);
+    return (
+        <div>
+            <div tw="text-sm truncate px-1 py-0.5 flex items-center h-full">
+                Rouge 1: {formatNumber(rouge1)}
+            </div>
+            <div tw="text-sm truncate px-1 py-0.5 flex items-center h-full">
+                Rouge 2: {formatNumber(rouge2)}
+            </div>
+        </div>
+    );
+};
+
+RougeScoreLens.key = 'RougeScoreView';
+RougeScoreLens.dataTypes = ['str'];
+RougeScoreLens.defaultHeight = 50;
+RougeScoreLens.minHeight = 50;
+RougeScoreLens.maxHeight = 100;
+RougeScoreLens.multi = true;
+RougeScoreLens.displayName = 'ROUGE Score';
+RougeScoreLens.filterAllowedColumns = (allColumns, selectedColumns) => {
+    if (selectedColumns.length === 2) return [];
+    const selectedKeys = selectedColumns.map((selectedCol) => selectedCol.key);
+    return allColumns.filter(({ type, key }) => {
+        return type.kind === 'str' && !selectedKeys.includes(key);
+    });
+};
+RougeScoreLens.isSatisfied = (columns) => {
+    if (columns.length === 2) return true;
+    return false;
+};
+export default RougeScoreLens;
diff --git a/src/lenses/index.ts b/src/lenses/index.ts
@@ -10,6 +10,7 @@ import SequenceLens from './SequenceLens';
 import SpectrogramLens from './SpectrogramLens';
 import TextLens from './TextLens';
 import VideoLens from './VideoLens';
+import RougeScoreLens from './RougeScoreLens';
 
 export const ALL_LENSES = [
     ArrayLens,
@@ -24,4 +25,5 @@ export const ALL_LENSES = [
     HtmlLens,
     MarkdownLens,
     ScalarLens,
+    RougeScoreLens,
 ];
diff --git a/src/rougeScore.d.ts b/src/rougeScore.d.ts
@@ -0,0 +1 @@
+declare module 'rouge';
diff --git a/src/stores/colors.ts b/src/stores/colors.ts
@@ -17,11 +17,15 @@ export interface ColorsState {
     constantPalette: ConstantPalette;
     categoricalPalette: CategoricalPalette;
     continuousPalette: ContinuousPalette;
-    useRobustColorScales: boolean;
+    robust: boolean;
+    continuousInts: boolean;
+    continuousCategories: boolean;
     setConstantPalette: (palette?: ConstantPalette) => void;
     setCategoricalPalette: (palette?: CategoricalPalette) => void;
     setContinuousPalette: (palette?: ContinuousPalette) => void;
-    setUseRobustColorScales: (useRobust: boolean) => void;
+    setRobust: (robust: boolean) => void;
+    setContinuousInts: (continuous: boolean) => void;
+    setContinuousCategories: (continuous: boolean) => void;
 }
 
 export const useColors = create<ColorsState>()(
@@ -30,35 +34,26 @@ export const useColors = create<ColorsState>()(
             constantPalette: defaultConstantPalette,
             categoricalPalette: defaultCategoricalPalette,
             continuousPalette: defaultContinuousPalette,
-            useRobustColorScales: false,
+            robust: false,
+            continuousInts: false,
+            continuousCategories: false,
             setConstantPalette: (palette) => {
-                set((state) => {
-                    return {
-                        ...state,
-                        constantPalette: palette ?? defaultConstantPalette,
-                    };
-                });
+                set({ constantPalette: palette ?? defaultConstantPalette });
             },
             setCategoricalPalette: (palette) => {
-                set((state) => {
-                    return {
-                        ...state,
-                        categoricalPalette: palette ?? defaultCategoricalPalette,
-                    };
-                });
+                set({ categoricalPalette: palette ?? defaultCategoricalPalette });
             },
             setContinuousPalette: (palette) => {
-                set((state) => {
-                    return {
-                        ...state,
-                        continuousPalette: palette ?? defaultContinuousPalette,
-                    };
-                });
+                set({ continuousPalette: palette ?? defaultContinuousPalette });
+            },
+            setRobust: (robust: boolean) => {
+                set({ robust });
+            },
+            setContinuousInts: (continuousInts: boolean) => {
+                set({ continuousInts });
             },
-            setUseRobustColorScales: (useRobustColorScales: boolean) => {
-                set((state) => {
-                    return { ...state, useRobustColorScales };
-                });
+            setContinuousCategories: (continuousCategories: boolean) => {
+                set({ continuousCategories });
             },
         }),
         {