Issue with Json data charts Preview

[Tooyosi]

Previewing an uploaded json subject data of the below format (from ScatterPlotViewer) does not display properly on preview
{ "data": { "x": [1, 2, 0.356], "y": [6, 3, 0.667] }, "chartOptions": { "xAxisLabel": "Days", "yAxisLabel": "Brightness" } }

This however shows properly when testing/classifying it on FEM.

[lcjohnso]

Hi @Tooyosi -- The error appears to be due to the assumption that the data will be a dataSeries. I am not sure whether the "single series" input format (x and y keys under data with arrays of coordinates as values) are actually supported, as opposed to seriesData objects under data that contain an array of individual points with coordinates and errors as keys.

In any case, this issue appears either to be a subject viewer type assignment error, an internal data processing error, or a case of out-of-date docs (if the simpler single series input is not supported) -- all of which are FEM issues. Therefore, I've moved this issue to the FEM repo.

[eatyourgreens]

The data: { x, y } format is only used by Planet Hunters TESS and doesn't generalise to other projects. Have a look at Black Hole Hunters for examples of JSON data subjects that work with the subject preview in Talk and the project builder.

Those subjects follow the ChartData data model here:
https://github.com/zooniverse/front-end-monorepo/blob/master/packages/lib-classifier/src/store/JSONData/DataSeriesPlot.js

Here's an example of a JSON data subject in the old subject preview component:
https://www.zooniverse.org/projects/cobalt-lensing/black-hole-hunters/talk/4561/3364911?page=1&scrollToLastComment=true

[eatyourgreens]

If it's useful at all, I've got some Python code here that generates JSON data light curves for the SLSN project. It shows the basic shape for the subject data.
https://github.com/eatyourgreens/Zooniverse_SLSN/blob/27c5532e101dcbb896fcd0eeb4e76da48db2ef67/lasair_zooniverse.py#L276-L382

With those subjects, you should see something like this in the project builder.

[lcjohnso]

@eatyourgreens -- Acknowledging this is pedantic, but the PH TESS JSON just uses {x: [...], y: [...]} format -- not using the top-level data key -- correct?

I posted PR #6122 to update the ScatterPlotViewer README to remove the older cruft and outdated JSON example.

[eatyourgreens]

Oh yeah, you’re right. I missed the chartOptions object. PH-TESS doesn’t allow any customisation of the chart axes or colours. Each subject is just a set of coordinates. The example subject here is a totally valid data subject for the scatter plot viewer.

PFE expects data to be an array here, because the subject preview needs to be passed glyph shapes, colours and labels for each set of coordinates. That’s why this subject is erroring, even though it’s a valid subject.

https://github.com/zooniverse/Panoptes-Front-End/blob/1ca8532782371676b72df4a07bc2ab88a15235ec/app/features/modelling/line-plot/index.js#L12-L24

@Tooyosi I wrote the frontend code for JSON data subjects, so I’m happy to talk through it the next time that we’re both in Oxford.

[eatyourgreens]

I summarised the different types of data subject in ADR 48, so that might be helpful too.

[eatyourgreens]

@lcjohnso That was my mistake. { data: { x: number[], y: number:[] } chartOptions: object } is a valid subject format for the scatter plot viewer, so I've opened a PR to allow for those subjects in PFE too (when the MIME type is application/json.)
zooniverse/Panoptes-Front-End#7123

That PR should fix the d.map is not a function error here. I agree with your PR, though, that seriesData is a more flexible format to use, since it has error bars and customisable options for each data series.

The { data: { x, y }, chartOptions } format is really only supported so that TESS subjects can be passed to the new subject viewer here, without breaking the viewer.

front-end-monorepo/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/JSONDataViewer/JSONDataViewer.js

Line 55 in d89db9a

const { chartOptions, data } = type.name === 'TESSLightCurve' ? { data: jsonData } : jsonData