From 3f3ba0097eb720db8a6e1e781e9f9b290053f01c Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 6 Sep 2023 17:33:43 -0700 Subject: [PATCH] format everything with prettier --- public/css/react-table.css | 4 +- service_worker_postfix_shim.js | 4 +- src/App.tsx | 48 +-- src/ErrorBoundry.tsx | 28 +- src/Header.tsx | 26 +- src/Home.test.js | 10 +- src/TestProcess.tsx | 10 +- src/bundle/Analyze.tsx | 34 +- src/bundle/BarChart.tsx | 22 +- src/bundle/Bundle.tsx | 58 +-- src/bundle/FileDetails.tsx | 117 +++--- src/bundle/Header.tsx | 67 ++-- src/bundle/RippleChart.tsx | 204 ++++------- src/bundle/Treemap.js | 73 ++-- src/bundle/TreemapComponent.js | 44 +-- src/bundle/prototype-semiotic/hierarchy.json | 330 ++++++++--------- src/bundle/stringFormats.js | 26 +- src/home/Home.tsx | 48 ++- src/import/ImportSelector.tsx | 76 ++-- src/import/Importer.tsx | 141 +++----- src/index.css | 8 +- src/index.tsx | 16 +- src/resolve/Resolve.tsx | 100 ++--- src/storage/import_pb.js | 34 +- src/stories/data/duplicateNodeModules.json | 6 +- src/stories/data/filedetails.json | 361 ++++++------------- src/stories/data/filetype.json | 4 +- src/stories/index.js | 40 +- src/test-process/edges.json | 204 +++++------ src/theme.js | 34 +- 30 files changed, 886 insertions(+), 1291 deletions(-) diff --git a/public/css/react-table.css b/public/css/react-table.css index 90962ba..76478e1 100644 --- a/public/css/react-table.css +++ b/public/css/react-table.css @@ -134,7 +134,7 @@ left: 100%; top: 50%; border: solid transparent; - content: " "; + content: ' '; height: 0; width: 0; position: absolute; @@ -232,7 +232,7 @@ margin: 0 10px; } .ReactTable .rt-expander:after { - content: ""; + content: ''; position: absolute; width: 0; height: 0; diff --git a/service_worker_postfix_shim.js b/service_worker_postfix_shim.js index 14ffbcb..e0b9ac3 100644 --- a/service_worker_postfix_shim.js +++ b/service_worker_postfix_shim.js @@ -1,10 +1,10 @@ -self.addEventListener("message", event => { +self.addEventListener('message', event => { if (!event.data) { return; } switch (event.data) { - case "skipWaiting": + case 'skipWaiting': console.info("Skipping waiting at user's request"); self.skipWaiting(); break; diff --git a/src/App.tsx b/src/App.tsx index 09d8418..fb1f010 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,14 @@ -import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; -import React, { Suspense, lazy } from "react"; -import Header from "./Header"; -import TestProcess from "./TestProcess"; -import ErrorBoundry from "./ErrorBoundry"; -import { Location } from "history"; -import { - ImportResolveState, - ProcessedImportState, - ImportHistory, -} from "./types"; -import { stateFromProcessedKey, stateFromResolveKey } from "./routes"; +import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; +import React, {Suspense, lazy} from 'react'; +import Header from './Header'; +import TestProcess from './TestProcess'; +import ErrorBoundry from './ErrorBoundry'; +import {Location} from 'history'; +import {ImportResolveState, ProcessedImportState, ImportHistory} from './types'; +import {stateFromProcessedKey, stateFromResolveKey} from './routes'; -const Bundle = lazy(() => import("./bundle/Bundle")); -const Home = lazy(() => import("./home/Home")); +const Bundle = lazy(() => import('./bundle/Bundle')); +const Home = lazy(() => import('./home/Home')); export default function App() { return ( @@ -24,16 +20,10 @@ export default function App() { ; - }) => { - const state = stateFromProcessedKey( - (location.state as any).key - ); + component={({location}: {location: Location}) => { + const state = stateFromProcessedKey((location.state as any).key); if (state == null) { - throw new Error("invalid state"); + throw new Error('invalid state'); } let params = new URLSearchParams(location.search); @@ -44,7 +34,7 @@ export default function App() { trimmedNetwork={state.trimmedNetwork} rollups={state.rollups} duplicateNodeModules={state.duplicateNodeModules} - selected={params.get("selected")} + selected={params.get('selected')} hierarchy={state.hierarchy} /> @@ -55,11 +45,7 @@ export default function App() { {/* TODO remove this test route */} ; - }) => { + component={({location}: {location: Location}) => { return ; }} /> @@ -70,9 +56,7 @@ export default function App() { location: Location; history: ImportHistory; }) => { - const state = stateFromResolveKey( - ((h.location.state as any) || { key: "" }).key - ); + const state = stateFromResolveKey(((h.location.state as any) || {key: ''}).key); return ( { +class ErrorBoundry extends Component<{}, {error: Error | null}> { constructor(props: {}) { super(props); - if (process.env.NODE_ENV === "production") { + if (process.env.NODE_ENV === 'production') { Sentry.init({ - dsn: "https://9e475abe454047779775876c0d1af187@sentry.io/1365297" + dsn: 'https://9e475abe454047779775876c0d1af187@sentry.io/1365297', }); } - this.state = { error: null }; + this.state = {error: null}; } static getDerivedStateFromError(error: Error) { - return { error }; + return {error}; } componentDidCatch(error: Error, errorInfo: any) { - if (process.env.NODE_ENV === "production") { + if (process.env.NODE_ENV === 'production') { Sentry.withScope(scope => { Object.keys(errorInfo).forEach(key => { scope.setExtra(key, errorInfo[key]); @@ -33,20 +33,16 @@ class ErrorBoundry extends Component<{}, { error: Error | null }> { render() { if (this.state.error) { const errorReport = new ReportErrorUri(); - errorReport.addError("Uncaught application error", this.state.error); + errorReport.addError('Uncaught application error', this.state.error); return (

🤷 - {" "} + {' '} error encountered, please  - + file a bug!

diff --git a/src/Header.tsx b/src/Header.tsx index 5dd6a4a..a2d1e5e 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -1,18 +1,12 @@ -import React from "react"; -import { Link } from "react-router-dom"; +import React from 'react'; +import {Link} from 'react-router-dom'; // noopener noreferrer export default function Header() { return (
- Bundle Buddy logo + Bundle Buddy logo

Bundle Buddy

⚠ - {" "} - ️Project is in an experimental phase{" "} + {' '} + ️Project is in an experimental phase{' '} ⚠ - {" "} + {' '} ️
diff --git a/src/Home.test.js b/src/Home.test.js index 23c181f..a754b20 100644 --- a/src/Home.test.js +++ b/src/Home.test.js @@ -1,9 +1,9 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; -it("renders without crashing", () => { - const div = document.createElement("div"); +it('renders without crashing', () => { + const div = document.createElement('div'); ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }); diff --git a/src/TestProcess.tsx b/src/TestProcess.tsx index 1ba3698..ecf7d7f 100644 --- a/src/TestProcess.tsx +++ b/src/TestProcess.tsx @@ -1,9 +1,9 @@ -import React from "react"; -import { transform } from "./resolve/process"; +import React from 'react'; +import {transform} from './resolve/process'; -import edges from "./test-process/edges.json"; -import sizes from "./test-process/sizes.json"; -import names from "./test-process/names.json"; +import edges from './test-process/edges.json'; +import sizes from './test-process/sizes.json'; +import names from './test-process/names.json'; export default function TestProcess() { transform(edges, sizes, names); diff --git a/src/bundle/Analyze.tsx b/src/bundle/Analyze.tsx index 08b0f42..349bf4a 100644 --- a/src/bundle/Analyze.tsx +++ b/src/bundle/Analyze.tsx @@ -1,15 +1,15 @@ -import React from "react"; -import FileDetails from "./FileDetails"; -import RippleChart from "./RippleChart"; -import { ProcessedImportState } from "../types"; +import React from 'react'; +import FileDetails from './FileDetails'; +import RippleChart from './RippleChart'; +import {ProcessedImportState} from '../types'; type Props = { total?: number; changeSelected: React.Dispatch; - directoryColors: { [dir: string]: string }; - svgDirectoryColors: { [dir: string]: string }; - network: ProcessedImportState["trimmedNetwork"]; - hierarchy: ProcessedImportState["hierarchy"]; + directoryColors: {[dir: string]: string}; + svgDirectoryColors: {[dir: string]: string}; + network: ProcessedImportState['trimmedNetwork']; + hierarchy: ProcessedImportState['hierarchy']; selected: string | null; directories: string[]; }; @@ -26,7 +26,7 @@ export default function Analyze(props: Props) { selected, } = props; - const { nodes = [], edges = [] } = network; + const {nodes = [], edges = []} = network; const max = network && @@ -41,15 +41,15 @@ export default function Analyze(props: Props) { let withNodeModules = 0; let withoutNodeModules = 0; - nodes.forEach((n) => { - if (n.id.indexOf("node_modules") !== -1) withNodeModules++; + nodes.forEach(n => { + if (n.id.indexOf('node_modules') !== -1) withNodeModules++; else withoutNodeModules++; }); return (
-
+

Analyze

@@ -58,13 +58,13 @@ export default function Analyze(props: Props) { Details

- This project bundled{" "} + This project bundled{' '} {withNodeModules && ( {withNodeModules} node_modules - )}{" "} - {withNodeModules && "with "} + )}{' '} + {withNodeModules && 'with '} {withoutNodeModules} files

@@ -84,8 +84,8 @@ export default function Analyze(props: Props) {
Object.assign({}, d))} - edges={edges.map((d) => Object.assign({}, d))} + nodes={nodes.map(d => Object.assign({}, d))} + edges={edges.map(d => Object.assign({}, d))} max={max} selected={selected} directoryColors={svgDirectoryColors} diff --git a/src/bundle/BarChart.tsx b/src/bundle/BarChart.tsx index 1a907d2..031cce3 100644 --- a/src/bundle/BarChart.tsx +++ b/src/bundle/BarChart.tsx @@ -1,10 +1,10 @@ -import React from "react"; -import { scaleLinear } from "d3-scale"; +import React from 'react'; +import {scaleLinear} from 'd3-scale'; //handle pattern type Props = { - margin: { top?: number; bottom?: number; left?: number }; + margin: {top?: number; bottom?: number; left?: number}; barHeight?: number; rExtent?: [number, number]; oAccessor: (d: any) => string; @@ -22,13 +22,13 @@ export default function BarChart(props: Props) { data = [], rAccessor, oAccessor, - margin = {} as Props["margin"], + margin = {} as Props['margin'], oLabel, bar, oPadding = 3, barHeight = 45, onBarClick, - rExtent + rExtent, } = props; const max = data.reduce((p, c) => { @@ -43,24 +43,22 @@ export default function BarChart(props: Props) { return (
-
+
{data.map(d => { const o = oAccessor(d); const r = rAccessor(d); return (
onBarClick(d.id))} style={{ height: barHeight, - padding: oPadding + padding: oPadding, }} key={o} > -
- {oLabel && oLabel(d, o, r)} -
-
+
{oLabel && oLabel(d, o, r)}
+
{bar && bar(d, `${Math.round(percentScale(r))}%`)}
diff --git a/src/bundle/Bundle.tsx b/src/bundle/Bundle.tsx index 3a1d09f..f6b7460 100644 --- a/src/bundle/Bundle.tsx +++ b/src/bundle/Bundle.tsx @@ -1,37 +1,37 @@ -import * as pako from "pako"; -import React, { useState, useEffect, useMemo } from "react"; -import Header from "./Header"; -import Report from "./Report"; -import Analyze from "./Analyze"; -import "./bundle.css"; +import * as pako from 'pako'; +import React, {useState, useEffect, useMemo} from 'react'; +import Header from './Header'; +import Report from './Report'; +import Analyze from './Analyze'; +import './bundle.css'; -import { colors } from "../theme"; -import { ProcessedImportState } from "../types"; +import {colors} from '../theme'; +import {ProcessedImportState} from '../types'; function storeSelected(selected?: string | null) { if (selected) { window.history.pushState( - { ...window.history.state, selected }, - "", + {...window.history.state, selected}, + '', selected - ? `${window.location.origin}${ - window.location.pathname - }?selected=${encodeURIComponent(selected)}` + ? `${window.location.origin}${window.location.pathname}?selected=${encodeURIComponent( + selected + )}` : `${window.location.origin}${window.location.pathname}` ); } } function download(props: Props) { - const deflate = new pako.Deflate({ level: 3 }); + const deflate = new pako.Deflate({level: 3}); deflate.push(new TextEncoder().encode(JSON.stringify(props)).buffer, true); const blob = new Blob([deflate.result as Uint8Array], { - type: "application/json", + type: 'application/json', }); const objectURL = URL.createObjectURL(blob); - const a: HTMLAnchorElement = document.createElement("a"); - a.setAttribute("download", "bundle-buddy-share.json"); + const a: HTMLAnchorElement = document.createElement('a'); + a.setAttribute('download', 'bundle-buddy-share.json'); a.href = objectURL; a.click(); } @@ -40,16 +40,16 @@ interface Props extends ProcessedImportState { selected: string | null; } -function getDirectories(rollups: Props["rollups"]) { +function getDirectories(rollups: Props['rollups']) { const directories = rollups.directories .sort((a, b) => b.totalBytes - a.totalBytes) - .map((d) => d.name); + .map(d => d.name); - const directoryColors: { [dir: string]: string } = {}; - const svgDirectoryColors: { [dir: string]: string } = {}; + const directoryColors: {[dir: string]: string} = {}; + const svgDirectoryColors: {[dir: string]: string} = {}; let i = 0; - directories.forEach((d) => { - if (d.indexOf("node_modules") !== -1) { + directories.forEach(d => { + if (d.indexOf('node_modules') !== -1) { directoryColors[d] = `repeating-linear-gradient( 45deg, #dfe1e5, @@ -57,10 +57,10 @@ function getDirectories(rollups: Props["rollups"]) { #fff 2px, #fff 4px )`; - svgDirectoryColors[d] = "url(#dags)"; + svgDirectoryColors[d] = 'url(#dags)'; } else { - directoryColors[d] = colors[i] || "black"; - svgDirectoryColors[d] = colors[i] || "black"; + directoryColors[d] = colors[i] || 'black'; + svgDirectoryColors[d] = colors[i] || 'black'; i++; } }); @@ -73,19 +73,19 @@ function getDirectories(rollups: Props["rollups"]) { } export default function Bundle(props: Props) { - const { trimmedNetwork, rollups, hierarchy, duplicateNodeModules } = props; + const {trimmedNetwork, rollups, hierarchy, duplicateNodeModules} = props; const [selected, changeSelected] = useState(props.selected); useEffect(() => storeSelected(selected), [selected]); const network = trimmedNetwork; - const { directories, directoryColors, svgDirectoryColors } = useMemo( + const {directories, directoryColors, svgDirectoryColors} = useMemo( () => getDirectories(rollups), [rollups] ); - rollups.directories.forEach((d) => { + rollups.directories.forEach(d => { d.color = directoryColors[d.name]; }); diff --git a/src/bundle/FileDetails.tsx b/src/bundle/FileDetails.tsx index 3b296b7..2076808 100644 --- a/src/bundle/FileDetails.tsx +++ b/src/bundle/FileDetails.tsx @@ -1,13 +1,13 @@ -import React, { useMemo } from "react"; -import { useTable, useSortBy } from "react-table"; +import React, {useMemo} from 'react'; +import {useTable, useSortBy} from 'react-table'; -import { getCSSPercent, getFileSize } from "./stringFormats"; -import { ProcessedImportState, TrimmedDataNode } from "../types"; -import Treemap from "./Treemap"; +import {getCSSPercent, getFileSize} from './stringFormats'; +import {ProcessedImportState, TrimmedDataNode} from '../types'; +import Treemap from './Treemap'; type Column = { value: number; - row: { original: TrimmedDataNode }; + row: {original: TrimmedDataNode}; }; type Maxes = { @@ -20,7 +20,7 @@ type Maxes = { }; function getColumns( - directoryColors: Props["directoryColors"], + directoryColors: Props['directoryColors'], data: TrimmedDataNode[], total?: number ) { @@ -33,12 +33,9 @@ function getColumns( transitiveRequires: 0, }; - data.forEach((d) => { + data.forEach(d => { maxes.totalBytes = Math.max(maxes.totalBytes, d.totalBytes); - maxes.transitiveRequiresSize = Math.max( - maxes.transitiveRequiresSize, - d.transitiveRequiresSize - ); + maxes.transitiveRequiresSize = Math.max(maxes.transitiveRequiresSize, d.transitiveRequiresSize); maxes.requires = Math.max(maxes.requires, d.requires.length); maxes.transitiveRequires = Math.max( maxes.transitiveRequires, @@ -63,8 +60,8 @@ function getColumns( // background: directoryColors[d.row.original.directory] || "black", background: `var(--grey500)`, height: 8, - width: d.value ? getCSSPercent(d.value / maxes[id]) : "0px", - position: "relative", + width: d.value ? getCSSPercent(d.value / maxes[id]) : '0px', + position: 'relative', top: 15, left: getCSSPercent(maxes[id] - accessor(d.row.original), maxes[id]), }} @@ -74,31 +71,27 @@ function getColumns( return [ { - accessor: "text" as any, - Header: "Name", - className: "name", + accessor: 'text' as any, + Header: 'Name', + className: 'name', Cell: (d: Column) => { return {d.value}; }, }, { - id: "totalBytes", + id: 'totalBytes', accessor: (d: TrimmedDataNode) => d.totalBytes, - Header: "File Size", + Header: 'File Size', minWidth: 150, label: (d: Column) => (
-
- +
+ {getCSSPercent(d.value, total)}
-
- +
+ {getFileSize(d.value)}
@@ -106,37 +99,35 @@ function getColumns( ), }, { - id: "requires", + id: 'requires', accessor: (d: TrimmedDataNode) => d.requires.length, - Header: "Direct Imports", + Header: 'Direct Imports', minWidth: 25, }, { - id: "transitiveRequires", - accessor: (d: TrimmedDataNode) => - d.transitiveRequires.length - d.requires.length, - Header: "Indirect Imports", + id: 'transitiveRequires', + accessor: (d: TrimmedDataNode) => d.transitiveRequires.length - d.requires.length, + Header: 'Indirect Imports', minWidth: 25, }, { - id: "transitiveRequiresSize", + id: 'transitiveRequiresSize', accessor: (d: TrimmedDataNode) => d.transitiveRequiresSize, - Header: "All Imported Size", + Header: 'All Imported Size', minWidth: 50, format: (d: Column) => getFileSize(d.value), }, { - id: "requiredBy", + id: 'requiredBy', accessor: (d: TrimmedDataNode) => d.requiredBy.length, - Header: "Directly Imported By", + Header: 'Directly Imported By', minWidth: 25, }, { - id: "transitiveRequiredBy", - accessor: (d: TrimmedDataNode) => - d.transitiveRequiredBy.length - d.requiredBy.length, - Header: "Indirectly Imported By", + id: 'transitiveRequiredBy', + accessor: (d: TrimmedDataNode) => d.transitiveRequiredBy.length - d.requiredBy.length, + Header: 'Indirectly Imported By', minWidth: 25, }, ].map((d, i) => { @@ -156,13 +147,13 @@ function getColumns( - {d.format ? d.format(c) : !c.value ? "--" : c.value} + {d.format ? d.format(c) : !c.value ? '--' : c.value} )} @@ -176,16 +167,16 @@ function getColumns( type Props = { total?: number; changeSelected: React.Dispatch; - directoryColors: { [dir: string]: string }; - network: ProcessedImportState["trimmedNetwork"]; - hierarchy: ProcessedImportState["hierarchy"]; + directoryColors: {[dir: string]: string}; + network: ProcessedImportState['trimmedNetwork']; + hierarchy: ProcessedImportState['hierarchy']; selected: string | null; directories: string[]; }; export default function FileDetails(props: Props) { const { - network = {} as ProcessedImportState["trimmedNetwork"], + network = {} as ProcessedImportState['trimmedNetwork'], changeSelected, directoryColors, total, @@ -193,7 +184,7 @@ export default function FileDetails(props: Props) { selected, directories, } = props; - const { nodes = [] } = network; + const {nodes = []} = network; const columns = useMemo(() => getColumns(directoryColors, nodes, total), [ directoryColors, @@ -203,24 +194,18 @@ export default function FileDetails(props: Props) { const data = useMemo(() => nodes, [nodes]); - const { - getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow, - } = useTable( + const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = useTable( { columns: columns, data, defaultCanSort: true, disableSortRemove: true, - initialState: { sortBy: [{ id: "totalBytes", desc: true }] } as any, + initialState: {sortBy: [{id: 'totalBytes', desc: true}]} as any, } as any, useSortBy ); - const selectedNode = nodes.find((d) => d.id === selected); + const selectedNode = nodes.find(d => d.id === selected); return ( @@ -236,17 +221,15 @@ export default function FileDetails(props: Props) { /> - {headerGroups.map((headerGroup) => ( + {headerGroups.map(headerGroup => ( - {headerGroup.headers.map((column) => ( + {headerGroup.headers.map(column => ( @@ -294,7 +277,7 @@ export default function FileDetails(props: Props) { return ( { if (id === selected) changeSelected(null); else changeSelected(id); @@ -307,12 +290,12 @@ export default function FileDetails(props: Props) { style={{ minWidth: cell.column.minWidth, background: - cell.column.Header === "Name" + cell.column.Header === 'Name' ? directoryColors[cell.row.original.directory] : undefined, }} > - {cell.render("Cell")} + {cell.render('Cell')} ); })} diff --git a/src/bundle/Header.tsx b/src/bundle/Header.tsx index 99bbdb5..709ade8 100644 --- a/src/bundle/Header.tsx +++ b/src/bundle/Header.tsx @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react'; -import { primary, mainFileColor, secondaryFileColor } from "../theme"; +import {primary, mainFileColor, secondaryFileColor} from '../theme'; -import { getFileSize, getFileSizeSplit, getPercent } from "./stringFormats"; -import BarChart from "./BarChart"; -import { ProcessedImportState, SizeData } from "../types"; +import {getFileSize, getFileSizeSplit, getPercent} from './stringFormats'; +import BarChart from './BarChart'; +import {ProcessedImportState, SizeData} from '../types'; export const typeColors = { js: mainFileColor, @@ -14,7 +14,7 @@ export const typeColors = { }; const frameProps = { - margin: { top: 5, right: 50, left: 140 }, + margin: {top: 5, right: 50, left: 140}, oAccessor: (d: SizeData) => d.name, rAccessor: (d: SizeData) => d.totalBytes, oPadding: 10, @@ -24,10 +24,8 @@ const frameProps = {
@@ -39,8 +37,7 @@ const frameProps = { {o}
- {getPercent(d.pct)}{" "} - {getFileSize(r)} + {getPercent(d.pct)} {getFileSize(r)}
); @@ -50,13 +47,7 @@ const frameProps = { const directoryProps = { ...frameProps, additionalDefs: [ - + , - + , @@ -83,11 +68,11 @@ const directoryProps = { type Props = { download: JSX.Element; - rollups?: ProcessedImportState["rollups"]; + rollups?: ProcessedImportState['rollups']; }; export default function ByTypeBarChart(props: Props) { - const { rollups = {} as ProcessedImportState["rollups"], download } = props; + const {rollups = {} as ProcessedImportState['rollups'], download} = props; const totalSize = rollups.value; const types = rollups.fileTypes || []; const folders = rollups.directories || []; @@ -107,8 +92,8 @@ export default function ByTypeBarChart(props: Props) { if (fileTypes[0] && fileTypes[0].pct >= 0.6) { fileTypeMessage = ( - Your project has {fileTypes.length} file types, but it is - mostly {fileTypes[0].name} files. + Your project has {fileTypes.length} file types, but it is mostly{' '} + {fileTypes[0].name} files. ); } else { @@ -123,20 +108,19 @@ export default function ByTypeBarChart(props: Props) { const size = getFileSizeSplit(totalSize); return (
-
+

Overview

{totalSize && (

- {size.value}{" "} - {size.type} + {size.value} {size.type}

)} {download}
-
+

file types @@ -145,7 +129,7 @@ export default function ByTypeBarChart(props: Props) {

-
+

@@ -159,22 +143,17 @@ export default function ByTypeBarChart(props: Props) {

-
+

- directories + directories By Directory

- Your project is made up {directories.length} top-level - directories + Your project is made up {directories.length} top-level directories

diff --git a/src/bundle/RippleChart.tsx b/src/bundle/RippleChart.tsx index db82650..3af708e 100644 --- a/src/bundle/RippleChart.tsx +++ b/src/bundle/RippleChart.tsx @@ -1,19 +1,19 @@ -import React, { useState, useMemo } from "react"; -import { scaleSqrt, scaleLinear, ScaleLinear } from "d3-scale"; -import { primary } from "../theme"; +import React, {useState, useMemo} from 'react'; +import {scaleSqrt, scaleLinear, ScaleLinear} from 'd3-scale'; +import {primary} from '../theme'; -import { TrimmedDataNode, Imported } from "../types"; +import {TrimmedDataNode, Imported} from '../types'; type Props = { selected: string; - directoryColors: { [key: string]: string }; + directoryColors: {[key: string]: string}; max?: number; changeSelected: React.Dispatch; nodes: TrimmedDataNode[]; edges: Imported[]; }; -type InOut = "in" | "out"; +type InOut = 'in' | 'out'; const OFFSET = 150; @@ -60,21 +60,16 @@ function mapLocation( const overallArcStart = (total / circumfrence / 2) * 360; - const center = inOrOut === "in" ? 270 : 90; - const sign = inOrOut === "in" ? 1 : -1; + const center = inOrOut === 'in' ? 270 : 90; + const sign = inOrOut === 'in' ? 1 : -1; const angleScale = scaleLinear() .domain([0, total || 0]) - .range([ - center + overallArcStart * sign, - center - overallArcStart * sign, - ]), - yScale = (degrees: number, r: number) => - -Math.cos(degrees * (Math.PI / 180)) * r, - xScale = (degrees: number, r: number) => - Math.sin(degrees * (Math.PI / 180)) * r; - - const nodesWithPosition = requires.map((d) => { + .range([center + overallArcStart * sign, center - overallArcStart * sign]), + yScale = (degrees: number, r: number) => -Math.cos(degrees * (Math.PI / 180)) * r, + xScale = (degrees: number, r: number) => Math.sin(degrees * (Math.PI / 180)) * r; + + const nodesWithPosition = requires.map(d => { const degrees = angleScale(d.offset); const node: NodeWithPosition = { ...d, @@ -92,13 +87,13 @@ function mapLocation( return node; }); - return { nodesWithPosition, x: translateX, y: translateY, maxX }; + return {nodesWithPosition, x: translateX, y: translateY, maxX}; } function getPlaceCircles( - changeSelected: Props["changeSelected"], + changeSelected: Props['changeSelected'], updateHover: React.Dispatch, - directoryColors: Props["directoryColors"] + directoryColors: Props['directoryColors'] ) { const getFill = (d: TrimmedDataNode) => { return directoryColors[d.directory]; @@ -108,7 +103,7 @@ function getPlaceCircles( placeCircles: (inOrOut: InOut, files: NodeWithPosition[]) => { return files .sort((a, b) => a.r - b.r) - .map((d) => { + .map(d => { return ( {d.r > 8 && ( - + {d.fileName} )} @@ -137,18 +128,11 @@ function getPlaceCircles( } export default function RippleChart(props: Props) { - const { - edges, - nodes, - max, - selected, - directoryColors, - changeSelected, - } = props; + const {edges, nodes, max, selected, directoryColors, changeSelected} = props; const [hover, updateHover] = useState(); - const selectedNode = nodes.find((d) => d.id === selected); - const { placeCircles, getFill } = useMemo( + const selectedNode = nodes.find(d => d.id === selected); + const {placeCircles, getFill} = useMemo( () => getPlaceCircles(changeSelected, updateHover, directoryColors), [changeSelected, updateHover, directoryColors] ); @@ -172,62 +156,53 @@ export default function RippleChart(props: Props) { const radiusScale = scaleSqrt().domain([0, max]).range([0, 100]); - let usedNodes: { [key: string]: NodeWithPosition } = {}; + let usedNodes: {[key: string]: NodeWithPosition} = {}; let selectedXPos = 0; let selectedYPos = 0; let maxXPos = 0; requires = mapLocation( radiusScale, - "in", - nodes.filter((d) => selectedNode.requires.indexOf(d.id) !== -1) + 'in', + nodes.filter(d => selectedNode.requires.indexOf(d.id) !== -1) ); requiredBy = mapLocation( radiusScale, - "out", - nodes.filter((d) => selectedNode.requiredBy.indexOf(d.id) !== -1) + 'out', + nodes.filter(d => selectedNode.requiredBy.indexOf(d.id) !== -1) ); nextLevelEdges = [ - ...selectedNode.requires.map((d) => ({ imported: d, fileName: selected })), - ...selectedNode.requiredBy.map((d) => ({ + ...selectedNode.requires.map(d => ({imported: d, fileName: selected})), + ...selectedNode.requiredBy.map(d => ({ fileName: d, imported: selected, })), ]; - usedNodes = [ - ...requires.nodesWithPosition, - ...requiredBy.nodesWithPosition, - ].reduce((p: { [key: string]: NodeWithPosition }, c: NodeWithPosition) => { - p[c.id] = c; - return p; - }, {}); + usedNodes = [...requires.nodesWithPosition, ...requiredBy.nodesWithPosition].reduce( + (p: {[key: string]: NodeWithPosition}, c: NodeWithPosition) => { + p[c.id] = c; + return p; + }, + {} + ); selectedXPos = Math.max(requires.x, requiredBy.x); selectedYPos = Math.max(requires.y, requiredBy.y); maxXPos = Math.max(requires.maxX, requiredBy.maxX); const getNextLevel = (requiredByKeys: string[], level = 0) => { - const edgeLevel = edges.filter( - (d) => requiredByKeys.indexOf(d.imported) !== -1 - ); + const edgeLevel = edges.filter(d => requiredByKeys.indexOf(d.imported) !== -1); nextLevelEdges.push(...edgeLevel); - const edgeLevelKeys = edgeLevel.map((d) => d.fileName); + const edgeLevelKeys = edgeLevel.map(d => d.fileName); - const matchingNodes = nodes.filter( - (d) => edgeLevelKeys.indexOf(d.id) !== -1 && !usedNodes[d.id] - ); + const matchingNodes = nodes.filter(d => edgeLevelKeys.indexOf(d.id) !== -1 && !usedNodes[d.id]); if (matchingNodes.length > 0) { - const newNodes = mapLocation( - radiusScale, - "out", - matchingNodes, - OFFSET * (level + 2) - ); + const newNodes = mapLocation(radiusScale, 'out', matchingNodes, OFFSET * (level + 2)); - newNodes.nodesWithPosition.forEach((n) => { + newNodes.nodesWithPosition.forEach(n => { usedNodes[n.id] = n; nextLevelNodes.push(n); }); @@ -237,7 +212,7 @@ export default function RippleChart(props: Props) { maxXPos = Math.max(maxXPos, newNodes.maxX); getNextLevel( - newNodes.nodesWithPosition.map((d) => d.id), + newNodes.nodesWithPosition.map(d => d.id), level + 1 ); } @@ -262,32 +237,19 @@ export default function RippleChart(props: Props) { const primaryRadius = radiusScale(selectedNode.totalBytes); let showEdges: Imported[] = []; - let showNodes: { id: string; anchor: string }[] = []; + let showNodes: {id: string; anchor: string}[] = []; if (hover) { - showEdges = nextLevelEdges.filter( - (d) => d.imported === hover || d.fileName === hover - ); + showEdges = nextLevelEdges.filter(d => d.imported === hover || d.fileName === hover); showNodes = Object.values( - showEdges.reduce( - ( - p: { - [key: string]: { - id: string; - anchor: string; - }; - }, - c - ) => { - p[c.imported] = { - id: c.imported, - anchor: c.fileName === selected ? "end" : "start", - }; - p[c.fileName] = { id: c.fileName, anchor: "start" }; - return p; - }, - {} - ) + showEdges.reduce((p: {[key: string]: {id: string; anchor: string}}, c) => { + p[c.imported] = { + id: c.imported, + anchor: c.fileName === selected ? 'end' : 'start', + }; + p[c.fileName] = {id: c.fileName, anchor: 'start'}; + return p; + }, {}) ); } @@ -301,29 +263,23 @@ export default function RippleChart(props: Props) {

-
+
- + - + ] @@ -342,26 +298,17 @@ export default function RippleChart(props: Props) { strokeWidth={2} fill={getFill(selectedNode)} /> - {placeCircles("in", requires.nodesWithPosition)} - {placeCircles("out", requiredBy.nodesWithPosition)} - {placeCircles("out", nextLevelNodes)} + {placeCircles('in', requires.nodesWithPosition)} + {placeCircles('out', requiredBy.nodesWithPosition)} + {placeCircles('out', nextLevelNodes)} {requires.nodesWithPosition.length !== 0 && ( - {" "} - - Import{selectedNode.requires.length > 1 && "s"} + {' '} + + Import{selectedNode.requires.length > 1 && 's'} - - {selectedNode.requires.length} - {" "} - items + {selectedNode.requires.length} items )} @@ -373,10 +320,7 @@ export default function RippleChart(props: Props) { Imported - - {selectedNode.requiredBy.length} - {" "} - times + {selectedNode.requiredBy.length} times )} @@ -387,7 +331,7 @@ export default function RippleChart(props: Props) { width="100%" height="100%" fill="white" - className={`opacity-filter ${(hover && "on") || "off"}`} + className={`opacity-filter ${(hover && 'on') || 'off'}`} pointerEvents="none" /> @@ -396,7 +340,7 @@ export default function RippleChart(props: Props) { const imported = usedNodes[d.imported]; const fileName = usedNodes[d.fileName]; - const color = "black"; + const color = 'black'; return ( @@ -412,29 +356,25 @@ export default function RippleChart(props: Props) { cx={imported.x} cy={imported.y} stroke={color} - fill={"none"} + fill={'none'} /> ); })} {hover && ( - + {showNodes.map((d, i) => { const n = usedNodes[d.id]; return ( - - + + {d.id !== selected ? ( diff --git a/src/bundle/Treemap.js b/src/bundle/Treemap.js index 17ad84c..2a5d4f8 100644 --- a/src/bundle/Treemap.js +++ b/src/bundle/Treemap.js @@ -23,11 +23,11 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import React, { Fragment, useState, useMemo } from "react"; -import { stratify } from "d3-hierarchy"; -import TreemapComponent from "./TreemapComponent"; -import { getFileSize } from "./stringFormats"; -import useWindowSize from "@rehooks/window-size"; +import React, {Fragment, useState, useMemo} from 'react'; +import {stratify} from 'd3-hierarchy'; +import TreemapComponent from './TreemapComponent'; +import {getFileSize} from './stringFormats'; +import useWindowSize from '@rehooks/window-size'; function getHandleClick(changeSelected, setZoom) { return (zoomed, node) => { @@ -35,9 +35,7 @@ function getHandleClick(changeSelected, setZoom) { if (node.depth === 0) { setZoom(undefined); } - zoomed === node.data.name - ? setZoom(node.parent.data.name) - : setZoom(node.data.name); + zoomed === node.data.name ? setZoom(node.parent.data.name) : setZoom(node.data.name); } else if (node) { changeSelected(node.data.name); } @@ -48,11 +46,11 @@ const padding = [20, 2, 2, 2]; function getNodeComponent(name, bgColorsMap, zoomed, handleClick) { return (node, i, posStyle) => { const name = node.data.name; - const index = name.lastIndexOf("/"); + const index = name.lastIndexOf('/'); let fileName = name.slice(index !== -1 ? index + 1 : 0); - if (fileName === "rootNode") fileName = name; - const dirIndex = name.indexOf("/"); + if (fileName === 'rootNode') fileName = name; + const dirIndex = name.indexOf('/'); let directory = name; if (dirIndex !== -1) directory = name.slice(0, dirIndex); @@ -61,20 +59,18 @@ function getNodeComponent(name, bgColorsMap, zoomed, handleClick) { className="treemap__node" style={{ ...posStyle, - background: bgColorsMap[directory] || "white", + background: bgColorsMap[directory] || 'white', }} >
{ handleClick(zoomed, node); }} style={{ lineHeight: `${padding[0] - 2}px`, - fontWeight: node.children ? "bold" : "300", - color: "black", //textColorsMap.get(node.data.key), + fontWeight: node.children ? 'bold' : '300', + color: 'black', //textColorsMap.get(node.data.key), }} > {posStyle.height > 5 && ( @@ -99,9 +95,9 @@ function getNodeComponent(name, bgColorsMap, zoomed, handleClick) { export default function Treemap(props) { const [zoomed, setZoom] = useState(); - const { hierarchy, bgColorsMap, changeSelected, name, directories } = props; + const {hierarchy, bgColorsMap, changeSelected, name, directories} = props; - const { innerWidth, innerHeight } = useWindowSize(); + const {innerWidth, innerHeight} = useWindowSize(); const width = innerWidth - 80, height = innerHeight * 0.3; @@ -119,36 +115,35 @@ export default function Treemap(props) { .parentId(function (d) { return d.parent; })(hierarchy) - .sum((d) => d.totalBytes) + .sum(d => d.totalBytes) .sort((a, b) => b.height - a.height || b.value - a.value), [hierarchy] ); - const nodeComponent = useMemo( - () => getNodeComponent(name, bgColorsMap, zoomed, handleClick), - [name, bgColorsMap, zoomed, handleClick] - ); + const nodeComponent = useMemo(() => getNodeComponent(name, bgColorsMap, zoomed, handleClick), [ + name, + bgColorsMap, + zoomed, + handleClick, + ]); return (
-
+
{zoomed === undefined - ? "Fully zoomed out, click to zoom directories (bolded) " + ? 'Fully zoomed out, click to zoom directories (bolded) ' : tree .descendants() - .find((node) => node.data.name === zoomed) + .find(node => node.data.name === zoomed) .ancestors() .reverse() .map((node, i) => ( - {i > 0 ? " - " : ""} + {i > 0 ? ' - ' : ''}
@@ -181,10 +176,10 @@ export default function Treemap(props) {
node.data.name === zoomed) - : root; + const zoomedEl = zoomed ? root.descendants().find(node => node.data.name === zoomed) : root; if (zoomedEl.depth > 0) { const scaleX = (root.x1 - root.x0) / (zoomedEl.x1 - zoomedEl.x0); const scaleY = (root.y1 - root.y0) / (zoomedEl.y1 - zoomedEl.y0); const refPointY = zoomedEl.y0; const refPointX = zoomedEl.x0; - root.descendants().forEach((node) => { + root.descendants().forEach(node => { node.y0 = scaleY * (node.y0 - refPointY); node.y1 = scaleY * (node.y1 - refPointY); node.x0 = scaleX * (node.x0 - refPointX); @@ -67,11 +65,11 @@ function reposition(root, width, height, zoomed, padding) { }); } - zoomedEl.descendants().forEach((relativeRoot) => { + zoomedEl.descendants().forEach(relativeRoot => { relativeRoot .descendants() .slice(1) - .forEach((node) => { + .forEach(node => { let refPoint; let scale; @@ -112,22 +110,18 @@ function reposition(root, width, height, zoomed, padding) { return zoomedEl; } -export default function TreemapComponent({ - root, - zoomed, - width, - height, - padding, - nodeComponent, -}) { - const zoomedEl = useMemo( - () => reposition(root, width, height, zoomed, padding), - [root, width, height, zoomed, padding] - ); +export default function TreemapComponent({root, zoomed, width, height, padding, nodeComponent}) { + const zoomedEl = useMemo(() => reposition(root, width, height, zoomed, padding), [ + root, + width, + height, + zoomed, + padding, + ]); return zoomedEl .descendants() - .filter((node) => canDisplay(node)) + .filter(node => canDisplay(node)) .map((node, i) => ( {nodeComponent(node, i, calculatePos(node))} @@ -151,8 +145,8 @@ TreemapComponent.defaultProps = {
{node.data.key} diff --git a/src/bundle/prototype-semiotic/hierarchy.json b/src/bundle/prototype-semiotic/hierarchy.json index ccedc0c..f4946d7 100644 --- a/src/bundle/prototype-semiotic/hierarchy.json +++ b/src/bundle/prototype-semiotic/hierarchy.json @@ -1,7 +1,7 @@ [ - { "parent": "", "name": "rootNode" }, - { "name": "static", "parent": "rootNode" }, - { "name": "static/js", "parent": "static" }, + {"parent": "", "name": "rootNode"}, + {"name": "static", "parent": "rootNode"}, + {"name": "static/js", "parent": "static"}, { "name": "static/js/main.0a07234d.js", "parent": "static/js", @@ -9,7 +9,7 @@ "asSource": 0, "asTarget": 0 }, - { "name": "webpack", "parent": "rootNode" }, + {"name": "webpack", "parent": "rootNode"}, { "name": "webpack/bootstrap e8a44434f24a2947b4bc", "parent": "webpack", @@ -17,8 +17,8 @@ "asSource": 0, "asTarget": 0 }, - { "name": "node_modules", "parent": "rootNode" }, - { "name": "node_modules/prop-types", "parent": "node_modules" }, + {"name": "node_modules", "parent": "rootNode"}, + {"name": "node_modules/prop-types", "parent": "node_modules"}, { "name": "node_modules/prop-types/index.js", "parent": "node_modules/prop-types", @@ -26,7 +26,7 @@ "asSource": 595, "asTarget": 1 }, - { "name": "node_modules/react", "parent": "node_modules" }, + {"name": "node_modules/react", "parent": "node_modules"}, { "name": "node_modules/react/index.js", "parent": "node_modules/react", @@ -34,7 +34,7 @@ "asSource": 293, "asTarget": 1 }, - { "name": "components", "parent": "rootNode" }, + {"name": "components", "parent": "rootNode"}, { "name": "components/index.js", "parent": "components", @@ -42,8 +42,8 @@ "asSource": 56, "asTarget": 27 }, - { "name": "docs", "parent": "rootNode" }, - { "name": "docs/layout", "parent": "docs" }, + {"name": "docs", "parent": "rootNode"}, + {"name": "docs/layout", "parent": "docs"}, { "name": "docs/layout/DocumentComponent.js", "parent": "docs/layout", @@ -51,7 +51,7 @@ "asSource": 51, "asTarget": 5 }, - { "name": "node_modules/babel-runtime", "parent": "node_modules" }, + {"name": "node_modules/babel-runtime", "parent": "node_modules"}, { "name": "node_modules/babel-runtime/helpers", "parent": "node_modules/babel-runtime" @@ -70,7 +70,7 @@ "asSource": 45, "asTarget": 0 }, - { "name": "node_modules/classnames", "parent": "node_modules" }, + {"name": "node_modules/classnames", "parent": "node_modules"}, { "name": "node_modules/classnames/index.js", "parent": "node_modules/classnames", @@ -78,7 +78,7 @@ "asSource": 41, "asTarget": 0 }, - { "name": "node_modules/material-ui", "parent": "node_modules" }, + {"name": "node_modules/material-ui", "parent": "node_modules"}, { "name": "node_modules/material-ui/styles", "parent": "node_modules/material-ui" @@ -90,7 +90,7 @@ "asSource": 34, "asTarget": 30 }, - { "name": "docs/components", "parent": "docs" }, + {"name": "docs/components", "parent": "docs"}, { "name": "docs/components/ProcessViz.js", "parent": "docs/components", @@ -105,7 +105,7 @@ "asSource": 32, "asTarget": 1 }, - { "name": "node_modules/warning", "parent": "node_modules" }, + {"name": "node_modules/warning", "parent": "node_modules"}, { "name": "node_modules/warning/browser.js", "parent": "node_modules/warning", @@ -113,8 +113,8 @@ "asSource": 27, "asTarget": 0 }, - { "name": "node_modules/dagre", "parent": "node_modules" }, - { "name": "node_modules/dagre/lib", "parent": "node_modules/dagre" }, + {"name": "node_modules/dagre", "parent": "node_modules"}, + {"name": "node_modules/dagre/lib", "parent": "node_modules/dagre"}, { "name": "node_modules/dagre/lib/lodash.js", "parent": "node_modules/dagre/lib", @@ -165,7 +165,7 @@ "asSource": 22, "asTarget": 3 }, - { "name": "node_modules/semiotic-mark", "parent": "node_modules" }, + {"name": "node_modules/semiotic-mark", "parent": "node_modules"}, { "name": "node_modules/semiotic-mark/lib", "parent": "node_modules/semiotic-mark" @@ -177,8 +177,8 @@ "asSource": 21, "asTarget": 3 }, - { "name": "node_modules/webpack", "parent": "node_modules" }, - { "name": "node_modules/webpack/buildin", "parent": "node_modules/webpack" }, + {"name": "node_modules/webpack", "parent": "node_modules"}, + {"name": "node_modules/webpack/buildin", "parent": "node_modules/webpack"}, { "name": "node_modules/webpack/buildin/global.js", "parent": "node_modules/webpack/buildin", @@ -209,8 +209,8 @@ "asSource": 15, "asTarget": 0 }, - { "name": "node_modules/d3-time", "parent": "node_modules" }, - { "name": "node_modules/d3-time/src", "parent": "node_modules/d3-time" }, + {"name": "node_modules/d3-time", "parent": "node_modules"}, + {"name": "node_modules/d3-time/src", "parent": "node_modules/d3-time"}, { "name": "node_modules/d3-time/src/interval.js", "parent": "node_modules/d3-time/src", @@ -269,7 +269,7 @@ "asSource": 14, "asTarget": 2 }, - { "name": "node_modules/react-dom", "parent": "node_modules" }, + {"name": "node_modules/react-dom", "parent": "node_modules"}, { "name": "node_modules/react-dom/index.js", "parent": "node_modules/react-dom", @@ -302,7 +302,7 @@ "asSource": 12, "asTarget": 3 }, - { "name": "node_modules/viz-annotation", "parent": "node_modules" }, + {"name": "node_modules/viz-annotation", "parent": "node_modules"}, { "name": "node_modules/viz-annotation/lib", "parent": "node_modules/viz-annotation" @@ -314,8 +314,8 @@ "asSource": 12, "asTarget": 1 }, - { "name": "node_modules/graphlib", "parent": "node_modules" }, - { "name": "node_modules/graphlib/lib", "parent": "node_modules/graphlib" }, + {"name": "node_modules/graphlib", "parent": "node_modules"}, + {"name": "node_modules/graphlib/lib", "parent": "node_modules/graphlib"}, { "name": "node_modules/graphlib/lib/lodash.js", "parent": "node_modules/graphlib/lib", @@ -323,7 +323,7 @@ "asSource": 12, "asTarget": 1 }, - { "name": "node_modules/invariant", "parent": "node_modules" }, + {"name": "node_modules/invariant", "parent": "node_modules"}, { "name": "node_modules/invariant/browser.js", "parent": "node_modules/invariant", @@ -338,7 +338,7 @@ "asSource": 11, "asTarget": 4 }, - { "name": "node_modules/react-annotation", "parent": "node_modules" }, + {"name": "node_modules/react-annotation", "parent": "node_modules"}, { "name": "node_modules/react-annotation/lib", "parent": "node_modules/react-annotation" @@ -365,7 +365,7 @@ "asSource": 11, "asTarget": 1 }, - { "name": "node_modules/d3-selection", "parent": "node_modules" }, + {"name": "node_modules/d3-selection", "parent": "node_modules"}, { "name": "node_modules/d3-selection/src", "parent": "node_modules/d3-selection" @@ -381,7 +381,7 @@ "asSource": 11, "asTarget": 30 }, - { "name": "node_modules/d3-transition", "parent": "node_modules" }, + {"name": "node_modules/d3-transition", "parent": "node_modules"}, { "name": "node_modules/d3-transition/src", "parent": "node_modules/d3-transition" @@ -443,7 +443,7 @@ "asSource": 9, "asTarget": 0 }, - { "name": "node_modules/react-router", "parent": "node_modules" }, + {"name": "node_modules/react-router", "parent": "node_modules"}, { "name": "node_modules/react-router/node_modules", "parent": "node_modules/react-router" @@ -466,7 +466,7 @@ "asSource": 8, "asTarget": 3 }, - { "name": "node_modules/dom-helpers", "parent": "node_modules" }, + {"name": "node_modules/dom-helpers", "parent": "node_modules"}, { "name": "node_modules/dom-helpers/util", "parent": "node_modules/dom-helpers" @@ -513,8 +513,8 @@ "asSource": 7, "asTarget": 0 }, - { "name": "node_modules/d3-shape", "parent": "node_modules" }, - { "name": "node_modules/d3-shape/src", "parent": "node_modules/d3-shape" }, + {"name": "node_modules/d3-shape", "parent": "node_modules"}, + {"name": "node_modules/d3-shape/src", "parent": "node_modules/d3-shape"}, { "name": "node_modules/d3-shape/src/constant.js", "parent": "node_modules/d3-shape/src", @@ -540,8 +540,8 @@ "asSource": 7, "asTarget": 1 }, - { "name": "node_modules/d3-scale", "parent": "node_modules" }, - { "name": "node_modules/d3-scale/src", "parent": "node_modules/d3-scale" }, + {"name": "node_modules/d3-scale", "parent": "node_modules"}, + {"name": "node_modules/d3-scale/src", "parent": "node_modules/d3-scale"}, { "name": "node_modules/d3-scale/src/array.js", "parent": "node_modules/d3-scale/src", @@ -549,7 +549,7 @@ "asSource": 7, "asTarget": 0 }, - { "name": "node_modules/recompose", "parent": "node_modules" }, + {"name": "node_modules/recompose", "parent": "node_modules"}, { "name": "node_modules/recompose/pure.js", "parent": "node_modules/recompose", @@ -579,8 +579,8 @@ "asSource": 7, "asTarget": 3 }, - { "name": "node_modules/fbjs", "parent": "node_modules" }, - { "name": "node_modules/fbjs/lib", "parent": "node_modules/fbjs" }, + {"name": "node_modules/fbjs", "parent": "node_modules"}, + {"name": "node_modules/fbjs/lib", "parent": "node_modules/fbjs"}, { "name": "node_modules/fbjs/lib/emptyFunction.js", "parent": "node_modules/fbjs/lib", @@ -638,8 +638,8 @@ "asSource": 6, "asTarget": 3 }, - { "name": "node_modules/d3-array", "parent": "node_modules" }, - { "name": "node_modules/d3-array/src", "parent": "node_modules/d3-array" }, + {"name": "node_modules/d3-array", "parent": "node_modules"}, + {"name": "node_modules/d3-array/src", "parent": "node_modules/d3-array"}, { "name": "node_modules/d3-array/src/ascending.js", "parent": "node_modules/d3-array/src", @@ -647,7 +647,7 @@ "asSource": 6, "asTarget": 0 }, - { "name": "components/annotationRules", "parent": "components" }, + {"name": "components/annotationRules", "parent": "components"}, { "name": "components/annotationRules/baseRules.js", "parent": "components/annotationRules", @@ -655,8 +655,8 @@ "asSource": 6, "asTarget": 7 }, - { "name": "node_modules/d3-force", "parent": "node_modules" }, - { "name": "node_modules/d3-force/src", "parent": "node_modules/d3-force" }, + {"name": "node_modules/d3-force", "parent": "node_modules"}, + {"name": "node_modules/d3-force/src", "parent": "node_modules/d3-force"}, { "name": "node_modules/d3-force/src/constant.js", "parent": "node_modules/d3-force/src", @@ -711,7 +711,7 @@ "asSource": 5, "asTarget": 0 }, - { "name": "node_modules/keycode", "parent": "node_modules" }, + {"name": "node_modules/keycode", "parent": "node_modules"}, { "name": "node_modules/keycode/index.js", "parent": "node_modules/keycode", @@ -755,7 +755,7 @@ "asSource": 5, "asTarget": 0 }, - { "name": "components/data", "parent": "components" }, + {"name": "components/data", "parent": "components"}, { "name": "components/data/multiAccessorUtils.js", "parent": "components/data", @@ -763,7 +763,7 @@ "asSource": 5, "asTarget": 0 }, - { "name": "node_modules/d3-interpolate", "parent": "node_modules" }, + {"name": "node_modules/d3-interpolate", "parent": "node_modules"}, { "name": "node_modules/d3-interpolate/src", "parent": "node_modules/d3-interpolate" @@ -796,7 +796,7 @@ "asSource": 5, "asTarget": 19 }, - { "name": "node_modules/d3-voronoi", "parent": "node_modules" }, + {"name": "node_modules/d3-voronoi", "parent": "node_modules"}, { "name": "node_modules/d3-voronoi/src", "parent": "node_modules/d3-voronoi" @@ -808,7 +808,7 @@ "asSource": 5, "asTarget": 5 }, - { "name": "components/svg", "parent": "components" }, + {"name": "components/svg", "parent": "components"}, { "name": "components/svg/frameFunctions.js", "parent": "components/svg", @@ -823,7 +823,7 @@ "asSource": 5, "asTarget": 5 }, - { "name": "node_modules/d3-hierarchy", "parent": "node_modules" }, + {"name": "node_modules/d3-hierarchy", "parent": "node_modules"}, { "name": "node_modules/d3-hierarchy/src", "parent": "node_modules/d3-hierarchy" @@ -875,7 +875,7 @@ "asSource": 4, "asTarget": 3 }, - { "name": "node_modules/react-prism", "parent": "node_modules" }, + {"name": "node_modules/react-prism", "parent": "node_modules"}, { "name": "node_modules/react-prism/lib", "parent": "node_modules/react-prism" @@ -943,8 +943,8 @@ "asSource": 4, "asTarget": 1 }, - { "name": "node_modules/jss", "parent": "node_modules" }, - { "name": "node_modules/jss/lib", "parent": "node_modules/jss" }, + {"name": "node_modules/jss", "parent": "node_modules"}, + {"name": "node_modules/jss/lib", "parent": "node_modules/jss"}, { "name": "node_modules/jss/lib/RuleList.js", "parent": "node_modules/jss/lib", @@ -952,7 +952,7 @@ "asSource": 4, "asTarget": 4 }, - { "name": "node_modules/is-in-browser", "parent": "node_modules" }, + {"name": "node_modules/is-in-browser", "parent": "node_modules"}, { "name": "node_modules/is-in-browser/dist", "parent": "node_modules/is-in-browser" @@ -964,8 +964,8 @@ "asSource": 4, "asTarget": 0 }, - { "name": "node_modules/deepmerge", "parent": "node_modules" }, - { "name": "node_modules/deepmerge/dist", "parent": "node_modules/deepmerge" }, + {"name": "node_modules/deepmerge", "parent": "node_modules"}, + {"name": "node_modules/deepmerge/dist", "parent": "node_modules/deepmerge"}, { "name": "node_modules/deepmerge/dist/cjs.js", "parent": "node_modules/deepmerge/dist", @@ -1065,8 +1065,8 @@ "asSource": 4, "asTarget": 5 }, - { "name": "node_modules/d3-format", "parent": "node_modules" }, - { "name": "node_modules/d3-format/src", "parent": "node_modules/d3-format" }, + {"name": "node_modules/d3-format", "parent": "node_modules"}, + {"name": "node_modules/d3-format/src", "parent": "node_modules/d3-format"}, { "name": "node_modules/d3-format/src/exponent.js", "parent": "node_modules/d3-format/src", @@ -1095,7 +1095,7 @@ "asSource": 4, "asTarget": 2 }, - { "name": "components/visualizationLayerBehavior", "parent": "components" }, + {"name": "components/visualizationLayerBehavior", "parent": "components"}, { "name": "components/visualizationLayerBehavior/general.js", "parent": "components/visualizationLayerBehavior", @@ -1117,7 +1117,7 @@ "asSource": 4, "asTarget": 5 }, - { "name": "components/constants", "parent": "components" }, + {"name": "components/constants", "parent": "components"}, { "name": "components/constants/frame_props.js", "parent": "components/constants", @@ -1139,7 +1139,7 @@ "asSource": 4, "asTarget": 3 }, - { "name": "docs/example_settings", "parent": "docs" }, + {"name": "docs/example_settings", "parent": "docs"}, { "name": "docs/example_settings/orframe.js", "parent": "docs/example_settings", @@ -1161,7 +1161,7 @@ "asSource": 4, "asTarget": 14 }, - { "name": "node_modules/dagre/lib/rank", "parent": "node_modules/dagre/lib" }, + {"name": "node_modules/dagre/lib/rank", "parent": "node_modules/dagre/lib"}, { "name": "node_modules/dagre/lib/rank/util.js", "parent": "node_modules/dagre/lib/rank", @@ -1169,8 +1169,8 @@ "asSource": 4, "asTarget": 1 }, - { "name": "node_modules/@vx", "parent": "node_modules" }, - { "name": "node_modules/@vx/pattern", "parent": "node_modules/@vx" }, + {"name": "node_modules/@vx", "parent": "node_modules"}, + {"name": "node_modules/@vx/pattern", "parent": "node_modules/@vx"}, { "name": "node_modules/@vx/pattern/build", "parent": "node_modules/@vx/pattern" @@ -1186,7 +1186,7 @@ "asSource": 4, "asTarget": 2 }, - { "name": "node_modules/object-assign", "parent": "node_modules" }, + {"name": "node_modules/object-assign", "parent": "node_modules"}, { "name": "node_modules/object-assign/index.js", "parent": "node_modules/object-assign", @@ -1208,7 +1208,7 @@ "asSource": 3, "asTarget": 0 }, - { "name": "node_modules/react-router-dom", "parent": "node_modules" }, + {"name": "node_modules/react-router-dom", "parent": "node_modules"}, { "name": "node_modules/react-router-dom/node_modules", "parent": "node_modules/react-router-dom" @@ -1372,7 +1372,7 @@ "asSource": 3, "asTarget": 2 }, - { "name": "node_modules/jss/lib/rules", "parent": "node_modules/jss/lib" }, + {"name": "node_modules/jss/lib/rules", "parent": "node_modules/jss/lib"}, { "name": "node_modules/jss/lib/rules/StyleRule.js", "parent": "node_modules/jss/lib/rules", @@ -1380,7 +1380,7 @@ "asSource": 3, "asTarget": 2 }, - { "name": "node_modules/jss/lib/utils", "parent": "node_modules/jss/lib" }, + {"name": "node_modules/jss/lib/utils", "parent": "node_modules/jss/lib"}, { "name": "node_modules/jss/lib/utils/toCss.js", "parent": "node_modules/jss/lib/utils", @@ -1402,7 +1402,7 @@ "asSource": 3, "asTarget": 2 }, - { "name": "node_modules/css-vendor", "parent": "node_modules" }, + {"name": "node_modules/css-vendor", "parent": "node_modules"}, { "name": "node_modules/css-vendor/lib", "parent": "node_modules/css-vendor" @@ -1446,7 +1446,7 @@ "asSource": 3, "asTarget": 1 }, - { "name": "node_modules/react-transition-group", "parent": "node_modules" }, + {"name": "node_modules/react-transition-group", "parent": "node_modules"}, { "name": "node_modules/react-transition-group/node_modules", "parent": "node_modules/react-transition-group" @@ -1571,8 +1571,8 @@ "asSource": 3, "asTarget": 1 }, - { "name": "node_modules/d3-timer", "parent": "node_modules" }, - { "name": "node_modules/d3-timer/src", "parent": "node_modules/d3-timer" }, + {"name": "node_modules/d3-timer", "parent": "node_modules"}, + {"name": "node_modules/d3-timer/src", "parent": "node_modules/d3-timer"}, { "name": "node_modules/d3-timer/src/timer.js", "parent": "node_modules/d3-timer/src", @@ -1587,8 +1587,8 @@ "asSource": 3, "asTarget": 8 }, - { "name": "node_modules/d3-color", "parent": "node_modules" }, - { "name": "node_modules/d3-color/src", "parent": "node_modules/d3-color" }, + {"name": "node_modules/d3-color", "parent": "node_modules"}, + {"name": "node_modules/d3-color/src", "parent": "node_modules/d3-color"}, { "name": "node_modules/d3-color/src/color.js", "parent": "node_modules/d3-color/src", @@ -1610,7 +1610,7 @@ "asSource": 3, "asTarget": 0 }, - { "name": "node_modules/d3-collection", "parent": "node_modules" }, + {"name": "node_modules/d3-collection", "parent": "node_modules"}, { "name": "node_modules/d3-collection/src", "parent": "node_modules/d3-collection" @@ -1636,7 +1636,7 @@ "asSource": 3, "asTarget": 0 }, - { "name": "node_modules/d3-time-format", "parent": "node_modules" }, + {"name": "node_modules/d3-time-format", "parent": "node_modules"}, { "name": "node_modules/d3-time-format/src", "parent": "node_modules/d3-time-format" @@ -1744,7 +1744,7 @@ "asSource": 3, "asTarget": 0 }, - { "name": "node_modules/d3-quadtree", "parent": "node_modules" }, + {"name": "node_modules/d3-quadtree", "parent": "node_modules"}, { "name": "node_modules/d3-quadtree/src", "parent": "node_modules/d3-quadtree" @@ -1770,8 +1770,8 @@ "asSource": 3, "asTarget": 2 }, - { "name": "node_modules/d3-dsv", "parent": "node_modules" }, - { "name": "node_modules/d3-dsv/src", "parent": "node_modules/d3-dsv" }, + {"name": "node_modules/d3-dsv", "parent": "node_modules"}, + {"name": "node_modules/d3-dsv/src", "parent": "node_modules/d3-dsv"}, { "name": "node_modules/d3-dsv/src/dsv.js", "parent": "node_modules/d3-dsv/src", @@ -1786,7 +1786,7 @@ "asSource": 3, "asTarget": 8 }, - { "name": "docs/sampledata", "parent": "docs" }, + {"name": "docs/sampledata", "parent": "docs"}, { "name": "docs/sampledata/nyc_temp.js", "parent": "docs/sampledata", @@ -1844,8 +1844,8 @@ "asSource": 3, "asTarget": 4 }, - { "name": "node_modules/promise", "parent": "node_modules" }, - { "name": "node_modules/promise/lib", "parent": "node_modules/promise" }, + {"name": "node_modules/promise", "parent": "node_modules"}, + {"name": "node_modules/promise/lib", "parent": "node_modules/promise"}, { "name": "node_modules/promise/lib/core.js", "parent": "node_modules/promise/lib", @@ -1867,7 +1867,7 @@ "asSource": 2, "asTarget": 3 }, - { "name": "node_modules/resolve-pathname", "parent": "node_modules" }, + {"name": "node_modules/resolve-pathname", "parent": "node_modules"}, { "name": "node_modules/resolve-pathname/index.js", "parent": "node_modules/resolve-pathname", @@ -1875,7 +1875,7 @@ "asSource": 2, "asTarget": 0 }, - { "name": "node_modules/value-equal", "parent": "node_modules" }, + {"name": "node_modules/value-equal", "parent": "node_modules"}, { "name": "node_modules/value-equal/index.js", "parent": "node_modules/value-equal", @@ -1925,7 +1925,7 @@ "asSource": 2, "asTarget": 5 }, - { "name": "node_modules/path-to-regexp", "parent": "node_modules" }, + {"name": "node_modules/path-to-regexp", "parent": "node_modules"}, { "name": "node_modules/path-to-regexp/index.js", "parent": "node_modules/path-to-regexp", @@ -2080,8 +2080,8 @@ "asSource": 2, "asTarget": 0 }, - { "name": "node_modules/react-jss", "parent": "node_modules" }, - { "name": "node_modules/react-jss/lib", "parent": "node_modules/react-jss" }, + {"name": "node_modules/react-jss", "parent": "node_modules"}, + {"name": "node_modules/react-jss/lib", "parent": "node_modules/react-jss"}, { "name": "node_modules/react-jss/lib/jss.js", "parent": "node_modules/react-jss/lib", @@ -2662,7 +2662,7 @@ "asSource": 2, "asTarget": 1 }, - { "name": "node_modules/roughjs-es5", "parent": "node_modules" }, + {"name": "node_modules/roughjs-es5", "parent": "node_modules"}, { "name": "node_modules/roughjs-es5/lib", "parent": "node_modules/roughjs-es5" @@ -2713,8 +2713,8 @@ "asSource": 2, "asTarget": 9 }, - { "name": "node_modules/d3-drag", "parent": "node_modules" }, - { "name": "node_modules/d3-drag/src", "parent": "node_modules/d3-drag" }, + {"name": "node_modules/d3-drag", "parent": "node_modules"}, + {"name": "node_modules/d3-drag/src", "parent": "node_modules/d3-drag"}, { "name": "node_modules/d3-drag/src/nodrag.js", "parent": "node_modules/d3-drag/src", @@ -2757,7 +2757,7 @@ "asSource": 2, "asTarget": 3 }, - { "name": "components/canvas", "parent": "components" }, + {"name": "components/canvas", "parent": "components"}, { "name": "components/canvas/basicCanvasEffects.js", "parent": "components/canvas", @@ -2772,7 +2772,7 @@ "asSource": 2, "asTarget": 11 }, - { "name": "node_modules/d3-contour", "parent": "node_modules" }, + {"name": "node_modules/d3-contour", "parent": "node_modules"}, { "name": "node_modules/d3-contour/src", "parent": "node_modules/d3-contour" @@ -2798,7 +2798,7 @@ "asSource": 2, "asTarget": 0 }, - { "name": "node_modules/tinyqueue", "parent": "node_modules" }, + {"name": "node_modules/tinyqueue", "parent": "node_modules"}, { "name": "node_modules/tinyqueue/index.js", "parent": "node_modules/tinyqueue", @@ -2859,8 +2859,8 @@ "asSource": 2, "asTarget": 0 }, - { "name": "node_modules/bintrees", "parent": "node_modules" }, - { "name": "node_modules/bintrees/lib", "parent": "node_modules/bintrees" }, + {"name": "node_modules/bintrees", "parent": "node_modules"}, + {"name": "node_modules/bintrees/lib", "parent": "node_modules/bintrees"}, { "name": "node_modules/bintrees/lib/treebase.js", "parent": "node_modules/bintrees/lib", @@ -2910,7 +2910,7 @@ "asSource": 2, "asTarget": 3 }, - { "name": "node_modules/svg-path-bounding-box", "parent": "node_modules" }, + {"name": "node_modules/svg-path-bounding-box", "parent": "node_modules"}, { "name": "node_modules/svg-path-bounding-box/index.js", "parent": "node_modules/svg-path-bounding-box", @@ -2918,8 +2918,8 @@ "asSource": 2, "asTarget": 1 }, - { "name": "node_modules/svgpath", "parent": "node_modules" }, - { "name": "node_modules/svgpath/lib", "parent": "node_modules/svgpath" }, + {"name": "node_modules/svgpath", "parent": "node_modules"}, + {"name": "node_modules/svgpath/lib", "parent": "node_modules/svgpath"}, { "name": "node_modules/svgpath/lib/matrix.js", "parent": "node_modules/svgpath/lib", @@ -2927,7 +2927,7 @@ "asSource": 2, "asTarget": 0 }, - { "name": "components/untyped_utilities", "parent": "components" }, + {"name": "components/untyped_utilities", "parent": "components"}, { "name": "components/untyped_utilities/functions.js", "parent": "components/untyped_utilities", @@ -2942,7 +2942,7 @@ "asSource": 2, "asTarget": 4 }, - { "name": "node_modules/d3-glyphedge", "parent": "node_modules" }, + {"name": "node_modules/d3-glyphedge", "parent": "node_modules"}, { "name": "node_modules/d3-glyphedge/build", "parent": "node_modules/d3-glyphedge" @@ -2954,7 +2954,7 @@ "asSource": 2, "asTarget": 0 }, - { "name": "node_modules/d3-sankey-circular", "parent": "node_modules" }, + {"name": "node_modules/d3-sankey-circular", "parent": "node_modules"}, { "name": "node_modules/d3-sankey-circular/dist", "parent": "node_modules/d3-sankey-circular" @@ -2966,8 +2966,8 @@ "asSource": 2, "asTarget": 1 }, - { "name": "node_modules/d3-chord", "parent": "node_modules" }, - { "name": "node_modules/d3-chord/src", "parent": "node_modules/d3-chord" }, + {"name": "node_modules/d3-chord", "parent": "node_modules"}, + {"name": "node_modules/d3-chord/src", "parent": "node_modules/d3-chord"}, { "name": "node_modules/d3-chord/src/math.js", "parent": "node_modules/d3-chord/src", @@ -3073,8 +3073,8 @@ "asSource": 2, "asTarget": 5 }, - { "name": "node_modules/d3-sankey", "parent": "node_modules" }, - { "name": "node_modules/d3-sankey/src", "parent": "node_modules/d3-sankey" }, + {"name": "node_modules/d3-sankey", "parent": "node_modules"}, + {"name": "node_modules/d3-sankey/src", "parent": "node_modules/d3-sankey"}, { "name": "node_modules/d3-sankey/src/align.js", "parent": "node_modules/d3-sankey/src", @@ -3233,8 +3233,8 @@ "asSource": 2, "asTarget": 0 }, - { "name": "node_modules/d3-random", "parent": "node_modules" }, - { "name": "node_modules/d3-random/src", "parent": "node_modules/d3-random" }, + {"name": "node_modules/d3-random", "parent": "node_modules"}, + {"name": "node_modules/d3-random/src", "parent": "node_modules/d3-random"}, { "name": "node_modules/d3-random/src/normal.js", "parent": "node_modules/d3-random/src", @@ -3263,7 +3263,7 @@ "asSource": 2, "asTarget": 1 }, - { "name": "node_modules/lodash", "parent": "node_modules" }, + {"name": "node_modules/lodash", "parent": "node_modules"}, { "name": "node_modules/lodash/debounce.js", "parent": "node_modules/lodash", @@ -3292,7 +3292,7 @@ "asSource": 2, "asTarget": 1 }, - { "name": "node_modules/react-event-listener", "parent": "node_modules" }, + {"name": "node_modules/react-event-listener", "parent": "node_modules"}, { "name": "node_modules/react-event-listener/dist", "parent": "node_modules/react-event-listener" @@ -3304,8 +3304,8 @@ "asSource": 2, "asTarget": 11 }, - { "name": "node_modules/@babel", "parent": "node_modules" }, - { "name": "node_modules/@babel/runtime", "parent": "node_modules/@babel" }, + {"name": "node_modules/@babel", "parent": "node_modules"}, + {"name": "node_modules/@babel/runtime", "parent": "node_modules/@babel"}, { "name": "node_modules/@babel/runtime/helpers", "parent": "node_modules/@babel/runtime" @@ -3435,7 +3435,7 @@ "asSource": 2, "asTarget": 0 }, - { "name": "config", "parent": "rootNode" }, + {"name": "config", "parent": "rootNode"}, { "name": "config/polyfills.js", "parent": "config", @@ -3450,7 +3450,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/asap", "parent": "node_modules" }, + {"name": "node_modules/asap", "parent": "node_modules"}, { "name": "node_modules/asap/browser-raw.js", "parent": "node_modules/asap", @@ -3465,7 +3465,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/whatwg-fetch", "parent": "node_modules" }, + {"name": "node_modules/whatwg-fetch", "parent": "node_modules"}, { "name": "node_modules/whatwg-fetch/fetch.js", "parent": "node_modules/whatwg-fetch", @@ -3480,7 +3480,7 @@ "asSource": 1, "asTarget": 3 }, - { "name": "node_modules/react/cjs", "parent": "node_modules/react" }, + {"name": "node_modules/react/cjs", "parent": "node_modules/react"}, { "name": "node_modules/react/cjs/react.production.min.js", "parent": "node_modules/react/cjs", @@ -3488,7 +3488,7 @@ "asSource": 1, "asTarget": 3 }, - { "name": "node_modules/react-dom/cjs", "parent": "node_modules/react-dom" }, + {"name": "node_modules/react-dom/cjs", "parent": "node_modules/react-dom"}, { "name": "node_modules/react-dom/cjs/react-dom.production.min.js", "parent": "node_modules/react-dom/cjs", @@ -4192,7 +4192,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/hoist-non-react-statics", "parent": "node_modules" }, + {"name": "node_modules/hoist-non-react-statics", "parent": "node_modules"}, { "name": "node_modules/hoist-non-react-statics/index.js", "parent": "node_modules/hoist-non-react-statics", @@ -4260,7 +4260,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/jss/lib/plugins", "parent": "node_modules/jss/lib" }, + {"name": "node_modules/jss/lib/plugins", "parent": "node_modules/jss/lib"}, { "name": "node_modules/jss/lib/plugins/rules.js", "parent": "node_modules/jss/lib/plugins", @@ -4293,7 +4293,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/jss-preset-default", "parent": "node_modules" }, + {"name": "node_modules/jss-preset-default", "parent": "node_modules"}, { "name": "node_modules/jss-preset-default/lib", "parent": "node_modules/jss-preset-default" @@ -4305,7 +4305,7 @@ "asSource": 1, "asTarget": 9 }, - { "name": "node_modules/jss-extend", "parent": "node_modules" }, + {"name": "node_modules/jss-extend", "parent": "node_modules"}, { "name": "node_modules/jss-extend/lib", "parent": "node_modules/jss-extend" @@ -4317,7 +4317,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/jss-nested", "parent": "node_modules" }, + {"name": "node_modules/jss-nested", "parent": "node_modules"}, { "name": "node_modules/jss-nested/lib", "parent": "node_modules/jss-nested" @@ -4329,7 +4329,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/jss-camel-case", "parent": "node_modules" }, + {"name": "node_modules/jss-camel-case", "parent": "node_modules"}, { "name": "node_modules/jss-camel-case/lib", "parent": "node_modules/jss-camel-case" @@ -4341,7 +4341,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/jss-default-unit", "parent": "node_modules" }, + {"name": "node_modules/jss-default-unit", "parent": "node_modules"}, { "name": "node_modules/jss-default-unit/lib", "parent": "node_modules/jss-default-unit" @@ -4360,7 +4360,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/jss-vendor-prefixer", "parent": "node_modules" }, + {"name": "node_modules/jss-vendor-prefixer", "parent": "node_modules"}, { "name": "node_modules/jss-vendor-prefixer/lib", "parent": "node_modules/jss-vendor-prefixer" @@ -4400,7 +4400,7 @@ "asSource": 1, "asTarget": 2 }, - { "name": "node_modules/jss-props-sort", "parent": "node_modules" }, + {"name": "node_modules/jss-props-sort", "parent": "node_modules"}, { "name": "node_modules/jss-props-sort/lib", "parent": "node_modules/jss-props-sort" @@ -4412,7 +4412,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/jss-compose", "parent": "node_modules" }, + {"name": "node_modules/jss-compose", "parent": "node_modules"}, { "name": "node_modules/jss-compose/lib", "parent": "node_modules/jss-compose" @@ -4424,7 +4424,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/jss-expand", "parent": "node_modules" }, + {"name": "node_modules/jss-expand", "parent": "node_modules"}, { "name": "node_modules/jss-expand/lib", "parent": "node_modules/jss-expand" @@ -4443,7 +4443,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/jss-global", "parent": "node_modules" }, + {"name": "node_modules/jss-global", "parent": "node_modules"}, { "name": "node_modules/jss-global/lib", "parent": "node_modules/jss-global" @@ -4706,7 +4706,7 @@ "asSource": 1, "asTarget": 3 }, - { "name": "components/annotationLayerBehavior", "parent": "components" }, + {"name": "components/annotationLayerBehavior", "parent": "components"}, { "name": "components/annotationLayerBehavior/annotationHandling.js", "parent": "components/annotationLayerBehavior", @@ -4753,8 +4753,8 @@ "asSource": 1, "asTarget": 3 }, - { "name": "node_modules/d3-path", "parent": "node_modules" }, - { "name": "node_modules/d3-path/src", "parent": "node_modules/d3-path" }, + {"name": "node_modules/d3-path", "parent": "node_modules"}, + {"name": "node_modules/d3-path/src", "parent": "node_modules/d3-path"}, { "name": "node_modules/d3-path/src/path.js", "parent": "node_modules/d3-path/src", @@ -4990,8 +4990,8 @@ "asSource": 1, "asTarget": 2 }, - { "name": "node_modules/labella", "parent": "node_modules" }, - { "name": "node_modules/labella/dist", "parent": "node_modules/labella" }, + {"name": "node_modules/labella", "parent": "node_modules"}, + {"name": "node_modules/labella/dist", "parent": "node_modules/labella"}, { "name": "node_modules/labella/dist/labella.min.js", "parent": "node_modules/labella/dist", @@ -5374,7 +5374,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/d3-dispatch", "parent": "node_modules" }, + {"name": "node_modules/d3-dispatch", "parent": "node_modules"}, { "name": "node_modules/d3-dispatch/src", "parent": "node_modules/d3-dispatch" @@ -5607,8 +5607,8 @@ "asSource": 1, "asTarget": 2 }, - { "name": "node_modules/d3-ease", "parent": "node_modules" }, - { "name": "node_modules/d3-ease/src", "parent": "node_modules/d3-ease" }, + {"name": "node_modules/d3-ease", "parent": "node_modules"}, + {"name": "node_modules/d3-ease/src", "parent": "node_modules/d3-ease"}, { "name": "node_modules/d3-ease/src/cubic.js", "parent": "node_modules/d3-ease/src", @@ -5991,7 +5991,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/regenerator-runtime", "parent": "node_modules" }, + {"name": "node_modules/regenerator-runtime", "parent": "node_modules"}, { "name": "node_modules/regenerator-runtime/runtime-module.js", "parent": "node_modules/regenerator-runtime", @@ -6045,8 +6045,8 @@ "asSource": 1, "asTarget": 2 }, - { "name": "node_modules/json2csv", "parent": "node_modules" }, - { "name": "node_modules/json2csv/lib", "parent": "node_modules/json2csv" }, + {"name": "node_modules/json2csv", "parent": "node_modules"}, + {"name": "node_modules/json2csv/lib", "parent": "node_modules/json2csv"}, { "name": "node_modules/json2csv/lib/json2csv.js", "parent": "node_modules/json2csv/lib", @@ -6054,7 +6054,7 @@ "asSource": 1, "asTarget": 8 }, - { "name": "node_modules/node-libs-browser", "parent": "node_modules" }, + {"name": "node_modules/node-libs-browser", "parent": "node_modules"}, { "name": "node_modules/node-libs-browser/node_modules", "parent": "node_modules/node-libs-browser" @@ -6070,7 +6070,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/os-browserify", "parent": "node_modules" }, + {"name": "node_modules/os-browserify", "parent": "node_modules"}, { "name": "node_modules/os-browserify/browser.js", "parent": "node_modules/os-browserify", @@ -6078,7 +6078,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/lodash.get", "parent": "node_modules" }, + {"name": "node_modules/lodash.get", "parent": "node_modules"}, { "name": "node_modules/lodash.get/index.js", "parent": "node_modules/lodash.get", @@ -6086,7 +6086,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/lodash.flatten", "parent": "node_modules" }, + {"name": "node_modules/lodash.flatten", "parent": "node_modules"}, { "name": "node_modules/lodash.flatten/index.js", "parent": "node_modules/lodash.flatten", @@ -6094,7 +6094,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/lodash.uniq", "parent": "node_modules" }, + {"name": "node_modules/lodash.uniq", "parent": "node_modules"}, { "name": "node_modules/lodash.uniq/index.js", "parent": "node_modules/lodash.uniq", @@ -6102,7 +6102,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/lodash.set", "parent": "node_modules" }, + {"name": "node_modules/lodash.set", "parent": "node_modules"}, { "name": "node_modules/lodash.set/index.js", "parent": "node_modules/lodash.set", @@ -6110,7 +6110,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/lodash.clonedeep", "parent": "node_modules" }, + {"name": "node_modules/lodash.clonedeep", "parent": "node_modules"}, { "name": "node_modules/lodash.clonedeep/index.js", "parent": "node_modules/lodash.clonedeep", @@ -6118,7 +6118,7 @@ "asSource": 1, "asTarget": 2 }, - { "name": "node_modules/flat", "parent": "node_modules" }, + {"name": "node_modules/flat", "parent": "node_modules"}, { "name": "node_modules/flat/index.js", "parent": "node_modules/flat", @@ -6126,7 +6126,7 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/is-buffer", "parent": "node_modules" }, + {"name": "node_modules/is-buffer", "parent": "node_modules"}, { "name": "node_modules/is-buffer/index.js", "parent": "node_modules/is-buffer", @@ -6134,8 +6134,8 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/d3-brush", "parent": "node_modules" }, - { "name": "node_modules/d3-brush/src", "parent": "node_modules/d3-brush" }, + {"name": "node_modules/d3-brush", "parent": "node_modules"}, + {"name": "node_modules/d3-brush/src", "parent": "node_modules/d3-brush"}, { "name": "node_modules/d3-brush/src/brush.js", "parent": "node_modules/d3-brush/src", @@ -6255,7 +6255,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/@mapbox", "parent": "node_modules" }, + {"name": "node_modules/@mapbox", "parent": "node_modules"}, { "name": "node_modules/@mapbox/polylabel", "parent": "node_modules/@mapbox" @@ -6267,8 +6267,8 @@ "asSource": 1, "asTarget": 1 }, - { "name": "node_modules/d3-hexbin", "parent": "node_modules" }, - { "name": "node_modules/d3-hexbin/src", "parent": "node_modules/d3-hexbin" }, + {"name": "node_modules/d3-hexbin", "parent": "node_modules"}, + {"name": "node_modules/d3-hexbin/src", "parent": "node_modules/d3-hexbin"}, { "name": "node_modules/d3-hexbin/src/hexbin.js", "parent": "node_modules/d3-hexbin/src", @@ -6497,7 +6497,7 @@ "asSource": 1, "asTarget": 4 }, - { "name": "node_modules/d3-polygon", "parent": "node_modules" }, + {"name": "node_modules/d3-polygon", "parent": "node_modules"}, { "name": "node_modules/d3-polygon/src", "parent": "node_modules/d3-polygon" @@ -6544,7 +6544,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/polygon-offset", "parent": "node_modules" }, + {"name": "node_modules/polygon-offset", "parent": "node_modules"}, { "name": "node_modules/polygon-offset/src", "parent": "node_modules/polygon-offset" @@ -6893,7 +6893,7 @@ "asSource": 1, "asTarget": 4 }, - { "name": "node_modules/d3-bboxCollide", "parent": "node_modules" }, + {"name": "node_modules/d3-bboxCollide", "parent": "node_modules"}, { "name": "node_modules/d3-bboxCollide/build", "parent": "node_modules/d3-bboxCollide" @@ -6975,7 +6975,7 @@ "asSource": 1, "asTarget": 3 }, - { "name": "node_modules/memoize-one", "parent": "node_modules" }, + {"name": "node_modules/memoize-one", "parent": "node_modules"}, { "name": "node_modules/memoize-one/dist", "parent": "node_modules/memoize-one" @@ -6994,7 +6994,7 @@ "asSource": 1, "asTarget": 2 }, - { "name": "components/vendor", "parent": "components" }, + {"name": "components/vendor", "parent": "components"}, { "name": "components/vendor/element-resize-event.js", "parent": "components/vendor", @@ -7129,8 +7129,8 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/dentist", "parent": "node_modules" }, - { "name": "node_modules/dentist/dist", "parent": "node_modules/dentist" }, + {"name": "node_modules/dentist", "parent": "node_modules"}, + {"name": "node_modules/dentist/dist", "parent": "node_modules/dentist"}, { "name": "node_modules/dentist/dist/index.js", "parent": "node_modules/dentist/dist", @@ -7138,7 +7138,7 @@ "asSource": 1, "asTarget": 0 }, - { "name": "node_modules/material-ui-icons", "parent": "node_modules" }, + {"name": "node_modules/material-ui-icons", "parent": "node_modules"}, { "name": "node_modules/material-ui-icons/Code.js", "parent": "node_modules/material-ui-icons", @@ -7677,8 +7677,8 @@ "asSource": 1, "asTarget": 11 }, - { "name": "node_modules/brcast", "parent": "node_modules" }, - { "name": "node_modules/brcast/dist", "parent": "node_modules/brcast" }, + {"name": "node_modules/brcast", "parent": "node_modules"}, + {"name": "node_modules/brcast/dist", "parent": "node_modules/brcast"}, { "name": "node_modules/brcast/dist/brcast.es.js", "parent": "node_modules/brcast/dist", @@ -8040,7 +8040,7 @@ "asSource": 1, "asTarget": 3 }, - { "name": "node_modules/dagre/lib/data", "parent": "node_modules/dagre/lib" }, + {"name": "node_modules/dagre/lib/data", "parent": "node_modules/dagre/lib"}, { "name": "node_modules/dagre/lib/data/list.js", "parent": "node_modules/dagre/lib/data", @@ -8453,7 +8453,7 @@ "asSource": 1, "asTarget": 12 }, - { "name": "node_modules/react-tap-event-plugin", "parent": "node_modules" }, + {"name": "node_modules/react-tap-event-plugin", "parent": "node_modules"}, { "name": "node_modules/react-tap-event-plugin/src", "parent": "node_modules/react-tap-event-plugin" diff --git a/src/bundle/stringFormats.js b/src/bundle/stringFormats.js index 5fe018c..e4d0b6e 100644 --- a/src/bundle/stringFormats.js +++ b/src/bundle/stringFormats.js @@ -2,49 +2,49 @@ const mb = 1024 * 1024; const kb = 1024; export function getFileSizeSplit(size) { - if (!size || size === 0) return { size: 0, type: "KB" }; + if (!size || size === 0) return {size: 0, type: 'KB'}; let value = size && size >= mb ? size / mb : size / kb; if (value < 1 || size >= mb) value = value.toFixed(2); else value = value.toFixed(0); - return { value, type: size >= mb ? "MB" : "KB" }; + return {value, type: size >= mb ? 'MB' : 'KB'}; } export function getFileSize(size) { - const { value, type } = getFileSizeSplit(size); + const {value, type} = getFileSizeSplit(size); return `${value} ${type}`; } export const getPercent = (size, total) => { - if (size === 1) return "100%"; + if (size === 1) return '100%'; let rounded = size <= 1 ? size * 100 : (size / total) * 100; - if (rounded < 0.1) rounded = "<.1"; + if (rounded < 0.1) rounded = '<.1'; else if (rounded >= 99.5) rounded = rounded.toFixed(1); else if (rounded < 1) rounded = rounded.toFixed(1); else rounded = rounded.toFixed(0); - rounded = rounded + "%"; + rounded = rounded + '%'; - if (rounded === "1.0%") rounded = "1%"; - if (rounded.slice(0, 2) === "0.") rounded = rounded.slice(1); + if (rounded === '1.0%') rounded = '1%'; + if (rounded.slice(0, 2) === '0.') rounded = rounded.slice(1); return rounded; }; export const getCSSPercent = (size, total) => { - if (size === 1) return "100%"; + if (size === 1) return '100%'; let rounded = size <= 1 ? size * 100 : (size / total) * 100; - if (rounded < 0.1) rounded = ".1"; + if (rounded < 0.1) rounded = '.1'; else if (rounded >= 99.5) rounded = rounded.toFixed(1); else if (rounded < 1) rounded = rounded.toFixed(1); else rounded = rounded.toFixed(0); - rounded = rounded + "%"; + rounded = rounded + '%'; - if (rounded === "1.0%") rounded = "1%"; - if (rounded.slice(0, 2) === "0.") rounded = rounded.slice(1); + if (rounded === '1.0%') rounded = '1%'; + if (rounded.slice(0, 2) === '0.') rounded = rounded.slice(1); return rounded; }; diff --git a/src/home/Home.tsx b/src/home/Home.tsx index 4888b84..761d723 100644 --- a/src/home/Home.tsx +++ b/src/home/Home.tsx @@ -1,11 +1,11 @@ -import { Route, Switch } from "react-router-dom"; -import React from "react"; -import Resolve from "../resolve/Resolve"; -import { ImportResolveState, ImportHistory, ImportTypes } from "../types"; -import Importer from "../import/Importer"; -import ImportSelector from "../import/ImportSelector"; +import {Route, Switch} from 'react-router-dom'; +import React from 'react'; +import Resolve from '../resolve/Resolve'; +import {ImportResolveState, ImportHistory, ImportTypes} from '../types'; +import Importer from '../import/Importer'; +import ImportSelector from '../import/ImportSelector'; -import "./home.css"; +import './home.css'; interface Props extends ImportResolveState { history: ImportHistory; @@ -22,11 +22,11 @@ export default function Home(props: Props) { return (
-
+

Bundle Buddy

@@ -34,18 +34,16 @@ export default function Home(props: Props) {

- - Visualizing what code is in your web bundle, and how it got there. - + Visualizing what code is in your web bundle, and how it got there.

-
+

Step 1

@@ -55,15 +53,13 @@ export default function Home(props: Props) {
-
+

Step 2

@@ -77,7 +73,7 @@ export default function Home(props: Props) { { + component={(h: {history: History}) => { return ( { + component={(h: {history: History}) => { return ( { + component={(h: {history: History}) => { return ( { + component={(h: {history: History}) => { return ( { + component={(h: {history: History}) => { return ( { + component={(h: {history: History}) => { return (
{graphEdges && ( -
+

Step 3

diff --git a/src/import/ImportSelector.tsx b/src/import/ImportSelector.tsx index c5dfc2f..d079791 100644 --- a/src/import/ImportSelector.tsx +++ b/src/import/ImportSelector.tsx @@ -1,15 +1,15 @@ -import * as pako from "pako"; -import React, { Component } from "react"; -import { readFileAsText, readFileAsBinary } from "./file_reader"; -import { NavLink as Link } from "react-router-dom"; -import { ImportHistory } from "../types"; -import { storeProcessedState } from "../routes"; +import * as pako from 'pako'; +import React, {Component} from 'react'; +import {readFileAsText, readFileAsBinary} from './file_reader'; +import {NavLink as Link} from 'react-router-dom'; +import {ImportHistory} from '../types'; +import {storeProcessedState} from '../routes'; // noopener noreferrer -class ImportSelector extends Component<{ history: ImportHistory }> { - existingImportInput: React.RefObject; +class ImportSelector extends Component<{history: ImportHistory}> { + existingImportInput: React.RefObject; - constructor(props: { history: ImportHistory }) { + constructor(props: {history: ImportHistory}) { super(props); this.existingImportInput = React.createRef(); } @@ -23,7 +23,7 @@ class ImportSelector extends Component<{ history: ImportHistory }> { const contents = await readFileAsBinary(file); const inflated = pako.inflate(contents); const previousState = JSON.parse(new TextDecoder().decode(inflated)); - this.props.history.push("/bundle", storeProcessedState(previousState)); + this.props.history.push('/bundle', storeProcessedState(previousState)); } state: never; @@ -32,17 +32,9 @@ class ImportSelector extends Component<{ history: ImportHistory }> { return (
-
- - - - - + - + - +
- {" "} + {' '}

Or, using npm, in your project directory run: 

-                
-                  GENERATE_SOURCEMAP=true npm run build -- --stats
-                
+                GENERATE_SOURCEMAP=true npm run build -- --stats
@@ -487,16 +448,12 @@ buildEnd() { {
@@ -526,15 +483,15 @@ buildEnd() { { diff --git a/src/index.css b/src/index.css index c95cca3..f51a18a 100644 --- a/src/index.css +++ b/src/index.css @@ -109,8 +109,8 @@ body, button { - font-family: "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-family: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { @@ -493,7 +493,7 @@ code { background: #bcffcf; } -input[type="file"] { +input[type='file'] { position: absolute; top: 0; left: 0; @@ -504,7 +504,7 @@ input[type="file"] { opacity: 0; } -input[type="file"]::-webkit-file-upload-button { +input[type='file']::-webkit-file-upload-button { visibility: hidden; } diff --git a/src/index.tsx b/src/index.tsx index 03c0bfd..9ecbf46 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,16 +1,16 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; -import * as serviceWorker from "./serviceWorker"; -import "./index.css"; +import * as serviceWorker from './serviceWorker'; +import './index.css'; -const rootEl = document.getElementById("root"); +const rootEl = document.getElementById('root'); ReactDOM.render(, rootEl); if (module.hot) { - module.hot.accept("./App", () => { - const NextApp = require("./App").default; + module.hot.accept('./App', () => { + const NextApp = require('./App').default; ReactDOM.render(, rootEl); }); } diff --git a/src/resolve/Resolve.tsx b/src/resolve/Resolve.tsx index 4eebc76..8e389bc 100644 --- a/src/resolve/Resolve.tsx +++ b/src/resolve/Resolve.tsx @@ -1,8 +1,8 @@ -import React, { Component } from "react"; -import { transform } from "./process"; -import { ResolveProps, GraphEdges, ProcessedBundle } from "../types"; -import { findTrims } from "./trim"; -import { storeProcessedState, storeResolveState } from "../routes"; +import React, {Component} from 'react'; +import {transform} from './process'; +import {ResolveProps, GraphEdges, ProcessedBundle} from '../types'; +import {findTrims} from './trim'; +import {storeProcessedState, storeResolveState} from '../routes'; // noopener noreferrer @@ -33,7 +33,7 @@ function transformGraphNames( graphTransform: (v: string) => string, trims: string[] ): GraphEdges { - return nodes.map((n) => { + return nodes.map(n => { n.source = graphTransform(trimClean(trims, n.source)); if (n.target != null) { n.target = graphTransform(trimClean(trims, n.target)); @@ -53,8 +53,7 @@ function transformSourceMapNames( }; for (const fileName of Object.keys(sourcemap.files)) { - ret.files[sourcemapTransform(trimClean(trims, fileName))] = - sourcemap.files[fileName]; + ret.files[sourcemapTransform(trimClean(trims, fileName))] = sourcemap.files[fileName]; } return ret; @@ -85,14 +84,14 @@ function trimClean(trims: string[], word: string) { function autoclean(opts: { processedSourceMap: ProcessedBundle; graphEdges: GraphEdges; -}): { sourceMapFiles: string[]; graphFiles: string[]; trims: string[] } { +}): {sourceMapFiles: string[]; graphFiles: string[]; trims: string[]} { const sourceMapFiles = Object.keys(opts.processedSourceMap.files); const graphFiles = getGraphFiles(opts.graphEdges); const trims = Object.keys(findTrims(sourceMapFiles, graphFiles)); return { - sourceMapFiles: sourceMapFiles.map((v) => trimClean(trims, v)), - graphFiles: graphFiles.map((v) => trimClean(trims, v)), + sourceMapFiles: sourceMapFiles.map(v => trimClean(trims, v)), + graphFiles: graphFiles.map(v => trimClean(trims, v)), trims, }; } @@ -109,7 +108,7 @@ class Resolve extends Component { this.sourceMapTransformRef = React.createRef(); this.sourceGraphTransformRef = React.createRef(); - const { sourceMapFiles, graphFiles, trims } = autoclean({ + const {sourceMapFiles, graphFiles, trims} = autoclean({ processedSourceMap: this.props.processedBundle, graphEdges: this.props.graphEdges, }); @@ -119,13 +118,11 @@ class Resolve extends Component { graphFiles, transforms: { sourceMapFileTransform: - (props.sourceMapFileTransform && - toFunctionRef(props.sourceMapFileTransform)) || - ((fileName) => fileName), + (props.sourceMapFileTransform && toFunctionRef(props.sourceMapFileTransform)) || + (fileName => fileName), graphFileTransform: - (props.graphFileTransform && - toFunctionRef(props.graphFileTransform)) || - ((fileName) => fileName), + (props.graphFileTransform && toFunctionRef(props.graphFileTransform)) || + (fileName => fileName), }, }; } @@ -141,10 +138,10 @@ class Resolve extends Component { b: Array, aTransform: (v: T) => T, bTransform: (v: T) => T - ): { files: T[]; lastError: undefined | Error } { + ): {files: T[]; lastError: undefined | Error} { let lastError: Error | undefined = undefined; const setA = new Set( - a.map((v) => { + a.map(v => { try { return aTransform(v); } catch (e) { @@ -154,7 +151,7 @@ class Resolve extends Component { }) ); const setB = new Set( - b.map((v) => { + b.map(v => { try { return bTransform(v); } catch (e) { @@ -178,13 +175,8 @@ class Resolve extends Component { } updateSourceMapTransform() { - if ( - this.sourceMapTransformRef != null && - this.sourceMapTransformRef.current != null - ) { - const transformRef = toFunctionRef( - this.sourceMapTransformRef.current.value - ); + if (this.sourceMapTransformRef != null && this.sourceMapTransformRef.current != null) { + const transformRef = toFunctionRef(this.sourceMapTransformRef.current.value); if (transformRef == null) { return; } @@ -208,13 +200,8 @@ class Resolve extends Component { } updateGraphSourceTransform() { - if ( - this.sourceGraphTransformRef != null && - this.sourceGraphTransformRef.current != null - ) { - const transformRef = toFunctionRef( - this.sourceGraphTransformRef.current.value - ); + if (this.sourceGraphTransformRef != null && this.sourceGraphTransformRef.current != null) { + const transformRef = toFunctionRef(this.sourceGraphTransformRef.current.value); if (transformRef == null) { return; } @@ -239,7 +226,7 @@ class Resolve extends Component { import() { if (this.props.graphEdges == null || this.props.processedBundle == null) { - throw new Error("Unable to find graph edges or sourcemap data"); + throw new Error('Unable to find graph edges or sourcemap data'); } const processed = transform( @@ -256,7 +243,7 @@ class Resolve extends Component { this.state.sourceMapFiles ); - this.props.history.push("/bundle", storeProcessedState(processed)); + this.props.history.push('/bundle', storeProcessedState(processed)); } formatError(e: Error) { @@ -286,20 +273,13 @@ ${e.stack}`;

Resolve source map files:

{sourceMapTransformed.lastError != null ? ( -
- {this.formatError(sourceMapTransformed.lastError)} -
+
{this.formatError(sourceMapTransformed.lastError)}
) : null} - + {sourceMapTransformed.files.length} - {" "} - source map files of {this.state.sourceMapFiles.length} total need - resolving + {' '} + source map files of {this.state.sourceMapFiles.length} total need resolving
- {column.render("Header")} + {column.render('Header')} {(column as any).isSorted ? ( (column as any).isSortedDesc ? ( @@ -279,7 +262,7 @@ export default function FileDetails(props: Props) { ) ) : ( - "" + '' )}