From 7699c607c455c93fd252e4732c62a3bfc92dcc27 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Wed, 17 Jan 2024 15:52:20 +0000
Subject: [PATCH] Data selection feedback for scatter plots Add
 `feedbackBrushes`, from PH-TESS, to the scatter plot viewer's `Selections`
 component. Show a green bar for each success, a red bar for each failure.

---
 .../components/ScatterPlot/ScatterPlot.js     |  4 ++--
 .../components/Selections/Selections.js       | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.js
index a1b90213083..936ede1d7b7 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.js
@@ -46,8 +46,6 @@ const TRANSFORM_MATRIX = {
   translateY: 0
 }
 
-
-
 export default function ScatterPlot({
   axisColor = '',
   backgroundColor = '',
@@ -57,6 +55,7 @@ export default function ScatterPlot({
   dataPointSize = 25,
   disabled = false,
   experimentalSelectionTool = false,
+  feedbackBrushes = [],
   highlightedSeries,
   initialSelections = [],
   interactionMode = 'annotate',
@@ -191,6 +190,7 @@ export default function ScatterPlot({
         {children}
         {experimentalSelectionTool && <Selections
           disabled={disabled || interactionMode !== 'annotate'}
+          feedbackBrushes={feedbackBrushes}
           height={plotHeight}
           margin={margin}
           transformMatrix={transformMatrix}
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/components/Selections/Selections.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/components/Selections/Selections.js
index 01150c79920..63165f3e8ee 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/components/Selections/Selections.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/components/Selections/Selections.js
@@ -53,6 +53,7 @@ const DEFAULT_HANDLER = () => true
 
 function Selections({
   disabled = false,
+  feedbackBrushes=[],
   height,
   margin,
   transformMatrix = TRANSFORM_MATRIX,
@@ -203,6 +204,20 @@ function Selections({
     eventRoot?.current.focus()
   }
 
+  function FeedbackBrush({ feedbackBrush }) {
+    const width = feedbackBrush.maxX - feedbackBrush.minX
+    const x = feedbackBrush.minX + width / 2
+    return (
+      <Selection
+        disabled
+        selection={{ x, width }}
+        fill={ feedbackBrush.success ? 'green' : 'red' }
+        height={height}
+        xScale={xScale}
+      />
+    )
+  }
+
   return (
     <g
       ref={eventRoot}
@@ -251,6 +266,12 @@ function Selections({
           stroke={colors['dark-3']}
         />
       ))}
+      {feedbackBrushes?.map(feedbackBrush => (
+        <FeedbackBrush
+          key={feedbackBrush.minX}
+          feedbackBrush={feedbackBrush}
+        />
+      ))}
     </g>
   )
 }