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.
zooniverse · Jan 17, 2024 · 7699c60 · 7699c60
1 parent a10466b
commit 7699c60
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/...mponents/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/ScatterPlot.js b/...mponents/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/...r/components/ScatterPlotViewer/components/ScatterPlot/components/Selections/Selections.js b/...r/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>
   )
 }