Fix extend/collapse actions

Author: Mytrill

dist/hyperapp-devtools.js

@@ -35,12 +35,16 @@ export interface RuntimeEvent {
 }
 export declare type PaneDisplay = "fullscreen" | "right" | "bottom";
 export declare type ValueDisplay = "state" | "result" | "data" | "debugger-state";
+export interface SelectedAction {
+    run: string;
+    path: number[];
+}
 export interface State {
     runs: Runs;
     logs: RuntimeEvent[];
     paneShown: boolean;
     paneDisplay: PaneDisplay;
-    selectedAction: AppAction | null;
+    selectedAction: SelectedAction | null;
     collapseRepeatingActions: boolean;
     valueDisplay: ValueDisplay;
 }
@@ -52,7 +56,7 @@ export interface Actions {
     log(event: RuntimeEvent): any;
     logInit(event: InitEvent): any;
     logAction(event: ActionEvent): any;
-    select(action: AppAction | null): any;
+    select(action: SelectedAction | null): any;
     showPane(shown: boolean): any;
     setPaneDisplay(paneDisplay: PaneDisplay): any;
     setValueDisplay(valueDisplay: ValueDisplay): any;

dist/hyperapp-devtools.js.map

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

dist/src/api.d.ts

@@ -1,2 +1,6 @@
-import { State, Run } from "./api";
+import { State, Run, AppAction } from "./api";
+import { Path } from "./immutable";
 export declare function getRuns(state: State): Run[];
+export declare function getSelectedAction(state: State): AppAction | null;
+export declare function getPath(run: string, path: number[]): Path;
+export declare function isSelectedAction(state: State, run: string, path: number[]): boolean;

dist/src/components/RunsPaneItem.d.ts

@@ -1,5 +1,6 @@
 import { ActionsType } from "hyperapp"
 import { get, merge, set } from "./immutable"
+import { getPath } from "./selectors"
 
 import * as api from "./api"
 
@@ -79,23 +80,22 @@ function appendActionEvent(
 }
 
 function toggleAction(
-  runs: api.Runs,
-  runId: string,
+  state: api.State,
+  run: 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") {
+): Partial<api.State> {
+  const path = getPath(run, actionPath)
+
+  const existingAction = get(state.runs, path)
+  if (typeof existingAction !== "object") {
     console.log("WARN: try to collapse invalid action, path: ", actionPath)
-    return runs
+    return state
   }
 
-  return set(runs, path, !collapsed)
+  const collapsed = !existingAction.collapsed
+  const action = { ...existingAction, collapsed }
+  const runs: api.Runs = set(state.runs, path, action)
+  return { runs }
 }
 
 export const INITIAL_ACTION = "%%% INITIAL STATE %%%"
@@ -123,19 +123,18 @@ export const actions: ActionsType<api.State, api.Actions> = {
       collapsed: false
     }
 
-    return { runs, selectedAction: action }
+    return { runs, selectedAction: { run: event.runId, path: [0] } }
   },
   logAction: (event: api.ActionEvent) => state => {
     const runs = { ...state.runs }
     const run = runs[event.runId]
     const actions = [...run.actions]
     run.actions = actions
     const prevAction = actions.pop()
-    let selectedAction: api.AppAction
     if (prevAction.done) {
       // previous action done: create new action and append
       if (!event.callDone) {
-        selectedAction = {
+        const action = {
           done: false,
           collapsed: false,
           actions: [],
@@ -144,15 +143,20 @@ export const actions: ActionsType<api.State, api.Actions> = {
           previousState: prevAction.nextState
         }
 
-        actions.push(prevAction, selectedAction)
+        actions.push(prevAction, action)
       } else {
         // error!, should we log it here?
         console.log("Previous action is done and event.callDone", state, event)
       }
     } else {
       // previous action not done: find parent action, create and append
-      selectedAction = appendActionEvent(prevAction, event)
-      actions.push(selectedAction)
+      const action = appendActionEvent(prevAction, event)
+      actions.push(action)
+    }
+
+    const selectedAction = {
+      run: event.runId,
+      path: [actions.length - 1]
     }
 
     return { runs, selectedAction }
@@ -164,10 +168,9 @@ export const actions: ActionsType<api.State, api.Actions> = {
   },
   toggleAction: (payload: api.ToggleActionPayload) => state => {
     const { run, path } = payload
-    const runs = toggleAction(state.runs, run, path)
-    return { runs }
+    return toggleAction(state, run, path)
   },
-  select: (selectedAction: api.AppAction | null) => {
+  select: (selectedAction: api.SelectedAction | null) => {
     return { selectedAction }
   },
   showPane: (paneShown: boolean) => {

dist/src/selectors.d.ts

@@ -44,12 +44,17 @@ export type PaneDisplay = "fullscreen" | "right" | "bottom"
 
 export type ValueDisplay = "state" | "result" | "data" | "debugger-state"
 
+export interface SelectedAction {
+  run: string
+  path: number[]
+}
+
 export interface State {
   runs: Runs
   logs: RuntimeEvent[]
   paneShown: boolean
   paneDisplay: PaneDisplay
-  selectedAction: AppAction | null
+  selectedAction: SelectedAction | null
   collapseRepeatingActions: boolean
   valueDisplay: ValueDisplay
 }
@@ -65,7 +70,7 @@ export interface Actions {
   log(event: RuntimeEvent)
   logInit(event: InitEvent)
   logAction(event: ActionEvent)
-  select(action: AppAction | null)
+  select(action: SelectedAction | null)
   showPane(shown: boolean)
   setPaneDisplay(paneDisplay: PaneDisplay)
   setValueDisplay(valueDisplay: ValueDisplay)

src/actions.ts

@@ -2,51 +2,53 @@ import { h } from "hyperapp"
 
 import "./ObjectDetailsPane.scss"
 
-import { State, Actions, Run } from "../api"
+import { State, Actions, Run, AppAction } from "../api"
+import { getSelectedAction } from "../selectors";
 
-export interface ObjectDetailsPaneProps {
+interface PaneProps {
   state: State
   actions: Actions
+  action: AppAction
 }
 
-function PaneData(props: ObjectDetailsPaneProps) {
-  const { state, actions } = props
+function PaneData(props: PaneProps) {
+  const { action } = props
 
   return (
     <div class="object-details-pane scrollable">
       <pre class="scrollable-content">
-        {JSON.stringify(state.selectedAction.actionData, null, 2)}
+        {JSON.stringify(action.actionData, null, 2)}
       </pre>
     </div>
   )
 }
 
-function PaneResult(props: ObjectDetailsPaneProps) {
-  const { state, actions } = props
+function PaneResult(props: PaneProps) {
+  const { action } = props
 
   return (
     <div class="object-details-pane scrollable">
       <pre class="scrollable-content">
-        {JSON.stringify(state.selectedAction.actionResult, null, 2)}
+        {JSON.stringify(action.actionResult, null, 2)}
       </pre>
     </div>
   )
 }
 
-function PaneState(props: ObjectDetailsPaneProps) {
-  const { state, actions } = props
+function PaneState(props: PaneProps) {
+  const { action } = props
 
   return (
     <div class="object-details-pane scrollable">
       <pre class="scrollable-content">
-        {JSON.stringify(state.selectedAction.nextState, null, 2)}
+        {JSON.stringify(action.nextState, null, 2)}
       </pre>
     </div>
   )
 }
 
-function PaneDebuggerState(props: ObjectDetailsPaneProps) {
-  const { state, actions } = props
+function PaneDebuggerState(props: PaneProps) {
+  const { state } = props
 
   return (
     <div class="object-details-pane scrollable">
@@ -55,15 +57,22 @@ function PaneDebuggerState(props: ObjectDetailsPaneProps) {
   )
 }
 
+export interface ObjectDetailsPaneProps {
+  state: State
+  actions: Actions
+}
+
 export function ObjectDetailsPane(props: ObjectDetailsPaneProps) {
+  const { state, actions } = props
+  const action = getSelectedAction(props.state)
   switch (props.state.valueDisplay) {
     case "data":
-      return PaneData(props)
+      return PaneData({ state, actions, action })
     case "result":
-      return PaneResult(props)
+      return PaneResult({ state, actions, action })
     case "state":
-      return PaneState(props)
+      return PaneState({ state, actions, action })
     case "debugger-state":
-      return PaneDebuggerState(props)
+      return PaneDebuggerState({ state, actions, action })
   }
 }

src/api.ts

@@ -14,13 +14,22 @@
 
     &:hover {
       background-color: $secondary-color;
+      text-decoration: none;
       color: black;
     }
 
+    &:focus {
+      text-decoration: none;
+    }
+
     &.selected {
       background-color: $secondary-color-dark;
       font-weight: bold;
       color: black;
     }
   }
+
+  .icon:hover {
+    color: $primary-color;
+  }
 }

src/components/ObjectDetailsPane.tsx

@@ -6,6 +6,7 @@ import { State, Actions, AppAction, Run } from "../api"
 import { INITIAL_ACTION } from "../actions"
 
 import { RunActionItemList } from "./RunActionItemList"
+import { isSelectedAction } from "../selectors";
 
 // # Helpers
 
@@ -57,6 +58,7 @@ function ToggleActionItem(props: ToggleActionItemProps) {
   }
 
   const onclick = (e: Event) => {
+    event.stopPropagation()
     event.preventDefault()
     actions.toggleAction({ run: run.id, path })
   }
@@ -81,14 +83,14 @@ interface ActionItemLinkProps {
 }
 
 function ActionItemLink(props: ActionItemLinkProps) {
-  const { state, actions, actionList, indexInList, action } = props
+  const { state, actions, run, actionList, indexInList, action, path } = props
 
-  const selected = state.selectedAction === action
+  const selected = isSelectedAction(state, run.id, path)
   const className = "item-link" + (selected ? " selected" : "")
 
   const onclick = (e: Event) => {
     e.preventDefault()
-    actions.select(action)
+    actions.select({ run: run.id, path })
   }
 
   const displayName =