Merge remote-tracking branch 'origin/develop' into mh/scatterplot_new

Author: thinkh

package.json

@@ -106,10 +106,12 @@
     "d3-force-boundary": "^0.0.3",
     "d3-hexbin": "^0.2.2",
     "d3v7": "npm:d3@^7.9.0",
+    "echarts": "^5.5.1",
     "fit-curve": "^0.2.0",
     "html-to-image": "^1.11.11",
     "i18next": "^23.14.0",
     "jstat": "^1.9.6",
+    "jszip": "^3.10.1",
     "lineupjs": "4.11.0",
     "lodash": "~4.17.21",
     "plotly.js-dist-min": "~2.12.0",
@@ -118,6 +120,7 @@
     "react-highlight-words": "^0.20.0",
     "react-plotly.js": "^2.6.0",
     "react-spring": "^9.7.4",
+    "react-window": "^1.8.10",
     "use-deep-compare-effect": "^1.8.1",
     "visyn_scripts": "^11.1.0"
   },
@@ -135,6 +138,7 @@
     "@storybook/react": "^7.6.20",
     "@storybook/react-webpack5": "^7.6.20",
     "@storybook/testing-library": "0.2.2",
+    "@types/react-window": "^1.8.8",
     "chromatic": "^11.7.1",
     "storybook": "^7.6.20",
     "storybook-addon-swc": "^1.2.0"

src/demo/MainApp.tsx

@@ -34,7 +34,7 @@ export function MainApp() {
       },
     ],
     color: {
-      description: null,
+      description: '',
       id: 'cellularity',
       name: 'Cellularity',
     },
@@ -66,6 +66,11 @@ export function MainApp() {
             aboutAppModal: {
               content: <Text>This is the demo app for visyn core.</Text>,
             },
+            center: (
+              <Text c="white" size="sm">
+                {breastCancerData.length} data points / {selection.length} points selected
+              </Text>
+            ),
           }}
         />
       }

src/utils/colors.ts

@@ -1,6 +1,40 @@
 // categorical color map
+/**
+ * @deprecated Use `categoricalColors10` instead.
+ */
 export const categoricalColors = ['#337AB7', '#ec6836', '#75c4c2', '#e9d36c', '#24b466', '#e891ae', '#db933c', '#b08aa6', '#8a6044'];
 
+/**
+ * categorical color map with 10 colors
+ */
+export const categoricalColors10 = ['#337ab7', '#f75a1e', '#75c4c2', '#f0d034', '#15a154', '#e891ae', '#db933c', '#a380c4', '#a4c255', '#8c574b'];
+
+/**
+ * categorical color map with 20 colors
+ */
+export const categoricalColors20 = [
+  '#337ab7',
+  '#f75a1e',
+  '#75c4c2',
+  '#f0d034',
+  '#15a154',
+  '#e891ae',
+  '#db933c',
+  '#a380c4',
+  '#a4c255',
+  '#8c574b',
+  '#73c1e9',
+  '#ffa087',
+  '#c1e8f6',
+  '#c0ffd2',
+  '#fabed4',
+  '#facea2',
+  '#dcbeff',
+  '#b2c8a8',
+  '#bf9890',
+  '#fff3b8',
+];
+
 // sequential color map blue
 export const sequentialBlueColors = ['#cff6ff', '#b0d6fe', '#93b9e8', '#779ecb', '#5c84af', '#406a94', '#23527a', '#023a60', '#002245'];
 

src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './getCssValue';
 export * from './initializeLibrary';
 export * from './fromNow';
 export * from './colors';
+export * from './sanitize-filename';

src/utils/sanitize-filename.test.ts

