Adding Redux to plots (#1832)

* WIP add redux

* WIP add redux

* Fix sections and zoomedInPlot

* Fix storybook

* Fix lint errors

* Fix some tests

* Fix tests

* Revert demo changed files

* Revert demo changed files

* Revert demo changed files

* Clean up zoomable plot

* Uppercase enum keys

* Make template plot data external

* Make checkpoint plots data external

* Self review

* Rename plotStore to plotsDataStore for clarity

* Revert "Rename plotStore to plotsDataStore for clarity"

This reverts commit 696b4dd.

* Rename plotStore to plotsDataStore for clarity

Co-authored-by: mattseddon <[email protected]>

Author: sroy3

extension/src/plots/webview/contract.ts

@@ -121,14 +121,24 @@ export type ComparisonPlot = {
   revision: string
 }
 
+export enum PlotsDataKeys {
+  COMPARISON = 'comparison',
+  CHECKPOINT = 'checkpoint',
+  HAS_PLOTS = 'hasPlots',
+  HAS_SELECTED_PLOTS = 'hasSelectedPlots',
+  SELECTED_REVISIONS = 'selectedRevisions',
+  TEMPLATE = 'template',
+  SECTION_COLLAPSED = 'sectionCollapsed'
+}
+
 export type PlotsData =
   | {
-      comparison?: PlotsComparisonData | null
-      checkpoint?: CheckpointPlotsData | null
-      hasPlots?: boolean
-      hasSelectedPlots?: boolean
-      selectedRevisions?: Revision[]
-      template?: TemplatePlotsData | null
-      sectionCollapsed?: SectionCollapsed
+      [PlotsDataKeys.COMPARISON]?: PlotsComparisonData | null
+      [PlotsDataKeys.CHECKPOINT]?: CheckpointPlotsData | null
+      [PlotsDataKeys.HAS_PLOTS]?: boolean
+      [PlotsDataKeys.HAS_SELECTED_PLOTS]?: boolean
+      [PlotsDataKeys.SELECTED_REVISIONS]?: Revision[]
+      [PlotsDataKeys.TEMPLATE]?: TemplatePlotsData | null
+      [PlotsDataKeys.SECTION_COLLAPSED]?: SectionCollapsed
     }
   | undefined

webview/package.json

@@ -22,13 +22,15 @@
     "typescript": "*"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.2",
     "@tippyjs/react": "^4.2.6",
     "@vscode/webview-ui-toolkit": "^1.0.0",
     "classnames": "^2.2.6",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^8.0.2",
     "react-table": "^7.7.0",
     "react-vega": "^7.4.4",
     "react-virtualized": "^9.22.3",

webview/src/plots/actions.ts

@@ -0,0 +1,10 @@
+import { createAction } from '@reduxjs/toolkit'
+import { ReducerName } from './constants'
+
+export enum PlotAction {
+  CLEAR_DATA = 'clearData'
+}
+
+export const clearData = createAction<ReducerName | undefined>(
+  PlotAction.CLEAR_DATA
+)