From 67912f150d3a19103e95b724e97bd2dd889f9b3d Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 3 Oct 2022 15:25:46 +0200
Subject: [PATCH 01/14] Replace Hivser with Analytics Treemap Embedding

---
 .github/workflows/main.yml           | 4 ++--
 .github/workflows/tagged-release.yml | 2 +-
 .github/workflows/test.yml           | 6 +++---
 README.md                            | 4 ++--
 action.yml                           | 4 ++--
 frontend/index.html                  | 2 +-
 frontend/src/components/Home.tsx     | 2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 64f9214..3e36b5f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,4 +1,4 @@
-name: Deploy HiViSer GitHub Pages
+name: Deploy Viewer to GitHub Pages
 
 on:
   push:
@@ -23,7 +23,7 @@ jobs:
           WITH_V: true
 
   deploy:
-    name: Deploy HiViSer Frontend to GitHub Pages 🚀
+    name: Deploy Frontend to GitHub Pages 🚀
     concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
     runs-on: ubuntu-latest
     steps:
diff --git a/.github/workflows/tagged-release.yml b/.github/workflows/tagged-release.yml
index 8412981..28c1d69 100644
--- a/.github/workflows/tagged-release.yml
+++ b/.github/workflows/tagged-release.yml
@@ -11,7 +11,7 @@ jobs:
     runs-on: "ubuntu-latest"
 
     steps:
-      - name: Release HiViSer Action 🎉 
+      - name: Release Analytics Treemap Embedding Action 🎉 
         uses: "marvinpinto/action-automatic-releases@latest"
         with:
           repo_token: "${{ secrets.GITHUB_TOKEN }}"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 8561238..a0f3718 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,10 +1,10 @@
-name: Test HiViSer Action
+name: Test Analytics Treemap Embedding Action
 
 on: [push]
 
 jobs:
   test:
-    name: Run HiViSer Action 🧪
+    name: Run Analytics Treemap Embedding Action 🧪
     concurrency: 
       group: ${{ github.ref }}
       cancel-in-progress: true # Recommended if you intend to make multiple deployments in quick succession.
@@ -16,7 +16,7 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
 
-      - name: Run HiViSer Action 🚀
+      - name: Run Action 🚀
         uses: ./ # Uses the action in the root directory
         with:
           benchmark: true
diff --git a/README.md b/README.md
index dc98e68..a303b84 100644
--- a/README.md
+++ b/README.md
@@ -26,8 +26,8 @@ jobs:
       - name: Check out Git repository
         uses: actions/checkout@v3
 
-      - name: Run Hiviser Action
-        uses: hpicgs/hiviser-action@v0
+      - name: Run Analytics Treemap Embedding Action 🚀
+        uses: hpicgs/github-software-analytics-embedding@v0
         with:
           # Optional, use if you want to analyse a specific folder
           repository_path: ./
diff --git a/action.yml b/action.yml
index db783f1..2f8b04f 100644
--- a/action.yml
+++ b/action.yml
@@ -1,5 +1,5 @@
-name: "HiViSer - Action"
-description: "HiViSer visualisations for your repository"
+name: "Analytics Treemap Embedding Action"
+description: "A Github Action that provides code metrics and treemap visualisations for your typescript repository"
 branding:
   icon: "search"
   color: "blue"
