git-truck 0.5.0

package/app/src/components/Tooltip.tsx

@@ -0,0 +1,131 @@
+import { Box, BoxSubTitle, LegendDot } from "./util"
+import { useMouse } from "react-use"
+import { useMemo, useRef } from "react"
+import styled from "styled-components"
+import { HydratedGitBlobObject } from "../../parser/src/model"
+import { useOptions } from "../contexts/OptionsContext"
+import { Spacer } from "./Spacer"
+import { useMetricCaches } from "../contexts/MetricContext"
+import { MetricType } from "../metrics"
+import { useCSSVar } from "../hooks"
+import { dateFormatRelative } from "../util"
+
+const TooltipBox = styled(Box)<{
+  visible: boolean
+  right: boolean
+}>`
+  padding: calc(0.5 * var(--unit)) var(--unit);
+  min-width: 0;
+  width: max-content;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  will-change: transform visibility;
+  display: flex;
+  border-radius: calc(2 * var(--unit));
+  align-items: center;
+
+  pointer-events: none;
+  visibility: ${({ visible }) => (visible ? "visible" : "hidden")};
+`
+
+const TooltipContainer = styled.div`
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+`
+
+interface TooltipProps {
+  hoveredBlob: HydratedGitBlobObject | null
+}
+
+export function Tooltip({ hoveredBlob }: TooltipProps) {
+  const tooltipContainerRef = useRef<HTMLDivElement>(null)
+  const { metricType } = useOptions()
+  const documentElementRef = useRef(document.documentElement)
+  const mouse = useMouse(documentElementRef)
+  const unitRaw = useCSSVar("--unit")
+  const unit = unitRaw ? Number(unitRaw.replace("px", "")) : 0
+  const metricCaches = useMetricCaches()
+  const color = useMemo(() => {
+    if (!hoveredBlob) {
+      return null
+    }
+    const { colormap } = metricCaches.get(metricType)!
+    const color = colormap.get(hoveredBlob.path)
+    return color
+  }, [hoveredBlob, metricCaches, metricType])
+  const toolTipWidth = tooltipContainerRef.current
+    ? tooltipContainerRef.current.getBoundingClientRect().width
+    : 0
+
+  const right = mouse.docX + toolTipWidth < window.innerWidth - 3 * unit
+
+  const visible = hoveredBlob !== null
+  const transformStyles = { transform: "none" }
+  if (visible) {
+    if (right)
+      transformStyles.transform = `translate(calc(var(--unit) + ${mouse.docX}px), calc(var(--unit) + ${mouse.docY}px))`
+    else
+      transformStyles.transform = `translate(calc(var(--unit) * -1 + ${mouse.docX}px - 100%), calc(var(--unit) + ${mouse.docY}px))`
+  }
+
+  return (
+    <TooltipContainer>
+      <TooltipBox
+        ref={tooltipContainerRef}
+        right={right}
+        visible={visible}
+        style={transformStyles}
+      >
+        {color ? <LegendDot dotColor={color} /> : null}
+        <Spacer horizontal />
+        <BoxSubTitle>{hoveredBlob?.name}</BoxSubTitle>
+        <Spacer horizontal />
+        <ColorMetricDependentInfo
+          metric={metricType}
+          hoveredBlob={hoveredBlob}
+        />
+      </TooltipBox>
+    </TooltipContainer>
+  )
+}
+
+function ColorMetricDependentInfo(props: {
+  metric: MetricType
+  hoveredBlob: HydratedGitBlobObject | null
+}) {
+  switch (props.metric) {
+    case "MOST_COMMITS":
+      const noCommits = props.hoveredBlob?.noCommits
+      if (!noCommits) return null
+      return (
+        <>
+          {noCommits} commit{noCommits > 1 ? <>s</> : null}
+        </>
+      )
+    case "LAST_CHANGED":
+      const epoch = props.hoveredBlob?.lastChangeEpoch
+      if (!epoch) return null
+      return <>{dateFormatRelative(epoch)}</>
+    case "SINGLE_AUTHOR":
+      const authors = props.hoveredBlob
+        ? Object.entries(props.hoveredBlob?.authors)
+        : []
+      switch (authors.length) {
+        case 0:
+          return null
+        case 1:
+          return <>{authors[0][0]} dominates</>
+        default:
+          return <>{authors.length} authors</>
+      }
+    case "TOP_CONTRIBUTOR":
+      const dominant = props.hoveredBlob?.dominantAuthor
+      if (!dominant) return null
+      return <>{dominant[0]}</>
+    default:
+      return null
+  }
+}

