Embed iongraph-web and use for iongraph.json source files

Author: eqrion

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)$": "<rootDir>/src/test/fixtures/mocks/file-mock.ts",

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<Props> {
       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<Props> {
             </div>
             <div className="bottom-sourceview-wrapper">
               {sourceViewFile !== null ? (
-                <SourceView
-                  disableOverscan={disableOverscan}
-                  timings={globalLineTimings}
-                  sourceCode={sourceCode}
-                  filePath={path}
-                  scrollToHotSpotGeneration={sourceViewScrollGeneration}
-                  hotSpotTimings={selectedCallNodeLineTimings}
-                  ref={this._sourceView}
-                />
+                sourceIsIonGraph ? (
+                  <IonGraphView
+                    timings={globalLineTimings}
+                    hotSpotTimings={selectedCallNodeLineTimings}
+                    sourceCode={sourceCode}
+                  />
+                ) : (
+                  <SourceView
+                    disableOverscan={disableOverscan}
+                    timings={globalLineTimings}
+                    sourceCode={sourceCode}
+                    filePath={path}
+                    scrollToHotSpotGeneration={sourceViewScrollGeneration}
+                    hotSpotTimings={selectedCallNodeLineTimings}
+                    ref={this._sourceView}
+                  />
+                )
               ) : null}
               {sourceViewCode !== undefined &&
               sourceViewCode.type === 'LOADING' ? (

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 <div />;
+  }
+  return <GraphViewer func={func} />;
+}

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'),
         ],
       },
       {

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==
 
+[email protected]:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/iongraph-web/-/iongraph-web-0.1.3.tgz#f91c07532cfd5d123ab94928326dfb22d6960389"
+  integrity sha512-XA87Qdc0XsrhnhugzjJS/Nd2u2TYy6lgx58ruSXJWdW1+H995G45pxtsZxaI2ORCbxYe5UC5sHwABlnmHmE3Yw==
+
 [email protected]:
   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 @@ [email protected], 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==