diff --git a/frontend/index.html b/frontend/index.html
index 49731a6..7ade108 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
-    <title>HiViser Action</title>
+    <title>Analytics Treemap Embedding Action</title>
 
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index 573e41e..f1162eb 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -24,7 +24,7 @@ export default function Home() {
 
   return (
     <Container>
-      <h1>HiViSer Metrics Dashboard</h1>
+      <h1>Metrics Dashboard</h1>
       <Stack spacing={4}>
         <TableContainer component={Paper}>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">

From 7dba6ab1c656eba726e91c0b6c853dc9ff91f8e3 Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 3 Oct 2022 15:25:46 +0200
Subject: [PATCH 02/14] Replace Hivser with Analytics Treemap Embedding

---
 .github/workflows/main.yml           | 4 ++--
 .github/workflows/tagged-release.yml | 2 +-
 .github/workflows/test.yml           | 6 +++---
 README.md                            | 4 ++--
 action.yml                           | 4 ++--
 entrypoint.sh                        | 2 +-
 frontend/index.html                  | 2 +-
 frontend/src/components/Home.tsx     | 2 +-
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 64f9214..3e36b5f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,4 +1,4 @@
-name: Deploy HiViSer GitHub Pages
+name: Deploy Viewer to GitHub Pages
 
 on:
   push:
@@ -23,7 +23,7 @@ jobs:
           WITH_V: true
 
   deploy:
-    name: Deploy HiViSer Frontend to GitHub Pages 🚀
+    name: Deploy Frontend to GitHub Pages 🚀
     concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
     runs-on: ubuntu-latest
     steps:
diff --git a/.github/workflows/tagged-release.yml b/.github/workflows/tagged-release.yml
index 8412981..28c1d69 100644
--- a/.github/workflows/tagged-release.yml
+++ b/.github/workflows/tagged-release.yml
@@ -11,7 +11,7 @@ jobs:
     runs-on: "ubuntu-latest"
 
     steps:
-      - name: Release HiViSer Action 🎉 
+      - name: Release Analytics Treemap Embedding Action 🎉 
         uses: "marvinpinto/action-automatic-releases@latest"
         with:
           repo_token: "${{ secrets.GITHUB_TOKEN }}"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 8561238..a0f3718 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,10 +1,10 @@
-name: Test HiViSer Action
+name: Test Analytics Treemap Embedding Action
 
 on: [push]
 
 jobs:
   test:
-    name: Run HiViSer Action 🧪
+    name: Run Analytics Treemap Embedding Action 🧪
     concurrency: 
       group: ${{ github.ref }}
       cancel-in-progress: true # Recommended if you intend to make multiple deployments in quick succession.
@@ -16,7 +16,7 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
 
-      - name: Run HiViSer Action 🚀
+      - name: Run Action 🚀
         uses: ./ # Uses the action in the root directory
         with:
           benchmark: true
diff --git a/README.md b/README.md
index dc98e68..a303b84 100644
--- a/README.md
+++ b/README.md
@@ -26,8 +26,8 @@ jobs:
       - name: Check out Git repository
         uses: actions/checkout@v3
 
-      - name: Run Hiviser Action
-        uses: hpicgs/hiviser-action@v0
+      - name: Run Analytics Treemap Embedding Action 🚀
+        uses: hpicgs/github-software-analytics-embedding@v0
         with:
           # Optional, use if you want to analyse a specific folder
           repository_path: ./
diff --git a/action.yml b/action.yml
index db783f1..2f8b04f 100644
--- a/action.yml
+++ b/action.yml
@@ -1,5 +1,5 @@
-name: "HiViSer - Action"
-description: "HiViSer visualisations for your repository"
+name: "Analytics Treemap Embedding Action"
+description: "A Github Action that provides code metrics and treemap visualisations for your typescript repository"
 branding:
   icon: "search"
   color: "blue"
diff --git a/entrypoint.sh b/entrypoint.sh
index 7d7da74..b732a77 100755
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -4,7 +4,7 @@
 echo $(tokei ./src -o json > metrics.json)
 
 if [[ -z "${GITHUB_TOKEN}" ]]; then
-  echo "GITHUB_TOKEN is not set. Stopping Hiviser Action."
+  echo "GITHUB_TOKEN is not set. Stopping Action."
   exit 0
 fi
 
diff --git a/frontend/index.html b/frontend/index.html
index 49731a6..7ade108 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
-    <title>HiViser Action</title>
+    <title>Analytics Treemap Embedding Action</title>
 
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index 573e41e..f1162eb 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -24,7 +24,7 @@ export default function Home() {
 
   return (
     <Container>
-      <h1>HiViSer Metrics Dashboard</h1>
+      <h1>Metrics Dashboard</h1>
       <Stack spacing={4}>
         <TableContainer component={Paper}>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">

From 8f7060750c59084e34a3384be4c32c2a887e9f72 Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 3 Oct 2022 16:41:10 +0200
Subject: [PATCH 03/14] Add Repo and RepoPage components

---
 frontend/src/App.tsx                 |  6 ++-
 frontend/src/components/Home.tsx     | 74 ++++-----------------------
 frontend/src/components/Repo.tsx     | 76 ++++++++++++++++++++++++++++
 frontend/src/components/RepoPage.tsx | 16 ++++++
 4 files changed, 105 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/components/Repo.tsx
 create mode 100644 frontend/src/components/RepoPage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index da6b8a1..361c40c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,9 +1,10 @@
-import Home from "./components/Home";
-import NotFound from "./components/NotFound";
 import { Routes, Route } from "react-router-dom";
 import CssBaseline from "@mui/material/CssBaseline";
 import { Container } from "@mui/material";
 import MetricsPage from "./components/MetricsPage";
+import RepoPage from "./components/RepoPage";
+import Home from "./components/Home";
+import NotFound from "./components/NotFound";
 
 export default function App() {
   return (
@@ -16,6 +17,7 @@ export default function App() {
             path="/:owner/:repo/branches/:branch"
             element={<MetricsPage />}
           />
+          <Route path="/:owner/:repo" element={<RepoPage />} />
           <Route path="/" element={<Home />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index f1162eb..5cf766d 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -1,74 +1,18 @@
-import React, { useEffect, useState } from 'react'
-import { Button, Container, Paper, Link, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from '@mui/material'
-import { useNavigate, Link as RouterLink } from 'react-router-dom'
-import { getBranches, getMetricCommits, ListRefsResponseType, ListBranchesResponseType } from '@/utils/github'
+import React from 'react'
+import { Container, Stack, Link } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
 
-export default function Home() {
-  const navigate = useNavigate()
-  const owner = 'hpicgs'
-  const repo = 'github-software-analytics-embedding'
-  const [refs, setRefs] = useState<ListRefsResponseType>()
-  const [branches, setBranches] = useState<ListBranchesResponseType>()
 
-  useEffect(() => {
-    async function fetchData() {
-      const branches = await getBranches(owner, repo);
-      console.log(branches)
-      setBranches(branches)
-      const refs = await getMetricCommits(owner, repo)
-      console.log(refs)
-      setRefs(refs)
-    }
-    fetchData()
-  }, [])
 
+export default function Home() {
+    const owner = 'hpicgs'
+    const repo = 'github-software-analytics-embedding'
   return (
     <Container>
       <h1>Metrics Dashboard</h1>
-      <Stack spacing={4}>
-        <TableContainer component={Paper}>
-          <Table sx={{ minWidth: 650 }} aria-label="simple table">
-            <TableHead>
-              <TableRow>
-                <TableCell>Branches</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-            {branches && branches.data.map((branch) => (
-              <TableRow
-                key={branch.name}
-                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-              >
-                <TableCell component="th" scope="row">
-                  <Link component={RouterLink} to={`/${owner}/${repo}/branches/${branch.name}`}>{branch.name}</Link>
-                </TableCell>
-              </TableRow>
-            ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-        <TableContainer component={Paper}>
-          <Table sx={{ minWidth: 650 }} aria-label="simple table">
-            <TableHead>
-              <TableRow>
-                <TableCell>Commits</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {refs && refs.data.map((ref) => (
-              <TableRow
-                key={ref.ref}
-                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-              >
-                <TableCell component="th" scope="row">
-                  <Link underline="hover" component={RouterLink} to={`/${owner}/${repo}/${ref.ref.split('/').pop()}`}>{ref.ref}</Link>
-                </TableCell>
-              </TableRow>
-            ))}
-            </TableBody>
-          </Table>
-        </TableContainer>  
-      </Stack>
+          <Stack spacing={4}>
+              <Link component={RouterLink} to={`/${owner}/${repo}/}`}>{owner} / {repo}</Link>
+          </Stack>
     </Container>
   )
 }
diff --git a/frontend/src/components/Repo.tsx b/frontend/src/components/Repo.tsx
new file mode 100644
index 0000000..8fd3fcf
--- /dev/null
+++ b/frontend/src/components/Repo.tsx
@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react'
+import { Container, Paper, Link, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from '@mui/material'
+import { Link as RouterLink, useParams } from 'react-router-dom'
+import { getBranches, getMetricCommits, ListRefsResponseType, ListBranchesResponseType } from '@/utils/github'
+
+interface RepoParams {
+  owner: string
+  repo: string
+}
+
+export default function Repo({owner, repo}: RepoParams) {
+  const [refs, setRefs] = useState<ListRefsResponseType>()
+  const [branches, setBranches] = useState<ListBranchesResponseType>()
+
+  useEffect(() => {
+    async function fetchData() {
+      const branches = await getBranches(owner, repo);
+      console.log(branches)
+      setBranches(branches)
+      const refs = await getMetricCommits(owner, repo)
+      console.log(refs)
+      setRefs(refs)
+    }
+    fetchData()
+  }, [])
+
+  return (
+    <Container>
+      <h1>Metrics Dashboard</h1>
+      <Stack spacing={4}>
+        <TableContainer component={Paper}>
+          <Table sx={{ minWidth: 650 }} aria-label="simple table">
+            <TableHead>
+              <TableRow>
+                <TableCell>Branches</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+            {branches && branches.data.map((branch) => (
+              <TableRow
+                key={branch.name}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell component="th" scope="row">
+                  <Link component={RouterLink} to={`/${owner}/${repo}/branches/${branch.name}`}>{branch.name}</Link>
+                </TableCell>
+              </TableRow>
+            ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TableContainer component={Paper}>
+          <Table sx={{ minWidth: 650 }} aria-label="simple table">
+            <TableHead>
+              <TableRow>
+                <TableCell>Commits</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {refs && refs.data.map((ref) => (
+              <TableRow
+                key={ref.ref}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell component="th" scope="row">
+                  <Link underline="hover" component={RouterLink} to={`/${owner}/${repo}/${ref.ref.split('/').pop()}`}>{ref.ref}</Link>
+                </TableCell>
+              </TableRow>
+            ))}
+            </TableBody>
+          </Table>
+        </TableContainer>  
+      </Stack>
+    </Container>
+  )
+}
diff --git a/frontend/src/components/RepoPage.tsx b/frontend/src/components/RepoPage.tsx
new file mode 100644
index 0000000..ceb3179
--- /dev/null
+++ b/frontend/src/components/RepoPage.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { useParams } from 'react-router-dom';
+import Repo from './Repo';
+
+export default function RepoPage() {
+    const { owner, repo } = useParams();
+
+    if (owner && repo) {
+        return <Repo owner={owner} repo={repo} />
+    } else {
+        return (<div>
+            <h1 className="title">Oops.</h1>
+            <h2 className="subtitle">Repository not found</h2>
+        </div>)
+    }
+}

From 55228df96d47afe9be9788a386c8ba2e4d87fd56 Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Tue, 4 Oct 2022 17:10:19 +0200
Subject: [PATCH 04/14] Add links to Home

---
 frontend/src/components/Home.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index 5cf766d..54853e0 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -10,9 +10,11 @@ export default function Home() {
   return (
     <Container>
       <h1>Metrics Dashboard</h1>
-          <Stack spacing={4}>
-              <Link component={RouterLink} to={`/${owner}/${repo}/}`}>{owner} / {repo}</Link>
-          </Stack>
+      <Stack spacing={4}>
+        <Link component={RouterLink} to={'/hpicgs/github-software-analytics-embedding/'}>hpicgs/github-software-analytics-embedding/</Link>
+        <Link component={RouterLink} to={'/Jasperhino/vscode/'}>Jasperhino/vscode</Link>
+        <Link component={RouterLink} to={'/Jasperhino/webgl-operate/'}>Jasperhino/webgl-operate</Link>
+      </Stack>
     </Container>
   )
 }

From 5a1b759fb794800740ed95e67a632bc53d0839ec Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 10 Oct 2022 11:41:29 +0200
Subject: [PATCH 05/14] Restyle frontend

---
 frontend/.npmrc                         |   1 +
 frontend/package.json                   |   1 +
 frontend/pnpm-lock.yaml                 | 122 +++++++++++-------------
 frontend/src/components/MetaMetrics.tsx |  22 +++++
 frontend/src/components/Metrics.tsx     |  29 +++---
 frontend/src/components/Treemap.tsx     |   9 +-
 frontend/src/utils/treemap_helpers.ts   |  10 +-
 frontend/vite.config.ts                 |   2 +-
 8 files changed, 105 insertions(+), 91 deletions(-)
 create mode 100644 frontend/.npmrc
 create mode 100644 frontend/src/components/MetaMetrics.tsx

diff --git a/frontend/.npmrc b/frontend/.npmrc
new file mode 100644
index 0000000..f87a044
--- /dev/null
+++ b/frontend/.npmrc
@@ -0,0 +1 @@
+auto-install-peers=true
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 7e04590..812b870 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.8.6",
     "buffer": "^6.0.3",
     "isomorphic-fetch": "^3.0.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 14f8b76..fa2147e 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@emotion/react': ^11.9.3
   '@emotion/styled': ^11.9.3
+  '@mui/icons-material': ^5.10.6
   '@mui/material': ^5.8.6
   '@octokit/types': ^6.38.1
   '@types/papaparse': ^5.3.2
@@ -33,8 +34,9 @@ specifiers:
   vite-tsconfig-paths: 3.5.0
 
 dependencies:
-  '@emotion/react': 11.9.3_cbpnieqasrszcwkqeh5i7z7nse
-  '@emotion/styled': 11.9.3_fclcjpexflswmyfozw2dyrvvua
+  '@emotion/react': 11.9.3_xs4y32wifnt5x7vku3cxrr46pm
+  '@emotion/styled': 11.9.3_dthnnro3y55jqpeepn6gcigs6q
+  '@mui/icons-material': 5.10.6_bz5qbahczzq3j4zamk3nlpl5vq
   '@mui/material': 5.8.6_lufg4r246lutmms4usx53hohe4
   buffer: 6.0.3
   isomorphic-fetch: 3.0.0
@@ -73,7 +75,6 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       '@jridgewell/trace-mapping': 0.3.4
-    dev: true
 
   /@babel/code-frame/7.16.7:
     resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==}
@@ -84,7 +85,6 @@ packages:
   /@babel/compat-data/7.17.10:
     resolution: {integrity: sha512-GZt/TCsG70Ms19gfZO1tM4CVnXsPgEPBCpJu+Qz3L0LUDsY5nZqFZglIoPC1kIYOtNBZlrnFT+klg12vFGZXrw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/core/7.17.10:
     resolution: {integrity: sha512-liKoppandF3ZcBnIYFjfSDHZLKdLHGJRkoWtG8zQyGJBQfIYobpnVGI5+pLBNtS6psFLDzyq8+h5HiVljW9PNA==}
@@ -107,7 +107,6 @@ packages:
       semver: 6.3.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@babel/generator/7.17.10:
     resolution: {integrity: sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==}
@@ -116,7 +115,6 @@ packages:
       '@babel/types': 7.17.10
       '@jridgewell/gen-mapping': 0.1.1
       jsesc: 2.5.2
-    dev: true
 
   /@babel/helper-annotate-as-pure/7.16.7:
     resolution: {integrity: sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==}
@@ -136,14 +134,12 @@ packages:
       '@babel/helper-validator-option': 7.16.7
       browserslist: 4.20.3
       semver: 6.3.0
-    dev: true
 
   /@babel/helper-environment-visitor/7.16.7:
     resolution: {integrity: sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.17.10
-    dev: true
 
   /@babel/helper-function-name/7.17.9:
     resolution: {integrity: sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==}
@@ -151,14 +147,12 @@ packages:
     dependencies:
       '@babel/template': 7.16.7
       '@babel/types': 7.17.10
-    dev: true
 
   /@babel/helper-hoist-variables/7.16.7:
     resolution: {integrity: sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.17.10
-    dev: true
 
   /@babel/helper-module-imports/7.16.7:
     resolution: {integrity: sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==}
@@ -180,7 +174,6 @@ packages:
       '@babel/types': 7.17.10
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@babel/helper-plugin-utils/7.16.7:
     resolution: {integrity: sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==}
@@ -191,14 +184,12 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.17.10
-    dev: true
 
   /@babel/helper-split-export-declaration/7.16.7:
     resolution: {integrity: sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.17.10
-    dev: true
 
   /@babel/helper-validator-identifier/7.16.7:
     resolution: {integrity: sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==}
@@ -207,7 +198,6 @@ packages:
   /@babel/helper-validator-option/7.16.7:
     resolution: {integrity: sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helpers/7.17.9:
     resolution: {integrity: sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==}
@@ -218,7 +208,6 @@ packages:
       '@babel/types': 7.17.10
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@babel/highlight/7.16.7:
     resolution: {integrity: sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==}
@@ -234,16 +223,6 @@ packages:
     hasBin: true
     dependencies:
       '@babel/types': 7.17.10
-    dev: true
-
-  /@babel/plugin-syntax-jsx/7.16.7:
-    resolution: {integrity: sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/helper-plugin-utils': 7.16.7
-    dev: false
 
   /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==}
@@ -253,7 +232,6 @@ packages:
     dependencies:
       '@babel/core': 7.17.10
       '@babel/helper-plugin-utils': 7.16.7
-    dev: true
 
   /@babel/plugin-transform-react-jsx-development/7.16.7_@babel+core@7.17.10:
     resolution: {integrity: sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==}
@@ -306,6 +284,13 @@ packages:
       regenerator-runtime: 0.13.9
     dev: false
 
+  /@babel/runtime/7.19.0:
+    resolution: {integrity: sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.9
+    dev: false
+
   /@babel/standalone/7.17.11:
     resolution: {integrity: sha512-47wVYBeTktYHwtzlFuK7qqV/H5X6mU4MUNqpQ9iiJOqnP8rWL0eX0GWLKRsv8D8suYzhuS1K/dtwgGr+26U7Gg==}
     engines: {node: '>=6.9.0'}
@@ -318,7 +303,6 @@ packages:
       '@babel/code-frame': 7.16.7
       '@babel/parser': 7.17.10
       '@babel/types': 7.17.10
-    dev: true
 
   /@babel/traverse/7.17.10:
     resolution: {integrity: sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==}
@@ -336,7 +320,6 @@ packages:
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /@babel/types/7.17.10:
     resolution: {integrity: sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==}
@@ -349,14 +332,15 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@emotion/babel-plugin/11.9.2:
+  /@emotion/babel-plugin/11.9.2_@babel+core@7.17.10:
     resolution: {integrity: sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
+      '@babel/core': 7.17.10
       '@babel/helper-module-imports': 7.16.7
-      '@babel/plugin-syntax-jsx': 7.16.7
-      '@babel/runtime': 7.18.6
+      '@babel/plugin-syntax-jsx': 7.16.7_@babel+core@7.17.10
+      '@babel/runtime': 7.19.0
       '@emotion/hash': 0.8.0
       '@emotion/memoize': 0.7.5
       '@emotion/serialize': 1.0.4
@@ -392,7 +376,7 @@ packages:
     resolution: {integrity: sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==}
     dev: false
 
-  /@emotion/react/11.9.3_cbpnieqasrszcwkqeh5i7z7nse:
+  /@emotion/react/11.9.3_xs4y32wifnt5x7vku3cxrr46pm:
     resolution: {integrity: sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -404,8 +388,9 @@ packages:
       '@types/react':
         optional: true
     dependencies:
+      '@babel/core': 7.17.10
       '@babel/runtime': 7.18.6
-      '@emotion/babel-plugin': 11.9.2
+      '@emotion/babel-plugin': 11.9.2_@babel+core@7.17.10
       '@emotion/cache': 11.9.3
       '@emotion/serialize': 1.0.4
       '@emotion/utils': 1.1.0
@@ -429,7 +414,7 @@ packages:
     resolution: {integrity: sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==}
     dev: false
 
-  /@emotion/styled/11.9.3_fclcjpexflswmyfozw2dyrvvua:
+  /@emotion/styled/11.9.3_dthnnro3y55jqpeepn6gcigs6q:
     resolution: {integrity: sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -442,10 +427,11 @@ packages:
       '@types/react':
         optional: true
     dependencies:
+      '@babel/core': 7.17.10
       '@babel/runtime': 7.18.6
-      '@emotion/babel-plugin': 11.9.2
+      '@emotion/babel-plugin': 11.9.2_@babel+core@7.17.10
       '@emotion/is-prop-valid': 1.1.3
-      '@emotion/react': 11.9.3_cbpnieqasrszcwkqeh5i7z7nse
+      '@emotion/react': 11.9.3_xs4y32wifnt5x7vku3cxrr46pm
       '@emotion/serialize': 1.0.4
       '@emotion/utils': 1.1.0
       '@types/react': 18.0.12
@@ -502,28 +488,23 @@ packages:
     dependencies:
       '@jridgewell/set-array': 1.1.0
       '@jridgewell/sourcemap-codec': 1.4.11
-    dev: true
 
   /@jridgewell/resolve-uri/3.0.5:
     resolution: {integrity: sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array/1.1.0:
     resolution: {integrity: sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec/1.4.11:
     resolution: {integrity: sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==}
-    dev: true
 
   /@jridgewell/trace-mapping/0.3.4:
     resolution: {integrity: sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.0.5
       '@jridgewell/sourcemap-codec': 1.4.11
-    dev: true
 
   /@mui/base/5.0.0-alpha.87_eurjwfem4ie5nnznw6gmhlbswe:
     resolution: {integrity: sha512-PuxRYrvG63Yj/UTwf4hSwZ5ClMv88iXHK+5hUV1CrG3kNPo6FFQiIFNRaNpRt/3nsXj6+xygJByNFA8m4Leetg==}
@@ -536,7 +517,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.18.6
+      '@babel/runtime': 7.19.0
       '@emotion/is-prop-valid': 1.1.3
       '@mui/types': 7.1.4_@types+react@18.0.12
       '@mui/utils': 5.8.6_react@18.1.0
@@ -549,6 +530,23 @@ packages:
       react-is: 17.0.2
     dev: false
 
+  /@mui/icons-material/5.10.6_bz5qbahczzq3j4zamk3nlpl5vq:
+    resolution: {integrity: sha512-QwxdRmLA46S94B0hExPDx0td+A2unF+33bQ6Cs+lNpJKVsm1YeHwNdYXYcnpWeHeQQ07055OXl7IB2GKDd0MfA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@mui/material': ^5.0.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@mui/material': 5.8.6_lufg4r246lutmms4usx53hohe4
+      '@types/react': 18.0.12
+      react: 18.1.0
+    dev: false
+
   /@mui/material/5.8.6_lufg4r246lutmms4usx53hohe4:
     resolution: {integrity: sha512-9fo5AiNHs+HY5ArMzsDMFrAmJSRw90y/qu81oDIszgK7Bfrm8GuI7Eb0mO6WADWPEyKOzOov/WZsm4G6jPEM4g==}
     engines: {node: '>=12.0.0'}
@@ -567,8 +565,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.18.6
-      '@emotion/react': 11.9.3_cbpnieqasrszcwkqeh5i7z7nse
-      '@emotion/styled': 11.9.3_fclcjpexflswmyfozw2dyrvvua
+      '@emotion/react': 11.9.3_xs4y32wifnt5x7vku3cxrr46pm
+      '@emotion/styled': 11.9.3_dthnnro3y55jqpeepn6gcigs6q
       '@mui/base': 5.0.0-alpha.87_eurjwfem4ie5nnznw6gmhlbswe
       '@mui/system': 5.8.6_xhx6bxusp7g5dnydclf6ud5vsu
       '@mui/types': 7.1.4_@types+react@18.0.12
@@ -594,7 +592,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.18.6
+      '@babel/runtime': 7.19.0
       '@mui/utils': 5.8.6_react@18.1.0
       '@types/react': 18.0.12
       prop-types: 15.8.1
@@ -614,10 +612,10 @@ packages:
       '@emotion/styled':
         optional: true
     dependencies:
-      '@babel/runtime': 7.18.6
+      '@babel/runtime': 7.19.0
       '@emotion/cache': 11.9.3
-      '@emotion/react': 11.9.3_cbpnieqasrszcwkqeh5i7z7nse
-      '@emotion/styled': 11.9.3_fclcjpexflswmyfozw2dyrvvua
+      '@emotion/react': 11.9.3_xs4y32wifnt5x7vku3cxrr46pm
+      '@emotion/styled': 11.9.3_dthnnro3y55jqpeepn6gcigs6q
       prop-types: 15.8.1
       react: 18.1.0
     dev: false
@@ -638,9 +636,9 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.18.6
-      '@emotion/react': 11.9.3_cbpnieqasrszcwkqeh5i7z7nse
-      '@emotion/styled': 11.9.3_fclcjpexflswmyfozw2dyrvvua
+      '@babel/runtime': 7.19.0
+      '@emotion/react': 11.9.3_xs4y32wifnt5x7vku3cxrr46pm
+      '@emotion/styled': 11.9.3_dthnnro3y55jqpeepn6gcigs6q
       '@mui/private-theming': 5.8.6_cbpnieqasrszcwkqeh5i7z7nse
       '@mui/styled-engine': 5.8.0_a6f2jn6urn4xnjrjtmy4o3vhia
       '@mui/types': 7.1.4_@types+react@18.0.12
@@ -669,7 +667,7 @@ packages:
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.18.6
+      '@babel/runtime': 7.19.0
       '@types/prop-types': 15.7.5
       '@types/react-is': 17.0.3
       prop-types: 15.8.1
@@ -1312,7 +1310,7 @@ packages:
   /babel-plugin-macros/2.8.0:
     resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==}
     dependencies:
-      '@babel/runtime': 7.18.6
+      '@babel/runtime': 7.19.0
       cosmiconfig: 6.0.0
       resolve: 1.22.0
     dev: false
@@ -1357,7 +1355,6 @@ packages:
       escalade: 3.1.1
       node-releases: 2.0.4
       picocolors: 1.0.0
-    dev: true
 
   /btoa-lite/1.0.0:
     resolution: {integrity: sha512-gvW7InbIyF8AicrqWoptdW08pUxuhq8BEgowNajy9RhiE86fmGAGl+bLKo6oB8QP0CkqHLowfN0oJdKC/J6LbA==}
@@ -1396,7 +1393,6 @@ packages:
 
   /caniuse-lite/1.0.30001335:
     resolution: {integrity: sha512-ddP1Tgm7z2iIxu6QTtbZUv6HJxSaV/PZeSrWFZtbY4JZ69tOeNhBCl3HyRQgeNZKE5AOn1kpV7fhljigy0Ty3w==}
-    dev: true
 
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@@ -1507,7 +1503,6 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
 
   /deep-is/0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
@@ -1566,7 +1561,7 @@ packages:
   /dom-helpers/5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
-      '@babel/runtime': 7.18.6
+      '@babel/runtime': 7.19.0
       csstype: 3.1.0
     dev: false
 
@@ -1578,7 +1573,6 @@ packages:
 
   /electron-to-chromium/1.4.132:
     resolution: {integrity: sha512-JYdZUw/1068NWN+SwXQ7w6Ue0bWYGihvSUNNQwurvcDV/SM7vSiGZ3NuFvFgoEiCs4kB8xs3cX2an3wB7d4TBw==}
-    dev: true
 
   /email-addresses/3.1.0:
     resolution: {integrity: sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==}
@@ -1871,7 +1865,6 @@ packages:
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
-    dev: true
 
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@@ -2208,7 +2201,6 @@ packages:
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /get-intrinsic/1.1.1:
     resolution: {integrity: sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==}
@@ -2281,7 +2273,6 @@ packages:
   /globals/11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
-    dev: true
 
   /globals/13.15.0:
     resolution: {integrity: sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==}
@@ -2378,7 +2369,7 @@ packages:
   /history/5.3.0:
     resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
     dependencies:
-      '@babel/runtime': 7.18.6
+      '@babel/runtime': 7.19.0
     dev: false
 
   /hoist-non-react-statics/3.3.2:
@@ -2608,7 +2599,6 @@ packages:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /json-parse-even-better-errors/2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
@@ -2626,7 +2616,6 @@ packages:
     resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
     engines: {node: '>=6'}
     hasBin: true
-    dev: true
 
   /jsonfile/4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
@@ -2804,7 +2793,6 @@ packages:
 
   /node-releases/2.0.4:
     resolution: {integrity: sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==}
-    dev: true
 
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
@@ -2958,7 +2946,6 @@ packages:
 
   /picocolors/1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true
 
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -3111,7 +3098,7 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
     dependencies:
-      '@babel/runtime': 7.18.6
+      '@babel/runtime': 7.19.0
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -3219,7 +3206,6 @@ packages:
   /semver/6.3.0:
     resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
     hasBin: true
-    dev: true
 
   /semver/7.3.7:
     resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
diff --git a/frontend/src/components/MetaMetrics.tsx b/frontend/src/components/MetaMetrics.tsx
new file mode 100644
index 0000000..339cbf0
--- /dev/null
+++ b/frontend/src/components/MetaMetrics.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { MetricsTableData } from '@analytics/types';
+import { Chip, Stack, Container } from '@mui/material';
+
+
+export default function MetricsTable({ header, rows }: MetricsTableData) {
+    const totalLoc = rows.reduce((acc, row) => acc + row.loc, 0);
+    const totalNoc = rows.reduce((acc, row) => acc + row.noc, 0);
+    const totalCloc = rows.reduce((acc, row) => acc + row.cloc, 0);
+    const averageDc = rows.reduce((acc, row) => acc + row.dc, 0) / rows.length;
+    const totalNof = rows.reduce((acc, row) => acc + row.nof, 0);
+
+    const numFiles = rows.length;
+    return (
+        <Container>
+            <Stack direction="row" spacing={2}>
+                <Chip label={`${numFiles} files`} variant="outlined" />
+                <Chip label={`${totalLoc} lines of code`} variant="outlined" />
+            </Stack>
+        </Container>
+  );
+}
diff --git a/frontend/src/components/Metrics.tsx b/frontend/src/components/Metrics.tsx
index d23bfc0..b01a22a 100644
--- a/frontend/src/components/Metrics.tsx
+++ b/frontend/src/components/Metrics.tsx
@@ -3,8 +3,11 @@ import { parseMetrics } from "../utils/parse";
 import MetricsTable from "./MetricsTable";
 import { getCommitSHA, getMetricsBlob } from "@/utils/github";
 import { MetricsTableData } from "@analytics/types";
-import { Breadcrumbs, Divider, Stack, Typography } from "@mui/material";
+import { Breadcrumbs, LinearProgress, Stack, Typography, Box, Paper } from "@mui/material";
+import GitHubIcon from '@mui/icons-material/GitHub';
+
 import Treemap from "./Treemap";
+import MetaMetrics from "./MetaMetrics";
 
 type MetricsProps = {
   owner?: string;
@@ -58,20 +61,22 @@ export default function Metrics({
   }, []);
 
   return (
-    <div>
-      <h1>Metrics</h1>
+    <Paper elevation={2}>
       <Stack spacing={2}>
-        <div>
-          <Breadcrumbs separator="›" aria-label="breadcrumb">
-            {breadcrumbs}
-          </Breadcrumbs>
-          <Divider />
-        </div>
+        <Box m={2}>
+          <Stack direction="row" spacing={1}>
+            <GitHubIcon />
+            <Breadcrumbs separator="›" aria-label="breadcrumb">
+              {breadcrumbs}
+            </Breadcrumbs>
+          </Stack>
+        </Box>
+        {loading && <LinearProgress />}
         {error && <p>No metrics data found.</p>}
-        {loading && <p>Loading...</p>}
-        {data && <MetricsTable {...data} />}
         {data && <Treemap {...data} />}
+        {data && <MetaMetrics {...data} />}
+        {data && <MetricsTable {...data} />}
       </Stack>
-    </div>
+    </Paper>
   );
 }
diff --git a/frontend/src/components/Treemap.tsx b/frontend/src/components/Treemap.tsx
index 5a6b879..cb544dc 100644
--- a/frontend/src/components/Treemap.tsx
+++ b/frontend/src/components/Treemap.tsx
@@ -1,5 +1,6 @@
 import { configFromFileTree, createFileTree } from "@/utils/treemap_helpers";
 import { MetricsTableData } from "@analytics/types";
+import { Container } from "@mui/material";
 import { useEffect, useState } from "react";
 import {
   gloperate,
@@ -61,10 +62,8 @@ export default function Treemap({header, rows}: MetricsTableData) {
   }
 
   return (
-    <div>
-      <h1>Treemap</h1>
+    <Container fixed>
       <div id="labelContainer" className="label-overlay"></div>
-      <canvas id="canvasElement" width="800" height="400"></canvas>
-    </div>
-  );
+      <canvas id="canvasElement" width="1200" height="600"></canvas>
+    </Container>);
 }
diff --git a/frontend/src/utils/treemap_helpers.ts b/frontend/src/utils/treemap_helpers.ts
index e931d1d..1733562 100644
--- a/frontend/src/utils/treemap_helpers.ts
+++ b/frontend/src/utils/treemap_helpers.ts
@@ -132,11 +132,11 @@ export function configFromFileTree(
   };
 
   config.labels = {
-    innerNodeLayerRange: [0, 2],
-    numTopInnerNodes: 4,
-    numTopWeightNodes: 4,
-    numTopHeightNodes: 4,
-    numTopColorNodes: 4,
+    innerNodeLayerRange: [0, 4],
+    numTopInnerNodes: 12,
+    numTopWeightNodes: 12,
+    numTopHeightNodes: 12,
+    numTopColorNodes: 12,
   };
 
   config.labels.callback = (
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 504641b..9d1a5b8 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -17,7 +17,7 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     optimizeDeps: {
-      include: ["treemaps", "@analytics/types"],
+      include: ["treemaps"],
     },
     build: {
       rollupOptions: {

From fd93ba3aed88ade92f2ccc74c24bf346a64374fe Mon Sep 17 00:00:00 2001
From: Jasper Blum <33397387+Jasperhino@users.noreply.github.com>
Date: Mon, 10 Oct 2022 11:44:05 +0200
Subject: [PATCH 06/14] Update README.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a303b84..cb4659d 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,8 @@ pnpm i
 pnpm run dev
 ```
 
-Navigate to e.g. `localhost:3000/hpicgs/github-software-analytics-embedding/5b337b8409f2a2d3b1b14f85d52a97a0258fe256`
+Navigate to `localhost:3000` in the browser of your choice.
+
 ### Setup Code Anayltics Development locally
 Create an .env file
 ```

From 870c6e93396feb0141b24f2d384224e652781463 Mon Sep 17 00:00:00 2001
From: Jasper Blum <33397387+Jasperhino@users.noreply.github.com>
Date: Mon, 10 Oct 2022 11:50:41 +0200
Subject: [PATCH 07/14] Update README.md

---
 README.md | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cb4659d..bb9bceb 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,14 @@
 # github-software-analytics-embedding
 Seminar Project of the Seminar "Advanced Techniques for Analysis and Visualization of Software Data" of CGS, HPI and DEF in the Summer Term 2022
 
-# Usage
+![image](https://user-images.githubusercontent.com/33397387/194839012-0c3efa5c-29cf-41b3-a686-1e9fd310c1a2.png)
+This repo contains a dockerized github action to calculate typescript software metrics per commit and store them as a `.csv` file directly to the git repository under the custom ref `refs/metrics`.
+It also provides a React Frontend to visualize the calculated metrics in a treemap.
+The viewer can also be embedded into an existing webpage.
+
+Please note that this is a research prototype and not meant for use in production as of now.
+
+# Integration into your Github project
 Create a new GitHub Actions workflow in your project, e.g. at `.github/workflows/analytics-embedding.yml`. The content of the file should be in the following format:
 ```yaml
 name: Analytics Treemap Embedding
@@ -34,7 +41,6 @@ jobs:
           # Optional to enable benchmarking
           benchmark: true
 ```
-
 ## Development
 
 Install `pnpm`:

From 60b6cfee7854c039b936339cf17b3fbbef5c3cf1 Mon Sep 17 00:00:00 2001
From: Jasper Blum <33397387+Jasperhino@users.noreply.github.com>
Date: Mon, 10 Oct 2022 11:52:39 +0200
Subject: [PATCH 08/14] Update README.md

---
 README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index bb9bceb..a78dfad 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,12 @@
 Seminar Project of the Seminar "Advanced Techniques for Analysis and Visualization of Software Data" of CGS, HPI and DEF in the Summer Term 2022
 
 ![image](https://user-images.githubusercontent.com/33397387/194839012-0c3efa5c-29cf-41b3-a686-1e9fd310c1a2.png)
-This repo contains a dockerized github action to calculate typescript software metrics per commit and store them as a `.csv` file directly to the git repository under the custom ref `refs/metrics`.
-It also provides a React Frontend to visualize the calculated metrics in a treemap.
-The viewer can also be embedded into an existing webpage.
+This project contains:
+- a dockerized github action to calculate typescript software metrics per commit and store them as a `.csv` file directly to the git repository under the custom ref `refs/metrics`.
+- a React frontend to visualize the calculated metrics in a treemap.
+- an embedding script to integrate the viewer into an existing webpage.
 
-Please note that this is a research prototype and not meant for use in production as of now.
+⚠️ Please note that this is a research prototype and not meant for use in production as of now.
 
 # Integration into your Github project
 Create a new GitHub Actions workflow in your project, e.g. at `.github/workflows/analytics-embedding.yml`. The content of the file should be in the following format:

From 3cab682485b1758219806b5c10d756ec81fbc85a Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 10 Oct 2022 12:25:50 +0200
Subject: [PATCH 09/14] Add blob size display

---
 frontend/src/components/MetaMetrics.tsx | 15 +++++++--------
 frontend/src/components/Metrics.tsx     |  8 +++++---
 frontend/src/utils/github.ts            | 18 ++++++++++++++----
 package.json                            |  5 +++++
 pnpm-lock.yaml                          | 14 ++++++++++++++
 5 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 package.json
 create mode 100644 pnpm-lock.yaml

diff --git a/frontend/src/components/MetaMetrics.tsx b/frontend/src/components/MetaMetrics.tsx
index 339cbf0..06ab2d3 100644
--- a/frontend/src/components/MetaMetrics.tsx
+++ b/frontend/src/components/MetaMetrics.tsx
@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { MetricsTableData } from '@analytics/types';
 import { Chip, Stack, Container } from '@mui/material';
+import prettyBytes from 'pretty-bytes';
 
+interface MetaMetricsProps extends MetricsTableData {
+    size: number;
+}
 
-export default function MetricsTable({ header, rows }: MetricsTableData) {
+export default function MetaMetrics({ header, rows, size }: MetaMetricsProps) {
     const totalLoc = rows.reduce((acc, row) => acc + row.loc, 0);
-    const totalNoc = rows.reduce((acc, row) => acc + row.noc, 0);
-    const totalCloc = rows.reduce((acc, row) => acc + row.cloc, 0);
-    const averageDc = rows.reduce((acc, row) => acc + row.dc, 0) / rows.length;
-    const totalNof = rows.reduce((acc, row) => acc + row.nof, 0);
-
-    const numFiles = rows.length;
     return (
         <Container>
             <Stack direction="row" spacing={2}>
-                <Chip label={`${numFiles} files`} variant="outlined" />
+                <Chip label={`${rows.length} files`} variant="outlined" />
                 <Chip label={`${totalLoc} lines of code`} variant="outlined" />
+                <Chip label={`${prettyBytes(size)} of metrics stored`} variant="outlined" />
             </Stack>
         </Container>
   );
diff --git a/frontend/src/components/Metrics.tsx b/frontend/src/components/Metrics.tsx
index b01a22a..2dbc0aa 100644
--- a/frontend/src/components/Metrics.tsx
+++ b/frontend/src/components/Metrics.tsx
@@ -23,6 +23,7 @@ export default function Metrics({
   branch,
 }: MetricsProps) {
   const [data, setData] = useState<MetricsTableData>();
+  const [size, setSize] = useState<number>();
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<boolean>(false);
 
@@ -46,10 +47,11 @@ export default function Metrics({
         commitSHA = await getCommitSHA(owner, repo, branch);
       }
       try {
-        const [csv] = await getMetricsBlob(owner, repo, commitSHA);
-        const parsedData = parseMetrics(csv);
+        const [metricsBlob] = await getMetricsBlob(owner, repo, commitSHA);
+        const parsedData = parseMetrics(metricsBlob.content);
         console.log("parsedData:", parsedData);
         setData(parsedData);
+        setSize(metricsBlob.size);
       } catch (e) {
         console.error(e);
         setError(true)
@@ -74,7 +76,7 @@ export default function Metrics({
         {loading && <LinearProgress />}
         {error && <p>No metrics data found.</p>}
         {data && <Treemap {...data} />}
-        {data && <MetaMetrics {...data} />}
+        {data && size && <MetaMetrics size={size} {...data} />}
         {data && <MetricsTable {...data} />}
       </Stack>
     </Paper>
diff --git a/frontend/src/utils/github.ts b/frontend/src/utils/github.ts
index 81b9bf9..ba74b03 100644
--- a/frontend/src/utils/github.ts
+++ b/frontend/src/utils/github.ts
@@ -1,6 +1,8 @@
 import { Octokit } from "octokit";
 import { Buffer } from "buffer";
 import { Endpoints, GetResponseTypeFromEndpointMethod } from "@octokit/types";
+import prettyBytes from "pretty-bytes";
+
 const octokit = new Octokit();
 
 export async function getCommitSHA(
@@ -16,13 +18,17 @@ export async function getCommitSHA(
 
   return ref.data.object.sha;
 }
+interface MetricsBlob {
+  content: string;
+  size: number;
+}
 
 export async function getMetricsBlob(
   owner: string,
   repo: string,
   commit_sha: string,
   files: string[] = ["metrics.csv"]
-): Promise<string[]> {
+): Promise<MetricsBlob[]> {
   const ref = await octokit.rest.git.getRef({
     owner,
     repo,
@@ -37,7 +43,7 @@ export async function getMetricsBlob(
   });
 
   response.data.tree.map((object) => {
-    console.log(object.path);
+    console.log(object.path, prettyBytes(object.size!));
   });
 
   return await Promise.all(
@@ -49,7 +55,7 @@ export async function getMetricsBlob(
       const file_sha = found_file?.sha;
       if (!file_sha) {
         console.warn(`${file} not found in tree object`);
-        return "";
+        return { content: "", size: 0 };
       }
 
       const blob = await octokit.rest.git.getBlob({
@@ -59,8 +65,12 @@ export async function getMetricsBlob(
       });
 
       const blob_string = Buffer.from(blob.data.content, "base64").toString();
+      if (!blob_string) {
+        console.warn(`${file} not found in blob object`);
+        return { content: "", size: 0 };
+      }
       console.log(blob_string);
-      return blob_string;
+      return { content: blob_string, size: blob.data.size } as MetricsBlob;
     })
   );
 }
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d0c2a8d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+	"dependencies": {
+		"pretty-bytes": "^6.0.0"
+	}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..eb6e323
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,14 @@
+lockfileVersion: 5.4
+
+specifiers:
+  pretty-bytes: ^6.0.0
+
+dependencies:
+  pretty-bytes: 6.0.0
+
+packages:
+
+  /pretty-bytes/6.0.0:
+    resolution: {integrity: sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    dev: false

From 6c1c26fa4ad7eee411740a30ba510d7efacfad4e Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 10 Oct 2022 16:32:13 +0200
Subject: [PATCH 10/14] Change config defaults

---
 frontend/src/components/Metrics.tsx   |  9 ++++++---
 frontend/src/components/Treemap.tsx   |  2 +-
 frontend/src/utils/treemap_helpers.ts | 13 +++++++------
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Metrics.tsx b/frontend/src/components/Metrics.tsx
index 2dbc0aa..09f4aed 100644
--- a/frontend/src/components/Metrics.tsx
+++ b/frontend/src/components/Metrics.tsx
@@ -3,11 +3,12 @@ import { parseMetrics } from "../utils/parse";
 import MetricsTable from "./MetricsTable";
 import { getCommitSHA, getMetricsBlob } from "@/utils/github";
 import { MetricsTableData } from "@analytics/types";
-import { Breadcrumbs, LinearProgress, Stack, Typography, Box, Paper } from "@mui/material";
+import { Breadcrumbs, LinearProgress, Stack, Typography, Box, Paper, Link } from "@mui/material";
 import GitHubIcon from '@mui/icons-material/GitHub';
 
 import Treemap from "./Treemap";
 import MetaMetrics from "./MetaMetrics";
+import { Link as RouterLink } from "react-router-dom";
 
 type MetricsProps = {
   owner?: string;
@@ -32,7 +33,7 @@ export default function Metrics({
       {owner}
     </Typography>,
     <Typography key="2" color="text.secondary">
-      {repo}
+      <Link component={RouterLink} to={`/${owner}/${repo}/`}>{repo}</Link>
     </Typography>,
     <Typography key="3" color="text.primary">
       {branch ? branch : commitSHA}
@@ -67,7 +68,9 @@ export default function Metrics({
       <Stack spacing={2}>
         <Box m={2}>
           <Stack direction="row" spacing={1}>
-            <GitHubIcon />
+            <RouterLink to={"/"}>
+              <GitHubIcon />
+            </RouterLink>
             <Breadcrumbs separator="›" aria-label="breadcrumb">
               {breadcrumbs}
             </Breadcrumbs>
diff --git a/frontend/src/components/Treemap.tsx b/frontend/src/components/Treemap.tsx
index cb544dc..7a54a34 100644
--- a/frontend/src/components/Treemap.tsx
+++ b/frontend/src/components/Treemap.tsx
@@ -64,6 +64,6 @@ export default function Treemap({header, rows}: MetricsTableData) {
   return (
     <Container fixed>
       <div id="labelContainer" className="label-overlay"></div>
-      <canvas id="canvasElement" width="1200" height="600"></canvas>
+      <canvas id="canvasElement" width="1400" height="700"></canvas>
     </Container>);
 }
diff --git a/frontend/src/utils/treemap_helpers.ts b/frontend/src/utils/treemap_helpers.ts
index 1733562..fa67f90 100644
--- a/frontend/src/utils/treemap_helpers.ts
+++ b/frontend/src/utils/treemap_helpers.ts
@@ -40,9 +40,10 @@ export function createFileTree(rows: FileMetrics[]): TreeNode {
 export function configFromFileTree(
   fileTreeRoot: TreeNode,
   valueMapping: ValueMapping = {
+    //Todo: change to include one functions and one comment metric
     weights: "loc",
-    heights: "loc",
-    colors: "loc",
+    heights: "nof",
+    colors: "dc",
   }
 ): Configuration {
   const config = new Configuration();
@@ -133,10 +134,10 @@ export function configFromFileTree(
 
   config.labels = {
     innerNodeLayerRange: [0, 4],
-    numTopInnerNodes: 12,
-    numTopWeightNodes: 12,
-    numTopHeightNodes: 12,
-    numTopColorNodes: 12,
+    numTopInnerNodes: 6,
+    numTopWeightNodes: 6,
+    numTopHeightNodes: 6,
+    numTopColorNodes: 6,
   };
 
   config.labels.callback = (

From 5a4f95597aa80b53b4c7354069be2012d48c27a6 Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 10 Oct 2022 17:08:09 +0200
Subject: [PATCH 11/14] Fix github pages build

---
 .github/workflows/main.yml               |  2 +-
 frontend/package.json                    |  3 +++
 frontend/pnpm-lock.yaml                  |  7 +++++++
 frontend/src/components/MetricsPage.tsx  |  5 ++++-
 frontend/src/components/MetricsTable.tsx | 14 ++++----------
 frontend/src/components/Treemap.tsx      |  3 +--
 frontend/src/index.tsx                   |  4 +---
 frontend/vite.config.ts                  |  5 -----
 8 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 3e36b5f..cb5f3e9 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -55,7 +55,7 @@ jobs:
         run: |
           cd frontend
           pnpm install
-          pnpm run build
+          pnpm run build:pages
 
       - name: Deploy Frontend 🚀
         uses: JamesIves/github-pages-deploy-action@v4.3.3
diff --git a/frontend/package.json b/frontend/package.json
index 812b870..d175cd5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,9 +5,11 @@
   "homepage": "https://hpicgs.github.io/github-software-analytics-embedding/",
   "scripts": {
     "build": "tsc --noEmit && vite build",
+    "build:pages": "tsc --noEmit && vite build --base /github-software-analytics-embedding/",
     "build:embed": "tsc --noEmit && vite build --config vite.config-embed.ts",
     "deploy": "gh-pages -d dist",
     "dev": "vite",
+    "dev:pages": "vite --base /github-software-analytics-embedding/",
     "preinstall": "npx only-allow pnpm",
     "preview": "vite preview"
   },
@@ -20,6 +22,7 @@
     "isomorphic-fetch": "^3.0.0",
     "octokit": "^1.8.1",
     "papaparse": "^5.3.2",
+    "pretty-bytes": "^6.0.0",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-router-dom": "6",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index fa2147e..2f6fd5f 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -25,6 +25,7 @@ specifiers:
   prettier: 2.6.2
   prettier-plugin-packagejson: 2.2.18
   prettier-plugin-tailwindcss: 0.1.11
+  pretty-bytes: ^6.0.0
   react: 18.1.0
   react-dom: 18.1.0
   react-router-dom: '6'
@@ -42,6 +43,7 @@ dependencies:
   isomorphic-fetch: 3.0.0
   octokit: 1.8.1
   papaparse: 5.3.2
+  pretty-bytes: 6.0.0
   react: 18.1.0
   react-dom: 18.1.0_react@18.1.0
   react-router-dom: 6.3.0_ef5jwxihqo6n7gxfmzogljlgcm
@@ -3021,6 +3023,11 @@ packages:
     hasBin: true
     dev: true
 
+  /pretty-bytes/6.0.0:
+    resolution: {integrity: sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+    dev: false
+
   /prop-types/15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
diff --git a/frontend/src/components/MetricsPage.tsx b/frontend/src/components/MetricsPage.tsx
index 3729399..d5f1536 100644
--- a/frontend/src/components/MetricsPage.tsx
+++ b/frontend/src/components/MetricsPage.tsx
@@ -1,3 +1,4 @@
+import { Box } from "@mui/material";
 import { useParams } from "react-router-dom";
 import Metrics from "./Metrics";
 
@@ -5,6 +6,8 @@ export default function MetricsPage() {
   const { owner, repo, commitSHA, branch } = useParams();
 
   return (
-    <Metrics owner={owner} repo={repo} commitSHA={commitSHA} branch={branch} />
+    <Box mb={8}>
+      <Metrics owner={owner} repo={repo} commitSHA={commitSHA} branch={branch} />
+    </Box>
   );
 }
diff --git a/frontend/src/components/MetricsTable.tsx b/frontend/src/components/MetricsTable.tsx
index 91fcb80..7e466aa 100644
--- a/frontend/src/components/MetricsTable.tsx
+++ b/frontend/src/components/MetricsTable.tsx
@@ -1,17 +1,11 @@
 import * as React from 'react';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
 import { MetricsTableData, Metrics } from '@analytics/types';
+import { Card, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 
 
 export default function MetricsTable({header, rows}: MetricsTableData) {
   return (
-    <TableContainer component={Paper}>
+    <TableContainer component={Card}>
       <Table sx={{ minWidth: 650 }} size="small" aria-label="a metrics table">
         <TableHead>
           <TableRow>
@@ -34,7 +28,7 @@ export default function MetricsTable({header, rows}: MetricsTableData) {
             </TableRow>
           ))}
         </TableBody>
-      </Table>
-    </TableContainer>
+        </Table>
+      </TableContainer>
   );
 }
diff --git a/frontend/src/components/Treemap.tsx b/frontend/src/components/Treemap.tsx
index 7a54a34..4c06431 100644
--- a/frontend/src/components/Treemap.tsx
+++ b/frontend/src/components/Treemap.tsx
@@ -20,9 +20,8 @@ export default function Treemap({header, rows}: MetricsTableData) {
   let canvas: gloperate.Canvas | undefined = undefined;
   useEffect(() => {
     // This is a workaround to get the Treemap library to look for the font files in the right place
-    const base = import.meta.env.VITE_BASEN_NAME ? `/${import.meta.env.VITE_BASEN_NAME}` : "";
     (window as any).SeereneConstants = {
-      "STATIC_DIRECTORY": `${base}/assets`
+      "STATIC_DIRECTORY": `${import.meta.env.BASE_URL}assets`
     }
     canvas = initialize("canvasElement");
     canvas.renderer = visualization.renderer as Renderer;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 987e0fc..2160029 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -6,10 +6,8 @@ import App from "./App";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
-const basename = import.meta.env.VITE_BASE_NAME ? import.meta.env.VITE_BASE_NAME : "/";
-
 root.render(
-  <BrowserRouter basename={basename}>
+  <BrowserRouter basename={import.meta.env.BASE_URL}>
     <App />
   </BrowserRouter>
 );
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 9d1a5b8..6f16bff 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,12 +4,7 @@ import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig(({ command, mode }) => {
-  process.env = { ...process.env, ...loadEnv(mode, process.cwd(), "") };
-  const base = process.env.VITE_BASE_NAME
-    ? `/${process.env.VITE_BASE_NAME}/`
-    : "/";
   const config: UserConfig = {
-    base,
     plugins: [react(), tsconfigPaths()],
     resolve: {
       alias: {

From d369a6f42250c1525f09012bde3e3f5b6960cc67 Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 10 Oct 2022 17:48:10 +0200
Subject: [PATCH 12/14] Add repo breadcrumbs component

---
 frontend/src/components/Home.tsx            |  6 +++---
 frontend/src/components/Metrics.tsx         | 18 +++++-------------
 frontend/src/components/NoMetrics.tsx       | 13 +++++++++++++
 frontend/src/components/Repo.tsx            | 14 ++++++++++++--
 frontend/src/components/RepoBreadcrumbs.tsx | 21 +++++++++++++++++++++
 5 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/NoMetrics.tsx
 create mode 100644 frontend/src/components/RepoBreadcrumbs.tsx

diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index 54853e0..934a4e2 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Container, Stack, Link } from '@mui/material'
+import { Container, Stack, Link, Typography } from '@mui/material'
 import { Link as RouterLink } from 'react-router-dom'
 
 
@@ -9,8 +9,8 @@ export default function Home() {
     const repo = 'github-software-analytics-embedding'
   return (
     <Container>
-      <h1>Metrics Dashboard</h1>
-      <Stack spacing={4}>
+      <Typography variant='h4' my={4}>Treemap Metrics Viewer</Typography>
+      <Stack spacing={2}>
         <Link component={RouterLink} to={'/hpicgs/github-software-analytics-embedding/'}>hpicgs/github-software-analytics-embedding/</Link>
         <Link component={RouterLink} to={'/Jasperhino/vscode/'}>Jasperhino/vscode</Link>
         <Link component={RouterLink} to={'/Jasperhino/webgl-operate/'}>Jasperhino/webgl-operate</Link>
diff --git a/frontend/src/components/Metrics.tsx b/frontend/src/components/Metrics.tsx
index 09f4aed..449f7d4 100644
--- a/frontend/src/components/Metrics.tsx
+++ b/frontend/src/components/Metrics.tsx
@@ -3,12 +3,13 @@ import { parseMetrics } from "../utils/parse";
 import MetricsTable from "./MetricsTable";
 import { getCommitSHA, getMetricsBlob } from "@/utils/github";
 import { MetricsTableData } from "@analytics/types";
-import { Breadcrumbs, LinearProgress, Stack, Typography, Box, Paper, Link } from "@mui/material";
-import GitHubIcon from '@mui/icons-material/GitHub';
+import { LinearProgress, Stack, Typography, Box, Paper, Link } from "@mui/material";
 
 import Treemap from "./Treemap";
 import MetaMetrics from "./MetaMetrics";
 import { Link as RouterLink } from "react-router-dom";
+import NoMetrics from "./NoMetrics";
+import RepoBreadcrumbs from "./RepoBreadcrumbs";
 
 type MetricsProps = {
   owner?: string;
@@ -66,18 +67,9 @@ export default function Metrics({
   return (
     <Paper elevation={2}>
       <Stack spacing={2}>
-        <Box m={2}>
-          <Stack direction="row" spacing={1}>
-            <RouterLink to={"/"}>
-              <GitHubIcon />
-            </RouterLink>
-            <Breadcrumbs separator="›" aria-label="breadcrumb">
-              {breadcrumbs}
-            </Breadcrumbs>
-          </Stack>
-        </Box>
+        <RepoBreadcrumbs breadcrumbs={breadcrumbs} />
         {loading && <LinearProgress />}
-        {error && <p>No metrics data found.</p>}
+        {error && <NoMetrics />}
         {data && <Treemap {...data} />}
         {data && size && <MetaMetrics size={size} {...data} />}
         {data && <MetricsTable {...data} />}
diff --git a/frontend/src/components/NoMetrics.tsx b/frontend/src/components/NoMetrics.tsx
new file mode 100644
index 0000000..8fffe4b
--- /dev/null
+++ b/frontend/src/components/NoMetrics.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Stack, Container, Typography } from '@mui/material'
+
+export default function NoMetrics() {
+  return (
+    <Container>
+      <Stack spacing={2} mb={4}>
+        <Typography variant='h4'>No Metrics found :(</Typography>
+        <Typography>There are no metrics for this commit on the repository.</Typography>
+      </Stack>
+    </Container>
+  )
+}
diff --git a/frontend/src/components/Repo.tsx b/frontend/src/components/Repo.tsx
index 8fd3fcf..9668b3f 100644
--- a/frontend/src/components/Repo.tsx
+++ b/frontend/src/components/Repo.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react'
-import { Container, Paper, Link, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from '@mui/material'
+import { Container, Paper, Link, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Breadcrumbs, Typography} from '@mui/material'
 import { Link as RouterLink, useParams } from 'react-router-dom'
 import { getBranches, getMetricCommits, ListRefsResponseType, ListBranchesResponseType } from '@/utils/github'
+import RepoBreadcrumbs from './RepoBreadcrumbs'
 
 interface RepoParams {
   owner: string
@@ -24,9 +25,18 @@ export default function Repo({owner, repo}: RepoParams) {
     fetchData()
   }, [])
 
+  const breadcrumbs = [
+    <Typography key="1" color="text.secondary">
+      {owner}
+    </Typography>,
+    <Typography key="2" color="text.secondary">
+      <Link component={RouterLink} to={`/${owner}/${repo}/`}>{repo}</Link>
+    </Typography>
+  ];
+
   return (
     <Container>
-      <h1>Metrics Dashboard</h1>
+      <RepoBreadcrumbs breadcrumbs={breadcrumbs} />
       <Stack spacing={4}>
         <TableContainer component={Paper}>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">
diff --git a/frontend/src/components/RepoBreadcrumbs.tsx b/frontend/src/components/RepoBreadcrumbs.tsx
new file mode 100644
index 0000000..ec838a7
--- /dev/null
+++ b/frontend/src/components/RepoBreadcrumbs.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { Box, Stack, Breadcrumbs } from '@mui/material'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import { Link as RouterLink } from 'react-router-dom'
+
+interface RepoBreadcrumbsProps {
+  breadcrumbs: JSX.Element[]
+}
+
+export default function RepoBreadcrumbs({breadcrumbs}: RepoBreadcrumbsProps) {
+    return (<Box m={2}>
+      <Stack direction="row" spacing={1}>
+        <RouterLink to={"/"}>
+          <GitHubIcon />
+        </RouterLink>
+        <Breadcrumbs separator="›" aria-label="breadcrumb">
+          {breadcrumbs}
+        </Breadcrumbs>
+      </Stack>
+    </Box>)
+}
\ No newline at end of file

From 726609dfd7da024099ffdbbb1c976eb4d40844a3 Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 10 Oct 2022 17:49:25 +0200
Subject: [PATCH 13/14] Bump version

---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index d175cd5..890edbc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "treemap-github-embedding",
-  "version": "0.1.0",
+  "version": "0.6.1",
   "private": "true",
   "homepage": "https://hpicgs.github.io/github-software-analytics-embedding/",
   "scripts": {

From 852ce899561f3f0d1281c3330406bb409b07d959 Mon Sep 17 00:00:00 2001
From: Jasperhino <blum.jasper@gmail.com>
Date: Mon, 10 Oct 2022 19:33:06 +0200
Subject: [PATCH 14/14] Add RepoBreadcrumbs

---
 frontend/package.json                       |   3 ++-
 frontend/public/.nojekyll                   |   0
 frontend/public/assets/favicon.ico          | Bin 0 -> 15406 bytes
 frontend/public/embed_test.html             |   2 --
 frontend/src/App.tsx                        |   3 +--
 frontend/src/components/Home.tsx            |   1 -
 frontend/src/components/NoMetrics.tsx       |   1 -
 frontend/src/components/NotFound.tsx        |   2 --
 frontend/src/components/Repo.tsx            |   2 +-
 frontend/src/components/RepoBreadcrumbs.tsx |   1 -
 frontend/src/components/RepoPage.tsx        |   1 -
 frontend/vite.config.ts                     |   7 +++++--
 12 files changed, 9 insertions(+), 14 deletions(-)
 create mode 100644 frontend/public/.nojekyll
 create mode 100644 frontend/public/assets/favicon.ico

diff --git a/frontend/package.json b/frontend/package.json
index 890edbc..ab1ce29 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,8 @@
     "dev": "vite",
     "dev:pages": "vite --base /github-software-analytics-embedding/",
     "preinstall": "npx only-allow pnpm",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "preview:pages": "vite preview --base /github-software-analytics-embedding/"
   },
   "dependencies": {
     "@emotion/react": "^11.9.3",
diff --git a/frontend/public/.nojekyll b/frontend/public/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/public/assets/favicon.ico b/frontend/public/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..aedfa74255219dcca30664eef3aca4f49b660650
GIT binary patch
literal 15406
zcmeHOS!|S56#iXsdD90UTpoBbJ{g~U(YPB|^vNZWBEh&3VhoYRKowh!m59+sv}IFJ
z)K;)SOG~ke2#AzY+S0|@|5@nF&=~|1AIb52cm6Zn`TzN+rR@wqv6GzM``>%+J>Na|
z+;i6&#%0D8#&y>j9L_dgyV5Z3Gz??*?A-Tl*BizrPP^j{EB{u*_~Qn{xQ%(Z2$#sE
zbKv^>JDsS?rehyp2xUg2Rj4qNjLu8N0~8CMpqkcCY3cSl`eaW7{nkEAD;I?oA#Qel
zNRgJs6ltqgyeRW`I$D)Y#@3*0Xt;;wG`vQ4eKwa~{Q50w+SE@E-5yeexNpk~<oo<C
z@~wYD@uEyNX|9=$@|n>HjhzhBQ|lHg`3t^%n_7Pe=j9_F`tC&~Kd^C*;zgNK@|!jM
zh+ioF<A;yYJ8$?EAzrF{GU}s5c!-{Ad|lz6zh#;FPR0BLLSEq8Duv&_;Ysz4GJ=1q
z<)#1Xc6~<B-4}b-sXj`Ch6sedErnmogAe_H5H!*9(tjwMO+{55h$CI{CenWn`K&kS
z4(Wl`RfN9xZ(ppwi`k!}yw-kuo|Mm|&yOFZ0WU%j`UNE4dLG74ehgw9O>+FYI)w>l
zz|YKPx{nF|X(B%&nl(0N-Z(ZEyQw^6-bg(?v+P({?&aBZbQRmkS=dQgDIGnNO~>DX
zOu@mj-&6L<eT;FLWcsD=7uwm~RzOFF4yn9DT_I{~icnj#MI1*O$|Z;P(df~pLh5T%
zd8m5~{t0bNMpr>Tbk5&rkscm7mLFsAweYz*)wZlr`Ac6J$@@U@#YlrK`**I$`D6HG
zA@<S813^X(gL#&yXI3U2zZrOdO?VKNOFrs`EXe$q?JS!}+=4iCS1I|B1)14I;FcNr
zIsGerKqnSqzR+zC@zot)s(h>;#O@?S8p=jH-#>46mi@uUOT7i5rhoX*bUc`+1>Y=p
z$ggW(tMXSY3_9c^4du;_8i)Mg)_M7Q!2?+ehbI40vcKi8I>$fKFn-1x|KORb{cmj?
zaOfXtm68uR`*t5!YeB355l31j<wF+MGWxn`D)KW)ll?N+XVHRhoa67KjxX~0;FGZ=
zWe`U9)H>`R<4@;-EW7<*Z28Xdx5P32Yg<0a_w#h?-!8v;`)Y^$&0Sk6CV%+EVXAL$
zP(Bxa@9VD36dXQUG5OFh2zCOWDc^cHo%V0nzsRYSeEa+(a}nfYY{<7BBHf-h+4)C}
zM{Dk#N_?{O@1*o^`6}rvgn^Ea9RA1O^m>8)K$dD_iTPLR1mA_&U+Bai<o{_21=;7p
z@A;b+Qm}V#<>XuA2AF|e+M$Pf`!kv1>u=$|;Py{IzO28o#~U0RyegYA|FQ2s$|XNM
z(#vy^T7RA4y$_#|8OB)BtU)`G4s6hm5YjO=<y#MB{OM^Dmo=VzBShVnY~nrNyO52a
z+JEwXjML6QURen;lF@e|GbjE0U+AOk`)^C<=cWF?V>l<_BU)oV(?rinm{t9_zpfyP
zToaGSuk``}3or>jw=fckT$4Q&e>9UaYuVNtPN$=dULauMbK{!qXzUSg$JNE~2Lges
z`FwOEkD)B{pDXKFot!TKrVP_MZo^f28*+M&Z4}J#U+_mlW^{yn;Q?0~O$2g2G9IDe
zkV*a%#R+*S=27(~*yn}W=ekjJFfSkcz$ExMTo26BhSN#&F-z}s>ST!Gp+Pcz$0=gb
z>bB46`L7ncQrD3V#oN8VpWc`op!rXRX#N}<aT@Z#gL=c=J1DsMSyu|R*XHG$zCMKs
z*wBX4saPgE8hI4>F)p&H80`HV+6e42$4R)X`2)wAUq1tBJ@}I<b6{^TJ#&A+u?Lp3
z5afXe^#%@Zb*zW-=W={L;@|eB0|&5K{cw)Yk86M({)MqOqFv}Gv{i6R=oS3H28_T8
z%)m~h@UIvA=v%=pp;zz&n}&Zqu+QM1OO>+!8T}WY`->0qivF!}E#o^MR`2|{r2qW2
z|5wG^cf_RU9?ab#i_g?U<belrk^{R-`cJcUd0xH?F30$F;iF3hKjsGPWk&f9Ql}Ly
z&NC~q9fW&(_9*_N2YmGG1I{ya=>z0}2X)7f?I@}L@Qx(~7*Gb-v~`3-|M0Cd{=a<d
zhjRPRLtVXWKkoRE2OiAplUe_i8~<N@J+$bBzg*XE$ODg8@dMXEUSF<UG(roW=5@5S
zhDID|$dfgd7xgdLhI^0EK=%;&224eWBTe!VdKo|P#e=!Ey4q84T*qE6{E&4rGOYG6
z*eeLVy{)d~{M&J4cb-?uSnrMS=19G1k#q^o?rkOgf3W2(N1eb{%Ku~jMZTR@?ihdl
zU@yaGm)iXAtTWj^{`$dQC%&~cf@A)=)bXQzm$Lo1tsj>EINtuf#W6lF#`tx^U*FzH
zch^@H9m5Z=eTjZQ+UaTh-M#y0;nr%pw|-th8-RWFu6n|qrrke!N&mQC?dv~4KOb%*
z>{UQ}dpha&?#`mvFP8szvmafz;=iyS*VFBBFX>;$HiN%>>reRqV*5vZFDd#z#cy2n
zbbDOxIl+&(J-;0LN5NK!u#)Ew<!Dbi@K3A%vCg_-lUQ@=J^=CHpWDf|_8!+YXn^0l
z+RIFK|ESj^eF1yc)9vx`{AZ|tKl#6ZncHx;vke>OQ1I|JNBy3{k2goXKl8heItuSx
zN;q!=1$I@dz6lL=dmMkxkD}kum(s8He$>CcrT^){Z`~iQL;Ep)ac`%$*&Y`?P1*ig
z?^5?f^{?L_oleIZ<X)Ta^WJA%uJ?B$2jRuU4?kw@A<yxB>3hx1&FW76RMLE$apB%t
zyFcyA-(SM+gakk4X-O*<Cc?SBHsm2*j7QQ?m((k1dT75tW!_ABH1det|Kcu~-wbS$
zIv^9aRE#FVgL0Oh6s}VB*?Eh}wDa(r2He3HydzNW2U4*O>TcM}?+0?&3*Hat{eXLI
rwk`b6jK|(@;2o9w`weLWLhhT(iERqL$qNK5z@%fGiO*<YIyCSf3_0$D

literal 0
HcmV?d00001

diff --git a/frontend/public/embed_test.html b/frontend/public/embed_test.html
index cf195c7..5cc5e9b 100644
--- a/frontend/public/embed_test.html
+++ b/frontend/public/embed_test.html
@@ -2,9 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
     <title>Embed Test</title>
   </head>
   <body>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 361c40c..be059fd 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,5 @@
 import { Routes, Route } from "react-router-dom";
-import CssBaseline from "@mui/material/CssBaseline";
-import { Container } from "@mui/material";
+import { Container, CssBaseline } from "@mui/material";
 import MetricsPage from "./components/MetricsPage";
 import RepoPage from "./components/RepoPage";
 import Home from "./components/Home";
diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index 934a4e2..7035e2c 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Container, Stack, Link, Typography } from '@mui/material'
 import { Link as RouterLink } from 'react-router-dom'
 
diff --git a/frontend/src/components/NoMetrics.tsx b/frontend/src/components/NoMetrics.tsx
index 8fffe4b..4ae535b 100644
--- a/frontend/src/components/NoMetrics.tsx
+++ b/frontend/src/components/NoMetrics.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Stack, Container, Typography } from '@mui/material'
 
 export default function NoMetrics() {
diff --git a/frontend/src/components/NotFound.tsx b/frontend/src/components/NotFound.tsx
index a5fdc97..c342693 100644
--- a/frontend/src/components/NotFound.tsx
+++ b/frontend/src/components/NotFound.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function NotFound() {
   return (
     <div>
diff --git a/frontend/src/components/Repo.tsx b/frontend/src/components/Repo.tsx
index 9668b3f..abc3dde 100644
--- a/frontend/src/components/Repo.tsx
+++ b/frontend/src/components/Repo.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Container, Paper, Link, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Breadcrumbs, Typography} from '@mui/material'
 import { Link as RouterLink, useParams } from 'react-router-dom'
 import { getBranches, getMetricCommits, ListRefsResponseType, ListBranchesResponseType } from '@/utils/github'
diff --git a/frontend/src/components/RepoBreadcrumbs.tsx b/frontend/src/components/RepoBreadcrumbs.tsx
index ec838a7..7722535 100644
--- a/frontend/src/components/RepoBreadcrumbs.tsx
+++ b/frontend/src/components/RepoBreadcrumbs.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Box, Stack, Breadcrumbs } from '@mui/material'
 import GitHubIcon from '@mui/icons-material/GitHub'
 import { Link as RouterLink } from 'react-router-dom'
diff --git a/frontend/src/components/RepoPage.tsx b/frontend/src/components/RepoPage.tsx
index ceb3179..17311a3 100644
--- a/frontend/src/components/RepoPage.tsx
+++ b/frontend/src/components/RepoPage.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { useParams } from 'react-router-dom';
 import Repo from './Repo';
 
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 6f16bff..6e78c68 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,6 +4,9 @@ import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig(({ command, mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd(), "") };
+  const base = "/github-software-analytics-embedding/";
+  //console.log(`Building for ${mode} with base URL ${base}`);
   const config: UserConfig = {
     plugins: [react(), tsconfigPaths()],
     resolve: {
@@ -12,11 +15,11 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     optimizeDeps: {
-      include: ["treemaps"],
+      include: ["treemaps", "react", "react-dom"],
     },
     build: {
       rollupOptions: {
-        external: ["react", "treemaps"],
+        external: ["treemaps"],
       },
     },
   };