From f9c7744f38490b68fdb25cc3c1ba4a4207a1c368 Mon Sep 17 00:00:00 2001 From: Ryan Hunt Date: Mon, 25 Aug 2025 16:01:01 -0500 Subject: [PATCH 1/3] Embed iongraph-web and use for iongraph.json source files --- package.json | 3 ++- src/components/app/BottomBox.tsx | 28 ++++++++++++------- src/components/shared/IonGraphView.tsx | 31 +++++++++++++++++++++ webpack.config.js | 1 + yarn.lock | 37 +++++++++++++++++++++++--- 5 files changed, 86 insertions(+), 14 deletions(-) create mode 100644 src/components/shared/IonGraphView.tsx diff --git a/package.json b/package.json index f2b8427bc4..317717d483 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "escape-string-regexp": "^4.0.0", "gecko-profiler-demangle": "^0.3.3", "idb": "^8.0.3", + "iongraph-web": "0.1.3", "jszip": "^3.10.1", "long": "^5.3.2", "memoize-immutable": "^3.0.0", @@ -206,7 +207,7 @@ "tsx" ], "transformIgnorePatterns": [ - "/node_modules/(?!(query-string|decode-uri-component|split-on-first|filter-obj|@fetch-mock/jest|fetch-mock)/)" + "/node_modules/(?!(query-string|decode-uri-component|iongraph-web|split-on-first|filter-obj|@fetch-mock/jest|fetch-mock)/)" ], "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ftl)$": "/src/test/fixtures/mocks/file-mock.ts", diff --git a/src/components/app/BottomBox.tsx b/src/components/app/BottomBox.tsx index 299320261c..587222d638 100644 --- a/src/components/app/BottomBox.tsx +++ b/src/components/app/BottomBox.tsx @@ -9,6 +9,7 @@ import classNames from 'classnames'; import { SourceView } from '../shared/SourceView'; import { AssemblyView } from '../shared/AssemblyView'; import { AssemblyViewToggleButton } from './AssemblyViewToggleButton'; +import { IonGraphView } from '../shared/IonGraphView'; import { CodeLoadingOverlay } from './CodeLoadingOverlay'; import { CodeErrorOverlay } from './CodeErrorOverlay'; import { @@ -177,6 +178,7 @@ class BottomBoxImpl extends React.PureComponent { assemblyViewCode && assemblyViewCode.type === 'AVAILABLE' ? assemblyViewCode.instructions : []; + const sourceIsIonGraph = path !== null && path.endsWith('iongraph.json'); // The bottom box has one or more side-by-side panes. // At the moment it always has either one or two panes: @@ -212,15 +214,23 @@ class BottomBoxImpl extends React.PureComponent {
{sourceViewFile !== null ? ( - + sourceIsIonGraph ? ( + + ) : ( + + ) ) : null} {sourceViewCode !== undefined && sourceViewCode.type === 'LOADING' ? ( diff --git a/src/components/shared/IonGraphView.tsx b/src/components/shared/IonGraphView.tsx new file mode 100644 index 0000000000..ec1dfaad56 --- /dev/null +++ b/src/components/shared/IonGraphView.tsx @@ -0,0 +1,31 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +import type { LineTimings } from 'firefox-profiler/types'; + +import { GraphViewer } from 'iongraph-web'; +import type { Func } from 'iongraph-web'; +import 'iongraph-web/dist/style.css'; + +import { useMemo } from 'react'; + +type IonGraphViewProps = { + readonly sourceCode: string; + // TODO: use these when https://github.com/mozilla-spidermonkey/iongraph-web/issues/3 is resolved. + readonly timings: LineTimings; + readonly hotSpotTimings: LineTimings; +}; + +export function IonGraphView(props: IonGraphViewProps) { + let func = useMemo(() => { + if (props.sourceCode.trim() === '') { + return null; + } + return JSON.parse(props.sourceCode) as Func; + }, [props.sourceCode]); + + if (!func) { + return
; + } + return ; +} diff --git a/webpack.config.js b/webpack.config.js index 45fad9d1c3..4daef5ff77 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -58,6 +58,7 @@ const config = { ...includes, path.join(__dirname, 'node_modules', 'photon-colors'), path.join(__dirname, 'node_modules', 'react-splitter-layout'), + path.join(__dirname, 'node_modules', 'iongraph-web'), ], }, { diff --git a/yarn.lock b/yarn.lock index 729d4a65d3..16c8b6ca8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6429,6 +6429,11 @@ interpret@^3.1.1: resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4" integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ== +iongraph-web@0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/iongraph-web/-/iongraph-web-0.1.3.tgz#f91c07532cfd5d123ab94928326dfb22d6960389" + integrity sha512-XA87Qdc0XsrhnhugzjJS/Nd2u2TYy6lgx58ruSXJWdW1+H995G45pxtsZxaI2ORCbxYe5UC5sHwABlnmHmE3Yw== + ipaddr.js@1.9.1: version "1.9.1" resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3" @@ -11320,7 +11325,16 @@ string-length@^4.0.2: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -11442,7 +11456,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11456,6 +11470,13 @@ strip-ansi@^0.3.0: dependencies: ansi-regex "^0.2.1" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -12971,8 +12992,16 @@ workbox-window@7.3.0, workbox-window@^7.3.0: "@types/trusted-types" "^2.0.2" workbox-core "7.3.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: - name wrap-ansi-cjs +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + +wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== From 0af3bf9a5b3779d3ac7a71be08a99847e6741397 Mon Sep 17 00:00:00 2001 From: Ryan Hunt Date: Thu, 28 Aug 2025 13:25:20 -0500 Subject: [PATCH 2/3] Fix lint errors --- src/components/app/BottomBox.tsx | 37 +++++++++++++------------- src/components/shared/IonGraphView.tsx | 2 +- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/components/app/BottomBox.tsx b/src/components/app/BottomBox.tsx index 587222d638..bfdae26482 100644 --- a/src/components/app/BottomBox.tsx +++ b/src/components/app/BottomBox.tsx @@ -179,6 +179,8 @@ class BottomBoxImpl extends React.PureComponent { ? assemblyViewCode.instructions : []; const sourceIsIonGraph = path !== null && path.endsWith('iongraph.json'); + const displaySourceView = sourceViewFile !== null && !sourceIsIonGraph; + const displayIonGraph = sourceViewFile !== null && sourceIsIonGraph; // The bottom box has one or more side-by-side panes. // At the moment it always has either one or two panes: @@ -213,24 +215,23 @@ class BottomBoxImpl extends React.PureComponent { {assemblyViewIsOpen ? null : trailingHeaderButtons}
- {sourceViewFile !== null ? ( - sourceIsIonGraph ? ( - - ) : ( - - ) + {displayIonGraph ? ( + + ) : null} + {displaySourceView ? ( + ) : null} {sourceViewCode !== undefined && sourceViewCode.type === 'LOADING' ? ( diff --git a/src/components/shared/IonGraphView.tsx b/src/components/shared/IonGraphView.tsx index ec1dfaad56..fecaf73c5f 100644 --- a/src/components/shared/IonGraphView.tsx +++ b/src/components/shared/IonGraphView.tsx @@ -17,7 +17,7 @@ type IonGraphViewProps = { }; export function IonGraphView(props: IonGraphViewProps) { - let func = useMemo(() => { + const func = useMemo(() => { if (props.sourceCode.trim() === '') { return null; } From 9bc2f2b971fc6fa55399aebd726a2a51c5342e1a Mon Sep 17 00:00:00 2001 From: Ryan Hunt Date: Fri, 29 Aug 2025 10:46:17 -0500 Subject: [PATCH 3/3] Update iongraph to 0.1.4 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 317717d483..33c9c1e604 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "escape-string-regexp": "^4.0.0", "gecko-profiler-demangle": "^0.3.3", "idb": "^8.0.3", - "iongraph-web": "0.1.3", + "iongraph-web": "0.1.4", "jszip": "^3.10.1", "long": "^5.3.2", "memoize-immutable": "^3.0.0", diff --git a/yarn.lock b/yarn.lock index 16c8b6ca8b..21d81aa4e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6429,10 +6429,10 @@ interpret@^3.1.1: resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4" integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ== -iongraph-web@0.1.3: - version "0.1.3" - resolved "https://registry.yarnpkg.com/iongraph-web/-/iongraph-web-0.1.3.tgz#f91c07532cfd5d123ab94928326dfb22d6960389" - integrity sha512-XA87Qdc0XsrhnhugzjJS/Nd2u2TYy6lgx58ruSXJWdW1+H995G45pxtsZxaI2ORCbxYe5UC5sHwABlnmHmE3Yw== +iongraph-web@0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/iongraph-web/-/iongraph-web-0.1.4.tgz#ee797db67660f3628d65970374ffb06327c7e122" + integrity sha512-dH/bBiplFDYWP1WKr8PDPMHY+rQTSyrokGtbqPk2IO0tnCp0zLbXCByJdZiZthqVKjZYzq5V0ouSqW0uijR/6A== ipaddr.js@1.9.1: version "1.9.1"