improvement(dashboard): add graph filters to global context

garden-io · May 29, 2019 · 73e3f5c · 73e3f5c
1 parent 21d3602
commit 73e3f5c
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 69 deletions.
diff --git a/dashboard/src/components/graph/index.tsx b/dashboard/src/components/graph/index.tsx
@@ -10,22 +10,19 @@ import cls from "classnames"
 import { css } from "emotion"
 import React, { Component } from "react"
 import styled from "@emotion/styled"
-import { capitalize, uniq } from "lodash"
+import { capitalize } from "lodash"
 import * as d3 from "d3"
 import dagreD3 from "dagre-d3"
-
+import { Extends } from "garden-cli/src/util/util"
+import { ConfigDump } from "garden-cli/src/garden"
 import Card from "../card"
-
 import "./graph.scss"
 import { colors, fontMedium } from "../../styles/variables"
 import Spinner, { SpinnerProps } from "../spinner"
 import { SelectGraphNode, StackGraphSupportedFilterKeys } from "../../context/ui"
 import { WsEventMessage, SupportedEventName } from "../../context/events"
-import { Extends } from "garden-cli/src/util/util"
-import { ConfigDump } from "garden-cli/src/garden"
-import { FiltersButton, Filters } from "../group-filter"
-import { RenderedNodeType } from "garden-cli/src/config-graph"
 import { GraphOutputWithNodeStatus } from "../../context/data"
+import { FiltersButton, Filters } from "../group-filter"
 
 interface Node {
   name: string
@@ -179,21 +176,6 @@ function drawChart(
   })
 }
 
-interface Props {
-  config: ConfigDump
-  graph: GraphOutputWithNodeStatus
-  onGraphNodeSelected: SelectGraphNode
-  selectedGraphNode: string | null
-  layoutChanged: boolean
-  message?: WsEventMessage
-}
-
-interface State {
-  filters: Filters<StackGraphSupportedFilterKeys>
-  nodes: Node[]
-  edges: Edge[]
-}
-
 // Renders as HTML
 const makeLabel = (name: string, type: string, moduleName: string) => {
   return `
@@ -226,49 +208,35 @@ const ProcessSpinner = styled<any, SpinnerProps>(Spinner)`
 type ChartState = {
   nodes: Node[],
   edges: Edge[],
-  filters: Filters<StackGraphSupportedFilterKeys>,
 }
 
-class Chart extends Component<Props, State> {
+interface Props {
+  config: ConfigDump
+  graph: GraphOutputWithNodeStatus
+  onGraphNodeSelected: SelectGraphNode
+  selectedGraphNode: string | null
+  layoutChanged: boolean
+  message?: WsEventMessage
+  filters: Filters<StackGraphSupportedFilterKeys>
+  onFilter: (filterKey: StackGraphSupportedFilterKeys) => void
+}
+
+class Chart extends Component<Props, ChartState> {
   _nodes: Node[]
   _edges: Edge[]
   _chartRef: React.RefObject<any>
 
   state: ChartState = {
     nodes: [],
     edges: [],
-    filters: {
-      run: { selected: true, label: "Run" },
-      deploy: { selected: true, label: "Deploy" },
-      test: { selected: true, label: "Test" },
-      build: { selected: true, label: "Build" },
-    },
   }
 
   constructor(props) {
     super(props)
 
     this._chartRef = React.createRef()
-    this.handleFilter = this.handleFilter.bind(this)
     this._nodes = []
     this._edges = []
-
-    const createFiltersState =
-      (allGroupFilters, type): Filters<StackGraphSupportedFilterKeys> => {
-        return ({
-          ...allGroupFilters,
-          [type]: {
-            ...(allGroupFilters[type]),
-            visible: true,
-          },
-        })
-      }
-    const taskTypes: RenderedNodeType[] = uniq(this.props.graph.nodes.map(n => n.type))
-    const filters: Filters<StackGraphSupportedFilterKeys> = taskTypes.reduce(createFiltersState, this.state.filters)
-    this.state = {
-      ...this.state,
-      filters,
-    }
   }
 
   componentDidMount() {
@@ -289,14 +257,6 @@ class Chart extends Component<Props, State> {
     window.onresize = () => { }
   }
 
-  handleFilter(key: string) {
-    const toggledFilters = this.state.filters
-    toggledFilters[key].selected = !toggledFilters[key].selected
-    this.setState({
-      filters: toggledFilters,
-    })
-  }
-
   drawChart() {
     const graph = this.makeGraph()
     this._nodes = graph.nodes
@@ -307,9 +267,8 @@ class Chart extends Component<Props, State> {
   }
 
   makeGraph() {
-    const { filters } = this.state
     const nodes: Node[] = this.props.graph.nodes
-      .filter(n => filters[n.type].selected)
+      .filter(n => this.props.filters[n.type].selected)
       .map(n => {
         return {
           id: n.key,
@@ -319,7 +278,10 @@ class Chart extends Component<Props, State> {
         }
       })
     const edges: Edge[] = this.props.graph.relationships
-      .filter(n => filters[n.dependant.type].selected && filters[n.dependency.type].selected)
+      .filter(n =>
+        this.props.filters[n.dependant.type].selected &&
+        this.props.filters[n.dependency.type].selected,
+      )
       .map(r => {
         const source = r.dependency
         const target = r.dependant
@@ -333,12 +295,13 @@ class Chart extends Component<Props, State> {
     return { edges, nodes }
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate(prevProps: Props, prevState: ChartState) {
     if (
       (prevState !== this.state) ||
       (prevProps.graph !== this.props.graph) ||
       (!prevProps.selectedGraphNode && this.props.selectedGraphNode) ||
       (prevProps.selectedGraphNode && !this.props.selectedGraphNode) ||
+      (prevProps.filters !== this.props.filters) ||
       (prevProps.layoutChanged !== this.props.layoutChanged)) {
       this.drawChart()
     }
@@ -386,8 +349,8 @@ class Chart extends Component<Props, State> {
           >
             <div className="ml-1" >
               <FiltersButton
-                filters={this.state.filters}
-                onFilter={this.handleFilter}
+                filters={this.props.filters}
+                onFilter={this.props.onFilter}
               />
               <div
                 className={css`

diff --git a/dashboard/src/components/group-filter.tsx b/dashboard/src/components/group-filter.tsx
@@ -46,7 +46,7 @@ const FilterGroup = styled.ul`
 `
 export type Filters<T extends string> = {
   [key in T]: {
-    label: string
+    label: string,
     selected: boolean,
     readonly?: boolean,
   }

diff --git a/dashboard/src/containers/graph.tsx b/dashboard/src/containers/graph.tsx
@@ -12,9 +12,11 @@ import Graph from "../components/graph"
 import PageError from "../components/page-error"
 import { EventContext } from "../context/events"
 import { DataContext } from "../context/data"
-import { UiStateContext } from "../context/ui"
+import { UiStateContext, StackGraphSupportedFilterKeys } from "../context/ui"
 import { NodeInfo } from "./node-info"
 import Spinner from "../components/spinner"
+import { Filters } from "../components/group-filter"
+import { capitalize } from "lodash"
 
 const Wrapper = styled.div`
 padding-left: .75rem;
@@ -31,8 +33,8 @@ export default () => {
   useEffect(loadGraph, [])
 
   const {
-    actions: { selectGraphNode },
-    state: { selectedGraphNode, isSidebarOpen },
+    actions: { selectGraphNode, stackGraphToggleItemsView },
+    state: { selectedGraphNode, isSidebarOpen, stackGraph: { filters } },
   } = useContext(UiStateContext)
 
   if (config.error || graph.error) {
@@ -62,6 +64,19 @@ export default () => {
     }
   }
 
+  const createFiltersState =
+    (allGroupFilters, type): Filters<StackGraphSupportedFilterKeys> => {
+      return ({
+        ...allGroupFilters,
+        [type]: {
+          label: capitalize(type),
+          selected: filters[type],
+        },
+      })
+    }
+
+  const graphFilters = Object.keys(filters).reduce(createFiltersState, {}) as Filters<StackGraphSupportedFilterKeys>
+
   return (
     <Wrapper className="row">
       <div className={moreInfoPane ? "col-xs-7 col-sm-7 col-md-8 col-lg-8 col-xl-8" : "col-xs"}>
@@ -71,6 +86,8 @@ export default () => {
           layoutChanged={isSidebarOpen}
           config={config.data}
           graph={graph.data}
+          filters={graphFilters}
+          onFilter={stackGraphToggleItemsView}
         />
       </div>
       {moreInfoPane}

diff --git a/dashboard/src/context/ui.tsx b/dashboard/src/context/ui.tsx
@@ -35,7 +35,8 @@ export type StackGraphSupportedFilterKeys = Exclude<RenderedNodeType, "publish">
 
 interface UiActions {
   toggleSidebar: () => void
-  overviewToggleItemsView: (itemToToggle: OverviewSupportedFilterKeys) => void
+  overviewToggleItemsView: (filterKey: OverviewSupportedFilterKeys) => void
+  stackGraphToggleItemsView: (filterKey: StackGraphSupportedFilterKeys) => void
   selectGraphNode: SelectGraphNode
   selectIngress: SelectIngress
   clearGraphNodeSelection: () => void
@@ -84,14 +85,27 @@ const useUiState = () => {
     })
   }
 
-  const overviewToggleItemsView = (itemToToggle: OverviewSupportedFilterKeys) => {
+  const overviewToggleItemsView = (filterKey: OverviewSupportedFilterKeys) => {
     setState({
       ...uiState,
       overview: {
         ...uiState.overview,
         filters: {
           ...uiState.overview.filters,
-          [itemToToggle]: !uiState.overview.filters[itemToToggle],
+          [filterKey]: !uiState.overview.filters[filterKey],
+        },
+      },
+    })
+  }
+
+  const stackGraphToggleItemsView = (filterKey: StackGraphSupportedFilterKeys) => {
+    setState({
+      ...uiState,
+      stackGraph: {
+        ...uiState.stackGraph,
+        filters: {
+          ...uiState.stackGraph.filters,
+          [filterKey]: !uiState.stackGraph.filters[filterKey],
         },
       },
     })
@@ -124,6 +138,7 @@ const useUiState = () => {
     actions: {
       toggleSidebar,
       overviewToggleItemsView,
+      stackGraphToggleItemsView,
       selectGraphNode,
       clearGraphNodeSelection,
       selectIngress,