git-truck 0.8.2 → 0.8.6-experimental

package/src/components/GlobalInfo.tsx

@@ -1,11 +1,12 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faRotate } from "@fortawesome/free-solid-svg-icons"
-import { Form, useTransition } from "remix"
+import { faRotate as reanalyzeIcon, faLeftLong as backIcon } from "@fortawesome/free-solid-svg-icons"
+import { Form, Link, useTransition } from "remix"
 import { dateTimeFormatShort } from "~/util"
 import { useData } from "../contexts/DataContext"
 import { usePath } from "../contexts/PathContext"
 import { Spacer } from "./Spacer"
-import { Box, BoxTitle, InlineCode, TextButton } from "./util"
+import { Box, BoxTitle, Code, TextButton } from "./util"
+import styled from "styled-components"
 
 export function GlobalInfo() {
   const data = useData()
@@ -31,26 +32,36 @@ export function GlobalInfo() {
 
   return (
     <Box>
+      <StyledLink to=".." title="See all projects">
+        <FontAwesomeIcon icon={backIcon} color="#333" />
+      </StyledLink>
       <BoxTitle>{data.repo}</BoxTitle>
       <Spacer />
       <div>
         <strong>Branch: </strong>
-        {data.branch}
+        <span>{data.branch}</span>
         <Spacer />
         <strong>Analyzed: </strong>
-        {dateTimeFormatShort(data.lastRunEpoch)}
+        <span>{dateTimeFormatShort(data.lastRunEpoch)}</span>
         <Spacer />
         <strong>As of commit: </strong>
-        <InlineCode title={data.commit.message ?? "No commit message"}>{data.commit.hash.slice(0, 7)}</InlineCode>
+        <Code inline title={data.commit.message ?? "No commit message"}>
+          {data.commit.hash.slice(0, 7)}
+        </Code>
       </div>
       <Spacer />
-      <Form method="post" action="/repo">
+      <Form method="post" action=".">
         <input type="hidden" name="refresh" value="true" />
         <TextButton disabled={transitionState.state !== "idle"}>
-          <FontAwesomeIcon icon={faRotate} />{" "}
+          <FontAwesomeIcon icon={reanalyzeIcon} />{" "}
           {!transitionState.submission?.formData.has("refresh") ? "Rerun analyzer" : "Analyzing..."}
         </TextButton>
       </Form>
     </Box>
   )
 }
+
+const StyledLink = styled(Link)`
+  display: inline-flex;
+  margin-right: var(--unit);
+`

package/src/components/HiddenFiles.tsx

@@ -4,7 +4,7 @@ import { useBoolean } from "react-use"
 import styled from "styled-components"
 import { useData } from "~/contexts/DataContext"
 import { ExpandUp } from "./Toggle"
-import { Box, BoxSubTitle, InlineCode } from "./util"
+import { Box, BoxSubTitle, Code } from "./util"
 import { Form, useTransition } from "remix"
 
 const Line = styled.div`
@@ -67,14 +67,14 @@ export function HiddenFiles() {
         <div>
           {data.hiddenFiles.map((hidden) => (
             <Line key={hidden} title={hidden}>
-              <InlineForm method="post" action="/repo">
+              <InlineForm method="post" action=".">
                 <input type="hidden" name="unignore" value={hidden} />
                 <StyledButton title="Show file" disabled={transitionState.state !== "idle"}>
                   <StyledFontAwesomeIcon id="eyeslash" icon={faEyeSlash} />
                   <StyledFontAwesomeIcon id="eye" icon={faEye} />
                 </StyledButton>
               </InlineForm>
-              <InlineCode>{hiddenFileFormat(hidden)}</InlineCode>
+              <Code>{hiddenFileFormat(hidden)}</Code>
             </Line>
           ))}
         </div>

package/src/components/Legend.tsx

@@ -33,7 +33,7 @@ const GradArrow = styled.i<{ visible: boolean; position: number }>`
   position: relative;
   bottom: 11px;
   left: calc(${({ position }) => position * 100}% - ${estimatedLetterWidth}px);
-  filter: drop-shadow(0px -2px 0.5px #fff);
+  filter: drop-shadow(0px -2px 0px #fff);
 `
 
 const StyledBox = styled(Box)`

package/src/components/LegendOther.tsx

@@ -1,42 +1,42 @@
-import styled from "styled-components"
-import { PointInfo } from "../metrics"
-import { Spacer } from "./Spacer"
-import { LegendDot, LegendEntry, LegendLabel } from "./util"
-
-interface LegendOtherProps {
-  toggle: () => void
-  items: [string, PointInfo][]
-  show: boolean
-}
-
-const LegendOtherDiv = styled.div`
-  width: fit-content;
-  &:hover {
-    cursor: pointer;
-  }
-`
-
-export function LegendOther(props: LegendOtherProps) {
-  if (!props.show) return null
-
-  return (
-    <LegendOtherDiv>
-      <LegendEntry onClick={props.toggle}>
-        {props.items.slice(0, 14).map(([label, info], i) => {
-          const margin = i === 0 ? 0 : -10
-          return (
-            <LegendDot
-              key={`dot${label}`}
-              dotColor={info.color}
-              style={{
-                marginLeft: margin,
-              }}
-            />
-          )
-        })}
-        <Spacer horizontal />
-        <LegendLabel>{props.items.length} more</LegendLabel>
-      </LegendEntry>
-    </LegendOtherDiv>
-  )
-}
+import styled from "styled-components"
+import { PointInfo } from "../metrics"
+import { Spacer } from "./Spacer"
+import { LegendDot, LegendEntry, LegendLabel } from "./util"
+
+interface LegendOtherProps {
+  toggle: () => void
+  items: [string, PointInfo][]
+  show: boolean
+}
+
+const LegendOtherDiv = styled.div`
+  width: fit-content;
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+export function LegendOther(props: LegendOtherProps) {
+  if (!props.show) return null
+
+  return (
+    <LegendOtherDiv>
+      <LegendEntry onClick={props.toggle}>
+        {props.items.slice(0, 14).map(([label, info], i) => {
+          const margin = i === 0 ? 0 : -10
+          return (
+            <LegendDot
+              key={`dot${label}`}
+              dotColor={info.color}
+              style={{
+                marginLeft: margin,
+              }}
+            />
+          )
+        })}
+        <Spacer horizontal />
+        <LegendLabel>{props.items.length} more</LegendLabel>
+      </LegendEntry>
+    </LegendOtherDiv>
+  )
+}

package/src/components/Main.tsx

@@ -92,7 +92,7 @@ export function Main() {
           })}
         </Breadcrumb>
       ) : (
-        <Breadcrumb></Breadcrumb>
+        <Breadcrumb />
       )}
       <ChartWrapper ref={ref}>
         <Chart size={size} />

package/src/components/SearchBar.tsx

@@ -1,4 +1,4 @@
-import { SearchField, Box, Label, StyledP, SearchResultButton, SearchResultSpan } from "./util"
+import { SearchField, Box, Label, StyledP, SearchResultButton, SearchResultSpan, LightFontAwesomeIcon } from "./util"
 import styled from "styled-components"
 import { Fragment, useEffect, useRef, useState } from "react"
 import { useDebounce } from "react-use"
@@ -10,7 +10,6 @@ import { useData } from "~/contexts/DataContext"
 import { usePath } from "~/contexts/PathContext"
 import { useClickedObject } from "~/contexts/ClickedContext"
 import { allExceptLast, getSeparator } from "~/util"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faFolderOpen, faFile } from "@fortawesome/free-solid-svg-icons"
 
 const StyledBox = styled(Box)`
@@ -35,10 +34,6 @@ function findSearchResults(tree: HydratedGitTreeObject, searchString: string) {
   return searchResults
 }
 
-const LightFontAwesomeIcon = styled(FontAwesomeIcon)`
-  opacity: 0.5;
-`
-
 export default function SearchBar() {
   const searchFieldRef = useRef<HTMLInputElement>(null)
   const { searchText, setSearchText, searchResults, setSearchResults } = useSearch()

package/src/components/util.tsx

@@ -1,22 +1,25 @@
-import styled from "styled-components"
+import styled, { css } from "styled-components"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
-export const BoxTitle = styled.h2`
-  font-size: 1.5em;
+const titleBaseStyles = css`
   font-weight: bold;
   margin-bottom: 0;
   margin-top: 0;
   color: var(--title-color);
-  overflow: hidden;
   text-overflow: ellipsis;
+  word-break: keep-all;
   white-space: nowrap;
+  overflow-x: hidden;
+`
+
+export const BoxTitle = styled.h2`
+  ${titleBaseStyles}
+  font-size: 1.5em;
 `
 
 export const BoxSubTitle = styled.h2`
+  ${titleBaseStyles}
   font-size: 1em;
-  font-weight: bold;
-  margin-bottom: 0;
-  margin-top: 0;
-  color: var(--title-color);
 `
 
 export const StyledP = styled.p`
@@ -25,6 +28,10 @@ export const StyledP = styled.p`
   margin: 0.5em 0 0.5em 0;
 `
 
+export const LightFontAwesomeIcon = styled(FontAwesomeIcon)`
+  opacity: 0.5;
+`
+
 export const TextButton = styled.button`
   background: var(--button-bg);
   width: fit-content;
@@ -166,9 +173,11 @@ export const DetailsValue = styled.p`
   font-size: 0.9em;
 `
 
-export const InlineCode = styled.code`
-  display: inline-block;
+export const Code = styled.code<{ inline?: boolean }>`
+  display: ${(props) => (props.inline ? "inline-block" : "block")};
   font-family: monospace;
+  font-size: 1.2em;
+  white-space: pre;
 `
 
 export const Grower = styled.div`

package/src/const.ts

@@ -1,6 +1,6 @@
-export const treemapPadding = 20
-export const bubblePadding = 10
-export const textSpacingFromCircle = 0
-export const searchMatchColor = "red"
-export const estimatedLetterWidth = 7
-export const EstimatedLetterHeightForDirText = 14
+export const treemapPadding = 20
+export const bubblePadding = 10
+export const textSpacingFromCircle = 0
+export const searchMatchColor = "red"
+export const estimatedLetterWidth = 7
+export const EstimatedLetterHeightForDirText = 14

package/src/contexts/ClickedContext.ts

@@ -1,17 +1,17 @@
-import { createContext, Dispatch, SetStateAction, useContext } from "react"
-import { HydratedGitObject } from "../analyzer/model"
-
-export interface clickedObject {
-  clickedObject: HydratedGitObject | null
-  setClickedObject: Dispatch<SetStateAction<HydratedGitObject | null>>
-}
-
-export const ClickedObjectContext = createContext<clickedObject | null>(null)
-
-export function useClickedObject() {
-  const context = useContext(ClickedObjectContext)
-  if (!context) {
-    throw new Error("useClickedObject must be used within a ClickedObjectProvider")
-  }
-  return context
-}
+import { createContext, Dispatch, SetStateAction, useContext } from "react"
+import { HydratedGitObject } from "../analyzer/model"
+
+export interface clickedObject {
+  clickedObject: HydratedGitObject | null
+  setClickedObject: Dispatch<SetStateAction<HydratedGitObject | null>>
+}
+
+export const ClickedObjectContext = createContext<clickedObject | null>(null)
+
+export function useClickedObject() {
+  const context = useContext(ClickedObjectContext)
+  if (!context) {
+    throw new Error("useClickedObject must be used within a ClickedObjectProvider")
+  }
+  return context
+}

package/src/contexts/DataContext.ts

@@ -1,12 +1,12 @@
-import { createContext, useContext } from "react"
-import { AnalyzerData } from "~/analyzer/model"
-
-export const DataContext = createContext<AnalyzerData | undefined>(undefined)
-
-export function useData() {
-  const context = useContext(DataContext)
-  if (!context) {
-    throw new Error("useData must be used within a DataContext")
-  }
-  return context
-}
+import { createContext, useContext } from "react"
+import { AnalyzerData } from "~/analyzer/model"
+
+export const DataContext = createContext<AnalyzerData | undefined>(undefined)
+
+export function useData() {
+  const context = useContext(DataContext)
+  if (!context) {
+    throw new Error("useData must be used within a DataContext")
+  }
+  return context
+}

package/src/contexts/MetricContext.ts

@@ -1,12 +1,12 @@
-import { createContext, useContext } from "react"
-import { MetricsData } from "../metrics"
-
-export const MetricsContext = createContext<MetricsData | undefined>(undefined)
-
-export function useMetrics() {
-  const context = useContext(MetricsContext)
-  if (!context) {
-    throw new Error("useMetrics must be used within a MetricsContext")
-  }
-  return context
-}
+import { createContext, useContext } from "react"
+import { MetricsData } from "../metrics"
+
+export const MetricsContext = createContext<MetricsData | undefined>(undefined)
+
+export function useMetrics() {
+  const context = useContext(MetricsContext)
+  if (!context) {
+    throw new Error("useMetrics must be used within a MetricsContext")
+  }
+  return context
+}

package/src/contexts/OptionsContext.ts

@@ -1,51 +1,51 @@
-import { createContext, useContext } from "react"
-import { Authorship, AuthorshipType, Metric, MetricType } from "../metrics"
-
-export const Chart = {
-  BUBBLE_CHART: "Bubble chart",
-  TREE_MAP: "Tree map",
-}
-
-export type ChartType = keyof typeof Chart
-
-export interface Options {
-  metricType: MetricType
-  chartType: ChartType
-  authorshipType: AuthorshipType
-  animationsEnabled: boolean
-  setMetricType: (metricType: MetricType) => void
-  setChartType: (chartType: ChartType) => void
-  setAuthorshipType: (authorshipType: AuthorshipType) => void
-  setAnimationsEnabled: (animationsEnabled: boolean) => void
-}
-
-export const OptionsContext = createContext<Options | undefined>(undefined)
-
-export function useOptions() {
-  const context = useContext(OptionsContext)
-  if (!context) {
-    throw new Error("useSearch must be used within a SearchProvider")
-  }
-  return context
-}
-
-export function getDefaultOptions(): Options {
-  return {
-    metricType: Object.keys(Metric)[0] as MetricType,
-    chartType: Object.keys(Chart)[0] as ChartType,
-    authorshipType: Object.keys(Authorship)[0] as AuthorshipType,
-    animationsEnabled: true,
-    setChartType: () => {
-      throw new Error("No chartTypeSetter provided")
-    },
-    setMetricType: () => {
-      throw new Error("No metricTypeSetter provided")
-    },
-    setAuthorshipType: () => {
-      throw new Error("No AuthorshipTypeSetter provided")
-    },
-    setAnimationsEnabled: () => {
-      throw new Error("No animationsEnabledSetter provided")
-    },
-  }
-}
+import { createContext, useContext } from "react"
+import { Authorship, AuthorshipType, Metric, MetricType } from "../metrics"
+
+export const Chart = {
+  BUBBLE_CHART: "Bubble chart",
+  TREE_MAP: "Tree map",
+}
+
+export type ChartType = keyof typeof Chart
+
+export interface Options {
+  metricType: MetricType
+  chartType: ChartType
+  authorshipType: AuthorshipType
+  animationsEnabled: boolean
+  setMetricType: (metricType: MetricType) => void
+  setChartType: (chartType: ChartType) => void
+  setAuthorshipType: (authorshipType: AuthorshipType) => void
+  setAnimationsEnabled: (animationsEnabled: boolean) => void
+}
+
+export const OptionsContext = createContext<Options | undefined>(undefined)
+
+export function useOptions() {
+  const context = useContext(OptionsContext)
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider")
+  }
+  return context
+}
+
+export function getDefaultOptions(): Options {
+  return {
+    metricType: Object.keys(Metric)[0] as MetricType,
+    chartType: Object.keys(Chart)[0] as ChartType,
+    authorshipType: Object.keys(Authorship)[0] as AuthorshipType,
+    animationsEnabled: true,
+    setChartType: () => {
+      throw new Error("No chartTypeSetter provided")
+    },
+    setMetricType: () => {
+      throw new Error("No metricTypeSetter provided")
+    },
+    setAuthorshipType: () => {
+      throw new Error("No AuthorshipTypeSetter provided")
+    },
+    setAnimationsEnabled: () => {
+      throw new Error("No animationsEnabledSetter provided")
+    },
+  }
+}

package/src/contexts/SearchContext.ts

@@ -1,19 +1,19 @@
-import { createContext, Dispatch, SetStateAction, useContext } from "react"
-import { HydratedGitObject } from "~/analyzer/model"
-
-type Search = {
-  searchText: string
-  setSearchText: Dispatch<SetStateAction<string>>
-  searchResults: HydratedGitObject[]
-  setSearchResults: Dispatch<SetStateAction<HydratedGitObject[]>>
-}
-
-export const SearchContext = createContext<Search | undefined>(undefined)
-
-export function useSearch(): Search {
-  const context = useContext(SearchContext)
-  if (!context) {
-    throw new Error("useSearch must be used within a SearchProvider")
-  }
-  return context
-}
+import { createContext, Dispatch, SetStateAction, useContext } from "react"
+import { HydratedGitObject } from "~/analyzer/model"
+
+type Search = {
+  searchText: string
+  setSearchText: Dispatch<SetStateAction<string>>
+  searchResults: HydratedGitObject[]
+  setSearchResults: Dispatch<SetStateAction<HydratedGitObject[]>>
+}
+
+export const SearchContext = createContext<Search | undefined>(undefined)
+
+export function useSearch(): Search {
+  const context = useContext(SearchContext)
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider")
+  }
+  return context
+}

package/src/lang-map.d.ts

@@ -1,3 +1,3 @@
-declare module "lang-map" {
-  export function languages(extension: string): string[]
-}
+declare module "lang-map" {
+  export function languages(extension: string): string[]
+}

package/src/metrics.ts

@@ -276,8 +276,10 @@ function setDominanceColor(blob: HydratedGitBlobObject, cache: MetricCache, auth
   const defaultColor = "hsl(210, 38%, 85%)"
   const nocreditColor = "teal"
 
+  const authorUnion = blob.unionedAuthors?.get(authorshipType) ?? {}
+
   let creditsum = 0
-  for (const [, val] of Object.entries(blob.authors)) {
+  for (const [, val] of Object.entries(authorUnion)) {
     creditsum += val
   }
 
@@ -289,7 +291,6 @@ function setDominanceColor(blob: HydratedGitBlobObject, cache: MetricCache, auth
     return
   }
 
-  const authorUnion = blob.unionedAuthors?.get(authorshipType)
 
   if (!authorUnion) throw Error("No unioned authors found")
   switch (Object.keys(authorUnion).length) {

package/src/root.tsx

@@ -1,10 +1,12 @@
-import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "remix"
+import { ErrorBoundaryComponent, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useCatch } from "remix"
 import type { MetaFunction } from "remix"
 
 import appStyles from "~/styles/App.css"
 import varsStyles from "~/styles/vars.css"
 import indexStyles from "~/styles/index.css"
 import chartStyles from "~/styles/Chart.css"
+import { useEffect } from "react"
+import { Code } from "./components/util"
 
 export const meta: MetaFunction = () => {
   return { title: "Git Truck 🚛" }
@@ -36,3 +38,44 @@ export default function App() {
     </html>
   )
 }
+
+export function CatchBoundary() {
+  const caught = useCatch()
+
+  return (
+    <html>
+      <head>
+        <title>Oops! An error wasn't handled</title>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <h1>
+          {caught.status} {caught.statusText}
+        </h1>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+export const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => {
+  useEffect(() => {
+    console.error(error.message)
+  }, [error])
+
+  return (
+    <html>
+      <head>
+        <title>Oops! An error wasn't handled</title>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <h1>{error.message}</h1>
+        <Code>{error.stack}</Code>
+        <Scripts />
+      </body>
+    </html>
+  )
+}