git-truck · tjomson · Nov 22, 2023 · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023
diff --git a/src/analyzer/analyze.server.ts b/src/analyzer/analyze.server.ts
@@ -196,6 +196,10 @@ export type AnalyzationStatus = "Starting" | "Hydrating" | "GeneratingChart"
 
 export let analyzationStatus: AnalyzationStatus = "Starting"
 
+export function setAnalyzationStatus(newStatus: AnalyzationStatus) {
+  analyzationStatus = newStatus
+}
+
 export async function analyze(args: TruckConfig): Promise<AnalyzerData> {
   analyzationStatus = "Starting"
   GitCaller.initInstance(args.path)
@@ -267,7 +271,6 @@ export async function analyze(args: TruckConfig): Promise<AnalyzerData> {
     })
 
     if (repoTreeError) throw repoTreeError
-    analyzationStatus = "Hydrating"
 
     const [hydrateResult, hydratedRepoTreeError] = await describeAsyncJob({
       job: () => hydrateData(repoTree),

diff --git a/src/analyzer/hydrate.server.ts b/src/analyzer/hydrate.server.ts
@@ -14,6 +14,7 @@ import { getCoAuthors } from "./coauthors.server"
 import { log } from "./log.server"
 import { gitLogRegex, contribRegex } from "./constants"
 import { cpus } from "os"
+import { setAnalyzationStatus } from "./analyze.server"
 
 let renamedFiles: Map<string, { path: string; timestamp: number }[]>
 let authors: Set<string>
@@ -114,7 +115,7 @@ export async function hydrateData(commit: GitCommitObject): Promise<[HydratedGit
     log.warn(
       "This repo has a lot of commits, so nodejs might run out of memory. Consider setting the environment variable NODE_OPTIONS to --max-old-space-size=4096 and rerun Git Truck"
     )
-
+  setAnalyzationStatus("Hydrating")
   // Sync threads every commitBundleSize commits to reset commits map, to reduce peak memory usage
   for (let index = 0; index < commitCount; index += commitBundleSize) {
     progress = index

diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx
@@ -45,7 +45,7 @@ export const Chart = memo(function Chart({
   const { searchResults } = useSearch()
   const size = useDeferredValue(rawSize)
   const { analyzerData } = useData()
-  const { chartType, sizeMetric, depthType, hierarchyType, labelsVisible } = useOptions()
+  const { chartType, sizeMetric, depthType, hierarchyType, labelsVisible, renderCutoff } = useOptions()
   const { path } = usePath()
   const { clickedObject, setClickedObject } = useClickedObject()
   const { setPath } = usePath()
@@ -86,8 +86,8 @@ export const Chart = memo(function Chart({
 
   const nodes = useMemo(() => {
     if (size.width === 0 || size.height === 0) return []
-    return createPartitionedHiearchy(commit, size, chartType, sizeMetric, path).descendants()
-  }, [size, commit, chartType, sizeMetric, path])
+    return createPartitionedHiearchy(commit, size, chartType, sizeMetric, path, renderCutoff).descendants()
+  }, [size, commit, chartType, sizeMetric, path, renderCutoff])
 
   useEffect(() => {
     setHoveredObject(null)
@@ -354,7 +354,8 @@ function createPartitionedHiearchy(
   size: { height: number; width: number },
   chartType: ChartType,
   sizeMetricType: SizeMetricType,
-  path: string
+  path: string,
+  renderCutoff: number
 ) {
   const root = data.tree as HydratedGitTreeObject
 
@@ -391,7 +392,7 @@ function createPartitionedHiearchy(
         return Object.keys(hydratedBlob.authors ?? {}).length
     }
   })
-
+  const cutOff = Number.isNaN(renderCutoff) ? 2 : renderCutoff
   switch (chartType) {
     case "TREE_MAP":
       const treeMapPartition = treemap<HydratedGitObject>()
@@ -405,7 +406,7 @@ function createPartitionedHiearchy(
 
       filterTree(tmPartition, (child) => {
         const cast = child as HierarchyRectangularNode<HydratedGitObject>
-        return (isBlob(child.data) && cast.x0 >= 1 && cast.y0 >= 1) || isTree(child.data)
+        return (cast.x1 - cast.x0) >= cutOff && (cast.y1 - cast.y0) >= cutOff
       })
 
       return tmPartition
@@ -414,14 +415,11 @@ function createPartitionedHiearchy(
       const bubbleChartPartition = pack<HydratedGitObject>()
         .size([size.width, size.height - estimatedLetterHeightForDirText])
         .padding(bubblePadding)
-
       const bPartition = bubbleChartPartition(hiearchy)
-
       filterTree(bPartition, (child) => {
         const cast = child as HierarchyCircularNode<HydratedGitObject>
-        return (isBlob(child.data) && cast.r >= 1) || isTree(child.data)
+        return cast.r >= cutOff
       })
-
       return bPartition
     default:
       throw Error("Invalid chart type")

diff --git a/src/components/Options.tsx b/src/components/Options.tsx
@@ -5,7 +5,9 @@ import type { ChartType, HierarchyType } from "../contexts/OptionsContext"
 import { Chart, Hierarchy, useOptions } from "../contexts/OptionsContext"
 import { CheckboxWithLabel } from "./util"
 import { Icon } from "@mdi/react"
-import { memo } from "react"
+import { memo, useTransition } from "react"
+import anitruck from "~/assets/truck.gif"
+
 import {
   mdiChartBubble,
   mdiChartTree,
@@ -26,7 +28,8 @@ import {
   mdiViewModule,
   mdiCog,
   mdiFileTree,
-  mdiFamilyTree
+  mdiFamilyTree,
+  mdiContentCut
 } from "@mdi/js"
 import type { SizeMetricType } from "~/metrics/sizeMetric"
 import { SizeMetric } from "~/metrics/sizeMetric"
@@ -50,14 +53,16 @@ export const Options = memo(function Options() {
     sizeMetric,
     hierarchyType,
     transitionsEnabled,
+    renderCutoff,
     setTransitionsEnabled,
     labelsVisible,
     setLabelsVisible,
     setMetricType,
     setChartType,
     setDepthType,
     setHierarchyType,
-    setSizeMetricType
+    setSizeMetricType,
+    setRenderCutoff
   } = useOptions()
 
   const [linkMetricAndSizeMetric, setLinkMetricAndSizeMetric] = useLocalStorage<boolean>(
@@ -101,6 +106,8 @@ export const Options = memo(function Options() {
     LAST_CHANGED: "LAST_CHANGED"
   }
 
+  const [isTransitioning, startTransition] = useTransition()
+
   return (
     <>
       {/* <h2 className="card__title">
@@ -237,6 +244,22 @@ export const Options = memo(function Options() {
             <Icon className="ml-1.5" path={mdiLabel} size="1.25em" />
             Labels
           </CheckboxWithLabel>
+          <label
+            className="label flex w-full items-center justify-start gap-2 text-sm"
+            title="Adjust the item rendering size threshold"
+          >
+            <span className="flex grow items-center gap-2">
+              <Icon className="ml-1.5" path={mdiContentCut} size="1.25em" />
+              Pixel render cut-off {isTransitioning ? <img src={anitruck} alt="..." className="h-5" /> : ""}
+            </span>
+            <input
+              type="number"
+              min={0}
+              defaultValue={renderCutoff}
+              className="mr-1 w-12 place-self-end border-b-2"
+               => startTransition(() => setRenderCutoff(x.target.valueAsNumber))}
+            />
+          </label>
         </fieldset>
       </div>
     </>

diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
@@ -103,7 +103,12 @@ export function Providers({ children, data }: ProvidersProps) {
         setOptions((prevOptions) => ({
           ...(prevOptions ?? getDefaultOptionsContextValue()),
           labelsVisible: visible
-        }))
+        })),
+      setRenderCutoff: (renderCutoff: number) =>
+        setOptions((prevOptions) => ({
+          ...(prevOptions ?? getDefaultOptionsContextValue()),
+          renderCutoff: renderCutoff
+        })),
     }),
     [options]
   )

diff --git a/src/components/util.tsx b/src/components/util.tsx
@@ -1,7 +1,8 @@
-import type { HTMLAttributes } from "react"
+import { useTransition, type HTMLAttributes } from "react"
 import { Icon } from "@mdi/react"
 import { mdiCheckboxOutline, mdiCheckboxBlankOutline, mdiMenuUp, mdiClose } from "@mdi/js"
 import clsx from "clsx"
+import anitruck from "~/assets/truck.gif"
 
 export const CloseButton = ({
   className = "",
@@ -54,11 +55,21 @@ export function CheckboxWithLabel({
   checkedIcon?: string
   uncheckedIcon?: string
 } & Omit<React.HTMLAttributes<HTMLLabelElement>, "onChange" | "checked">) {
+  const [isTransitioning, startTransition] = useTransition()
+
   return (
     <label className={`label flex w-full items-center justify-start gap-2 ${className}`} {...props}>
-      <span className="flex grow items-center gap-2">{children}</span>
+      <span className="flex grow items-center gap-2">
+        {children}
+        {isTransitioning ? <img src={anitruck} alt="..." className="h-5" /> : ""}
+      </span>
       <Icon className="place-self-end" path={checked ? checkedIcon : uncheckedIcon} size={1} />
-      <input type="checkbox" checked={checked}  className="hidden" />
+      <input
+        type="checkbox"
+        defaultChecked={checked}
+         => startTransition(() => onChange(e))}
+        className="hidden"
+      />
     </label>
   )
 }

diff --git a/src/contexts/OptionsContext.ts b/src/contexts/OptionsContext.ts
@@ -29,6 +29,7 @@ export type Options = {
   authorshipType: AuthorshipType
   transitionsEnabled: boolean
   labelsVisible: boolean
+  renderCutoff: number
 }
 
 export type OptionsContextType = Options & {
@@ -40,6 +41,7 @@ export type OptionsContextType = Options & {
   setLabelsVisible: (labelsVisible: boolean) => void
   setDepthType: (depthType: DepthType) => void
   setHierarchyType: (hierarchyType: HierarchyType) => void
+  setRenderCutoff: (renderCutoff: number) => void
 }
 
 export const OptionsContext = createContext<OptionsContextType | undefined>(undefined)
@@ -61,7 +63,8 @@ const defaultOptions: Options = {
   sizeMetric: Object.keys(SizeMetric)[0] as SizeMetricType,
   authorshipType: Object.keys(Authorship)[0] as AuthorshipType,
   transitionsEnabled: true,
-  labelsVisible: true
+  labelsVisible: true,
+  renderCutoff: 2
 }
 
 export function getDefaultOptionsContextValue(savedOptions: Partial<Options> = {}): OptionsContextType {
@@ -91,6 +94,9 @@ export function getDefaultOptionsContextValue(savedOptions: Partial<Options> = {
     },
     setLabelsVisible: () => {
       throw new Error("No labelsVisibleSetter provided")
+    },
+    setRenderCutoff: () => {
+      throw new Error("No renderCutoffSetter provided")
     }
   }
 }