Using too many ref's is not good practice

[jgalazm]

See Survey render method for example. The problem is that the code gets hard to mantain and test.

The solution consists (normally), as stated in the docs, on lifting-up and using render callbacks. For example, Survey (parent) should store States (e.g. Data) that are used by (1) childs who need them as input (e.g., MainSkymap or MiniSkymaps): this is the lift up; and (2) childs who modify these values through user interactions (e.g. SurveyControls): these need the render callbacks.

[jgalazm]

The idea

• skymap should receive data as props
• mainskymap should receive data as props
• survey should have data and display data states
• displaydata should change on render time to update the data state

Actions (functions) over data are:

In Mainskymap

• setData
• setDisplayedDateLimits

In Survey

• setLiveMode: this.setData([]);
• setPlaybackMode: this.setData([]);
• setDataByDate: this.setData(res.results);
• addObservation: this.setData(this.displayedData);
• setData: sets this.displayedData and calls many childs setData method.

Others that use data but don't modify it

In Survey

• cellHoverCallback: iterates over this.displayedData
• updateObservationsTable: iterates over this.displayedData

[jgalazm]

Doing the refactor I'm getting an error on Charts at this.slider.setselection which complained about "this.brush.move" saying that this.brush was null (lost the log, sorry).

So I'm commenting all appearances of this.charts

[jgalazm]

Also,
it seems that the raw data is fetched only when performing date queries, hence that should be the only chance when the data state changes. Everything else should be done on displayedData state.