git-truck · nimrossum · May 28, 2023 · May 16, 2023 · May 20, 2023 · May 20, 2023
diff --git a/src/components/AuthorDistFragment.tsx b/src/components/AuthorDistFragment.tsx
@@ -29,7 +29,7 @@ export function AuthorDistFragment(props: AuthorDistFragProps) {
               {metricType == "TOP_CONTRIBUTOR" ? (
                 <LegendDot className="ml-1" dotColor={authorColors.get(author) ?? "white"} />
               ) : null}
-              <span className="overflow-hidden overflow-ellipsis whitespace-pre font-bold opacity-70">{author}</span>
+              <span className="overflow-hidden overflow-ellipsis whitespace-pre font-bold opacity-80">{author}</span>
             </div>
             <p className="break-all text-right text-sm">{contribPercentage}%</p>
           </Fragment>

diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx
@@ -35,6 +35,8 @@ import { useComponentSize } from "../hooks"
 import { treemapBinary } from "d3-hierarchy"
 import { getTextColorFromBackground, isBlob, isTree } from "~/util"
 import clsx from "clsx"
+import type { SizeMetricType } from "~/metrics/size-metric"
+import { useSearch } from "~/contexts/SearchContext"
 
 type CircleOrRectHiearchyNode = HierarchyCircularNode<HydratedGitObject> | HierarchyRectangularNode<HydratedGitObject>
 
@@ -44,16 +46,17 @@ export const Chart = memo(function Chart({
   setHoveredObject: (obj: HydratedGitObject | null) => void
 }) {
   const [ref, rawSize] = useComponentSize()
+  const { searchResults } = useSearch()
   const size = useDeferredValue(rawSize)
   const { analyzerData } = useData()
-  const { chartType } = useOptions()
+  const { chartType, sizeMetric } = useOptions()
   const { path } = usePath()
   const { clickedObject, setClickedObject } = useClickedObject()
   const { setPath } = usePath()
   const nodes = useMemo(() => {
     if (size.width === 0 || size.height === 0) return []
-    return createPartitionedHiearchy(analyzerData.commit, size, chartType, path).descendants()
-  }, [analyzerData.commit, size, chartType, path])
+    return createPartitionedHiearchy(analyzerData.commit, size, chartType, sizeMetric, path).descendants()
+  }, [size, analyzerData.commit, chartType, sizeMetric, path])
 
   useEffect(() => {
     setHoveredObject(null)
@@ -114,7 +117,7 @@ export const Chart = memo(function Chart({
               key={`${chartType}${d.data.path}`}
               {...createGroupHandlers(d, i === 0)}
             >
-              <Node isRoot={i === 0} d={d} />
+              <Node isRoot={i === 0} d={d} isSearchMatch={Boolean(searchResults[d.data.path])} />
             </g>
           )
         })}
@@ -123,7 +126,15 @@ export const Chart = memo(function Chart({
   )
 })
 
-const Node = memo(function Node({ d, isRoot }: { d: CircleOrRectHiearchyNode; isRoot: boolean }) {
+const Node = memo(function Node({
+  d,
+  isRoot,
+  isSearchMatch,
+}: {
+  d: CircleOrRectHiearchyNode
+  isRoot: boolean
+  isSearchMatch: boolean
+}) {
   const { chartType, labelsVisible } = useOptions()
   let showLabel = labelsVisible
   const { path } = usePath()
@@ -174,21 +185,16 @@ const Node = memo(function Node({ d, isRoot }: { d: CircleOrRectHiearchyNode; is
           "cursor-pointer": isBlob(d.data),
         })}
         d={d}
-        isSearchMatch={d.data.isSearchResult ?? false}
+        isSearchMatch={isSearchMatch}
       />
       {showLabel ? (
         chartType === "BUBBLE_CHART" ? (
-          <CircleText
-            d={d as HierarchyCircularNode<HydratedGitObject>}
-            displayText={displayText}
-            isSearchMatch={d.data.isSearchResult ?? false}
-          />
+          <CircleText d={d as HierarchyCircularNode<HydratedGitObject>} displayText={displayText} />
         ) : (
           <RectText
             className="font-mono"
             d={d as HierarchyRectangularNode<HydratedGitObject>}
             displayText={displayText}
-            isSearchMatch={d.data.isSearchResult ?? false}
           />
         )
       ) : null}
@@ -265,12 +271,10 @@ function Path({
 function CircleText({
   d,
   displayText,
-  isSearchMatch,
   className = "",
 }: {
   d: HierarchyCircularNode<HydratedGitObject>
   displayText: string
-  isSearchMatch: boolean
   className?: string
 }) {
   const [metricsData] = useMetrics()
@@ -282,9 +286,7 @@ function CircleText({
   })
 
   const textProps = useToggleableSpring({
-    fill: isSearchMatch
-      ? searchMatchColor
-      : isBlob(d.data)
+    fill: isBlob(d.data)
       ? getTextColorFromBackground(metricsData[authorshipType].get(metricType)?.colormap.get(d.data.path) ?? "#333")
       : "#333",
   })
@@ -323,12 +325,10 @@ function CircleText({
 function RectText({
   d,
   displayText,
-  isSearchMatch,
   className = "",
 }: {
   d: HierarchyRectangularNode<HydratedGitObject>
   displayText: string
-  isSearchMatch: boolean
   className?: string
 }) {
   const [metricsData] = useMetrics()
@@ -340,9 +340,7 @@ function RectText({
   const props = useToggleableSpring({
     x: d.x0 + xOffset,
     y: d.y0 + yOffset,
-    fill: isSearchMatch
-      ? searchMatchColor
-      : isBlob(d.data)
+    fill: isBlob(d.data)
       ? getTextColorFromBackground(metricsData[authorshipType].get(metricType)?.colormap.get(d.data.path) ?? "#333")
       : "#333",
   })
@@ -363,6 +361,7 @@ function createPartitionedHiearchy(
   data: HydratedGitCommitObject,
   size: { height: number; width: number },
   chartType: ChartType,
+  sizeMetricType: SizeMetricType,
   path: string
 ) {
   const root = data.tree as HydratedGitTreeObject
@@ -387,8 +386,19 @@ function createPartitionedHiearchy(
 
   const hiearchy = hierarchy(castedTree)
     .sum((d) => {
-      const lineCount = (d as HydratedGitBlobObject).sizeInBytes
-      return lineCount ? lineCount : 1
+      const hydratedBlob = d as HydratedGitBlobObject
+      switch (sizeMetricType) {
+        case "FILE_SIZE":
+          return hydratedBlob.sizeInBytes ?? 1
+        case "MOST_COMMITS":
+          return hydratedBlob.noCommits
+        case "EQUAL_SIZE":
+          return 1
+        case "LAST_CHANGED":
+          return (hydratedBlob.lastChangeEpoch ?? data.oldestLatestChangeEpoch) - data.oldestLatestChangeEpoch
+        case "TRUCK_FACTOR":
+          return Object.keys(hydratedBlob.authors ?? {}).length
+      }
     })
     .sort((a, b) => (b.value !== undefined && a.value !== undefined ? b.value - a.value : 0))
 

diff --git a/src/components/ChevronButton.tsx b/src/components/ChevronButton.tsx
@@ -3,11 +3,11 @@ import { Icon } from "@mdi/react"
 import type { HTMLAttributes } from "react"
 
 export function ChevronButton({
-  onClick,
+  onClick = () => void 0,
   open,
   className = "",
   ...props
-}: { onClick: () => void; open: boolean } & HTMLAttributes<HTMLButtonElement>) {
+}: { onClick?: () => void; open: boolean } & HTMLAttributes<HTMLButtonElement>) {
   return (
     <button className={`z-10 ${className}`}  {...props}>
       <Icon path={mdiChevronDown} size={1} className={`chevron transition-transform ${open ? "rotate-180" : ""}`} />