Bug fixes and update to mobx tracker logic for deep tracking

Raathigesh · Oct 21, 2017 · b04fd7e · b04fd7e
1 parent ffb5f3e
commit b04fd7e
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 88 deletions.
diff --git a/packages/app/src/renderer/components/Sidebar/Sidebar.js b/packages/app/src/renderer/components/Sidebar/Sidebar.js
@@ -27,8 +27,6 @@ class Sidebar extends Component {
       setCurrentTrackerId
     } = this.props.store;
 
-    const observableTrackers = trackers.filter(tracker => tracker.isObservable);
-    const logTrackers = trackers.filter(tracker => !tracker.isObservable);
     return (
       <SidebarContainer className="panel">
         <div className="panel-header text-center">
@@ -44,30 +42,7 @@ class Sidebar extends Component {
         </div>
         <div className="panel-body">
           <Menus className="menu">
-            {observableTrackers.length > 0 && (
-              <Divider className="divider" data-content="Observables" />
-            )}
-            {observableTrackers.map((tracker, index) => {
-              const isActive = tracker.id === currrentTrackerId;
-              return (
-                <li
-                  key={index}
-                  className="menu-item"
-                  onClick={() => {
-                    setTrackerId(tracker.id);
-                  }}
-                >
-                  <a href="#menus" className={isActive ? "active" : ""}>
-                    {tracker.name}
-                  </a>
-                </li>
-              );
-            })}
-
-            {logTrackers.length > 0 && (
-              <Divider className="divider" data-content="Logs" />
-            )}
-            {logTrackers.map((tracker, index) => {
+            {trackers.map((tracker, index) => {
               const isActive = tracker.id === currrentTrackerId;
               return (
                 <li

diff --git a/packages/app/src/renderer/components/executionPanel/Actions.js b/packages/app/src/renderer/components/executionPanel/Actions.js
@@ -38,6 +38,7 @@ const ActionsColumn = styled.div`
   overflow: auto;
   color: #fffbfb;
   flex-wrap: wrap;
+  flex-grow: 1;
 `;
 
 const ExecuteButton = styled.button`margin-top: 8px;`;
@@ -58,16 +59,18 @@ class Actions extends Component {
         <Header>
           <span>Actions</span>
         </Header>
-        {actions.length > 0 && <Arguments
-          open={this.state.isArgDialogOpen}
-          action={action}
-          tracker={tracker}
-          onClose={() => {
-            this.setState({
-              isArgDialogOpen: false
-            });
-          }}
-        />}
+        {actions.length > 0 && (
+          <Arguments
+            open={this.state.isArgDialogOpen}
+            action={action}
+            tracker={tracker}
+            onClose={() => {
+              this.setState({
+                isArgDialogOpen: false
+              });
+            }}
+          />
+        )}
         <ActionsColumn>
           {actions.map((action, index) => {
             return (
@@ -86,9 +89,12 @@ class Actions extends Component {
               />
             );
           })}
-          {
-            actions.length === 0 && <EmptyContent title="No actions" subtitle="This observable does not have any actions associated." />
-          }
+          {actions.length === 0 && (
+            <EmptyContent
+              title="No actions"
+              subtitle="This observable does not have any actions associated."
+            />
+          )}
         </ActionsColumn>
       </ActionsContainer>
     );

diff --git a/packages/app/src/renderer/components/logs/Log.js b/packages/app/src/renderer/components/logs/Log.js
@@ -19,13 +19,16 @@ const CardHeader = styled.div`
   padding-left: 17px;
 `;
 const CardTitle = styled.div`float: left;`;
+const Order = styled.mark`padding: 4px;`;
 
-function Log({ title, log, currrentTrackerId, applySnapshot }) {
+function Log({ order, title, log, currrentTrackerId, applySnapshot }) {
   const subLabelText = log.isExpanded ? "Collapse" : "Expand";
   return (
     <CardContainer className="card">
       <CardHeader>
-        <CardTitle className="card-title">{title}</CardTitle>
+        <CardTitle className="card-title">
+          <Order>{order}</Order> {title}
+        </CardTitle>
         <ToggleHandler
           className="btn btn-sm"
           onClick={() => {

diff --git a/packages/app/src/renderer/components/logs/LogPanel.js b/packages/app/src/renderer/components/logs/LogPanel.js
@@ -11,13 +11,26 @@ const ContentContainer = styled.div`
 
 const TraceContainer = styled.div`overflow: auto;`;
 
+const ClearButton = styled.button`float: right;`;
+
 class Spy extends Component {
   render() {
-    const { tracker, applySnapshot, applyPatch } = this.props;
+    const { tracker, applySnapshot, applyPatch, clearLogs } = this.props;
     return (
       <ContentContainer className="card">
         <div className="card-header">
-          <div className="card-title h5">Debug panel</div>
+          <div className="card-title h5">
+            Debug panel{" "}
+            <ClearButton
+              className="btn btn-sm"
+              onClick={() => {
+                tracker.clearLogs();
+              }}
+            >
+              Clear
+            </ClearButton>
+          </div>
+
           <div className="card-subtitle text-gray">
             Actions, snaphots and patches
           </div>
@@ -63,6 +76,7 @@ class Spy extends Component {
             tracker.logs.actionLogs.map((action, index) => {
               return (
                 <Log
+                  order={action.displayNumber}
                   key={index}
                   title={
                     tracker.nodeType === 1 ? action.value.name : action.time
@@ -78,6 +92,7 @@ class Spy extends Component {
             tracker.logs.patches.map((patch, index) => {
               return (
                 <Log
+                  order={patch.displayNumber}
                   key={index}
                   title={patch.value.path}
                   log={patch}
@@ -92,6 +107,7 @@ class Spy extends Component {
             tracker.logs.snapshots.map((snapshot, index) => {
               return (
                 <Log
+                  order={snapshot.displayNumber}
                   key={index}
                   title={snapshot.time}
                   log={snapshot}

diff --git a/packages/app/src/renderer/store/Tracker.js b/packages/app/src/renderer/store/Tracker.js
@@ -26,9 +26,6 @@ export default class Tracker {
       value: {},
 
       logs: {
-        // Logs generated by observe()
-        observeLogs: [],
-
         // Logs generated by MST's onAction()
         actionLogs: [],
 
@@ -54,6 +51,12 @@ export default class Tracker {
         return "";
       }),
 
+      setName(name) {
+        if (name) {
+          this.name = name;
+        }
+      },
+
       // Sets the current selected tab
       setSelectedTab(index) {
         this.selectedTab = index;
@@ -121,6 +124,7 @@ export default class Tracker {
         this.value = value;
         this.addToTop(
           {
+            displayNumber: this.logs.actionLogs.length + 1,
             time: moment().format("dddd, MMMM Do YYYY, h:mm:ss a"),
             isExpanded: false,
             value: observable.ref(description)
@@ -133,6 +137,7 @@ export default class Tracker {
         this.value = value;
         this.addToTop(
           {
+            displayNumber: this.logs.actionLogs.length + 1,
             isExpanded: false,
             value: observable.ref(actionMeta)
           },
@@ -144,6 +149,7 @@ export default class Tracker {
         this.value = value;
         this.addToTop(
           {
+            displayNumber: this.logs.patches.length + 1,
             isExpanded: false,
             value: observable.ref(patch)
           },
@@ -155,6 +161,7 @@ export default class Tracker {
         this.value = value;
         this.addToTop(
           {
+            displayNumber: this.logs.snapshots.length + 1,
             time: moment().format("dddd, MMMM Do YYYY, h:mm:ss a"),
             isExpanded: false,
             value: observable.ref(snapshot)
@@ -168,6 +175,12 @@ export default class Tracker {
         if (item) {
           collection.unshift(observable(item));
         }
+      },
+
+      clearLogs() {
+        this.logs.actionLogs.clear();
+        this.logs.patches.clear();
+        this.logs.snapshots.clear();
       }
     });
   }

diff --git a/packages/app/src/renderer/store/Trackers.js b/packages/app/src/renderer/store/Trackers.js
@@ -28,6 +28,9 @@ class Trackers {
         });
       },
       update: payload => {
+        if (typeof payload.existing_value === "boolean") {
+          payload.new_value = payload.new_value === "true";
+        }
         payload.trackerId = this.currrentTrackerId;
         socket.emit("update", payload);
       }
@@ -87,7 +90,9 @@ class Trackers {
     if (nodeType === 0) {
       const mobxTracker = this.trackers.find(item => item.id === payload.id);
       if (mobxTracker) {
+        mobxTracker.setName(payload.name);
         mobxTracker.setUpdatedTime(moment());
+        mobxTracker.addActions(payload.actions);
         mobxTracker.setValue(payload.value);
         mobxTracker.addObserveLog(payload.value, payload.action);
       } else {

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -6,9 +6,10 @@
   "license": "MIT",
   "dependencies": {
     "lodash.isstring": "^4.0.1",
+    "mobx": "^3.3.0",
+    "mobx-state-tree": "^1.0.1",
     "shortid": "^2.2.8",
-    "socket.io-client": "^2.0.3",
-    "mobx": "^3.3.0"
+    "socket.io-client": "^2.0.3"
   },
   "devDependencies": {
     "backpack-core": "^0.4.2"

diff --git a/packages/lib/src/index.js b/packages/lib/src/index.js
@@ -61,13 +61,12 @@ export function wiretap(appName, options = {}) {
   });
 }
 
-export function inspect(name, thingToTrack) {
+export function inspect(name, thingToTrack, actions) {
   if (!isString(name)) {
     throw new Error("First parameter should be a string.");
   }
-
   if (isStateTreeNode(thingToTrack)) {
-    inspectStateTree(name, thingToTrack);
+    inspectStateTree(name, thingToTrack, actions);
   } else {
     inspectMobx(name, thingToTrack);
   }

diff --git a/packages/lib/src/mobxStateTreeTracker.js b/packages/lib/src/mobxStateTreeTracker.js
@@ -16,9 +16,9 @@ import {
   applyPatch
 } from "mobx-state-tree";
 
-export function inspect(name, thingToTrack) {
+export function inspect(name, thingToTrack, actions) {
   const id = globalState.addObservable(thingToTrack);
-  const actions = getActions(thingToTrack);
+  // const actions = getActions(thingToTrack);
 
   emitChange({
     id,