updates d3, ansi-t0-html, has-ansi, httml-entities, sanitize-html, styled-components

This commit is contained in:
Alex Corey
2021-07-14 15:12:08 -04:00
committed by Jake McDermott
parent 57fa2c03f7
commit 0a64f3274e
8 changed files with 353 additions and 381 deletions

View File

@@ -27248,6 +27248,11 @@
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
}, },
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": { "@emotion/unitless": {
"version": "0.7.5", "version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
@@ -28340,6 +28345,12 @@
"source-map": "^0.7.3" "source-map": "^0.7.3"
}, },
"dependencies": { "dependencies": {
"html-entities": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
"integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==",
"dev": true
},
"source-map": { "source-map": {
"version": "0.7.3", "version": "0.7.3",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
@@ -29255,9 +29266,9 @@
"dev": true "dev": true
}, },
"ansi-regex": { "ansi-regex": {
"version": "3.0.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
}, },
"ansi-styles": { "ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
@@ -29268,11 +29279,11 @@
} }
}, },
"ansi-to-html": { "ansi-to-html": {
"version": "0.6.14", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.14.tgz", "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.0.tgz",
"integrity": "sha512-7ZslfB1+EnFSDO5Ju+ue5Y6It19DRnZXWv8jrGHgIlPna5Mh4jz7BV5jCbQneXNFurQcKoolaaAjHtgSBfOIuA==", "integrity": "sha512-XYAN+0+3Bi+nmTQBq717bGToQVpzq2AoukAaDnQQvpmqIbedjsdSDuGD7+YLYOPBh7rjc7A6ko5cLLDp06QNjw==",
"requires": { "requires": {
"entities": "^1.1.2" "entities": "^2.2.0"
} }
}, },
"anymatch": { "anymatch": {
@@ -29864,9 +29875,9 @@
} }
}, },
"babel-plugin-styled-components": { "babel-plugin-styled-components": {
"version": "1.12.0", "version": "1.13.2",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz",
"integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==", "integrity": "sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==",
"requires": { "requires": {
"@babel/helper-annotate-as-pure": "^7.0.0", "@babel/helper-annotate-as-pure": "^7.0.0",
"@babel/helper-module-imports": "^7.0.0", "@babel/helper-module-imports": "^7.0.0",
@@ -31643,13 +31654,20 @@
"dev": true "dev": true
}, },
"css-to-react-native": { "css-to-react-native": {
"version": "2.3.2", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==", "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": { "requires": {
"camelize": "^1.0.0", "camelize": "^1.0.0",
"css-color-keywords": "^1.0.0", "css-color-keywords": "^1.0.0",
"postcss-value-parser": "^3.3.0" "postcss-value-parser": "^4.0.2"
},
"dependencies": {
"postcss-value-parser": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
}
} }
}, },
"css-tree": { "css-tree": {
@@ -31933,110 +31951,114 @@
} }
}, },
"d3": { "d3": {
"version": "5.16.0", "version": "6.7.0",
"resolved": "https://registry.npmjs.org/d3/-/d3-5.16.0.tgz", "resolved": "https://registry.npmjs.org/d3/-/d3-6.7.0.tgz",
"integrity": "sha512-4PL5hHaHwX4m7Zr1UapXW23apo6pexCgdetdJ5kTmADpG/7T9Gkxw0M0tf/pjoB63ezCCm0u5UaFYy2aMt0Mcw==", "integrity": "sha512-hNHRhe+yCDLUG6Q2LwvR/WdNFPOJQ5VWqsJcwIYVeI401+d2/rrCjxSXkiAdIlpx7/73eApFB4Olsmh3YN7a6g==",
"requires": { "requires": {
"d3-array": "1", "d3-array": "2",
"d3-axis": "1", "d3-axis": "2",
"d3-brush": "1", "d3-brush": "2",
"d3-chord": "1", "d3-chord": "2",
"d3-collection": "1", "d3-color": "2",
"d3-color": "1", "d3-contour": "2",
"d3-contour": "1", "d3-delaunay": "5",
"d3-dispatch": "1", "d3-dispatch": "2",
"d3-drag": "1", "d3-drag": "2",
"d3-dsv": "1", "d3-dsv": "2",
"d3-ease": "1", "d3-ease": "2",
"d3-fetch": "1", "d3-fetch": "2",
"d3-force": "1", "d3-force": "2",
"d3-format": "1", "d3-format": "2",
"d3-geo": "1", "d3-geo": "2",
"d3-hierarchy": "1", "d3-hierarchy": "2",
"d3-interpolate": "1", "d3-interpolate": "2",
"d3-path": "1", "d3-path": "2",
"d3-polygon": "1", "d3-polygon": "2",
"d3-quadtree": "1", "d3-quadtree": "2",
"d3-random": "1", "d3-random": "2",
"d3-scale": "2", "d3-scale": "3",
"d3-scale-chromatic": "1", "d3-scale-chromatic": "2",
"d3-selection": "1", "d3-selection": "2",
"d3-shape": "1", "d3-shape": "2",
"d3-time": "1", "d3-time": "2",
"d3-time-format": "2", "d3-time-format": "3",
"d3-timer": "1", "d3-timer": "2",
"d3-transition": "1", "d3-transition": "2",
"d3-voronoi": "1", "d3-zoom": "2"
"d3-zoom": "1"
} }
}, },
"d3-array": { "d3-array": {
"version": "1.2.4", "version": "2.12.1",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
"integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==" "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
"requires": {
"internmap": "^1.0.0"
}
}, },
"d3-axis": { "d3-axis": {
"version": "1.0.12", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.12.tgz", "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
"integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==" "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw=="
}, },
"d3-brush": { "d3-brush": {
"version": "1.1.6", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.6.tgz", "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-2.1.0.tgz",
"integrity": "sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==", "integrity": "sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==",
"requires": { "requires": {
"d3-dispatch": "1", "d3-dispatch": "1 - 2",
"d3-drag": "1", "d3-drag": "2",
"d3-interpolate": "1", "d3-interpolate": "1 - 2",
"d3-selection": "1", "d3-selection": "2",
"d3-transition": "1" "d3-transition": "2"
} }
}, },
"d3-chord": { "d3-chord": {
"version": "1.0.6", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.6.tgz", "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-2.0.0.tgz",
"integrity": "sha512-JXA2Dro1Fxw9rJe33Uv+Ckr5IrAa74TlfDEhE/jfLOaXegMQFQTAgAw9WnZL8+HxVBRXaRGCkrNU7pJeylRIuA==", "integrity": "sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==",
"requires": { "requires": {
"d3-array": "1", "d3-path": "1 - 2"
"d3-path": "1"
} }
}, },
"d3-collection": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.7.tgz",
"integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
},
"d3-color": { "d3-color": {
"version": "1.4.1", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz", "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
"integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==" "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
}, },
"d3-contour": { "d3-contour": {
"version": "1.3.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.3.2.tgz", "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-2.0.0.tgz",
"integrity": "sha512-hoPp4K/rJCu0ladiH6zmJUEz6+u3lgR+GSm/QdM2BBvDraU39Vr7YdDCicJcxP1z8i9B/2dJLgDC1NcvlF8WCg==", "integrity": "sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==",
"requires": { "requires": {
"d3-array": "^1.1.1" "d3-array": "2"
}
},
"d3-delaunay": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
"integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
"requires": {
"delaunator": "4"
} }
}, },
"d3-dispatch": { "d3-dispatch": {
"version": "1.0.6", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz", "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
"integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==" "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
}, },
"d3-drag": { "d3-drag": {
"version": "1.2.5", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz", "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
"integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==", "integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
"requires": { "requires": {
"d3-dispatch": "1", "d3-dispatch": "1 - 2",
"d3-selection": "1" "d3-selection": "2"
} }
}, },
"d3-dsv": { "d3-dsv": {
"version": "1.2.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz", "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-2.0.0.tgz",
"integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==", "integrity": "sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==",
"requires": { "requires": {
"commander": "2", "commander": "2",
"iconv-lite": "0.4", "iconv-lite": "0.4",
@@ -32044,156 +32066,151 @@
} }
}, },
"d3-ease": { "d3-ease": {
"version": "1.0.7", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz", "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
"integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==" "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
}, },
"d3-fetch": { "d3-fetch": {
"version": "1.2.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.2.0.tgz", "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-2.0.0.tgz",
"integrity": "sha512-yC78NBVcd2zFAyR/HnUiBS7Lf6inSCoWcSxFfw8FYL7ydiqe80SazNwoffcqOfs95XaLo7yebsmQqDKSsXUtvA==", "integrity": "sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==",
"requires": { "requires": {
"d3-dsv": "1" "d3-dsv": "1 - 2"
} }
}, },
"d3-force": { "d3-force": {
"version": "1.2.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.2.1.tgz", "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
"integrity": "sha512-HHvehyaiUlVo5CxBJ0yF/xny4xoaxFxDnBXNvNcfW9adORGZfyNF1dj6DGLKyk4Yh3brP/1h3rnDzdIAwL08zg==", "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
"requires": { "requires": {
"d3-collection": "1", "d3-dispatch": "1 - 2",
"d3-dispatch": "1", "d3-quadtree": "1 - 2",
"d3-quadtree": "1", "d3-timer": "1 - 2"
"d3-timer": "1"
} }
}, },
"d3-format": { "d3-format": {
"version": "1.4.5", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz", "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
"integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==" "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
}, },
"d3-geo": { "d3-geo": {
"version": "1.12.1", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.12.1.tgz", "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
"integrity": "sha512-XG4d1c/UJSEX9NfU02KwBL6BYPj8YKHxgBEw5om2ZnTRSbIcego6dhHwcxuSR3clxh0EpE38os1DVPOmnYtTPg==", "integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==",
"requires": { "requires": {
"d3-array": "1" "d3-array": "^2.5.0"
} }
}, },
"d3-hierarchy": { "d3-hierarchy": {
"version": "1.1.9", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz", "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
"integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==" "integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw=="
}, },
"d3-interpolate": { "d3-interpolate": {
"version": "1.4.0", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz", "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==", "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"requires": { "requires": {
"d3-color": "1" "d3-color": "1 - 2"
} }
}, },
"d3-path": { "d3-path": {
"version": "1.0.9", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
}, },
"d3-polygon": { "d3-polygon": {
"version": "1.0.6", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz", "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
"integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==" "integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ=="
}, },
"d3-quadtree": { "d3-quadtree": {
"version": "1.0.7", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz", "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
"integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA==" "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw=="
}, },
"d3-random": { "d3-random": {
"version": "1.1.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz", "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
"integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ==" "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw=="
}, },
"d3-scale": { "d3-scale": {
"version": "2.2.2", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz", "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
"integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==", "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
"requires": { "requires": {
"d3-array": "^1.2.0", "d3-array": "^2.3.0",
"d3-collection": "1", "d3-format": "1 - 2",
"d3-format": "1", "d3-interpolate": "1.2.0 - 2",
"d3-interpolate": "1", "d3-time": "^2.1.1",
"d3-time": "1", "d3-time-format": "2 - 3"
"d3-time-format": "2"
} }
}, },
"d3-scale-chromatic": { "d3-scale-chromatic": {
"version": "1.5.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz", "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
"integrity": "sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg==", "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
"requires": { "requires": {
"d3-color": "1", "d3-color": "1 - 2",
"d3-interpolate": "1" "d3-interpolate": "1 - 2"
} }
}, },
"d3-selection": { "d3-selection": {
"version": "1.4.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz", "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
"integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==" "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
}, },
"d3-shape": { "d3-shape": {
"version": "1.3.7", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
"requires": { "requires": {
"d3-path": "1" "d3-path": "1 - 2"
} }
}, },
"d3-time": { "d3-time": {
"version": "1.1.0", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz", "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
"integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==" "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
"requires": {
"d3-array": "2"
}
}, },
"d3-time-format": { "d3-time-format": {
"version": "2.3.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.3.0.tgz", "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
"integrity": "sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==", "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
"requires": { "requires": {
"d3-time": "1" "d3-time": "1 - 2"
} }
}, },
"d3-timer": { "d3-timer": {
"version": "1.0.10", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz", "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==" "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
}, },
"d3-transition": { "d3-transition": {
"version": "1.3.2", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz", "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
"integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==", "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
"requires": { "requires": {
"d3-color": "1", "d3-color": "1 - 2",
"d3-dispatch": "1", "d3-dispatch": "1 - 2",
"d3-ease": "1", "d3-ease": "1 - 2",
"d3-interpolate": "1", "d3-interpolate": "1 - 2",
"d3-selection": "^1.1.0", "d3-timer": "1 - 2"
"d3-timer": "1"
} }
}, },
"d3-voronoi": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz",
"integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
},
"d3-zoom": { "d3-zoom": {
"version": "1.8.3", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz", "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
"integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==", "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
"requires": { "requires": {
"d3-dispatch": "1", "d3-dispatch": "1 - 2",
"d3-drag": "1", "d3-drag": "2",
"d3-interpolate": "1", "d3-interpolate": "1 - 2",
"d3-selection": "1", "d3-selection": "2",
"d3-transition": "1" "d3-transition": "2"
} }
}, },
"dagre": { "dagre": {
@@ -32431,6 +32448,11 @@
} }
} }
}, },
"delaunator": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
"integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag=="
},
"delayed-stream": { "delayed-stream": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -32858,9 +32880,9 @@
} }
}, },
"entities": { "entities": {
"version": "1.1.2", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
}, },
"enzyme": { "enzyme": {
"version": "3.11.0", "version": "3.11.0",
@@ -35072,11 +35094,11 @@
} }
}, },
"has-ansi": { "has-ansi": {
"version": "3.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-3.0.0.tgz", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-4.0.0.tgz",
"integrity": "sha1-Ngd+8dFfMzSEqn+neihgbxxlWzc=", "integrity": "sha512-VvDupLMvFX9yyed3h1DajPUYQZv82EL2h9I9Jy0ays9gYRJ30hbmGapTiam5cISr42ZCuC3nRgyVBM/YZbpi9A==",
"requires": { "requires": {
"ansi-regex": "^3.0.0" "ansi-regex": "^4.1.0"
} }
}, },
"has-bigints": { "has-bigints": {
@@ -35309,9 +35331,9 @@
} }
}, },
"html-entities": { "html-entities": {
"version": "1.4.0", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz", "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
"integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==" "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ=="
}, },
"html-escaper": { "html-escaper": {
"version": "2.0.2", "version": "2.0.2",
@@ -35762,6 +35784,11 @@
"side-channel": "^1.0.4" "side-channel": "^1.0.4"
} }
}, },
"internmap": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
"integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
},
"interpret": { "interpret": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
@@ -36149,11 +36176,6 @@
"integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
"dev": true "dev": true
}, },
"is-what": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
},
"is-windows": { "is-windows": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -38453,25 +38475,12 @@
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
"dev": true "dev": true
}, },
"memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
},
"memory-fs": { "memory-fs": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
"integrity": "sha1-8rslNovBIeORwlIN6Slpyu4KApA=", "integrity": "sha1-8rslNovBIeORwlIN6Slpyu4KApA=",
"dev": true "dev": true
}, },
"merge-anything": {
"version": "2.4.4",
"resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz",
"integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==",
"requires": {
"is-what": "^3.3.1"
}
},
"merge-descriptors": { "merge-descriptors": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -42293,7 +42302,8 @@
"postcss-value-parser": { "postcss-value-parser": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
}, },
"postcss-values-parser": { "postcss-values-parser": {
"version": "2.0.1", "version": "2.0.1",
@@ -43932,9 +43942,9 @@
} }
}, },
"sanitize-html": { "sanitize-html": {
"version": "2.3.3", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.3.3.tgz", "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.4.0.tgz",
"integrity": "sha512-DCFXPt7Di0c6JUnlT90eIgrjs6TsJl/8HYU3KLdmrVclFN4O0heTcVbJiMa23OKVr6aR051XYtsgd8EWwEBwUA==", "integrity": "sha512-Y1OgkUiTPMqwZNRLPERSEi39iOebn2XJLbeiGOBhaJD/yLqtLGu6GE5w7evx177LeGgSE+4p4e107LMiydOf6A==",
"requires": { "requires": {
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"escape-string-regexp": "^4.0.0", "escape-string-regexp": "^4.0.0",
@@ -44237,6 +44247,11 @@
"safe-buffer": "^5.0.1" "safe-buffer": "^5.0.1"
} }
}, },
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": { "shebang-command": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -45024,22 +45039,19 @@
} }
}, },
"styled-components": { "styled-components": {
"version": "4.4.1", "version": "5.3.0",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.0.tgz",
"integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==", "integrity": "sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ==",
"requires": { "requires": {
"@babel/helper-module-imports": "^7.0.0", "@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.0.0", "@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^0.8.1", "@emotion/is-prop-valid": "^0.8.8",
"@emotion/unitless": "^0.7.0", "@emotion/stylis": "^0.8.4",
"babel-plugin-styled-components": ">= 1", "@emotion/unitless": "^0.7.4",
"css-to-react-native": "^2.2.2", "babel-plugin-styled-components": ">= 1.12.0",
"memoize-one": "^5.0.0", "css-to-react-native": "^3.0.0",
"merge-anything": "^2.2.4", "hoist-non-react-statics": "^3.0.0",
"prop-types": "^15.5.4", "shallowequal": "^1.1.0",
"react-is": "^16.6.0",
"stylis": "^3.5.0",
"stylis-rule-sheet": "^0.0.10",
"supports-color": "^5.5.0" "supports-color": "^5.5.0"
} }
}, },
@@ -45087,16 +45099,6 @@
} }
} }
}, },
"stylis": {
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
"integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
},
"stylis-rule-sheet": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
"integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
},
"supports-color": { "supports-color": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -47119,6 +47121,12 @@
} }
} }
}, },
"html-entities": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
"integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==",
"dev": true
},
"http-proxy-middleware": { "http-proxy-middleware": {
"version": "0.19.1", "version": "0.19.1",
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz", "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",

View File

@@ -12,15 +12,15 @@
"@patternfly/react-icons": "4.7.22", "@patternfly/react-icons": "4.7.22",
"@patternfly/react-table": "^4.19.15", "@patternfly/react-table": "^4.19.15",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"ansi-to-html": "^0.6.11", "ansi-to-html": "0.7.0",
"axios": "^0.21.1", "axios": "^0.21.1",
"babel-plugin-macros": "^3.0.1", "babel-plugin-macros": "^3.0.1",
"codemirror": "^5.47.0", "codemirror": "^5.47.0",
"d3": "^5.12.0", "d3": "6.7.0",
"dagre": "^0.8.4", "dagre": "^0.8.4",
"formik": "^2.1.2", "formik": "^2.1.2",
"has-ansi": "^3.0.0", "has-ansi": "4.0.0",
"html-entities": "^1.2.1", "html-entities": "2.3.2",
"js-yaml": "^3.13.1", "js-yaml": "^3.13.1",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"react": "^16.13.1", "react": "^16.13.1",
@@ -30,8 +30,8 @@
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-virtualized": "^9.21.1", "react-virtualized": "^9.21.1",
"rrule": "^2.6.4", "rrule": "^2.6.4",
"sanitize-html": "^2.3.2", "sanitize-html": "2.4.0",
"styled-components": "^4.2.0" "styled-components": "5.3.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/polyfill": "^7.8.7", "@babel/polyfill": "^7.8.7",

View File

@@ -106,20 +106,15 @@ class Tooltip {
.text(t`Never`); .text(t`Never`);
} }
handleMouseOver = (d) => { handleMouseOver = (event, data) => {
let success = 0; let success = 0;
let fail = 0; let fail = 0;
let total = 0; let total = 0;
const x = const [x, y] = d3.pointer(event);
d3.event.pageX - const tooltipPointerX = x + 75;
d3.select(this.svg).node().getBoundingClientRect().x +
10;
const y =
d3.event.pageY -
d3.select(this.svg).node().getBoundingClientRect().y -
10;
const formatTooltipDate = d3.timeFormat('%m/%d'); const formatTooltipDate = d3.timeFormat('%m/%d');
if (!d) { if (!event) {
return; return;
} }
@@ -129,19 +124,19 @@ class Tooltip {
.node() .node()
.getBoundingClientRect().width; .getBoundingClientRect().width;
const overflow = 100 - (toolTipWidth / chartWidth) * 100; const overflow = 100 - (toolTipWidth / chartWidth) * 100;
const flipped = overflow < (x / chartWidth) * 100; const flipped = overflow < (tooltipPointerX / chartWidth) * 100;
if (d) { if (data) {
success = d.RAN || 0; success = data.RAN || 0;
fail = d.FAIL || 0; fail = data.FAIL || 0;
total = d.TOTAL || 0; total = data.TOTAL || 0;
this.date.text(formatTooltipDate(d.DATE || null)); this.date.text(formatTooltipDate(data.DATE || null));
} }
if (d && d.data) { if (data) {
success = d.data.RAN || 0; success = data.RAN || 0;
fail = d.data.FAIL || 0; fail = data.FAIL || 0;
total = d.data.TOTAL || 0; total = data.TOTAL || 0;
this.date.text(formatTooltipDate(d.data.DATE || null)); this.date.text(formatTooltipDate(data.DATE || null));
} }
this.jobs.text(`${total} ${this.label}`); this.jobs.text(`${total} ${this.label}`);
@@ -162,7 +157,7 @@ class Tooltip {
} }
this.boundingBox.attr('width', adjustedWidth); this.boundingBox.attr('width', adjustedWidth);
this.toolTipBase.attr('transform', `translate(${x}, ${y})`); this.toolTipBase.attr('transform', `translate(${tooltipPointerX}, ${y})`);
if (flipped) { if (flipped) {
this.toolTipPoint.attr('transform', 'translate(-20, -10) rotate(45)'); this.toolTipPoint.attr('transform', 'translate(-20, -10) rotate(45)');
this.boundingBox.attr('x', -adjustedWidth - 20); this.boundingBox.attr('x', -adjustedWidth - 20);

View File

@@ -2,9 +2,7 @@ import React, { useEffect, useCallback } from 'react';
import { string, number, shape, arrayOf } from 'prop-types'; import { string, number, shape, arrayOf } from 'prop-types';
import * as d3 from 'd3'; import * as d3 from 'd3';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { PageContextConsumer } from '@patternfly/react-core'; import { PageContextConsumer } from '@patternfly/react-core';
import ChartTooltip from './ChartTooltip'; import ChartTooltip from './ChartTooltip';
function LineChart({ id, data, height, pageContext, jobStatus }) { function LineChart({ id, data, height, pageContext, jobStatus }) {
@@ -35,13 +33,16 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
const width = getWidth(); const width = getWidth();
function transition(path) { function transition(path) {
path.transition().duration(1000).attrTween('stroke-dasharray', tweenDash); path
.transition()
.duration(1000)
.attrTween('stroke-dasharray', tweenDash);
} }
function tweenDash(...params) { function tweenDash(...params) {
const l = params[2][params[1]].getTotalLength(); const l = params[2][params[1]].getTotalLength();
const i = d3.interpolateString(`0,${l}`, `${l},${l}`); const i = d3.interpolateString(`0,${l}`, `${l},${l}`);
return (val) => i(val); return val => i(val);
} }
const x = d3.scaleTime().rangeRound([0, width]); const x = d3.scaleTime().rangeRound([0, width]);
@@ -82,7 +83,7 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
const b_max = Math.max(b.RAN > b.FAIL ? b.RAN : b.FAIL); const b_max = Math.max(b.RAN > b.FAIL ? b.RAN : b.FAIL);
return a_max > b_max ? a_max : b_max; return a_max > b_max ? a_max : b_max;
}, 0); }, 0);
x.domain(d3.extent(formattedData, (d) => d.DATE)); x.domain(d3.extent(formattedData, d => d.DATE));
y.domain([ y.domain([
0, 0,
largestY > 4 ? largestY + Math.max(largestY / 10, 1) : 5, largestY > 4 ? largestY + Math.max(largestY / 10, 1) : 5,
@@ -91,15 +92,15 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
const successLine = d3 const successLine = d3
.line() .line()
.curve(d3.curveMonotoneX) .curve(d3.curveMonotoneX)
.x((d) => x(d.DATE)) .x(d => x(d.DATE))
.y((d) => y(d.RAN)); .y(d => y(d.RAN));
const failLine = d3 const failLine = d3
.line() .line()
.defined((d) => typeof d.FAIL === 'number') .defined(d => typeof d.FAIL === 'number')
.curve(d3.curveMonotoneX) .curve(d3.curveMonotoneX)
.x((d) => x(d.DATE)) .x(d => x(d.DATE))
.y((d) => y(d.FAIL)); .y(d => y(d.FAIL));
// Add the Y Axis // Add the Y Axis
svg svg
.append('g') .append('g')
@@ -134,11 +135,11 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
const maxTicks = Math.round( const maxTicks = Math.round(
formattedData.length / (formattedData.length / 2) formattedData.length / (formattedData.length / 2)
); );
ticks = formattedData.map((d) => d.DATE); ticks = formattedData.map(d => d.DATE);
if (formattedData.length === 31) { if (formattedData.length === 31) {
ticks = formattedData ticks = formattedData
.map((d, i) => (i % maxTicks === 0 ? d.DATE : undefined)) .map((d, i) => (i % maxTicks === 0 ? d.DATE : undefined))
.filter((item) => item); .filter(item => item);
} }
svg.select('.domain').attr('stroke', '#d7d7d7'); svg.select('.domain').attr('stroke', '#d7d7d7');
@@ -176,15 +177,14 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
.style('stroke-dasharray', '3, 3') .style('stroke-dasharray', '3, 3')
.style('opacity', '0'); .style('opacity', '0');
const handleMouseOver = (d) => { const handleMouseOver = (event, d) => {
tooltip.handleMouseOver(d); tooltip.handleMouseOver(event, d);
// show vertical line // show vertical line
vertical.transition().style('opacity', '1'); vertical.transition().style('opacity', '1');
}; };
const handleMouseMove = function mouseMove(event) {
const handleMouseMove = function mouseMove(...params) { const [pointerX] = d3.pointer(event);
const intersectX = params[2][params[1]].cx.baseVal.value; vertical.attr('d', () => `M${pointerX},${height} ${pointerX},${0}`);
vertical.attr('d', () => `M${intersectX},${height} ${intersectX},${0}`);
}; };
const handleMouseOut = () => { const handleMouseOut = () => {
@@ -218,10 +218,10 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
.attr('r', 3) .attr('r', 3)
.style('stroke', () => colors(1)) .style('stroke', () => colors(1))
.style('fill', () => colors(1)) .style('fill', () => colors(1))
.attr('cx', (d) => x(d.DATE)) .attr('cx', d => x(d.DATE))
.attr('cy', (d) => y(d.RAN)) .attr('cy', d => y(d.RAN))
.attr('id', (d) => `success-dot-${dateFormat(d.DATE)}`) .attr('id', d => `success-dot-${dateFormat(d.DATE)}`)
.on('mouseover', handleMouseOver) .on('mouseover', (event, d) => handleMouseOver(event, d))
.on('mousemove', handleMouseMove) .on('mousemove', handleMouseMove)
.on('mouseout', handleMouseOut); .on('mouseout', handleMouseOut);
} }
@@ -248,9 +248,9 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
.attr('r', 3) .attr('r', 3)
.style('stroke', () => colors(0)) .style('stroke', () => colors(0))
.style('fill', () => colors(0)) .style('fill', () => colors(0))
.attr('cx', (d) => x(d.DATE)) .attr('cx', d => x(d.DATE))
.attr('cy', (d) => y(d.FAIL)) .attr('cy', d => y(d.FAIL))
.attr('id', (d) => `fail-dot-${dateFormat(d.DATE)}`) .attr('id', d => `fail-dot-${dateFormat(d.DATE)}`)
.on('mouseover', handleMouseOver) .on('mouseover', handleMouseOver)
.on('mousemove', handleMouseMove) .on('mousemove', handleMouseMove)
.on('mouseout', handleMouseOut); .on('mouseout', handleMouseOut);
@@ -282,11 +282,11 @@ LineChart.propTypes = {
height: number.isRequired, height: number.isRequired,
}; };
const withPageContext = (Component) => const withPageContext = Component =>
function contextComponent(props) { function contextComponent(props) {
return ( return (
<PageContextConsumer> <PageContextConsumer>
{(pageContext) => <Component {...props} pageContext={pageContext} />} {pageContext => <Component {...props} pageContext={pageContext} />}
</PageContextConsumer> </PageContextConsumer>
); );
}; };

View File

@@ -4,13 +4,11 @@ import PropTypes from 'prop-types';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import styled from 'styled-components'; import styled from 'styled-components';
import { AllHtmlEntities } from 'html-entities'; import { encode } from 'html-entities';
import StatusIcon from 'components/StatusIcon'; import StatusIcon from '../../../components/StatusIcon';
import { DetailList, Detail } from 'components/DetailList'; import { DetailList, Detail } from '../../../components/DetailList';
import ContentEmpty from 'components/ContentEmpty'; import ContentEmpty from '../../../components/ContentEmpty';
import CodeEditor from 'components/CodeEditor'; import CodeEditor from '../../../components/CodeEditor';
const entities = new AllHtmlEntities();
const HostNameDetailValue = styled.div` const HostNameDetailValue = styled.div`
align-items: center; align-items: center;
@@ -52,7 +50,7 @@ const processCodeEditorValue = (value) => {
} else if (value === '') { } else if (value === '') {
codeEditorValue = ' '; codeEditorValue = ' ';
} else if (typeof value === 'string') { } else if (typeof value === 'string') {
codeEditorValue = entities.encode(value); codeEditorValue = encode(value);
} else { } else {
codeEditorValue = value; codeEditorValue = value;
} }

View File

@@ -11,7 +11,7 @@ import {
} from 'react-virtualized'; } from 'react-virtualized';
import Ansi from 'ansi-to-html'; import Ansi from 'ansi-to-html';
import hasAnsi from 'has-ansi'; import hasAnsi from 'has-ansi';
import { AllHtmlEntities } from 'html-entities'; import { encode } from 'html-entities';
import { import {
Button, Button,
Toolbar, Toolbar,
@@ -78,7 +78,6 @@ const ansi = new Ansi({
15: '#FFF', 15: '#FFF',
}, },
}); });
const entities = new AllHtmlEntities();
function getTimestamp({ created }) { function getTimestamp({ created }) {
const date = new Date(created); const date = new Date(created);
@@ -121,7 +120,7 @@ function replaceStyleAttrs(html) {
} }
function getLineTextHtml({ created, event, start_line, stdout }) { function getLineTextHtml({ created, event, start_line, stdout }) {
const sanitized = entities.encode(stdout); const sanitized = encode(stdout);
let lineCssMap = {}; let lineCssMap = {};
const lineTextHtml = []; const lineTextHtml = [];

View File

@@ -24,26 +24,24 @@ function WorkflowOutputGraph() {
const svgRef = useRef(null); const svgRef = useRef(null);
const gRef = useRef(null); const gRef = useRef(null);
const { links, nodePositions, nodes, showLegend, showTools } = const { links, nodePositions, nodes, showLegend, showTools } = useContext(
useContext(WorkflowStateContext); WorkflowStateContext
);
// This is the zoom function called by using the mousewheel/click and drag // This is the zoom function called by using the mousewheel/click and drag
const zoom = () => { const zoom = event => {
const translation = [d3.event.transform.x, d3.event.transform.y]; const translation = [event.transform.x, event.transform.y];
d3.select(gRef.current).attr( d3.select(gRef.current).attr(
'transform', 'transform',
`translate(${translation}) scale(${d3.event.transform.k})` `translate(${translation}) scale(${event.transform.k})`
); );
setZoomPercentage(event.transform.k * 100);
setZoomPercentage(d3.event.transform.k * 100);
}; };
const handlePan = (direction) => { const handlePan = direction => {
const transform = d3.zoomTransform(d3.select(svgRef.current).node()); const transform = d3.zoomTransform(d3.select(svgRef.current).node());
let { x: xPos, y: yPos } = transform; let { x: xPos, y: yPos } = transform;
const { k: currentScale } = transform; const { k: currentScale } = transform;
switch (direction) { switch (direction) {
case 'up': case 'up':
yPos -= 50; yPos -= 50;
@@ -61,13 +59,11 @@ function WorkflowOutputGraph() {
// Throw an error? // Throw an error?
break; break;
} }
d3.select(svgRef.current).call( d3.select(svgRef.current).call(
zoomRef.transform, zoomRef.transform,
d3.zoomIdentity.translate(xPos, yPos).scale(currentScale) d3.zoomIdentity.translate(xPos, yPos).scale(currentScale)
); );
}; };
const handlePanToMiddle = () => { const handlePanToMiddle = () => {
const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
d3.select(svgRef.current).call( d3.select(svgRef.current).call(
@@ -76,29 +72,25 @@ function WorkflowOutputGraph() {
.translate(0, svgBoundingClientRect.height / 2 - 30) .translate(0, svgBoundingClientRect.height / 2 - 30)
.scale(1) .scale(1)
); );
setZoomPercentage(100); setZoomPercentage(100);
}; };
const handleZoomChange = (newScale) => { const handleZoomChange = newScale => {
const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
const currentScaleAndOffset = d3.zoomTransform( const currentScaleAndOffset = d3.zoomTransform(
d3.select(svgRef.current).node() d3.select(svgRef.current).node()
); );
const [translateX, translateY] = getTranslatePointsForZoom( const [translateX, translateY] = getTranslatePointsForZoom(
svgBoundingClientRect, svgBoundingClientRect,
currentScaleAndOffset, currentScaleAndOffset,
newScale newScale
); );
d3.select(svgRef.current).call( d3.select(svgRef.current).call(
zoomRef.transform, zoomRef.transform,
d3.zoomIdentity.translate(translateX, translateY).scale(newScale) d3.zoomIdentity.translate(translateX, translateY).scale(newScale)
); );
setZoomPercentage(newScale * 100); setZoomPercentage(newScale * 100);
}; };
const handleFitGraph = () => { const handleFitGraph = () => {
const { k: currentScale } = d3.zoomTransform( const { k: currentScale } = d3.zoomTransform(
d3.select(svgRef.current).node() d3.select(svgRef.current).node()
@@ -108,32 +100,34 @@ function WorkflowOutputGraph() {
.node() .node()
.getBoundingClientRect(); .getBoundingClientRect();
const gBBoxDimensions = d3.select(gRef.current).node().getBBox(); const gBBoxDimensions = d3
.select(gRef.current)
.node()
.getBBox();
const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
const [scaleToFit, yTranslate] = getScaleAndOffsetToFit( const [scaleToFit, yTranslate] = getScaleAndOffsetToFit(
gBoundingClientRect, gBoundingClientRect,
svgBoundingClientRect, svgBoundingClientRect,
gBBoxDimensions, gBBoxDimensions,
currentScale currentScale
); );
d3.select(svgRef.current).call( d3.select(svgRef.current).call(
zoomRef.transform, zoomRef.transform,
d3.zoomIdentity.translate(0, yTranslate).scale(scaleToFit) d3.zoomIdentity.translate(0, yTranslate).scale(scaleToFit)
); );
setZoomPercentage(scaleToFit * 100); setZoomPercentage(scaleToFit * 100);
}; };
const zoomRef = d3.zoom().scaleExtent([0.1, 2]).on('zoom', zoom); const zoomRef = d3
.zoom()
.scaleExtent([0.1, 2])
.on('zoom', zoom);
// Initialize the zoom // Initialize the zoom
useEffect(() => { useEffect(() => {
d3.select(svgRef.current).call(zoomRef); d3.select(svgRef.current).call(zoomRef);
}, [zoomRef]); }, [zoomRef]);
// Attempt to zoom the graph to fit the available screen space // Attempt to zoom the graph to fit the available screen space
useEffect(() => { useEffect(() => {
handleFitGraph(); handleFitGraph();
@@ -144,7 +138,6 @@ function WorkflowOutputGraph() {
// and https://github.com/facebook/react/issues/15865 amongst others // and https://github.com/facebook/react/issues/15865 amongst others
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
return ( return (
<> <>
{(nodeHelp || linkHelp) && ( {(nodeHelp || linkHelp) && (
@@ -156,12 +149,12 @@ function WorkflowOutputGraph() {
<svg <svg
id="workflow-svg" id="workflow-svg"
ref={svgRef} ref={svgRef}
css="display: flex; height: 100%; background-color: #f6f6f6;" css="display: flex; height: 100%; background-color: #F6F6F6"
> >
<g id="workflow-g" ref={gRef}> <g id="workflow-g" ref={gRef}>
{nodePositions && [ {nodePositions && [
<WorkflowStartNode key="start" showActionTooltip={false} />, <WorkflowStartNode key="start" showActionTooltip={false} />,
links.map((link) => ( links.map(link => (
<WorkflowOutputLink <WorkflowOutputLink
key={`link-${link.source.id}-${link.target.id}`} key={`link-${link.source.id}-${link.target.id}`}
link={link} link={link}
@@ -169,7 +162,7 @@ function WorkflowOutputGraph() {
mouseLeave={() => setLinkHelp(null)} mouseLeave={() => setLinkHelp(null)}
/> />
)), )),
nodes.map((node) => { nodes.map(node => {
if (node.id > 1) { if (node.id > 1) {
return ( return (
<WorkflowOutputNode <WorkflowOutputNode
@@ -185,7 +178,7 @@ function WorkflowOutputGraph() {
]} ]}
</g> </g>
</svg> </svg>
<div css="position: absolute; top: 75px;right: 20px;display: flex;"> <div css="position: absolute; top: 75px;right: 20px;display: flex">
{showTools && ( {showTools && (
<WorkflowTools <WorkflowTools
onFitGraph={handleFitGraph} onFitGraph={handleFitGraph}
@@ -200,5 +193,4 @@ function WorkflowOutputGraph() {
</> </>
); );
} }
export default WorkflowOutputGraph; export default WorkflowOutputGraph;

View File

@@ -1,6 +1,5 @@
import 'styled-components/macro'; import 'styled-components/macro';
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useContext, useEffect, useRef, useState } from 'react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import styled from 'styled-components'; import styled from 'styled-components';
import { bool } from 'prop-types'; import { bool } from 'prop-types';
@@ -28,13 +27,11 @@ import VisualizerNode from './VisualizerNode';
const PotentialLink = styled.polyline` const PotentialLink = styled.polyline`
pointer-events: none; pointer-events: none;
`; `;
const WorkflowSVG = styled.svg` const WorkflowSVG = styled.svg`
background-color: #f6f6f6; background-color: #f6f6f6;
display: flex; display: flex;
height: 100%; height: 100%;
`; `;
function VisualizerGraph({ readOnly }) { function VisualizerGraph({ readOnly }) {
const [helpText, setHelpText] = useState(null); const [helpText, setHelpText] = useState(null);
const [linkHelp, setLinkHelp] = useState(); const [linkHelp, setLinkHelp] = useState();
@@ -42,7 +39,6 @@ function VisualizerGraph({ readOnly }) {
const [zoomPercentage, setZoomPercentage] = useState(100); const [zoomPercentage, setZoomPercentage] = useState(100);
const svgRef = useRef(null); const svgRef = useRef(null);
const gRef = useRef(null); const gRef = useRef(null);
const { const {
addLinkSourceNode, addLinkSourceNode,
addingLink, addingLink,
@@ -52,10 +48,9 @@ function VisualizerGraph({ readOnly }) {
showLegend, showLegend,
showTools, showTools,
} = useContext(WorkflowStateContext); } = useContext(WorkflowStateContext);
const dispatch = useContext(WorkflowDispatchContext); const dispatch = useContext(WorkflowDispatchContext);
const drawPotentialLinkToNode = (node) => { const drawPotentialLinkToNode = node => {
if (node.id !== addLinkSourceNode.id) { if (node.id !== addLinkSourceNode.id) {
const sourceNodeX = nodePositions[addLinkSourceNode.id].x; const sourceNodeX = nodePositions[addLinkSourceNode.id].x;
const sourceNodeY = const sourceNodeY =
@@ -66,19 +61,17 @@ function VisualizerGraph({ readOnly }) {
const startY = sourceNodeY + wfConstants.nodeH / 2; const startY = sourceNodeY + wfConstants.nodeH / 2;
const finishX = targetNodeX; const finishX = targetNodeX;
const finishY = targetNodeY + wfConstants.nodeH / 2; const finishY = targetNodeY + wfConstants.nodeH / 2;
d3.select('#workflow-potentialLink') d3.select('#workflow-potentialLink')
.attr('points', `${startX},${startY} ${finishX},${finishY}`) .attr('points', `${startX},${startY} ${finishX},${finishY}`)
.raise(); .raise();
} }
}; };
const handleBackgroundClick = () => { const handleBackgroundClick = () => {
setHelpText(null); setHelpText(null);
dispatch({ type: 'CANCEL_LINK' }); dispatch({ type: 'CANCEL_LINK' });
}; };
const drawPotentialLinkToCursor = (e) => { const drawPotentialLinkToCursor = e => {
const currentTransform = d3.zoomTransform(d3.select(gRef.current).node()); const currentTransform = d3.zoomTransform(d3.select(gRef.current).node());
const rect = e.target.getBoundingClientRect(); const rect = e.target.getBoundingClientRect();
const mouseX = e.clientX - rect.left; const mouseX = e.clientX - rect.left;
@@ -88,36 +81,30 @@ function VisualizerGraph({ readOnly }) {
nodePositions[addLinkSourceNode.id].y - nodePositions[1].y; nodePositions[addLinkSourceNode.id].y - nodePositions[1].y;
const startX = sourceNodeX + wfConstants.nodeW; const startX = sourceNodeX + wfConstants.nodeW;
const startY = sourceNodeY + wfConstants.nodeH / 2; const startY = sourceNodeY + wfConstants.nodeH / 2;
d3.select('#workflow-potentialLink') d3.select('#workflow-potentialLink')
.attr( .attr(
'points', 'points',
`${startX},${startY} ${ `${startX},${startY} ${mouseX / currentTransform.k -
mouseX / currentTransform.k - currentTransform.x / currentTransform.k currentTransform.x / currentTransform.k},${mouseY /
},${ currentTransform.k -
mouseY / currentTransform.k - currentTransform.y / currentTransform.k currentTransform.y / currentTransform.k}`
}`
) )
.raise(); .raise();
}; };
// This is the zoom function called by using the mousewheel/click and drag // This is the zoom function called by using the mousewheel/click and drag
const zoom = () => { const zoom = event => {
const translation = [d3.event.transform.x, d3.event.transform.y]; const translation = [event.transform.x, event.transform.y];
d3.select(gRef.current).attr( d3.select(gRef.current).attr(
'transform', 'transform',
`translate(${translation}) scale(${d3.event.transform.k})` `translate(${translation}) scale(${event.transform.k})`
); );
setZoomPercentage(event.transform.k * 100);
setZoomPercentage(d3.event.transform.k * 100);
}; };
const handlePan = (direction) => { const handlePan = direction => {
const transform = d3.zoomTransform(d3.select(svgRef.current).node()); const transform = d3.zoomTransform(d3.select(svgRef.current).node());
let { x: xPos, y: yPos } = transform; let { x: xPos, y: yPos } = transform;
const { k: currentScale } = transform; const { k: currentScale } = transform;
switch (direction) { switch (direction) {
case 'up': case 'up':
yPos -= 50; yPos -= 50;
@@ -135,13 +122,11 @@ function VisualizerGraph({ readOnly }) {
// Throw an error? // Throw an error?
break; break;
} }
d3.select(svgRef.current).call( d3.select(svgRef.current).call(
zoomRef.transform, zoomRef.transform,
d3.zoomIdentity.translate(xPos, yPos).scale(currentScale) d3.zoomIdentity.translate(xPos, yPos).scale(currentScale)
); );
}; };
const handlePanToMiddle = () => { const handlePanToMiddle = () => {
const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
d3.select(svgRef.current).call( d3.select(svgRef.current).call(
@@ -150,29 +135,25 @@ function VisualizerGraph({ readOnly }) {
.translate(0, svgBoundingClientRect.height / 2 - 30) .translate(0, svgBoundingClientRect.height / 2 - 30)
.scale(1) .scale(1)
); );
setZoomPercentage(100); setZoomPercentage(100);
}; };
const handleZoomChange = (newScale) => { const handleZoomChange = newScale => {
const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
const currentScaleAndOffset = d3.zoomTransform( const currentScaleAndOffset = d3.zoomTransform(
d3.select(svgRef.current).node() d3.select(svgRef.current).node()
); );
const [translateX, translateY] = getTranslatePointsForZoom( const [translateX, translateY] = getTranslatePointsForZoom(
svgBoundingClientRect, svgBoundingClientRect,
currentScaleAndOffset, currentScaleAndOffset,
newScale newScale
); );
d3.select(svgRef.current).call( d3.select(svgRef.current).call(
zoomRef.transform, zoomRef.transform,
d3.zoomIdentity.translate(translateX, translateY).scale(newScale) d3.zoomIdentity.translate(translateX, translateY).scale(newScale)
); );
setZoomPercentage(newScale * 100); setZoomPercentage(newScale * 100);
}; };
const handleFitGraph = () => { const handleFitGraph = () => {
const { k: currentScale } = d3.zoomTransform( const { k: currentScale } = d3.zoomTransform(
d3.select(svgRef.current).node() d3.select(svgRef.current).node()
@@ -182,32 +163,34 @@ function VisualizerGraph({ readOnly }) {
.node() .node()
.getBoundingClientRect(); .getBoundingClientRect();
const gBBoxDimensions = d3.select(gRef.current).node().getBBox(); const gBBoxDimensions = d3
.select(gRef.current)
.node()
.getBBox();
const svgBoundingClientRect = svgRef.current.getBoundingClientRect(); const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
const [scaleToFit, yTranslate] = getScaleAndOffsetToFit( const [scaleToFit, yTranslate] = getScaleAndOffsetToFit(
gBoundingClientRect, gBoundingClientRect,
svgBoundingClientRect, svgBoundingClientRect,
gBBoxDimensions, gBBoxDimensions,
currentScale currentScale
); );
d3.select(svgRef.current).call( d3.select(svgRef.current).call(
zoomRef.transform, zoomRef.transform,
d3.zoomIdentity.translate(0, yTranslate).scale(scaleToFit) d3.zoomIdentity.translate(0, yTranslate).scale(scaleToFit)
); );
setZoomPercentage(scaleToFit * 100); setZoomPercentage(scaleToFit * 100);
}; };
const zoomRef = d3.zoom().scaleExtent([0.1, 2]).on('zoom', zoom); const zoomRef = d3
.zoom()
.scaleExtent([0.1, 2])
.on('zoom', zoom);
// Initialize the zoom // Initialize the zoom
useEffect(() => { useEffect(() => {
d3.select(svgRef.current).call(zoomRef); d3.select(svgRef.current).call(zoomRef);
}, [zoomRef]); }, [zoomRef]);
// Attempt to zoom the graph to fit the available screen space // Attempt to zoom the graph to fit the available screen space
useEffect(() => { useEffect(() => {
handleFitGraph(); handleFitGraph();
@@ -218,7 +201,6 @@ function VisualizerGraph({ readOnly }) {
// and https://github.com/facebook/react/issues/15865 amongst others // and https://github.com/facebook/react/issues/15865 amongst others
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
return ( return (
<> <>
{(helpText || nodeHelp || linkHelp) && ( {(helpText || nodeHelp || linkHelp) && (
@@ -249,7 +231,7 @@ function VisualizerGraph({ readOnly }) {
opacity="0" opacity="0"
width="100%" width="100%"
{...(addingLink && { {...(addingLink && {
onMouseMove: (e) => drawPotentialLinkToCursor(e), onMouseMove: e => drawPotentialLinkToCursor(e),
onMouseOver: () => onMouseOver: () =>
setHelpText( setHelpText(
t`Click an available node to create a new link. Click outside the graph to cancel.` t`Click an available node to create a new link. Click outside the graph to cancel.`
@@ -260,7 +242,7 @@ function VisualizerGraph({ readOnly }) {
/> />
<g id="workflow-g" ref={gRef}> <g id="workflow-g" ref={gRef}>
{nodePositions && [ {nodePositions && [
links.map((link) => { links.map(link => {
if ( if (
nodePositions[link.source.id] && nodePositions[link.source.id] &&
nodePositions[link.target.id] nodePositions[link.target.id]
@@ -270,22 +252,22 @@ function VisualizerGraph({ readOnly }) {
key={`link-${link.source.id}-${link.target.id}`} key={`link-${link.source.id}-${link.target.id}`}
link={link} link={link}
readOnly={readOnly} readOnly={readOnly}
updateLinkHelp={(newLinkHelp) => setLinkHelp(newLinkHelp)} updateLinkHelp={newLinkHelp => setLinkHelp(newLinkHelp)}
updateHelpText={(newHelpText) => setHelpText(newHelpText)} updateHelpText={newHelpText => setHelpText(newHelpText)}
/> />
); );
} }
return null; return null;
}), }),
nodes.map((node) => { nodes.map(node => {
if (node.id > 1 && nodePositions[node.id] && !node.isDeleted) { if (node.id > 1 && nodePositions[node.id] && !node.isDeleted) {
return ( return (
<VisualizerNode <VisualizerNode
key={`node-${node.id}`} key={`node-${node.id}`}
node={node} node={node}
readOnly={readOnly} readOnly={readOnly}
updateHelpText={(newHelpText) => setHelpText(newHelpText)} updateHelpText={newHelpText => setHelpText(newHelpText)}
updateNodeHelp={(newNodeHelp) => setNodeHelp(newNodeHelp)} updateNodeHelp={newNodeHelp => setNodeHelp(newNodeHelp)}
{...(addingLink && { {...(addingLink && {
onMouseOver: () => drawPotentialLinkToNode(node), onMouseOver: () => drawPotentialLinkToNode(node),
})} })}
@@ -327,9 +309,7 @@ function VisualizerGraph({ readOnly }) {
</> </>
); );
} }
VisualizerGraph.propTypes = { VisualizerGraph.propTypes = {
readOnly: bool.isRequired, readOnly: bool.isRequired,
}; };
export default VisualizerGraph; export default VisualizerGraph;