icon to collapse/expand actions

Author: Mytrill

dist/hyperapp-devtools.js

@@ -1,3 +1,4 @@
 import { ActionsType } from "hyperapp";
 import * as api from "./api";
+export declare const INITIAL_ACTION = "%%% INITIAL STATE %%%";
 export declare const actions: ActionsType<api.State, api.Actions>;

dist/hyperapp-devtools.js.map

@@ -1,7 +1,7 @@
 export interface AppAction {
     name: string;
     done: boolean;
-    nestedActions: AppAction[];
+    actions: AppAction[];
     previousState: any | null;
     collapsed: boolean;
     nextState?: any;
@@ -46,7 +46,7 @@ export interface State {
 }
 export interface ToggleActionPayload {
     run: string;
-    actionId: number;
+    path: number[];
 }
 export interface Actions {
     log(event: RuntimeEvent): any;

dist/src/actions.d.ts

@@ -1,10 +1,12 @@
 import "./RunActionItem.scss";
-import { State, Actions, AppAction } from "../api";
+import { State, Actions, AppAction, Run } from "../api";
 export interface RunActionItemProps {
     state: State;
     actions: Actions;
-    array: AppAction[];
-    index: number;
+    run: Run;
+    actionList: AppAction[];
+    indexInList: number;
     action: AppAction;
+    path: number[];
 }
 export declare function RunActionItem(props: RunActionItemProps): any;

dist/src/api.d.ts

@@ -0,0 +1,11 @@
+import "./RunActionItemList.scss";
+import { State, Actions, AppAction, Run } from "../api";
+export interface RunActionItemListProps {
+    state: State;
+    actions: Actions;
+    run: Run;
+    actionList: AppAction[];
+    collapsed: boolean;
+    path: number[];
+}
+export declare function RunActionItemList(props: RunActionItemListProps): any;

dist/src/components/RunActionItem.d.ts

@@ -5,5 +5,6 @@ export interface RunsPaneItemProps {
     actions: Actions;
     run: Run;
     current: boolean;
+    path: any[];
 }
 export declare function RunsPaneItem(props: RunsPaneItemProps): JSX.Element;

dist/src/components/RunActionItemList.d.ts

@@ -17,8 +17,8 @@ function isCurrentAction(action: api.AppAction): boolean {
     return false
   }
 
-  const length = action.nestedActions.length
-  return length === 0 || action.nestedActions[length - 1].done
+  const length = action.actions.length
+  return length === 0 || action.actions[length - 1].done
 }
 
 /**
@@ -41,13 +41,13 @@ function appendActionEvent(
         done: false,
         collapsed: false,
         actionData: event.data,
-        nestedActions: [],
+        actions: [],
         previousState: action.previousState
       }
 
       return {
         ...action,
-        nestedActions: action.nestedActions.concat(nestedAction)
+        actions: action.actions.concat(nestedAction)
       }
     } else if (action.name === event.action) {
       // the previous call is now complete: set to done and compute the result
@@ -65,19 +65,41 @@ function appendActionEvent(
     }
   } else {
     // there are already some nested actions: call recursivelly
-    const nested = action.nestedActions
+    const nested = action.actions
     const nestedAction = nested[nested.length - 1]
     const newNestedAction = appendActionEvent(nestedAction, event)
     if (nestedAction === newNestedAction) {
       return action
     }
     return {
       ...action,
-      nestedActions: nested.slice(0, nested.length - 1).concat(newNestedAction)
+      actions: nested.slice(0, nested.length - 1).concat(newNestedAction)
     }
   }
 }
 
+function toggleAction(
+  runs: api.Runs,
+  runId: string,
+  actionPath: number[]
+): api.Runs {
+  const path: any[] = [runId]
+  actionPath.forEach(index => {
+    path.push("actions", index)
+  })
+  path.push("collapsed")
+
+  const collapsed = get(runs, path)
+  if (typeof collapsed !== "boolean") {
+    console.log("WARN: try to collapse invalid action, path: ", actionPath)
+    return runs
+  }
+
+  return set(runs, path, !collapsed)
+}
+
+export const INITIAL_ACTION = "%%% INITIAL STATE %%%"
+
 export const actions: ActionsType<api.State, api.Actions> = {
   log: (event: api.RuntimeEvent) => state => {
     return { logs: state.logs.concat([event]) }
@@ -86,10 +108,10 @@ export const actions: ActionsType<api.State, api.Actions> = {
     const runs = { ...state.runs }
 
     const action: api.AppAction = {
-      name: "Initial State",
+      name: INITIAL_ACTION,
       done: true,
       collapsed: false,
-      nestedActions: [],
+      actions: [],
       previousState: null,
       nextState: event.state
     }
@@ -116,7 +138,7 @@ export const actions: ActionsType<api.State, api.Actions> = {
         selectedAction = {
           done: false,
           collapsed: false,
-          nestedActions: [],
+          actions: [],
           name: event.action,
           actionData: event.data,
           previousState: prevAction.nextState
@@ -141,10 +163,8 @@ export const actions: ActionsType<api.State, api.Actions> = {
     return { runs }
   },
   toggleAction: (payload: api.ToggleActionPayload) => state => {
-    const { run, actionId } = payload
-    const path = [run, "actions", actionId, "collapsed"]
-    const collapsed = get(state.runs, path)
-    const runs = set(state.runs, path, !collapsed)
+    const { run, path } = payload
+    const runs = toggleAction(state.runs, run, path)
     return { runs }
   },
   select: (selectedAction: api.AppAction | null) => {

dist/src/components/RunsPaneItem.d.ts

@@ -3,7 +3,7 @@
 export interface AppAction {
   name: string
   done: boolean
-  nestedActions: AppAction[]
+  actions: AppAction[]
   previousState: any | null
   collapsed: boolean
   nextState?: any
@@ -15,9 +15,6 @@ export interface Run {
   id: string
   timestamp: number
   actions: AppAction[]
-  // // used internally when loging actions
-  // // each number is the
-  // currentActionPath: number[]
   collapsed: boolean
 }
 
@@ -61,7 +58,7 @@ export interface State {
 
 export interface ToggleActionPayload {
   run: string
-  actionId: number
+  path: number[]
 }
 
 export interface Actions {

src/actions.ts

@@ -1,17 +1,26 @@
-@import "node_modules/spectre.css/src/spectre";
+@import "./index.scss";
 
 .run-action-item-count {
   color: orange;
 }
 
 .run-action-item {
-  display: block;
+  margin: 0rem;
+  width: 100%;
 
-  &:hover {
-    background-color: $secondary-color;
-  }
+  .item-link {
+    display: block;
+    color: black;
+
+    &:hover {
+      background-color: $secondary-color;
+      color: black;
+    }
 
-  &.selected {
-    background-color: $secondary-color-dark;
+    &.selected {
+      background-color: $secondary-color-dark;
+      font-weight: bold;
+      color: black;
+    }
   }
 }