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. Disable the subject viewer so that annotations can't be edited in the feedback popup.
zooniverse · Jan 17, 2024 · 13666da · 13666da
1 parent 21c81db
commit 13666da
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/...assifier/src/components/Classifier/components/Feedback/components/Graph2dRangeFeedback.js b/...assifier/src/components/Classifier/components/Feedback/components/Graph2dRangeFeedback.js
@@ -58,6 +58,7 @@ function Graph2dRangeFeedback() {
 
   return (
     <JSONDataViewer
+      disabled
       subject={subject}
       feedback={feedback}
       feedbackBrushes={[...annotationBrushes, ...ruleBrushes]}

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,27 @@ function Selections({
     eventRoot?.current.focus()
   }
 
+  function FeedbackBrush({ feedbackBrush }) {
+    const width = feedbackBrush.maxX - feedbackBrush.minX
+    const x = feedbackBrush.minX + width / 2
+    let fill = 'transparent'
+    if (feedbackBrush.success === true) {
+      fill = 'green'
+    }
+    if (feedbackBrush.success === false) {
+      fill = 'red'
+    }
+    return (
+      <Selection
+        disabled
+        selection={{ x, width }}
+        fill={fill}
+        height={height}
+        xScale={xScale}
+      />
+    )
+  }
+
   return (
     <g
       ref={eventRoot}
@@ -251,6 +273,12 @@ function Selections({
           stroke={colors['dark-3']}
         />
       ))}
+      {feedbackBrushes?.map(feedbackBrush => (
+        <FeedbackBrush
+          key={feedbackBrush.minX}
+          feedbackBrush={feedbackBrush}
+        />
+      ))}
     </g>
   )
 }