Merge pull request #279 from appigram/ghost-nodes

Cytoscape ghost nodes

web/package.json

@@ -39,7 +39,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-feather": "2.0.3",
-    "react-hook-form": "5.1.3",
+    "react-hook-form": "5.2.0",
     "react-router-dom": "5.1.2",
     "tabler": "appigram/tabler#dev"
   },
@@ -79,17 +79,17 @@
     "eslint": "6.8.0",
     "eslint-config-airbnb": "18.1.0",
     "eslint-config-prettier": "6.10.1",
-    "eslint-plugin-import": "2.20.1",
+    "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-node": "11.0.0",
+    "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-react": "7.19.0",
     "eslint-plugin-react-hooks": "3.0.0",
     "eslint-watch": "6.0.1",
     "file-loader": "6.0.0",
     "hard-source-webpack-plugin": "0.13.1",
     "history": "4.10.1",
-    "html-webpack-plugin": "4.0.2",
+    "html-webpack-plugin": "4.0.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "25.2.3",
     "jest-cli": "25.2.3",

web/src/App.scss

@@ -477,7 +477,6 @@
 }
 
 #debug-info {
-  position: absolute!important;
   bottom: 0.5rem;
   right: 0.5rem;
   top: auto!important;

web/src/ui/Visualizer/index.js

@@ -24,23 +24,29 @@ const VisualizerWrapper = () => {
       const stats = new Stats()
       stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
       stats.dom.id = 'debug-info'
+      // Remove old stats
+      const debugInfoBlock = document.getElementById('debug-info')
+      if (debugInfoBlock) {
+        document.body.removeChild(debugInfoBlock)
+      }
+      // Add new one
       document.body.appendChild(stats.dom)
 
       const animate = () => {
         stats.begin()
         // monitored code goes here
-
         stats.end()
-
         requestAnimationFrame(animate)
       }
-
       requestAnimationFrame(animate)
     }
   })
 
   if (tasks) {
     tasks.forEach((task) => {
+      if (!task.kind && !task.state) {
+        return
+      }
       const node = {
         data: task,
         classes: task.kind,
@@ -85,6 +91,9 @@ const VisualizerWrapper = () => {
         default:
           console.warn('unsupported task.kind', task)
           node.data.bgcolor = 'grey'
+          node.data.is_issue = true
+          node.data.progress = 0
+          node.data.card_classes += ' ghost'
       }
       // common
       node.data.nb_parents = 0
@@ -167,25 +176,27 @@ const VisualizerWrapper = () => {
     })
   }
 
-
-  /* useEffect(() => {
-    setDebugInfo({ nodes: nodes.length, edges: edges.length })
-  }, [tasks, layout]) */
-
   let rendererBlock = (
     <div>
       Tasks not found or Repository url is empty
     </div>
   )
+
+  const debugInfo = { }
   if (tasks && layout) {
     if (layout.name === 'gantt' || layout.name === 'flow') {
+      debugInfo.nodes = nodes.length
+      if (layout.name === 'flow') {
+        debugInfo.edges = edges.length
+      }
       rendererBlock = <MermaidRenderer nodes={nodes} edges={edges} layout={layout} />
     } else {
+      debugInfo.nodes = nodes.length
+      debugInfo.edges = edges.length
       rendererBlock = <CytoscapeRenderer nodes={nodes} edges={edges} layout={layout} />
     }
   }
 
-  const debugInfo = { nodes: nodes.length, edges: edges.length }
   return (
     <div>
       <div className="viz-wrapper card">
@@ -200,11 +211,13 @@ const VisualizerWrapper = () => {
           {' '}
           {debugInfo.nodes}
         </div>
+        {debugInfo.edges && (
         <div>
           edges:
           {' '}
           {debugInfo.edges}
         </div>
+        )}
       </div>
       )}
     </div>

web/src/ui/Visualizer/renderers/Cytoscape.js

@@ -3,7 +3,7 @@ import cytoscape from 'cytoscape'
 import cola from 'cytoscape-cola'
 import elk from 'cytoscape-elk/src'
 import nodeHtmlLabel from 'cytoscape-node-html-label'
-import Card from './cardTemplate'
+import CytoscapeCard from './CytoscapeCard'
 import './card.scss'
 
 import './styles.scss'
@@ -97,30 +97,76 @@ const CytoscapeRenderer = ({ nodes, edges, layout }) => {
           valignBox: 'center',
           cssClass: '',
           tpl(data) {
-            return Card(data)
+            return CytoscapeCard(data)
           },
         },
       ],
     )
 
-    const edgeMap = {}
     cy.batch(() => {
+      const edgeMap = {}
       edges.forEach((edge) => {
         const newEdge = edge
-        let isOk = true
+        // let isOk = true
         if (cy.getElementById(newEdge.data.source).empty()) {
           console.warn('missing node', newEdge.data.source)
-          isOk = false
+          // isOk = false
+          const newNode = {}
+          newNode.group = 'nodes'
+          newNode.classes = 'Issue'
+          newNode.data = {
+            id: newEdge.data.source,
+            created_at: new Date(),
+            updated_at: new Date(),
+            local_id: newEdge.data.source.replace('https://github.com/', '').replace('/issues/', '#'),
+            kind: 'Issue',
+            title: 'Ghost issue',
+            driver: 'GitHub',
+            state: 'Missing',
+            card_classes: 'ghost issue',
+            bgcolor: 'grey',
+            is_issue: true,
+            progress: 0.5,
+            nb_parents: 0,
+            nb_children: 0,
+            nb_related: 0,
+            parent: undefined,
+          }
+          // config.elements.push(newNode)
+          cy.add(newNode)
         }
         if (cy.getElementById(newEdge.data.target).empty()) {
           console.warn('missing node', newEdge.data.target)
-          isOk = false
-        }
-        if (!isOk) {
-          return
+          // isOk = false
+          const newNode = {}
+          newNode.group = 'nodes'
+          newNode.classes = 'Issue'
+          newNode.data = {
+            id: newEdge.data.target,
+            created_at: new Date(),
+            updated_at: new Date(),
+            local_id: newEdge.data.target.replace('https://github.com/', '').replace('/issues/', '#'),
+            kind: 'Issue',
+            title: 'Ghost issue',
+            driver: 'GitHub',
+            state: 'Missing',
+            card_classes: 'ghost issue',
+            bgcolor: 'grey',
+            is_issue: true,
+            progress: 0.5,
+            nb_parents: 0,
+            nb_children: 0,
+            nb_related: 0,
+            parent: undefined,
+          }
+          cy.add(newNode)
+          // config.elements.push(newNode)
         }
+        // if (!isOk) {
+        //   return
+        // }
         newEdge.group = 'edges'
-        newEdge.data.id = newEdge.data.relation + newEdge.data.source + newEdge.data.target
+        newEdge.data.id = `edge_${newEdge.data.relation}_${newEdge.data.source}_${newEdge.data.target}`
         newEdge.data.arrow = 'triangle'
         if (newEdge.data.id in edgeMap) {
           console.warn('duplicate edge', newEdge)
@@ -130,6 +176,7 @@ const CytoscapeRenderer = ({ nodes, edges, layout }) => {
         }
       })
     })
+
     const cyLayout = cy.layout(layout)
     cyLayout.run()
   }, [layout.name, nodes.length, edges.length])