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. Add a selection feedback story, with mock feedback brushes.
zooniverse · Jan 18, 2024 · 5fc957c · 5fc957c
1 parent a421a3f
commit 5fc957c
Show file tree

Hide file tree

Showing 4 changed files with 111 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/...sifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.stories.js b/...sifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.stories.js
@@ -323,3 +323,83 @@ SelectedXRanges.store = mockStore({
   subject: superWaspSubject,
   workflow: dataSelectionWorkflow
 })
+
+export function SelectionFeedback() {
+  const [task] = SelectedXRanges.store.workflowSteps.findTasksByType('dataVisAnnotation')
+  SelectedXRanges.store.classifications.addAnnotation(task, [
+    {
+      tool: 0,
+      toolType: 'graph2dRangeX',
+      x: 98,
+      width: 6,
+      zoomLevelOnCreation: 0
+    },
+    {
+      tool: 0,
+      toolType: 'graph2dRangeX',
+      x: 110,
+      width: 6,
+      zoomLevelOnCreation: 0
+    },
+    {
+      tool: 1,
+      toolType: 'graph2dRangeX',
+      x: 116,
+      width: 4,
+      zoomLevelOnCreation: 0
+    }
+  ])
+  const feedbackBrushes = [
+    {
+      id: 1,
+      minX: 95,
+      maxX: 101 
+    },
+    {
+      id: 2,
+      minX: 107,
+      maxX: 113
+    },
+    {
+      id: 3,
+      minX: 114,
+      maxX: 118
+    },
+    {
+      id: 'simulated_rule',
+      minX: 90,
+      maxX: 102,
+      success: true
+    },
+    {
+      id: 'simulated_rule',
+      minX: 124,
+      maxX: 134,
+      success: false
+    }
+  ]
+
+  return (
+    <ViewerContext store={SelectedXRanges.store}>
+      <Box direction='row' height='medium' width='large'>
+        <JSONDataViewer
+          disabled
+          experimentalSelectionTool
+          feedbackBrushes={feedbackBrushes}
+          zoomConfiguration={{
+            direction: 'x',
+            minZoom: 1,
+            maxZoom: 10,
+            zoomInValue: 1.2,
+            zoomOutValue: 0.8
+          }}
+        />
+        <ImageToolbar width='4rem' />
+      </Box>
+    </ViewerContext>
+  )
+}
+SelectedXRanges.store = mockStore({
+  subject: superWaspSubject,
+  workflow: dataSelectionWorkflow
+})
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>
   )
 }