Add tooltips with times
This commit is contained in:
Kacper Donat
parent
f77a612a89
commit
98ded1c9ac
@ -66,16 +66,37 @@ type HighlightedCodeProps = {
|
||||
onClose?(): void;
|
||||
}
|
||||
|
||||
const HighlightedCode = ({ highlighted, onClose }: HighlightedCodeProps) =>
|
||||
<>
|
||||
<pre className="keylighter" dangerouslySetInnerHTML={{ __html: highlighted.html }}/>
|
||||
const tooltip = text => ({
|
||||
'data-toggle': 'tooltip',
|
||||
'title': text,
|
||||
ref: el => $(el).tooltip(),
|
||||
});
|
||||
|
||||
const HighlightedCode = ({ highlighted, onClose }: HighlightedCodeProps) => {
|
||||
const widths = {
|
||||
tokenization: `${ highlighted.times.tokenization / highlighted.times.total * 100 }%`,
|
||||
processing: `${ highlighted.times.processing / highlighted.times.total * 100 }%`,
|
||||
formatting: `${ highlighted.times.formatting / highlighted.times.total * 100 }%`,
|
||||
};
|
||||
|
||||
return <>
|
||||
<pre className="keylighter" dangerouslySetInnerHTML={ { __html: highlighted.html } }/>
|
||||
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="demo__times">
|
||||
<div className="demo__time-splits">
|
||||
<div className="demo__time-split demo__time-split--tokenization" style={{ width: `${highlighted.times.tokenization / highlighted.times.total * 100}%` }}/>
|
||||
<div className="demo__time-split demo__time-split--processing" style={{ width: `${highlighted.times.processing / highlighted.times.total * 100}%` }}/>
|
||||
<div className="demo__time-split demo__time-split--formatting" style={{ width: `${highlighted.times.formatting / highlighted.times.total * 100}%` }}/>
|
||||
<div className="demo__time-split demo__time-split--tokenization"
|
||||
style={ { width: widths.tokenization } }
|
||||
{ ...tooltip(`Tokenization took ${formatter.format(highlighted.times.tokenization)}ms`) }
|
||||
/>
|
||||
<div className="demo__time-split demo__time-split--processing"
|
||||
style={ { width: widths.processing } }
|
||||
{ ...tooltip(`Processing took ${formatter.format(highlighted.times.processing)}ms`) }
|
||||
/>
|
||||
<div className="demo__time-split demo__time-split--formatting"
|
||||
style={ { width: widths.formatting } }
|
||||
{ ...tooltip(`Formatting took ${formatter.format(highlighted.times.processing)}ms`) }
|
||||
/>
|
||||
</div>
|
||||
<div className="demo__time-total">
|
||||
Total time: { formatter.format(highlighted.times.total) }ms
|
||||
@ -89,6 +110,7 @@ const HighlightedCode = ({ highlighted, onClose }: HighlightedCodeProps) =>
|
||||
</div>
|
||||
</div>
|
||||
</>;
|
||||
};
|
||||
|
||||
type DemoState = "form" | "submitting" | "show";
|
||||
type HighlightedResponse = {
|
||||
|
||||
18
package.json
18
package.json
@ -1,28 +1,27 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.9.4",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@fortawesome/fontawesome-pro": "^5.13.0",
|
||||
"@symfony/webpack-encore": "^0.28.2",
|
||||
"@types/bootstrap": "^3.3.32",
|
||||
"@types/jquery": "^2.0.41",
|
||||
"@types/react": "^16.9.34",
|
||||
"@types/react-dom": "^16.9.6",
|
||||
"bootstrap": "4.0.0-beta",
|
||||
"core-js": "^3.0.0",
|
||||
"firacode": "^1.205.0",
|
||||
"jquery": "^3.2.1",
|
||||
"node-sass": "^4.13.1",
|
||||
"popper.js": "^1.12.5",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"regenerator-runtime": "^0.13.2",
|
||||
"sass-loader": "7.0.3",
|
||||
"ts-loader": "^5.3.0",
|
||||
"typeface-raleway": "^0.0.75",
|
||||
"typescript": "^3.8.3",
|
||||
"webpack-notifier": "^1.6.0",
|
||||
"@babel/plugin-transform-react-jsx": "^7.9.4",
|
||||
"@types/react": "^16.9.34",
|
||||
"@types/react-dom": "^16.9.6",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-popper-tooltip": "^2.11.1",
|
||||
"typeface-raleway": "^0.0.75"
|
||||
"webpack-notifier": "^1.6.0"
|
||||
},
|
||||
"license": "UNLICENSED",
|
||||
"private": true,
|
||||
@ -31,5 +30,6 @@
|
||||
"dev": "encore dev",
|
||||
"watch": "encore dev --watch",
|
||||
"build": "encore production --progress"
|
||||
}
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
54
yarn.lock
54
yarn.lock
@ -781,7 +781,7 @@
|
||||
"@babel/plugin-transform-react-jsx-self" "^7.9.0"
|
||||
"@babel/plugin-transform-react-jsx-source" "^7.9.0"
|
||||
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.8.4":
|
||||
version "7.9.2"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
|
||||
integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
|
||||
@ -2083,14 +2083,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
|
||||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
create-react-context@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
|
||||
integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
|
||||
dependencies:
|
||||
gud "^1.0.0"
|
||||
warning "^4.0.3"
|
||||
|
||||
cross-spawn@6.0.5, cross-spawn@^6.0.0:
|
||||
version "6.0.5"
|
||||
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
|
||||
@ -2361,7 +2353,7 @@ decode-uri-component@^0.2.0:
|
||||
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
|
||||
integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
|
||||
|
||||
deep-equal@^1.0.1, deep-equal@^1.1.1:
|
||||
deep-equal@^1.0.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
|
||||
integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
|
||||
@ -3309,11 +3301,6 @@ growly@^1.3.0:
|
||||
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
|
||||
integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
|
||||
|
||||
gud@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
|
||||
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
|
||||
|
||||
handle-thing@^2.0.0:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
|
||||
@ -5123,7 +5110,7 @@ pkg-up@^2.0.0:
|
||||
dependencies:
|
||||
find-up "^2.1.0"
|
||||
|
||||
popper.js@^1.12.5, popper.js@^1.14.4:
|
||||
popper.js@^1.12.5:
|
||||
version "1.16.1"
|
||||
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
|
||||
integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
|
||||
@ -5495,7 +5482,7 @@ promise-inflight@^1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
|
||||
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
|
||||
|
||||
prop-types@^15.6.1, prop-types@^15.6.2:
|
||||
prop-types@^15.6.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
|
||||
@ -5654,27 +5641,6 @@ react-is@^16.8.1:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
|
||||
react-popper-tooltip@^2.11.1:
|
||||
version "2.11.1"
|
||||
resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
|
||||
integrity sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
react-popper "^1.3.7"
|
||||
|
||||
react-popper@^1.3.7:
|
||||
version "1.3.7"
|
||||
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
|
||||
integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
create-react-context "^0.3.0"
|
||||
deep-equal "^1.1.1"
|
||||
popper.js "^1.14.4"
|
||||
prop-types "^15.6.1"
|
||||
typed-styles "^0.0.7"
|
||||
warning "^4.0.2"
|
||||
|
||||
react@^16.13.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
|
||||
@ -6827,11 +6793,6 @@ type@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
|
||||
integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
|
||||
|
||||
typed-styles@^0.0.7:
|
||||
version "0.0.7"
|
||||
resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
|
||||
integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
|
||||
|
||||
typedarray@^0.0.6:
|
||||
version "0.0.6"
|
||||
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
|
||||
@ -7046,13 +7007,6 @@ vm-browserify@^1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
|
||||
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
|
||||
|
||||
warning@^4.0.2, warning@^4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
|
||||
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
|
||||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
watchpack@^1.6.0:
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user