This PR reimplements the components which control heatmap filtering criteria (which I've collectively termed the configuration cards and ConfigurationPanel). It also implements some unit tests for these components (with assertions on conditionally assigned CSS classes) and an example of a stateful wrapper for the configuration panel.
The configuration panel (ConfigurationPanel.tsx) combines the original HeatmapOptionsCol.js and HeatmapOptionsRow.js classes. The SliderCard.tsx, ModeCard.tsx, and MetricCard.tsx are functional component implementations of the similarly-named corresponding original cards. Type information for these has been implemented in ConfigurationTypes.ts. For the most part, lookup value functions in the original code have been replaced with data exported from ConfigurationTypes.
I have written up an example of this in ConfigPanelWrapper.tsx which is used in the app home page. (This is controlled using a row-vs-column checkbox, though there's also commented-out code testing the components individually.) Unfortunately, there appears to be some kind of issue with the CSS in this project vs. in live SpikeFront; I've confirmed that the generated HTML and classes are the same between the two, but the flexbox layout and the radio button styling (for metric selection) are not being styled properly in the sample.
Open items:
Flex styling, radio button styling isn't applied correctly
Code exists in the sample wrapper to ensure that selected slider values persist through changing the mode. However, the 'average' mode shares the same value for all three metrics. This could probably be smoother, and we should look into implementing it with a separate stateful value per-metric when we're actually ready to move into production code.
istanbul/nyc libraries may not be needed for code coverage--I've struggled a bit with tracing out just what the react-testing-framework is doing with jest (and dealing with the differences with mocha, which we used a bit on labbox-ephys). Coverage gutters seems to work with what's installed, but none of it is following a definitive model & this could probably be streamlined.
Might still need to clean up a couple stray comments.
This PR reimplements the components which control heatmap filtering criteria (which I've collectively termed the configuration cards and
ConfigurationPanel). It also implements some unit tests for these components (with assertions on conditionally assigned CSS classes) and an example of a stateful wrapper for the configuration panel.The configuration panel (
ConfigurationPanel.tsx) combines the originalHeatmapOptionsCol.jsandHeatmapOptionsRow.jsclasses. TheSliderCard.tsx,ModeCard.tsx, andMetricCard.tsxare functional component implementations of the similarly-named corresponding original cards. Type information for these has been implemented inConfigurationTypes.ts. For the most part, lookup value functions in the original code have been replaced with data exported fromConfigurationTypes.I have written up an example of this in
ConfigPanelWrapper.tsxwhich is used in the app home page. (This is controlled using a row-vs-column checkbox, though there's also commented-out code testing the components individually.) Unfortunately, there appears to be some kind of issue with the CSS in this project vs. in live SpikeFront; I've confirmed that the generated HTML and classes are the same between the two, but the flexbox layout and the radio button styling (for metric selection) are not being styled properly in the sample.Open items: