feat(overmind-devtools-client): add initial charts handling

Author: christianalfoni

packages/node_modules/overmind-devtools-client/src/components/Charts/index.tsx

@@ -0,0 +1,34 @@
+import { FunctionComponent, createElement } from 'react'
+import SplitPane from 'react-split-pane'
+
+import { useOvermind } from '../../overmind'
+import * as textStyles from '../../styles/text'
+import * as styles from './styles'
+
+const Charts: FunctionComponent = () => {
+  const { state, actions } = useOvermind()
+
+  return (
+    <div className={styles.wrapper}>
+      {state.currentAction ? (
+        <div className={styles.columns}>
+          <SplitPane
+            split="vertical"
+            minSize={100}
+            defaultSize={state.actionsSplitSize}
+            onChange={(size) => actions.updateActionsSplitSize(size)}
+          >
+            <div>List</div>
+            <div>Chart</div>
+          </SplitPane>
+        </div>
+      ) : (
+        <div className={styles.centerWrapper}>
+          <span className={textStyles.header}>no actions triggered...</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Charts

packages/node_modules/overmind-devtools-client/src/components/Charts/styles.ts

@@ -0,0 +1,29 @@
+import { css } from 'emotion'
+
+import { colors } from '../../theme'
+
+export const wrapper = css({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+})
+
+export const centerWrapper = css({
+  display: 'flex',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+})
+
+export const columns = css({
+  display: 'flex',
+  '> *:first-child': {
+    flex: '0 0 300px',
+  },
+  '> *:last-child': {
+    flex: 1,
+  },
+  flex: 1,
+  position: 'relative',
+})

packages/node_modules/overmind-devtools-client/src/components/Tabs/index.tsx

@@ -1,21 +1,23 @@
-import { createElement, FunctionComponent } from 'react'
-import { useOvermind } from '../../overmind'
-import Apps from '../Apps'
-import * as styles from './styles'
-import { Tab } from '../../overmind/types'
-import Tooltip from '../common/Tooltip'
 import { css } from 'emotion'
+import { FunctionComponent, createElement } from 'react'
 import {
-  FaDatabase,
-  FaCogs,
+  FaChrome,
   FaCode,
+  FaCogs,
+  FaDatabase,
+  FaHistory,
+  FaProjectDiagram,
   FaSave,
   FaTerminal,
-  FaHistory,
-  FaChrome,
 } from 'react-icons/fa'
+
+import { useOvermind } from '../../overmind'
+import { Tab } from '../../overmind/types'
 import { colors } from '../../theme'
+import Apps from '../Apps'
+import Tooltip from '../common/Tooltip'
 import RuntimeConfig from '../RuntimeConfig'
+import * as styles from './styles'
 
 const Tabs: FunctionComponent = () => {
   const { state, actions } = useOvermind()
@@ -67,6 +69,17 @@ const Tabs: FunctionComponent = () => {
           <FaCogs />
         </button>
       </Tooltip>
+      <Tooltip text="Charts">
+        <button
+          className={css(
+            styles.button,
+            state.currentTab === Tab.Charts && styles.activeButton
+          )}
+          onClick={() => actions.changeTab(Tab.Charts)}
+        >
+          <FaProjectDiagram />
+        </button>
+      </Tooltip>
       <Tooltip text="Components">
         <button
           className={css(

packages/node_modules/overmind-devtools-client/src/components/Workspace/index.tsx

@@ -10,6 +10,7 @@ import State from '../State'
 import Components from '../Components'
 import Flushes from '../Flushes'
 import History from '../History'
+import Charts from '../Charts'
 
 const pages: { [key in Tab]: SFC } = {
   [Tab.Actions]: Actions,
@@ -19,6 +20,7 @@ const pages: { [key in Tab]: SFC } = {
   [Tab.Flushes]: Flushes,
   [Tab.Remove]: () => null,
   [Tab.History]: History,
+  [Tab.Charts]: Charts,
 }
 
 const Workspace: SFC = () => {

packages/node_modules/overmind-devtools-client/src/overmind/actions.ts

@@ -32,6 +32,7 @@ export const onMessage: Operator<Message> = pipe(
     [ExecutionType.ACTION_END]: o.updateAction(),
     [ExecutionType.OPERATOR_ASYNC]: o.updateOperatorAsync(),
     [ExecutionType.GETTER]: o.runGetterMutation(),
+    [ExecutionType.CHART]: o.addChart(),
   })
 )
 

packages/node_modules/overmind-devtools-client/src/overmind/operators.ts

@@ -25,6 +25,7 @@ import {
   GetterMessage,
   StateMessage,
   Tab,
+  ChartMessage,
 } from './types'
 import {
   createApp,
@@ -216,6 +217,20 @@ export const addAction: () => Operator<StartActionMessage> = () =>
     }
   })
 
+export const addChart: () => Operator<ChartMessage> = () =>
+  mutate(({ state }, message) => {
+    const app = state.apps[message.appName]
+    const data = message.data
+    const chartId = data.path.join('.')
+    const isSelectingFirstChart = !app.currentChartId
+
+    app.charts[chartId] = data
+
+    if (isSelectingFirstChart) {
+      app.currentChartId = chartId
+    }
+  })
+
 export const addOperator: () => Operator<StartOperatorMessage> = () =>
   mutate(({ state }, message) => {
     const operatorData = message.data

packages/node_modules/overmind-devtools-client/src/overmind/state.ts

@@ -17,6 +17,7 @@ import {
   EffectMessage,
   EffectHistoryRecord,
   OperatorsByPath,
+  Chart,
 } from './types'
 
 type State = {
@@ -29,6 +30,7 @@ type State = {
   currentTab: Tab
   showApps: boolean
   currentAction: Derive<State, Action>
+  currentChart: Derive<State, Chart>
   currentApp: Derive<State, App>
   componentsMounted: Derive<State, Component[]>
   componentsUpdateCount: Derive<State, number>
@@ -98,6 +100,8 @@ const state: State = {
     }, []).length,
   currentAction: (state) =>
     state.currentApp.actions[state.currentApp.currentActionId],
+  currentChart: (state) =>
+    state.currentApp.charts[state.currentApp.currentChartId],
   groupedComponents(state) {
     const components = state.componentsMounted
 

packages/node_modules/overmind-devtools-client/src/overmind/types.ts

@@ -163,6 +163,10 @@ export type EffectHistoryRecord = HistoryRecord<
   Effect
 >
 
+export type Charts = {
+  [path: string]: Chart
+}
+
 export type App = {
   name: string
   messages: AppMessage<any>[]
@@ -177,8 +181,10 @@ export type App = {
     [id: string]: FlushReference
   }
   actions: Actions
+  charts: Charts
   actionsList: ActionsListItem[]
   currentActionId: string
+  currentChartId: string
   actionQuery: string
   actionQuerySuggestion: string
   selectedActionQuery: string
@@ -213,6 +219,7 @@ export enum ExecutionType {
   ACTION_END = 'action:end',
   GETTER = 'getter',
   STATE = 'state',
+  CHART = 'chart',
 }
 
 export enum AppMessageType {
@@ -289,6 +296,8 @@ export type StartActionMessage = AppMessage<{
   parentExecution?: any
 }>
 
+export type ChartMessage = AppMessage<Chart>
+
 export type StartOperatorMessage = AppMessage<{
   actionId: number
   actionName: string
@@ -366,6 +375,7 @@ export enum Tab {
   Flushes = 'Flushes',
   Remove = 'Remove',
   History = 'History',
+  Charts = 'Charts',
 }
 
 export type GroupedComponent = {
@@ -377,3 +387,21 @@ export type GroupedComponent = {
 export type GroupedComponents = {
   [name: string]: GroupedComponent
 }
+
+export type Chart = {
+  path: string[]
+  state: string
+  chart: {
+    [key: string]: {
+      entry?: string
+      exit?: string
+      on: {
+        [key: string]:
+          | string
+          | {
+              target: string
+            }
+      }
+    }
+  }
+}

packages/node_modules/overmind-devtools-client/src/overmind/utils.ts

@@ -39,8 +39,10 @@ export const createApp = (data: Partial<App>): App =>
       derived: {},
       flushes: {},
       actions: {},
+      charts: {},
       actionsList: [],
       currentActionId: null,
+      currentChartId: null,
       flushByActionId: {},
       flushByOperatorId: {},
       actionQuery: '',