fix(graph): fixed canvas 2d graph alignment when showHeaders is false (#117) (#119)

Resolves the bug raised in #117.

Author: TomPlum

README.md

@@ -117,6 +117,9 @@ This strategy can be used by rendering the `<GitLog.GraphHTMLGrid />` subcompone
 
 ### Canvas 2D
 
+> [!WARNING]
+> This Canvas2D variant of the graph is in-complete and may have rendering bugs. It's also not as feature-rich as the HTML variant due to canvas API limitations and unfinished work.
+
 This implementation uses a standard HTML `canvas` element with a `2d` rendering context.
 
 This strategy can be used by rendering the `<GitLog.GraphCanvas2D />` subcomponent under the `<GitLog />`.

package-lock.json

@@ -337,6 +337,10 @@ The following properties are injected into the functions `props` argument:
 
 ### GraphCanvas2D
 
+> [!WARNING]
+> This Canvas2D variant of the graph is in-complete and may have rendering bugs. It's also not as feature-rich as the HTML variant due to canvas API limitations and unfinished work.
+
+
 | Property          | Type                                  | Description                                                                                                    |
 |-------------------|---------------------------------------|----------------------------------------------------------------------------------------------------------------|
 | `nodeTheme`       | [`NodeTheme`](#nodetheme)             | Theme applied to commit node elements in the graph.                                                            |

packages/library/README.md

@@ -3,7 +3,7 @@
   "author": "Thomas Plumpton",
   "repository": "https://github.com/TomPlum/react-git-log",
   "description": "A flexible, themable, React component for visualising Git commit history, branch and tag metadata.",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/react-git-log.js",

packages/library/package.json

@@ -3691,6 +3691,7 @@ exports[`GitLog > Canvas2D Graph > should render correctly and match the snapsho
       >
         <canvas
           class="canvas"
+          data-testid="graph-2d-canvas"
           height="18960"
           style="width: 168px; height: 18960px;"
           width="168"
@@ -22732,7 +22733,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -85368,7 +85369,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -144982,7 +144983,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(30, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(30, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -152750,7 +152751,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(473, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(473, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -211463,7 +211464,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(10, 40px);"
+          style="grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(10, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -215695,7 +215696,7 @@ exports[`GitLog > HTML Grid Graph > should render correctly and match the snapsh
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px);"
+          style="grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(474, 40px); margin-top: 12px;"
         >
           <button
             class="column"

packages/library/src/__snapshots__/GitLog.spec.tsx.snap

@@ -276,6 +276,7 @@ exports[`GitLogPaged > should render correctly and match the snapshot the pagina
       >
         <canvas
           class="canvas"
+          data-testid="graph-2d-canvas"
           height="1600"
           style="width: 120px; height: 1600px;"
           width="120"
@@ -1763,7 +1764,7 @@ exports[`GitLogPaged > should render correctly and match the snapshot the pagina
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(20, 40px);"
+          style="grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(20, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -3912,7 +3913,7 @@ exports[`GitLogPaged > should render correctly and match the snapshot the pagina
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(20, 40px);"
+          style="grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(20, 40px); margin-top: 12px;"
         >
           <button
             class="column"
@@ -6854,7 +6855,7 @@ exports[`GitLogPaged > should render correctly and match the snapshot the pagina
       >
         <div
           class="graph"
-          style="grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(40, 40px);"
+          style="grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(40, 40px); margin-top: 12px;"
         >
           <button
             class="column"

packages/library/src/__snapshots__/GitLogPaged.spec.tsx.snap

@@ -0,0 +1,7 @@
+/**
+ * The number of pixels of margin at the
+ * top of the graph element that offsets
+ * it enough to line-up correctly with
+ * adjacent elements (such as tags or a table).
+ */
+export const GRAPH_MARGIN_TOP = 12

packages/library/src/modules/Graph/constants.ts

@@ -3,7 +3,6 @@
 }
 
 .graph {
-  margin-top: 12px;
   height: 100%;
   display: grid;
   gap: 0;

packages/library/src/modules/Graph/core/GraphCore.module.scss

@@ -9,10 +9,10 @@ import {
 } from 'modules/Graph/strategies/Canvas'
 import { useSelectCommit } from 'hooks/useSelectCommit'
 import styles from './Canvas2DGraph.module.scss'
+import { GRAPH_MARGIN_TOP } from 'modules/Graph/constants'
 
 export const Canvas2DGraph = () => {
   const { selectCommitHandler } = useSelectCommit()
-  const { isServerSidePaginated } = useGitContext()
   const { graphWidth, visibleCommits, nodeSize, nodeTheme, orientation } = useGraphContext()
 
   const {
@@ -31,7 +31,9 @@ export const Canvas2DGraph = () => {
     indexCommit,
     isIndexVisible,
     selectedCommit,
-    previewedCommit
+    previewedCommit,
+    isServerSidePaginated,
+    showHeaders
   } = useGitContext()
 
   const getNodeColours = useCallback<GetCanvasRendererColoursFunction>((columnIndex: number) => {
@@ -168,6 +170,10 @@ export const Canvas2DGraph = () => {
       width={canvasWidth}
       height={canvasHeight}
       className={styles.canvas}
+      data-testid='graph-2d-canvas'
+      style={{
+        marginTop: showHeaders ? undefined : GRAPH_MARGIN_TOP
+      }}
     />
   )
 }

packages/library/src/modules/Graph/strategies/Canvas/Canvas2DGraph.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react'
+import { Canvas2DGraph } from 'modules/Graph/strategies/Canvas/Canvas2DGraph'
+import * as gitContext from 'context/GitContext/useGitContext'
+import { commit, gitContextBag, graphContextBag, graphData } from 'test/stubs'
+import { describe, it, expect, beforeEach } from 'vitest'
+import * as graphContext from 'modules/Graph/context'
+
+describe('CanvasGraph2D', () => {
+  beforeEach(() => {
+    vi.spyOn(graphContext, 'useGraphContext').mockReturnValue(graphContextBag())
+  })
+
+  it('should apply margin-top to the canvas element when showHeaders is false', () => {
+    const selectedCommit = commit({ hash: 'selected' })
+
+    vi.spyOn(gitContext, 'useGitContext').mockReturnValue(
+      gitContextBag({
+        showHeaders: false,
+        selectedCommit,
+        graphData: graphData({
+          hashToCommit: new Map([[selectedCommit.hash, selectedCommit]]),
+          positions: new Map([[selectedCommit.hash, [0, 0]]])
+        })
+      })
+    )
+
+    render(<Canvas2DGraph />)
+
+    expect(screen.getByTestId('graph-2d-canvas')).toHaveStyle('margin-top: 12px')
+  })
+
+  it('should NOT apply margin-top to the canvas element when showHeaders is true', () => {
+    const selectedCommit = commit({ hash: 'selected' })
+
+    vi.spyOn(gitContext, 'useGitContext').mockReturnValue(
+      gitContextBag({
+        showHeaders: true,
+        selectedCommit,
+        graphData: graphData({
+          hashToCommit: new Map([[selectedCommit.hash, selectedCommit]]),
+          positions: new Map([[selectedCommit.hash, [0, 0]]])
+        })
+      })
+    )
+
+    render(<Canvas2DGraph />)
+
+    expect(screen.getByTestId('graph-2d-canvas')).toHaveStyle('margin-top: undefined')
+  })
+})