fix eslint and prettier clashes

inst/www/rlog/.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     "eslint:recommended"
   ],
   "rules": {
+    "flowtype/space-after-type-colon": 0, // fixed / clashes with prettier
     "comma-dangle": [2, "only-multiline"],
     "consistent-return": 1,
     "dot-location": [1, "property"],

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

@@ -28,8 +28,8 @@ type CytoscapeEdge = {
   removeStyle: () => CytoscapeNode,
 };
 
-type SetEleData = (info: SomeGraphData) => CytoscapeElements;
-type GetEleData = () => CytoscapeElements;
+// type SetEleData = (info: SomeGraphData) => CytoscapeElements;
+// type GetEleData = () => CytoscapeElements;
 type CytoscapeNode = {
   id: () => string,
   // data: (info: SomeGraphData) => CytoscapeElements,

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

@@ -8,11 +8,11 @@ import { Node } from "./Node";
 import { Edge } from "./Edge";
 import { GhostEdge } from "./GhostEdge";
 import { HoverStatus } from "./HoverStatus";
-import { StatusArr, expectPrevStatus } from "./StatusArr";
+import { expectPrevStatus } from "./StatusArr";
 
 import console from "../utils/console";
 
-import type { CytoscapeType, CytoData } from "../cyto/cytoFlowType";
+import type { CytoscapeType } from "../cyto/cytoFlowType";
 
 import type {
   LogType,
@@ -181,13 +181,15 @@ class Graph {
       let reactId;
       reactId = this.reactIdFromData(data, true);
       if (!reactId) return [];
-      return _.filter(mapValues(this.edgesUnique), function(edge) {
-        // if the target is the reactId
-        return edge.reactId === reactId;
-      }).map(function(edge) {
-        // return the source
-        return edge.depOnReactId;
-      });
+      return _
+        .filter(mapValues(this.edgesUnique), function(edge) {
+          // if the target is the reactId
+          return edge.reactId === reactId;
+        })
+        .map(function(edge) {
+          // return the source
+          return edge.depOnReactId;
+        });
     }
   }
   childrenNodeIds(data: SomeGraphData | ?ReactIdType): Array<ReactIdType> {
@@ -200,13 +202,15 @@ class Graph {
     } else {
       let reactId = this.reactIdFromData(data, false);
       if (!reactId) return [];
-      return _.filter(mapValues(this.edgesUnique), function(edge) {
-        // if the source is the reactId
-        return edge.depOnReactId === reactId;
-      }).map(function(edge) {
-        // return the target
-        return edge.reactId;
-      });
+      return _
+        .filter(mapValues(this.edgesUnique), function(edge) {
+          // if the source is the reactId
+          return edge.depOnReactId === reactId;
+        })
+        .map(function(edge) {
+          // return the target
+          return edge.reactId;
+        });
     }
   }
 
@@ -311,7 +315,8 @@ class Graph {
     nodeIds: Array<ReactIdType>,
     hoverKey: "state" | "sticky",
     onStatus: typeof HoverStatus.valSticky | typeof HoverStatus.valFocused,
-    offStatus: | typeof HoverStatus.valNotSticky
+    offStatus:
+      | typeof HoverStatus.valNotSticky
       | typeof HoverStatus.valNotFocused
   ) {
     let nodeSet = new Set(nodeIds);
@@ -455,7 +460,8 @@ class Graph {
 
       case LogStates.isolateInvalidateStart:
       case LogStates.isolateEnter: {
-        let logEntry = (data: | LogEntryIsolateInvalidateStartType
+        let logEntry = (data:
+          | LogEntryIsolateInvalidateStartType
           | LogEntryIsolateEnterType);
         node = this.nodes.get(logEntry.reactId);
         if (node) {
@@ -535,7 +541,8 @@ class Graph {
               break;
           }
           if (expectedAction) {
-            let logEntry = (data: | LogEntryExitType
+            let logEntry = (data:
+              | LogEntryExitType
               | LogEntryIsolateExitType
               | LogEntryInvalidateEndType
               | LogEntryIsolateInvalidateEndType);
@@ -612,9 +619,9 @@ class Graph {
 function mapValues<T>(x: Map<string, T>): Array<T> {
   return Array.from(x.values());
 }
-function mapKeys<T>(x: Map<string, T>): Array<string> {
-  return Array.from(x.keys());
-}
+// function mapKeys<T>(x: Map<string, T>): Array<string> {
+//   return Array.from(x.keys());
+// }
 
 function isEdgeLike(data: any): boolean %checks {
   return data instanceof Edge || data instanceof GhostEdge;

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

@@ -615,8 +615,7 @@ class GraphAtStep {
     // enter
     nodesLRB.right.map(function(graphNode: CytoscapeNode) {
       let graphNodeData = (graphNode.data(): Node);
-      cy
-        .add(graphNode)
+      cy.add(graphNode)
         .classes(graphNodeData.cytoClasses)
         .style(graphNodeData.cytoStyle);
       // .animate({
@@ -678,8 +677,7 @@ class GraphAtStep {
     // enter
     edgesLRB.right.map(function(graphEdge: CytoscapeEdge) {
       let graphEdgeData = (graphEdge.data(): Edge);
-      cy
-        .add(graphEdge)
+      cy.add(graphEdge)
         .classes(graphEdgeData.cytoClasses)
         .removeStyle()
         .style(graphEdgeData.cytoStyle);
@@ -691,8 +689,7 @@ class GraphAtStep {
     // update
     edgesLRB.both.map(function(cytoEdge) {
       let graphEdgeData = graphEdges.$id(cytoEdge.id()).data();
-      cy
-        .$id(cytoEdge.id())
+      cy.$id(cytoEdge.id())
         // .classes()
         .classes(graphEdgeData.cytoClasses)
         .data(graphEdgeData)
@@ -734,26 +731,24 @@ class GraphAtStep {
       // TODO-barret move this method to layout
       // calculate a new layout
       // time expensive!!!
-      cy
-        .layout(
-          _.assign(
-            {
-              // provide elements in sorted order to make determanistic layouts
-              eles: sortedElements,
-              // run on layout ready
-              ready: function() {
-                onLayoutReady.map(function(fn) {
-                  fn();
-                });
-              },
+      cy.layout(
+        _.assign(
+          {
+            // provide elements in sorted order to make determanistic layouts
+            eles: sortedElements,
+            // run on layout ready
+            ready: function() {
+              onLayoutReady.map(function(fn) {
+                fn();
+              });
             },
-            layoutOptions
-            // ,
-            // TODO-barret Make animation a setting... it's expensive!
-            // {animate: true}
-          )
+          },
+          layoutOptions
+          // ,
+          // TODO-barret Make animation a setting... it's expensive!
+          // {animate: true}
         )
-        .run();
+      ).run();
     }
   }
 }

inst/www/rlog/src/layout/progressBar.js

@@ -8,7 +8,7 @@ import { updateGraph } from "../updateGraph";
 
 let fillContainer: JQuery;
 let updateProgressBar = function(): void {
-  fillContainer.width(rlog.curTick / rlog.log.length * 100 + "%");
+  fillContainer.width((rlog.curTick / rlog.log.length) * 100 + "%");
 };
 
 let setContainers = function(
@@ -35,7 +35,7 @@ let updateFromProgressBar = function(e: BaseJQueryEventObject): void {
   let pos = e.pageX; // pageX in pixels  // || e.originalEvent.pageX;
 
   let width = timeline.offsetWidth; // width in pixels
-  let targetStep = Math.max(Math.round(pos / width * rlog.log.length), 1);
+  let targetStep = Math.max(Math.round((pos / width) * rlog.log.length), 1);
   if (targetStep !== rlog.curTick) {
     updateGraph(targetStep);
   }
@@ -52,8 +52,8 @@ let addTimelineTicks = function(
   enterExits.map(function(i) {
     // add an extra step to show that it is completed
     // i = i + 1;
-    let left = 100 * i / logLength;
-    let width = 100 * 1 / logLength * 0.75;
+    let left = (100 * i) / logLength;
+    let width = ((100 * 1) / logLength) * 0.75;
     jqueryContainer.append(
       `<div class="timeline-tick ${className}" style="background-color: ${backgroundColor}; left: ${left}%; width: ${width}%; margin-left: -${width}%;"></div>`
     );

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

@@ -22,7 +22,7 @@ let states = {
   valueChange: "valueChange",
 };
 
-type ActionsType = $Values<typeof states>;
+// type ActionsType = $Values<typeof states>;
 
 type ReactIdType = string;
 type CtxIdType = string;