package/app/src/components/util.tsx

@@ -0,0 +1,150 @@
+import styled from "styled-components"
+
+export const BoxTitle = styled.h2`
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-bottom: 0;
+  margin-top: 0;
+  color: var(--title-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+export const BoxSubTitle = styled.h2`
+  font-size: 1em;
+  font-weight: bold;
+  margin-bottom: 0;
+  margin-top: 0;
+  color: var(--title-color);
+`
+
+export const CloseButton = styled.button`
+  background: none;
+  border: none;
+  font-size: larger;
+  position: absolute;
+  top: calc(var(--unit));
+  right: calc(var(--unit));
+  cursor: pointer;
+`
+
+export const Container = styled.div`
+  height: 100%;
+  display: grid;
+  grid-template-columns: var(--side-panel-width) 1fr;
+  grid-template-rows: 1fr;
+`
+
+export const Box = styled.div`
+  /* border: 1px var(--border-color-alpha) solid; */
+  margin: var(--unit);
+  color: var(--text-color);
+  width: calc(var(--side-panel-width) - 6 * var(--unit));
+  background-color: #fff;
+  border-radius: var(--unit);
+  padding: calc(2 * var(--unit));
+  position: relative;
+  /* Generated with: https://shadows.brumm.af/ */
+  box-shadow: var(--shadow);
+`
+
+export const Stack = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const Label = styled.label`
+  padding-left: calc(var(--unit) + var(--border-width));
+  font-weight: bold;
+  font-size: 0.8em;
+`
+
+export const Select = styled.select`
+  width: 100%;
+  display: block;
+  padding: var(--unit);
+  border: 1px var(--border-color) solid;
+  border-radius: calc(0.5 * var(--unit));
+`
+
+export const SearchField = styled.input`
+  border: 1px var(--border-color) solid;
+  flex-grow: 1;
+  border-radius: calc(0.5 * var(--unit));
+  padding: var(--unit);
+`
+
+export const LegendEntry = styled.div`
+  font-size: small;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  place-items: center;
+  line-height: 100%;
+  margin: 0px;
+`
+
+export const LegendDot = styled.div<{ dotColor: string }>`
+  height: 100%;
+  aspect-ratio: 1;
+  width: 1em;
+  border-radius: 50%;
+  background-color: ${({ dotColor }) => dotColor};
+  box-shadow: var(--small-shadow);
+`
+
+export const LegendLable = styled.p`
+  padding: 0px;
+  margin: 0px;
+  font-weight: bold;
+`
+
+export const ToggleButton = styled.button<{
+  collapse: boolean
+  relative: boolean
+}>`
+  position: ${(props) => (props.relative ? "relative" : "absolute")};
+  top: ${(props) => (props.relative ? "unset" : "var(--unit)")};
+  right: ${(props) => (props.relative ? "unset" : "var(--unit)")};
+  border: none;
+  background-color: rgba(0, 0, 0, 0);
+  transition-duration: 0.4s;
+  color: grey;
+  transform-origin: 50% 55%;
+  transform: ${(props) => (props.collapse ? "rotate(180deg)" : "none")};
+  font-size: large;
+  &:hover {
+    color: #606060;
+    cursor: pointer;
+  }
+`
+
+export const LegendGradient = styled.div<{ min: string; max: string }>`
+  background-image: linear-gradient(
+    to right,
+    ${(props) => `${props.min},${props.max}`}
+  );
+  width: 100%;
+  height: 20px;
+  border-radius: calc(var(--unit) * 0.5);
+`
+
+export const GradientLegendDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`
+
+export const DetailsKey = styled.span<{ grow?: boolean }>`
+  white-space: pre;
+  font-size: 0.9em;
+  font-weight: 500;
+  opacity: 0.7;
+`
+
+export const DetailsValue = styled.p`
+  overflow-wrap: anywhere;
+  font-size: 0.9em;
+  text-align: right;
+`