@@ -0,0 +1,69 @@
+// NOTE: @dv-usama-ansari: Referenced from https://github.com/parshap/truncate-utf8-bytes/blob/master/lib/truncate.js
+import { Buffer } from 'buffer';
+
+function isHighSurrogate(codePoint: number) {
+  return codePoint >= 0xd800 && codePoint <= 0xdbff;
+}
+
+function isLowSurrogate(codePoint: number) {
+  return codePoint >= 0xdc00 && codePoint <= 0xdfff;
+}
+
+// Truncate string by size in bytes
+function truncate(getLength: (str: string) => number, input: string, byteLength: number) {
+  let curByteLength = 0;
+  let codePoint = 0;
+  let segment = '';
+
+  for (let i = 0; i < input.length; i += 1) {
+    codePoint = input.charCodeAt(i);
+    segment = input[i] as string;
+
+    if (isHighSurrogate(codePoint) && isLowSurrogate(input.charCodeAt(i + 1))) {
+      i += 1;
+      segment += input[i];
+    }
+
+    curByteLength += getLength(segment);
+
+    if (curByteLength === byteLength) {
+      return input.slice(0, i + 1);
+    }
+    if (curByteLength > byteLength) {
+      return input.slice(0, i - segment.length + 1);
+    }
+  }
+
+  return input;
+}
+
+// NOTE: @dv-usama-ansari: Referenced from https://github.com/parshap/truncate-utf8-bytes/blob/master/index.js
+const getLength = Buffer.byteLength.bind(Buffer);
+const boundTruncate = truncate.bind(null, getLength);
+
+// NOTE: @dv-usama-ansari: Referenced from https://github.com/parshap/node-sanitize-filename/blob/master/index.js
+const illegalRe = /[/?<>\\:*|"]/g;
+// eslint-disable-next-line no-control-regex
+const controlRe = /[\x00-\x1f\x80-\x9f]/g;
+const reservedRe = /^\.+$/;
+const windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i;
+const windowsTrailingRe = /[. ]+$/;
+
+function sanitizeHelper(input: string, replacement: string) {
+  const sanitized = input
+    .replace(illegalRe, replacement)
+    .replace(controlRe, replacement)
+    .replace(reservedRe, replacement)
+    .replace(windowsReservedRe, replacement)
+    .replace(windowsTrailingRe, replacement);
+  return boundTruncate(sanitized, 255);
+}
+
+export function sanitize(input: string, options?: { replacement?: '' }) {
+  const replacement = options?.replacement ?? '';
+  const output = sanitizeHelper(input, replacement);
+  if (replacement === '') {
+    return output;
+  }
+  return sanitizeHelper(output, '');
+}

src/utils/sanitize-filename.ts

@@ -23,10 +23,7 @@ import {
 
 import { VisSidebar } from './VisSidebar';
 import { VisSidebarOpenButton } from './VisSidebarOpenButton';
-import { BarVis } from './bar/BarVis';
-import { BarVisSidebar } from './bar/BarVisSidebar';
-import { EBarDirection, EBarDisplayType, EBarGroupingType, IBarConfig } from './bar/interfaces';
-import { barMergeDefaultConfig } from './bar/utils';
+import { BarVis, BarVisSidebar, EBarDirection, EBarDisplayType, EBarGroupingType, IBarConfig, barMergeDefaultConfig } from './bar';
 import { correlationMergeDefaultConfig } from './correlation';
 import { CorrelationVis } from './correlation/CorrelationVis';
 import { CorrelationVisSidebar } from './correlation/CorrelationVisSidebar';
@@ -256,7 +253,7 @@ export function EagerVis({
     if (isSelectedVisTypeRegistered && (!visConfig?.merged || prevVisConfig?.type !== visConfig?.type)) {
       // TODO: I would prefer this to be not in a useEffect, as then we wouldn't have the render-flicker: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
       setPrevVisConfig(visConfig);
-      _setVisConfig?.(getVisByType(visConfig.type)?.mergeConfig(columns, { ...visConfig, merged: true }));
+      _setVisConfig?.(getVisByType(visConfig.type)?.mergeConfig(columns, { ...visConfig, merged: true }) as BaseVisConfig);
     }
   }, [_setVisConfig, columns, getVisByType, isSelectedVisTypeRegistered, prevVisConfig?.type, visConfig]);