feat(core): refactored dep-graph to use latest tippy.js and cytoscape (#5358)

updated tippy.js to version 6 and migrated the TooltipService
updated cytoscape and its packages to
the latest versions
removed cytoscape-anywhere panning

dep-graph/dep-graph/src/app/app.ts

@@ -1,5 +1,5 @@
-import { BehaviorSubject, combineLatest, fromEvent, Subject } from 'rxjs';
+import { combineLatest, fromEvent, Subject } from 'rxjs';
-import { startWith, takeUntil, throwIfEmpty } from 'rxjs/operators';
+import { startWith, takeUntil } from 'rxjs/operators';
 import { projectGraphs } from '../graphs';
 import { DebuggerPanel } from './debugger-panel';
 import { GraphComponent } from './graph';

dep-graph/dep-graph/src/app/graph.ts

@@ -1,6 +1,5 @@
 import { ProjectGraph, ProjectGraphNode } from '@nrwl/workspace';
 import * as cy from 'cytoscape';
-import anywherePanning from 'cytoscape-anywhere-panning';
 import cytoscapeDagre from 'cytoscape-dagre';
 import popper from 'cytoscape-popper';
 import { Subject } from 'rxjs';
@@ -14,6 +13,7 @@ import {
   ProjectEdge,
   ProjectNode,
 } from './util-cytoscape';
+import { VirtualElement } from '@popperjs/core';
 
 export interface GraphPerfReport {
   renderTime: number;
@@ -33,7 +33,6 @@ export class GraphComponent {
   constructor(private tooltipService: GraphTooltipService) {
     cy.use(cytoscapeDagre);
     cy.use(popper);
-    cy.use(anywherePanning);
   }
 
   render(selectedProjects: ProjectGraphNode[], groupByFolder: boolean) {
@@ -74,8 +73,6 @@ export class GraphComponent {
       style: [...nodeStyles, ...edgeStyles],
     });
 
-    this.graph.anywherePanning();
-
     this.graph.on('zoom', () => {
       if (this.openTooltip) {
         this.openTooltip.hide();
@@ -152,7 +149,7 @@ export class GraphComponent {
     this.graph.$('node:childless').on('click', (event) => {
       const node = event.target;
 
-      let ref = node.popperRef(); // used only for positioning
+      let ref: VirtualElement = node.popperRef(); // used only for positioning
 
       const content = new ProjectNodeToolTip(node).render();
 

dep-graph/dep-graph/src/app/styles-graph/palette.ts

@@ -5,6 +5,6 @@ export enum NrwlPalette {
   navy = '#143055',
   twilight = '#086c9f',
   black = '#231f20',
-  red = 'rgb(248, 84, 119)',
+  red = '#f85477',
   white = '#fff',
 }

dep-graph/dep-graph/src/app/tooltip-service.ts

@@ -1,27 +1,20 @@
-import { Popper } from 'cytoscape-popper';
+import { VirtualElement } from '@popperjs/core';
-import tippy, { Instance } from 'tippy.js';
+import tippy, { Instance, hideAll } from 'tippy.js';
-import { hideAll } from 'tippy.js';
 
 export class GraphTooltipService {
-  open(ref: Popper.ReferenceObject, tooltipContent: HTMLElement): Instance {
+  open(ref: VirtualElement, tooltipContent: HTMLElement): Instance {
-    // unfortunately, a dummy element must be passed as tippy only accepts a dom element as the target
+    let instance = tippy(document.createElement('div'), {
-    // https://github.com/atomiks/tippyjs/issues/661
+      trigger: 'manual',
-    let dummyDomEle = document.createElement('div');
+      theme: 'nx',
-
-    let tip = tippy(dummyDomEle, {
-      trigger: 'manual', // call show() and hide() yourself
-      lazy: false, // needed for onCreate()
       interactive: true,
       appendTo: document.body,
-      onCreate: (instance) => {
-        instance.popperInstance.reference = ref;
-      }, // needed for `ref` positioning
       content: tooltipContent,
+      getReferenceClientRect: ref.getBoundingClientRect,
     });
 
-    tip.show();
+    instance.show();
 
-    return tip;
+    return instance;
   }
 
   hideAll() {

dep-graph/dep-graph/src/styles.scss

@@ -1,17 +1,14 @@
 @import '~tippy.js/dist/tippy.css';
 
-:root {
+$color-nrwl-blue: #48c4e5 !default;
-  --color-nrwl-blue: #48c4e5;
+$color-nrwl-light-blue: #96d8e9 !default;
-  --color-nrwl-light-blue: #96d8e9;
+$color-nrwl-gray: #333333 !default;
-  --color-nrwl-gray: #333333;
+$color-nrwl-navy: #143055 !default;
-  --color-nrwl-navy: #143055;
+$color-nrwl-twilight: #086c9f !default;
-  --color-nrwl-twilight: #086c9f;
+$color-nrwl-black: #231f20 !default;
-  --color-nrwl-black: #231f20;
+$color-nrwl-red: #f85477 !default;
-  --color-nrwl-red: rgb(248, 84, 119);
+$font-family: 'Montserrat', 'Helvetica Neue', sans-serif !default;
-
+$color-primary: $color-nrwl-navy !default;
-  --color-primary: var(--color-nrwl-navy);
-  --font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
-}
 
 * {
   -webkit-box-sizing: border-box;
@@ -21,7 +18,7 @@
 html {
   line-height: 1.6;
   font-size: 14px;
-  font-family: var(--font-family);
+  font-family: $font-family;
 }
 
 button {
@@ -39,47 +36,47 @@ button {
   display: inline-block;
   cursor: pointer;
 
-  background-color: var(--color-primary);
+  background-color: $color-primary;
   color: #fff;
-}
 
-button:hover {
+  &:hover {
-  opacity: 0.8;
+    opacity: 0.8;
-}
+  }
 
-button.icon {
+  &.icon {
-  width: 1.5em;
+    width: 1.5em;
-  height: 1.5em;
+    height: 1.5em;
-  padding: 0;
+    padding: 0;
-  text-align: center;
+    text-align: center;
-  line-height: 50%;
+    line-height: 50%;
-}
 
-button.icon svg {
+    svg {
-  width: 1.25em;
+      width: 1.25em;
-  height: 1.25em;
+      height: 1.25em;
+    }
+  }
 }
 
 .form-line {
   display: flex;
   align-items: center;
   justify-content: center;
-}
 
-.form-line label {
+  label {
-  flex: 1;
+    flex: 1;
+  }
 }
 
 .flex {
   display: flex;
-}
 
-.flex button {
+  button {
-  flex: 1;
+    flex: 1;
-}
 
-.flex button:not(:last-child) {
+    &:not(:last-child) {
-  margin-right: 1.5em;
+      margin-right: 1.5em;
+    }
+  }
 }
 
 label {
@@ -97,10 +94,6 @@ h5 {
   margin-bottom: 1em;
 }
 
-.sidebar-section {
-  margin-bottom: 1em;
-}
-
 .sidebar {
   min-width: 260px;
   max-width: calc(50% - 10px);
@@ -110,12 +103,27 @@ h5 {
   box-shadow: 2px 0 2px rgba(51, 51, 51, 0.1);
 }
 
-.sidebar-content {
+.sidebar > .sidebar-content {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: 1.5em;
   width: 100%;
+
+  > .sidebar-section {
+    margin-bottom: 1em;
+  }
+
+  h5 {
+    color: $color-nrwl-twilight;
+  }
+
+  .form-line {
+    display: flex;
+  }
+  .form-line label {
+    flex: 1;
+  }
 }
 
 #main-content {
@@ -126,7 +134,7 @@ h5 {
 #debugger-panel {
   display: none;
   width: 100%;
-  background-color: var(--color-nrwl-light-blue);
+  background-color: $color-nrwl-light-blue;
   padding: 1.5em;
   align-items: baseline;
 
@@ -146,8 +154,8 @@ h5 {
   list-style: none;
 }
 
-#libs,
 #apps,
+#libs,
 #e2e input {
   padding-right: 8px;
 }
@@ -166,46 +174,39 @@ html {
   display: flex;
 }
 
-.sidebar-content .form-line {
+.tippy-box[data-theme~='nx'] {
-  display: flex;
+  background-color: $color-nrwl-twilight;
-}
 
-.sidebar-content .form-line label {
+  .tippy-content {
-  flex: 1;
+    padding: 1.5em;
-}
+  }
 
-.sidebar-content h5 {
+  &[data-placement^='top'] > .tippy-arrow::before {
-  color: var(--color-nrwl-twilight);
+    border-top-color: $color-nrwl-twilight;
-}
+  }
-
+  &[data-placement^='bottom'] > .tippy-arrow::before {
-.tippy-tooltip {
+    border-bottom-color: $color-nrwl-twilight;
-  background-color: var(--color-nrwl-twilight);
+  }
-}
+  &[data-placement^='left'] > .tippy-arrow::before {
-
+    border-left-color: $color-nrwl-twilight;
-.tippy-content {
+  }
-  padding: 1.5em;
+  &[data-placement^='right'] > .tippy-arrow::before {
-}
+    border-right-color: $color-nrwl-twilight;
-
+  }
-.tippy-tooltip[data-placement^='top'] > .tippy-arrow {
-  border-top-color: var(--color-nrwl-twilight);
 }
 
 .tag {
   padding: 0.5rem;
   font-size: 0.75em;
   display: inline-block;
-  border: 1px solid var(--color-nrwl-light-blue);
+  border: 1px solid $color-nrwl-light-blue;
   text-transform: uppercase;
-  color: var(--color-grey);
+  color: #fff;
   line-height: 1;
   letter-spacing: 0.5px;
   margin-right: 0.4em;
 }
 
-.hide {
-  display: none;
-}
-
 #no-projects-chosen {
   display: flex;
   width: 100%;

package.json

@@ -70,6 +70,7 @@
     "@nrwl/tao": "12.0.0",
     "@nrwl/web": "12.0.0",
     "@nrwl/workspace": "12.0.0",
+    "@popperjs/core": "^2.9.2",
     "@reduxjs/toolkit": "1.5.0",
     "@rollup/plugin-babel": "5.0.2",
     "@rollup/plugin-commonjs": "11.0.2",
@@ -85,7 +86,7 @@
     "@tailwindcss/typography": "^0.4.0",
     "@testing-library/react": "11.2.5",
     "@types/copy-webpack-plugin": "6.0.0",
-    "@types/cytoscape": "^3.14.7",
+    "@types/cytoscape": "^3.14.12",
     "@types/eslint": "^7.2.2",
     "@types/express": "4.17.0",
     "@types/fs-extra": "7.0.0",
@@ -123,10 +124,9 @@
     "cosmiconfig": "^4.0.0",
     "css-loader": "3.4.2",
     "cypress": "^6.0.1",
-    "cytoscape": "^3.15.2",
+    "cytoscape": "^3.18.2",
-    "cytoscape-anywhere-panning": "^0.5.5",
+    "cytoscape-dagre": "^2.3.2",
-    "cytoscape-dagre": "^2.2.2",
+    "cytoscape-popper": "^2.0.0",
-    "cytoscape-popper": "^1.0.7",
     "cz-conventional-changelog": "^3.0.2",
     "cz-customizable": "^6.2.0",
     "depcheck": "^1.3.1",
@@ -221,7 +221,7 @@
     "tailwindcss": "^2.1.1",
     "terser": "4.3.8",
     "terser-webpack-plugin": "2.3.7",
-    "tippy.js": "5.2.1",
+    "tippy.js": "^6.3.1",
     "tmp": "~0.2.1",
     "tree-kill": "1.2.2",
     "ts-jest": "26.4.0",

yarn.lock

@@ -2753,6 +2753,11 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.0.0", "@popperjs/core@^2.8.3", "@popperjs/core@^2.9.2":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@popperjs/core@^2.5.4":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.1.tgz#7f554e7368c9ab679a11f4a042ca17149d70cf12"
@@ -3540,7 +3545,7 @@
     "@types/node" "*"
     "@types/webpack" "*"
 
-"@types/cytoscape@^3.14.7":
+"@types/cytoscape@^3.14.12":
   version "3.14.12"
   resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.14.12.tgz#b46c445da97df76d486c5b3b25554f616deefd41"
   integrity sha512-Tf7ClW9H+8S0Sp/C4l5g7lLiANMMz7a8lPkANosqQQ4liku+0/aMRGFoZwV6bFm4aK//PF6ClPiTKBU3LhHhkw==
@@ -8705,29 +8710,24 @@ cypress@^6.0.1:
     url "^0.11.0"
     yauzl "^2.10.0"
 
-cytoscape-anywhere-panning@^0.5.5:
+cytoscape-dagre@^2.3.2:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/cytoscape-anywhere-panning/-/cytoscape-anywhere-panning-0.5.5.tgz#d4b9d54cf532c51f7b06531d9a8967471f310d46"
-  integrity sha512-//p0NIp4EYZzPD9y0BFtwUxnCkGcYvBGPkc5ezDb5BZinhjtpB0U8xtOq4DRcppVXGIdwiudIcuwiJZx/vYUwA==
-
-cytoscape-dagre@^2.2.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/cytoscape-dagre/-/cytoscape-dagre-2.3.2.tgz#f83d4357642c86d3bd7530dd9c1dffc2e1079d3c"
   integrity sha512-dL9+RvGkatSlIdOKXiFwHpnpTo8ydFMqIYzZFkImJXNbDci3feyYxR46wFoaG9GFiWimc6XD9Lm0x29b1wvWpw==
   dependencies:
     dagre "^0.8.5"
 
-cytoscape-popper@^1.0.7:
+cytoscape-popper@^2.0.0:
-  version "1.0.7"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cytoscape-popper/-/cytoscape-popper-1.0.7.tgz#8154ff507d0cc1a17952f00643e71fc1f8ea9fae"
+  resolved "https://registry.yarnpkg.com/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz#d93917695a9b8af3dbda1d8ee433618ac4d4e359"
-  integrity sha512-b/vfoBL2u9GU+J7eceGT9cZ4hctn/ZzV7PXq4w6fk+45qQuOHtlhpP3WxGKpBXNqENhk7Dk0BwlIYROjYQmidQ==
+  integrity sha512-b7WSOn8qXHWtdIXFNmrgc8qkaOs16tMY0EwtRXlxzvn8X+al6TAFrUwZoYATkYSlotfd/36ZMoeKMEoUck6feA==
   dependencies:
-    popper.js "^1.0.0"
+    "@popperjs/core" "^2.0.0"
 
-cytoscape@^3.15.2:
+cytoscape@^3.18.2:
-  version "3.18.1"
+  version "3.18.2"
-  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.18.1.tgz#58197622f748c0eb24db7bdc7313c7cd96e6a10a"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.18.2.tgz#e5a1b37de3b53946a6d8f8586eefa44a0978ade4"
-  integrity sha512-XTGI9RPcufWOQ4itNm4lleILvnwBT2jY85eDxWVU6FsKk5Gahd6jl0QQcpzxsIbh86pd7XjEgXHdvi2Z4+g0hA==
+  integrity sha512-NRY3JTrUzx0fSn44LyMlPqC8/zuuOo8kbr2hFlfjiObRmtir+lnxVg08f8wUA4X/P80df9vSThKDASl39yH+Iw==
   dependencies:
     heap "^0.2.6"
     lodash.debounce "^4.0.8"
@@ -16905,11 +16905,6 @@ polished@^3.4.4:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-popper.js@^1.0.0, popper.js@^1.16.0:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 portfinder@^1.0.25, portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -20903,12 +20898,12 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
-tippy.js@5.2.1:
+tippy.js@^6.3.1:
-  version "5.2.1"
+  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-5.2.1.tgz#e08d7332c103a15e427124d710d881fca82365d6"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
-  integrity sha512-66UT6JRVn3dXNCORE+0UvUK3JZqV/VhLlU6HTDm3FmrweUUFUxUGvT8tUQ7ycMp+uhuLAwQw6dBabyC+iKf/MA==
+  integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
   dependencies:
-    popper.js "^1.16.0"
+    "@popperjs/core" "^2.8.3"
 
 tmp-promise@1.0.5:
   version "1.0.5"