Refresh selection information rather than rebuilding `div` each time
rolyp opened this issue · comments
Every mouse event triggers a re-run of the appropriate analysis (e.g. linked inputs), which causes the d3.js chart to be rebuilt from scratch. This in turn causes mouseenter
to be retriggered when the new DOM element appears under the mouse cursor, which causes the analysis to be re-run, the chart to be rebuilt, etc resulting in a loop. Breaking the loop is possible with a flag to drop the handler reentering, but there is also a problem with mouseleave
not firing if mouseenter
is still active, which I think may be related.
A better approach might be to factor out the code the which sets the visual attributes corresponding to selection information, from the code which constructs the chart, and only run the former when updating the UI. That will stop DOM elements being deleted and re-created under the mouse cursor and mouseenter
being repeatedly triggered.
-
BarChart.js
- Extract selection state information (with i, j fields) and verify correct (without using it)
- Redo selection state on PureScript side, using nested array indexed by i, j
- Extract i, j associated with each
rect
and use to index into selection info - Detect when view is being updated rather than created, and in that case set selection state on existing view
- Remove
mouseenterEnabled
hack?
-
LineChart.js
SupplyDrop that pattern?LineChartSelState
as argument todrawLineChart
- Extract
point_radius
andpoint_stroke
-
setSelState
-
Point
selection no longer rendering
Unzip view types to extract selection state information?-
MatrixView.js
- Extract
matrix_cell_classes
to PureScript - Drop
intMatrix_i_max
helpers (etc) in favour of record interface -
setSelState
- Extract
-
LineChart
margin seems to have disappeared -
ScatterPlot.js
- Migrate CSS logic to
selClass
- Transient state not showing
- Migrate CSS logic to
- Rename
data-viz.css
toview-styles.css
- Delete
BubbleChart
(see #994) -
TableView.js
- Extract
setSelState
- Check ok when mousing over
indexKey
column -
indexKey
needed? (Yes because no way to have a distinguished “0th” field of a JS object) - Calculate whether row should be visible (and number of visible rows) in
setSelState
- Set number of visible rows in
setSelState
- Extract
Only remove/add CSS styles when necessary (might reduce flicker inMatrixView
)?
See also: