From 9abc51af00eb9fbb954ace6f46d105006208c8a7 Mon Sep 17 00:00:00 2001
From: dvmartinweigl <martin.weigl@datavisyn.io>
Date: Mon, 29 Apr 2024 18:05:11 +0200
Subject: [PATCH] small performance improvement on selection events

---
 src/vis/scatter/ScatterVis.tsx                | 21 ++++++++++---------
 src/vis/scatter/utils.ts                      |  2 +-
 .../Vis/Scatter/ScatterRandom.stories.tsx     |  3 ++-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/vis/scatter/ScatterVis.tsx b/src/vis/scatter/ScatterVis.tsx
index 8dee6279a..b1823b8f9 100644
--- a/src/vis/scatter/ScatterVis.tsx
+++ b/src/vis/scatter/ScatterVis.tsx
@@ -1,6 +1,7 @@
 import { Center, Group, Stack } from '@mantine/core';
 import * as d3 from 'd3v7';
 import uniqueId from 'lodash/uniqueId';
+import { XAxisName, YAxisName } from 'plotly.js-dist-min';
 import * as React from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { useAsync } from '../../hooks';
@@ -20,10 +21,8 @@ const annotationsForRegressionStats = (results: IRegressionResult[]) => {
     annotations.push({
       x: 0.02,
       y: 0.98,
-      // @ts-ignore
-      xref: `${r.xref} domain`,
-      // @ts-ignore
-      yref: `${r.yref} domain`,
+      xref: `${r.xref} domain` as XAxisName,
+      yref: `${r.yref} domain` as YAxisName,
       text: `<b>n: ${r.stats.n}</b><br><b>r²: ${r.stats.r2}</b><br><b>corr: ${r.stats.correlation}</b><br>`,
       showarrow: false,
       font: {
@@ -196,11 +195,13 @@ export function ScatterVis({
         .forEach((p) => {
           const temp = [];
 
-          (p.data.ids as any).forEach((currId, index) => {
-            if (selectedMap[currId] || (selectedList.length === 0 && config.color)) {
-              temp.push(index);
-            }
-          });
+          if (selectedList.length > 0) {
+            selectedList.forEach((selectedId) => {
+              temp.push(p.data.ids.indexOf(selectedId));
+            });
+          } else if (config.color && selectedList.length === 0) {
+            temp.push(...Array.from({ length: p.data.ids.length }, (_, i) => i));
+          }
 
           p.data.selectedpoints = temp;
           // @ts-ignore
@@ -230,7 +231,7 @@ export function ScatterVis({
     }
 
     return [];
-  }, [traces, selectedList.length, config.showLabels, config.color, config.alphaSliderVal, selectedMap]);
+  }, [traces, selectedList, config.color, config.showLabels, config.alphaSliderVal]);
 
   const plotlyData = useMemo(() => {
     if (traces) {
diff --git a/src/vis/scatter/utils.ts b/src/vis/scatter/utils.ts
index 908016781..b3a5b91ea 100644
--- a/src/vis/scatter/utils.ts
+++ b/src/vis/scatter/utils.ts
@@ -44,7 +44,7 @@ const defaultConfig: IScatterConfig = {
   dragMode: EScatterSelectSettings.RECTANGLE,
   alphaSliderVal: 0.5,
   sizeSliderVal: 8,
-  showLabels: ELabelingOptions.SELECTED,
+  showLabels: ELabelingOptions.NEVER,
   regressionLineOptions: {
     type: ERegressionLineType.NONE,
     fitOptions: { order: 2, precision: 3 },
diff --git a/src/vis/stories/Vis/Scatter/ScatterRandom.stories.tsx b/src/vis/stories/Vis/Scatter/ScatterRandom.stories.tsx
index 7ada2bf84..fac02c596 100644
--- a/src/vis/stories/Vis/Scatter/ScatterRandom.stories.tsx
+++ b/src/vis/stories/Vis/Scatter/ScatterRandom.stories.tsx
@@ -106,12 +106,13 @@ const Template: ComponentStory<typeof Vis> = (args) => {
   const columns = React.useMemo(() => fetchData(args.pointCount), [args.pointCount]);
 
   const [selected, setSelected] = React.useState<string[]>([]);
+  const [config, setConfig] = React.useState<BaseVisConfig>(args.externalConfig);
 
   return (
     <VisProvider>
       <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center', alignContent: 'center', flexWrap: 'wrap' }}>
         <div style={{ width: '70%', height: '80%' }}>
-          <Vis {...args} setExternalConfig={() => {}} selected={selected} selectionCallback={setSelected} columns={columns} />
+          <Vis {...args} externalConfig={config} setExternalConfig={setConfig} selected={selected} selectionCallback={setSelected} columns={columns} />
         </div>
       </div>
     </VisProvider>