diff --git a/packages/lib-classifier/src/components/Classifier/components/Feedback/components/Graph2dRangeFeedback.js b/packages/lib-classifier/src/components/Classifier/components/Feedback/components/Graph2dRangeFeedback.js index 24966c7479..90781120ca 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Feedback/components/Graph2dRangeFeedback.js +++ b/packages/lib-classifier/src/components/Classifier/components/Feedback/components/Graph2dRangeFeedback.js @@ -58,6 +58,7 @@ function Graph2dRangeFeedback() { return ( - {zoomControlFn && - } - - + + {(parent) => ( + <> + {zoomControlFn && + } + + + )} + ) }) @@ -29,10 +35,7 @@ ScatterPlotViewer.defaultProps = { } ScatterPlotViewer.propTypes = { - parentHeight: PropTypes.number.isRequired, - parentWidth: PropTypes.number.isRequired, zooming: PropTypes.bool } -export default withParentSize(ScatterPlotViewer) -export { ScatterPlotViewer } +export default ScatterPlotViewer diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.spec.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.spec.js index 8c8475d8f6..0f6a74f6a3 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.spec.js +++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.spec.js @@ -1,6 +1,6 @@ import { composeStory } from '@storybook/react' -import { render } from '@testing-library/react' -import Meta, { Default, ErrorBars, KeplerLightCurve } from './ScatterPlotViewer.stories.js' +import { render, waitFor } from '@testing-library/react' +import Meta, { Default, ErrorBars, KeplerLightCurve, SelectionFeedback } from './ScatterPlotViewer.stories.js' describe('Component > ScatterPlotViewer', function () { describe('default plot', function () { @@ -83,4 +83,27 @@ describe('Component > ScatterPlotViewer', function () { expect(chart.querySelectorAll('g.chartAxes')).to.have.lengthOf(1) }) }) + + describe('with data selection feedback', function () { + let chart + + beforeEach(async function () { + const MockScatterPlotViewer = composeStory(SelectionFeedback, Meta) + render() + await waitFor(() => expect(document.querySelector('svg.scatterPlot')).to.exist()) + chart = document.querySelector('svg.scatterPlot') + }) + + it('should show successful matches', function () { + expect(chart.querySelectorAll('rect.selection[fill=green]')).to.have.lengthOf(1) + }) + + it('should show failed matches', function () { + expect(chart.querySelectorAll('rect.selection[fill=red]')).to.have.lengthOf(1) + }) + + it('should show volunteer selections', function () { + expect(chart.querySelectorAll('rect.selection[fill=transparent]')).to.have.lengthOf(3) + }) + }) }) diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.stories.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.stories.js index 9db6dc84de..7306daa777 100644 --- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/ScatterPlotViewer.stories.js +++ b/packages/lib-classifier/src/components/Classifier/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 ( + + + + + + + ) +} +SelectedXRanges.store = mockStore({ + subject: superWaspSubject, + workflow: dataSelectionWorkflow +}) 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 a1b9021308..936ede1d7b 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 && 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 ( + + ) + } + return ( ))} + {feedbackBrushes?.map(feedbackBrush => ( + + ))} ) }