package/app/src/const.ts

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

package/app/src/contexts/DataContext.ts

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

package/app/src/contexts/MetricContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react"
+import { MetricCache, MetricType } from "../metrics"
+
+export const MetricContext = createContext<
+  Map<MetricType, MetricCache> | undefined
+>(undefined)
+
+export function useMetricCaches() {
+  const context = useContext(MetricContext)
+  if (!context) {
+    throw new Error("useMetricCache must be used within a MetricContext")
+  }
+  return context
+}

package/app/src/contexts/OptionsContext.ts

@@ -0,0 +1,46 @@
+import { createContext, useContext } from "react"
+import { HydratedGitBlobObject } from "../../parser/src/model"
+import { 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
+  clickedBlob: HydratedGitBlobObject | null
+  setClickedBlob: (blob: HydratedGitBlobObject | null) => void
+  setMetricType: (metricType: MetricType) => void
+  setChartType: (chartType: ChartType) => 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() {
+  return {
+    metricType: Object.keys(Metric)[0] as MetricType,
+    chartType: Object.keys(Chart)[0] as ChartType,
+    clickedBlob: null,
+    setClickedBlob: () => {
+      throw new Error("No setClickedBlob function provided")
+    },
+    setChartType: () => {
+      throw new Error("No chartTypeSetter provided")
+    },
+    setMetricType: () => {
+      throw new Error("No metricTypeSetter provided")
+    },
+  }
+}

package/app/src/contexts/SearchContext.ts

@@ -0,0 +1,16 @@
+import { createContext, Dispatch, SetStateAction, useContext } from "react"
+
+type Search = {
+  searchText: string
+  setSearchText: Dispatch<SetStateAction<string>>
+}
+
+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/app/src/extension-color.ts

@@ -0,0 +1,34 @@
+import gitcolors from "github-colors/colors.json"
+import langMap from "lang-map"
+
+interface ColorResult {
+  lang: string
+  color: string | null
+}
+
+const lowercasedColors = new Map<string, ColorResult>()
+for (const [key, value] of Object.entries(gitcolors)) {
+  lowercasedColors.set(key.toLowerCase(), {
+    ...value,
+    lang: key,
+  })
+}
+
+export function getColorFromExtension(extension: string) {
+  const langMatches = langMap.languages(extension.toLowerCase())
+  const langs = []
+  if (!langMatches) return null
+  let colorResult = null
+  // Loop through lang resuts
+  for (const langResult of langMatches) {
+    // If we have a color for the language, return it
+    let match = lowercasedColors.get(langResult)
+    if (match) {
+      colorResult = match
+      langs.push(colorResult.lang)
+      break
+    }
+  }
+  if (!colorResult) return null
+  return colorResult.color
+}

package/app/src/hooks.ts

@@ -0,0 +1,17 @@
+import { MutableRefObject, useMemo } from "react"
+import { useComponentSize as useCompSize } from "react-use-size"
+
+type RefAndSize = [MutableRefObject<any>, { width: number; height: number }]
+
+export function useComponentSize() {
+  const { ref, width, height } = useCompSize()
+  const size: RefAndSize = useMemo(
+    () => [ref, { width, height }],
+    [ref, width, height]
+  )
+  return size
+}
+
+export function useCSSVar(varName: string) {
+  return getComputedStyle(document.documentElement).getPropertyValue(varName)
+}

package/app/src/lang-map.d.ts

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