Merge pull request #363 from jasonlong/2d-toggle

Add "Both" toggle to show 2D and 3D views together

Author: jasonlong

biome.json

@@ -37,6 +37,16 @@
           }
         }
       }
+    },
+    {
+      "includes": ["src/iso.css"],
+      "linter": {
+        "rules": {
+          "complexity": {
+            "noImportantStyles": "off"
+          }
+        }
+      }
     }
   ]
 }

src/dom.test.js

@@ -37,10 +37,11 @@ describe('applyViewType', () => {
     expect(element.classList.contains('ic-squares')).toBe(false)
   })
 
-  it('adds ic-cubes for any non-squares type', () => {
-    applyViewType(element, 'anything')
-    expect(element.classList.contains('ic-cubes')).toBe(true)
+  it('adds ic-both class for both type', () => {
+    applyViewType(element, 'both')
+    expect(element.classList.contains('ic-both')).toBe(true)
     expect(element.classList.contains('ic-squares')).toBe(false)
+    expect(element.classList.contains('ic-cubes')).toBe(false)
   })
 
   it('handles toggling from cubes to squares', () => {

src/iso.css

@@ -1,14 +1,17 @@
-/* Normal chart display */
+/* Normal chart display (2D only) */
 .ic-squares #isometric-contributions,
 .ic-squares .ic-contributions-wrapper {
   display: none;
 }
 
-/* Isometric cube display */
+/* Isometric cube display (3D only) */
 .ic-cubes .contrib-details {
   display: none;
 }
 
 .ic-cubes .js-calendar-graph {
-  display: none;
+  /* Override GitHub Primer's d-flex !important */
+  display: none !important;
 }
+
+/* Both display - no hiding needed, both are visible by default */

src/iso.js

@@ -118,8 +118,19 @@ const initUI = () => {
     cubesButton.classList.add('selected')
   }
 
+  const bothButton = document.createElement('button')
+  bothButton.textContent = 'Both'
+  bothButton.className =
+    'ic-toggle-option both btn BtnGroup-item btn-sm py-0 px-1'
+  bothButton.dataset.icOption = 'both'
+  bothButton.addEventListener('click', handleViewToggle)
+  if (toggleSetting === 'both') {
+    bothButton.classList.add('selected')
+  }
+
   buttonGroup.append(squaresButton)
   buttonGroup.append(cubesButton)
+  buttonGroup.append(bothButton)
   insertLocation.before(buttonGroup)
 
   setContainerViewType(toggleSetting)

src/utils.js

@@ -172,11 +172,12 @@ export const calculateStreaks = (days) => {
 /**
  * Apply view type classes to a container element.
  * @param {Element} element - The container element
- * @param {string} type - View type ('squares' or 'cubes')
+ * @param {string} type - View type ('squares', 'cubes', or 'both')
  */
 export const applyViewType = (element, type) => {
   element.classList.toggle('ic-squares', type === 'squares')
-  element.classList.toggle('ic-cubes', type !== 'squares')
+  element.classList.toggle('ic-cubes', type === 'cubes')
+  element.classList.toggle('ic-both', type === 'both')
 }
 
 /**

test-extension.js

@@ -125,6 +125,83 @@ const run = async () => {
         `Canvas rendered: ${canvasDrawn.width}x${canvasDrawn.height} with ${canvasDrawn.nonTransparentPixels.toLocaleString()} drawn pixels`
       )
 
+      console.log('Checking that 2D graph is hidden in 3D mode...')
+      const graphVisibility = await page.evaluate(() => {
+        const calendarGraph = document.querySelector('.js-calendar-graph')
+        if (!calendarGraph) return { exists: false }
+        const style = window.getComputedStyle(calendarGraph)
+        return {
+          exists: true,
+          display: style.display,
+          visibility: style.visibility,
+          isHidden: style.display === 'none'
+        }
+      })
+
+      if (!graphVisibility.exists) {
+        throw new Error('Could not find .js-calendar-graph element')
+      }
+
+      if (!graphVisibility.isHidden) {
+        throw new Error(
+          `2D graph should be hidden in 3D mode but has display: "${graphVisibility.display}"`
+        )
+      }
+
+      console.log('2D graph correctly hidden in 3D mode')
+
+      // Test 2D mode
+      console.log('Clicking 2D toggle...')
+      await page.click('[data-ic-option="squares"]')
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      const mode2D = await page.evaluate(() => {
+        const canvas = document.querySelector('#isometric-contributions')
+        const calendarGraph = document.querySelector('.js-calendar-graph')
+        const canvasStyle = window.getComputedStyle(canvas)
+        const graphStyle = window.getComputedStyle(calendarGraph)
+        return {
+          canvasHidden: canvasStyle.display === 'none',
+          graphVisible: graphStyle.display !== 'none'
+        }
+      })
+
+      if (!mode2D.canvasHidden) {
+        throw new Error('3D canvas should be hidden in 2D mode')
+      }
+      if (!mode2D.graphVisible) {
+        throw new Error('2D graph should be visible in 2D mode')
+      }
+      console.log('2D mode working correctly')
+
+      // Test Both mode
+      console.log('Clicking Both toggle...')
+      await page.click('[data-ic-option="both"]')
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      const modeBoth = await page.evaluate(() => {
+        const canvas = document.querySelector('#isometric-contributions')
+        const calendarGraph = document.querySelector('.js-calendar-graph')
+        const canvasStyle = window.getComputedStyle(canvas)
+        const graphStyle = window.getComputedStyle(calendarGraph)
+        return {
+          canvasVisible: canvasStyle.display !== 'none',
+          graphVisible: graphStyle.display !== 'none'
+        }
+      })
+
+      if (!modeBoth.canvasVisible) {
+        throw new Error('3D canvas should be visible in Both mode')
+      }
+      if (!modeBoth.graphVisible) {
+        throw new Error('2D graph should be visible in Both mode')
+      }
+      console.log('Both mode working correctly')
+
+      // Switch back to 3D for contribution data check
+      await page.click('[data-ic-option="cubes"]')
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
       console.log('Checking contribution data...')
       const contribTotal = await page.$eval(
         '.ic-contributions-wrapper ::-p-text(Contributions) + div ::-p-text(Total)',