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
This commit is contained in:
Phillip Barta
GitHub
parent
ba84a17b6d
commit
647bfc9cdf
@ -1,5 +1,5 @@
|
||||
import { BehaviorSubject, combineLatest, fromEvent, Subject } from 'rxjs';
|
||||
import { startWith, takeUntil, throwIfEmpty } from 'rxjs/operators';
|
||||
import { combineLatest, fromEvent, Subject } from 'rxjs';
|
||||
import { startWith, takeUntil } from 'rxjs/operators';
|
||||
import { projectGraphs } from '../graphs';
|
||||
import { DebuggerPanel } from './debugger-panel';
|
||||
import { GraphComponent } from './graph';
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -5,6 +5,6 @@ export enum NrwlPalette {
|
||||
navy = '#143055',
|
||||
twilight = '#086c9f',
|
||||
black = '#231f20',
|
||||
red = 'rgb(248, 84, 119)',
|
||||
red = '#f85477',
|
||||
white = '#fff',
|
||||
}
|
||||
|
||||
@ -1,27 +1,20 @@
|
||||
import { Popper } from 'cytoscape-popper';
|
||||
import tippy, { Instance } from 'tippy.js';
|
||||
import { hideAll } from 'tippy.js';
|
||||
import { VirtualElement } from '@popperjs/core';
|
||||
import tippy, { Instance, hideAll } from 'tippy.js';
|
||||
|
||||
export class GraphTooltipService {
|
||||
open(ref: Popper.ReferenceObject, tooltipContent: HTMLElement): Instance {
|
||||
// unfortunately, a dummy element must be passed as tippy only accepts a dom element as the target
|
||||
// https://github.com/atomiks/tippyjs/issues/661
|
||||
let dummyDomEle = document.createElement('div');
|
||||
|
||||
let tip = tippy(dummyDomEle, {
|
||||
trigger: 'manual', // call show() and hide() yourself
|
||||
lazy: false, // needed for onCreate()
|
||||
open(ref: VirtualElement, tooltipContent: HTMLElement): Instance {
|
||||
let instance = tippy(document.createElement('div'), {
|
||||
trigger: 'manual',
|
||||
theme: 'nx',
|
||||
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() {
|
||||
|
||||
@ -1,17 +1,14 @@
|
||||
@import '~tippy.js/dist/tippy.css';
|
||||
|
||||
:root {
|
||||
--color-nrwl-blue: #48c4e5;
|
||||
--color-nrwl-light-blue: #96d8e9;
|
||||
--color-nrwl-gray: #333333;
|
||||
--color-nrwl-navy: #143055;
|
||||
--color-nrwl-twilight: #086c9f;
|
||||
--color-nrwl-black: #231f20;
|
||||
--color-nrwl-red: rgb(248, 84, 119);
|
||||
|
||||
--color-primary: var(--color-nrwl-navy);
|
||||
--font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
$color-nrwl-blue: #48c4e5 !default;
|
||||
$color-nrwl-light-blue: #96d8e9 !default;
|
||||
$color-nrwl-gray: #333333 !default;
|
||||
$color-nrwl-navy: #143055 !default;
|
||||
$color-nrwl-twilight: #086c9f !default;
|
||||
$color-nrwl-black: #231f20 !default;
|
||||
$color-nrwl-red: #f85477 !default;
|
||||
$font-family: 'Montserrat', 'Helvetica Neue', sans-serif !default;
|
||||
$color-primary: $color-nrwl-navy !default;
|
||||
|
||||
* {
|
||||
-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 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
button.icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
line-height: 50%;
|
||||
}
|
||||
&.icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
line-height: 50%;
|
||||
|
||||
button.icon svg {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
svg {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-line label {
|
||||
flex: 1;
|
||||
label {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex button {
|
||||
flex: 1;
|
||||
}
|
||||
button {
|
||||
flex: 1;
|
||||
|
||||
.flex button:not(:last-child) {
|
||||
margin-right: 1.5em;
|
||||
&:not(:last-child) {
|
||||
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 {
|
||||
display: flex;
|
||||
}
|
||||
.tippy-box[data-theme~='nx'] {
|
||||
background-color: $color-nrwl-twilight;
|
||||
|
||||
.sidebar-content .form-line label {
|
||||
flex: 1;
|
||||
}
|
||||
.tippy-content {
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.sidebar-content h5 {
|
||||
color: var(--color-nrwl-twilight);
|
||||
}
|
||||
|
||||
.tippy-tooltip {
|
||||
background-color: var(--color-nrwl-twilight);
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.tippy-tooltip[data-placement^='top'] > .tippy-arrow {
|
||||
border-top-color: var(--color-nrwl-twilight);
|
||||
&[data-placement^='top'] > .tippy-arrow::before {
|
||||
border-top-color: $color-nrwl-twilight;
|
||||
}
|
||||
&[data-placement^='bottom'] > .tippy-arrow::before {
|
||||
border-bottom-color: $color-nrwl-twilight;
|
||||
}
|
||||
&[data-placement^='left'] > .tippy-arrow::before {
|
||||
border-left-color: $color-nrwl-twilight;
|
||||
}
|
||||
&[data-placement^='right'] > .tippy-arrow::before {
|
||||
border-right-color: $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%;
|
||||
|
||||
12
package.json
12
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-anywhere-panning": "^0.5.5",
|
||||
"cytoscape-dagre": "^2.2.2",
|
||||
"cytoscape-popper": "^1.0.7",
|
||||
"cytoscape": "^3.18.2",
|
||||
"cytoscape-dagre": "^2.3.2",
|
||||
"cytoscape-popper": "^2.0.0",
|
||||
"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",
|
||||
|
||||
47
yarn.lock
47
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:
|
||||
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:
|
||||
cytoscape-dagre@^2.3.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:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape-popper/-/cytoscape-popper-1.0.7.tgz#8154ff507d0cc1a17952f00643e71fc1f8ea9fae"
|
||||
integrity sha512-b/vfoBL2u9GU+J7eceGT9cZ4hctn/ZzV7PXq4w6fk+45qQuOHtlhpP3WxGKpBXNqENhk7Dk0BwlIYROjYQmidQ==
|
||||
cytoscape-popper@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz#d93917695a9b8af3dbda1d8ee433618ac4d4e359"
|
||||
integrity sha512-b7WSOn8qXHWtdIXFNmrgc8qkaOs16tMY0EwtRXlxzvn8X+al6TAFrUwZoYATkYSlotfd/36ZMoeKMEoUck6feA==
|
||||
dependencies:
|
||||
popper.js "^1.0.0"
|
||||
"@popperjs/core" "^2.0.0"
|
||||
|
||||
cytoscape@^3.15.2:
|
||||
version "3.18.1"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.18.1.tgz#58197622f748c0eb24db7bdc7313c7cd96e6a10a"
|
||||
integrity sha512-XTGI9RPcufWOQ4itNm4lleILvnwBT2jY85eDxWVU6FsKk5Gahd6jl0QQcpzxsIbh86pd7XjEgXHdvi2Z4+g0hA==
|
||||
cytoscape@^3.18.2:
|
||||
version "3.18.2"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.18.2.tgz#e5a1b37de3b53946a6d8f8586eefa44a0978ade4"
|
||||
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:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-5.2.1.tgz#e08d7332c103a15e427124d710d881fca82365d6"
|
||||
integrity sha512-66UT6JRVn3dXNCORE+0UvUK3JZqV/VhLlU6HTDm3FmrweUUFUxUGvT8tUQ7ycMp+uhuLAwQw6dBabyC+iKf/MA==
|
||||
tippy.js@^6.3.1:
|
||||
version "6.3.1"
|
||||
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
|
||||
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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user