first pass at freeze/thaw in rlog

inst/www/rlog/src/cyto/cytoClasses.js

@@ -23,6 +23,8 @@ let classes = {
   nodeIsolate: ".nodeIsolate",
   nodeIsolateInvalidate: ".nodeIsolateInvalidate",
 
+  nodeFrozen: ".nodeFrozen",
+
   nodeValueChanged: ".nodeValueChanged",
 
   hoverNotFocused: ".hoverNotFocused",

inst/www/rlog/src/cyto/cytoStyle.js

@@ -99,6 +99,9 @@ let graphStyles = {
       // "border-width": 3,
       // "border-opacity"
     },
+    frozen: {
+      "background-color": colors.frozen.default,
+    },
   },
   edge: {
     default: {

inst/www/rlog/src/cyto/cytoscapeInit.js

@@ -58,6 +58,7 @@ let withContainer = function(container: JQuery) {
       style(cytoClasses.nodeSelected, graphStyles.selected.node),
       style(cytoClasses.edgeSelected, graphStyles.selected.edge),
       style(cytoClasses.edgeGhostSelected, graphStyles.selected.ghostEdge),
+      style(cytoClasses.nodeFrozen, graphStyles.node.frozen),
     ],
   });
 

inst/www/rlog/src/graph/Node.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { LogStates } from "../log/logStates";
 import { HoverStatus } from "./HoverStatus";
 import { ActiveStateStatus } from "./ActiveStateStatus";
 import { StatusArr } from "./StatusArr";
@@ -14,6 +15,7 @@ class Node {
   type: string;
   session: string;
   time: number;
+  isFrozen: boolean;
   statusArr: StatusArr;
   value: ?string;
   hoverStatus: HoverStatus;
@@ -37,6 +39,7 @@ class Node {
     this.type = data.type;
     this.session = data.session || "Global";
     this.time = data.time;
+    this.isFrozen = data.isFrozen || false;
     this.statusArr = new StatusArr(data.statusArr || []);
     this.value = data.value || null;
     this.hoverStatus = data.hoverStatus || new HoverStatus();
@@ -71,14 +74,14 @@ class Node {
     return this.statusArr.last();
   }
   get inEnter(): boolean {
-    return this.statusArr.containsStatus("enter");
+    return this.statusArr.containsStatus(LogStates.enter);
   }
   get inIsolate(): boolean {
-    return this.statusArr.containsStatus("isolateEnter");
+    return this.statusArr.containsStatus(LogStates.isolateEnter);
   }
   // get inInvalidate() {return this.statusArr.containsStatus("invalidateStart");}
   get inIsolateInvalidate(): boolean {
-    return this.statusArr.containsStatus("isolateInvalidateStart");
+    return this.statusArr.containsStatus(LogStates.isolateInvalidateStart);
   }
   get cytoStyle() {
     return {};
@@ -127,6 +130,8 @@ class Node {
     }
     if (this.hoverStatus.selected) classes.push("nodeSelected");
 
+    if (this.isFrozen) classes.push("nodeFrozen");
+
     return classes.join(" ");
   }
   get cytoData() {
@@ -148,6 +153,7 @@ type NodeInputType = {
   type: string,
   session: ?string,
   time: number,
+  isFrozen?: boolean,
   statusArr?: StatusArr,
   value: ?string,
   hoverStatus?: HoverStatus,

inst/www/rlog/src/log/logStates.js

@@ -8,6 +8,7 @@ let states = {
   dependsOnRemove: "dependsOnRemove",
   enter: "enter",
   exit: "exit",
+  freeze: "freeze",
   invalidateEnd: "invalidateEnd",
   invalidateStart: "invalidateStart",
   isolateEnter: "isolateEnter",
@@ -15,6 +16,7 @@ let states = {
   isolateInvalidateEnd: "isolateInvalidateEnd",
   isolateInvalidateStart: "isolateInvalidateStart",
   queueEmpty: "queueEmpty",
+  thaw: "thaw",
   updateNodeLabel: "updateNodeLabel",
   valueChange: "valueChange",
 };
@@ -211,7 +213,7 @@ type LogEntryAnyType =
 
 type LogType = Array<LogEntryAnyType>;
 
-export { states };
+export { states as LogStates };
 export type {
   ReactIdType,
   CtxIdType,

inst/www/rlog/src/style/colors.js

@@ -39,6 +39,9 @@ let colors = {
   ghostEdges: {
     default: "#3c3b39",
   },
+  frozen: {
+    default: "#2171b5",
+  },
   // filtered colors
   lite: {
     white: "#ffffff",