diff --git a/frontend/package.json b/frontend/package.json index ab1ce29..f1476e6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,7 +27,7 @@ "react": "18.1.0", "react-dom": "18.1.0", "react-router-dom": "6", - "treemap": "./treemaps" + "treemap-renderer": "./treemap-renderer" }, "devDependencies": { "@octokit/types": "^6.38.1", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 415b562..7aa609f 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -44,9 +44,9 @@ importers: react-router-dom: specifier: '6' version: 6.28.0(react-dom@18.1.0(react@18.1.0))(react@18.1.0) - treemap: - specifier: ./treemaps - version: link:treemaps + treemap-renderer: + specifier: ./treemap-renderer + version: link:treemap-renderer devDependencies: '@octokit/types': specifier: ^6.38.1 diff --git a/frontend/src/components/Metrics.tsx b/frontend/src/components/Metrics.tsx index 219e384..a19df2d 100644 --- a/frontend/src/components/Metrics.tsx +++ b/frontend/src/components/Metrics.tsx @@ -37,7 +37,7 @@ export default function Metrics({ try { const [metricsBlob] = await getMetricsBlob(owner, repo, commitSHA); const parsedData = parseMetrics(metricsBlob.content); - console.log("parsedData:", parsedData); + // console.log("parsedData:", parsedData); setData(parsedData); setSize(metricsBlob.size); } catch (e) { diff --git a/frontend/src/components/Repo.tsx b/frontend/src/components/Repo.tsx index 4a86a63..92c16f3 100644 --- a/frontend/src/components/Repo.tsx +++ b/frontend/src/components/Repo.tsx @@ -33,10 +33,10 @@ export default function Repo({ owner, repo }: RepoParams) { useEffect(() => { async function fetchData() { const branches = await getBranches(owner, repo); - console.log(branches); + // console.log(branches); setBranches(branches); const refs = await getMetricCommits(owner, repo); - console.log(refs); + // console.log(refs); setRefs(refs); } fetchData(); diff --git a/frontend/src/components/Treemap.tsx b/frontend/src/components/Treemap.tsx index 0a3c73b..9e75ce6 100644 --- a/frontend/src/components/Treemap.tsx +++ b/frontend/src/components/Treemap.tsx @@ -8,7 +8,7 @@ import { Configuration, Visualization, Renderer, -} from "treemap"; +} from "treemap-renderer"; export default function Treemap({ header, rows }: MetricsTableData) { const fileTree = createFileTree(rows); @@ -31,19 +31,19 @@ export default function Treemap({ header, rows }: MetricsTableData) { canvas.dispose(); // canvas.frameScale = [ 1.0, 1.0 ]; canvas.renderer = visualization.renderer as Renderer; - console.log("cfg:", config); + // console.log("cfg:", config); loadConfig(); //debugInit(); }, []); function loadConfig() { - console.log("loadConfig"); + // console.log("loadConfig"); if (config && visualization && canvas) { visualization.configuration = config; - console.log("Visualization:", visualization); - console.log("Config:", visualization.configuration); - console.log("Canvas:", canvas); + // console.log("Visualization:", visualization); + // console.log("Config:", visualization.configuration); + // console.log("Canvas:", canvas); canvas.controller.update(); } else { @@ -52,11 +52,6 @@ export default function Treemap({ header, rows }: MetricsTableData) { } function debugInit() { - // TODO: input(s) for debug logging / exposing global variables? - - // Enable debug logging - visualization.debug = true; - (window as any)["gloperate"] = gloperate; (window as any)["canvas"] = canvas; (window as any)["context"] = canvas?.context; diff --git a/frontend/src/utils/github.ts b/frontend/src/utils/github.ts index ba74b03..aa55f1b 100644 --- a/frontend/src/utils/github.ts +++ b/frontend/src/utils/github.ts @@ -42,9 +42,9 @@ export async function getMetricsBlob( tree_sha, }); - response.data.tree.map((object) => { - console.log(object.path, prettyBytes(object.size!)); - }); + // response.data.tree.map((object) => { + // console.log(object.path, prettyBytes(object.size!)); + // }); return await Promise.all( files.map(async (file) => { @@ -69,7 +69,7 @@ export async function getMetricsBlob( console.warn(`${file} not found in blob object`); return { content: "", size: 0 }; } - console.log(blob_string); + // console.log(blob_string); return { content: blob_string, size: blob.data.size } as MetricsBlob; }) ); diff --git a/frontend/src/utils/treemap_helpers.ts b/frontend/src/utils/treemap_helpers.ts index 466f1be..b77be12 100644 --- a/frontend/src/utils/treemap_helpers.ts +++ b/frontend/src/utils/treemap_helpers.ts @@ -1,5 +1,5 @@ import { FileMetrics, Metrics, TreeNode } from "@analytics/types"; -import { Configuration, NodeSort, Visualization } from "treemap"; +import { Configuration, NodeSort } from "treemap-renderer"; interface ValueMapping { weights: keyof Metrics; @@ -29,7 +29,7 @@ export function createFileTree(rows: FileMetrics[]): TreeNode { }, rootNode); }); - console.log(rootNode); + // console.log(rootNode); if (rootNode.children.length === 1) { return rootNode.children[0]; } @@ -74,19 +74,19 @@ export function configFromFileTree( } buildEdges(fileTreeRoot); - console.log("names", names); - console.log("edges", edges); - console.log("weights", weights); - console.log("heights", heights); - console.log("colors", colors); + // console.log("names", names); + // console.log("edges", edges); + // console.log("weights", weights); + // console.log("heights", heights); + // console.log("colors", colors); config.colors = [ - { identifier: "emphasis", space: "hex", value: "#00b0ff" }, - { identifier: "auxiliary", space: "hex", values: ["#00aa5e", "#71237c"] }, - { identifier: "inner", space: "hex", values: ["#e8eaee", "#eef0f4"] }, + { identifier: "emphasis", colorspace: "hex", value: "#00b0ff" }, + { identifier: "auxiliary", colorspace: "hex", values: ["#00aa5e", "#71237c"] }, + { identifier: "inner", colorspace: "hex", values: ["#e8eaee", "#eef0f4"] }, { identifier: "leaf", - space: "hex", + colorspace: "hex", values: [ "#4575b4", "#91bfdb", @@ -121,13 +121,11 @@ export function configFromFileTree( config.geometry = { parentLayer: { showRoot: false }, - leafLayers: [ - { - colorMap: "color:leaf", - height: "bufferView:heights-normalized", - colors: "bufferView:colors-normalized", - }, - ], + leafLayer: { + colorMap: "color:leaf", + height: "bufferView:heights-normalized", + colors: "bufferView:colors-normalized", + }, emphasis: { outline: new Array(), highlight: new Array() }, heightScale: 0.5, }; @@ -138,13 +136,9 @@ export function configFromFileTree( numTopWeightNodes: 6, numTopHeightNodes: 6, numTopColorNodes: 6, + names: names }; - config.labels.callback = ( - idsToLabel: Set, - callback: Visualization.NameSetCallback - ) => callback(names); - config!.altered!.alter("labels"); config.topology = { @@ -200,6 +194,6 @@ export function configFromFileTree( }, ]; - console.log("Config", JSON.stringify(config, null, 2)); + // console.log("Config", JSON.stringify(config, null, 2)); return config; } diff --git a/frontend/vite.config-embed.ts b/frontend/vite.config-embed.ts index 7e862b1..3f16e20 100644 --- a/frontend/vite.config-embed.ts +++ b/frontend/vite.config-embed.ts @@ -13,7 +13,7 @@ export default defineConfig(({ command, mode }) => { }, }, optimizeDeps: { - include: ["treemap"], + include: ["treemap-renderer"], }, build: { emptyOutDir: true, @@ -25,7 +25,7 @@ export default defineConfig(({ command, mode }) => { fileName: "embed", }, commonjsOptions: { - include: [/treemap/, /node_modules/], + include: [/treemap-renderer/, /node_modules/], }, }, }; diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index d7d4ba8..13a30df 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -12,11 +12,11 @@ export default defineConfig(({ command, mode }) => { }, }, optimizeDeps: { - include: ["treemap"], + include: ["treemap-renderer"], }, build: { commonjsOptions: { - include: [/treemap/, /node_modules/], + include: [/treemap-renderer/, /node_modules/], }, }, };