Fix disappearance of the future.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.842",
+  "version": "1.0.916",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/Versions/VersionsContainer.jsx

@@ -1,25 +1,28 @@
 import React, {useState, useEffect} from 'react'
+import {useNavigate} from 'react-router-dom'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import Timeline from './VersionsTimeline'
-import Panel from '../Panel'
 import useStore from '../../store/useStore'
-import {useNavigate} from 'react-router-dom'
-import {getCommitsForBranch} from '../../utils/GitHub'
-import RestartAltIcon from '@mui/icons-material/RestartAlt'
-import {navigateBaseOnModelPath} from '../../utils/location'
+import {getCommitsForFile} from '../../utils/GitHub'
+import {assertDefined} from '../../utils/assert'
 import debug from '../../utils/debug'
+import {navigateBaseOnModelPath} from '../../utils/location'
+import Panel from '../Panel'
+import VersionsTimeline from './VersionsTimeline'
+import RestartAltIcon from '@mui/icons-material/RestartAlt'
 
 
 /**
  * VersionsContainer displays a series of versions in a timeline format.
  * Each version corresponds to a commit, and this component fetches
- * commit data for the provided branch and displays it.
+ * commit data for the provided filepath and displays it.
  *
- * @param {string} branch The git branch for which commits are fetched.
+ * @param {string} filePath The file for which commits are fetched.
+ * @param {string} current The current branch or sha, to indicate is active in UI.
  * @return {object} A timeline panel of versions.
  */
-export default function VersionsContainer({branch}) {
+export default function VersionsContainer({filePath, currentRef}) {
+  assertDefined(filePath, currentRef)
   const [commitData, setCommitData] = useState([])
   const accessToken = useStore((state) => state.accessToken)
   const repository = useStore((state) => state.repository)
@@ -31,7 +34,7 @@ export default function VersionsContainer({branch}) {
   useEffect(() => {
     const fetchCommits = async () => {
       try {
-        const commits = await getCommitsForBranch(repository, branch, accessToken)
+        const commits = await getCommitsForFile(repository, filePath, accessToken)
         if (commits) {
           const versionsInfo = commits.map((entry) => {
             const extractedData = {
@@ -49,7 +52,7 @@ export default function VersionsContainer({branch}) {
       }
     }
     fetchCommits()
-  }, [repository, branch, accessToken])
+  }, [repository, filePath, accessToken])
 
   /**
    * This callBack navigated to the selected commit
@@ -65,7 +68,7 @@ export default function VersionsContainer({branch}) {
       })
     }
   }
-  const navigteToMain = () => {
+  const navigateToMain = () => {
     if (modelPath) {
       const mainPath = navigateBaseOnModelPath(modelPath.org, modelPath.repo, 'main', modelPath.filepath)
       navigate({
@@ -77,12 +80,18 @@ export default function VersionsContainer({branch}) {
 
   return (
     <Panel
-      content={<Timeline commitData={commitData} commitNavigateCb={commitNavigate}/>}
+      content={
+        <VersionsTimeline
+          commitData={commitData}
+          currentRef={currentRef}
+          commitNavigateCb={commitNavigate}
+        />
+      }
       testId='Version Panel'
       title='Versions'
       action={
         <Tooltip title="Navigate to the tip of version history">
-          <IconButton aria-label="navigate_to_tip" size="small" onClick={navigteToMain} >
+          <IconButton aria-label="navigate_to_tip" size="small" onClick={navigateToMain} >
             <RestartAltIcon fontSize="inherit"/>
           </IconButton>
         </Tooltip>

src/Components/Versions/VersionsContainer.test.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import ShareMock from '../../ShareMock'
 import {render, renderHook, act} from '@testing-library/react'
-import VersionsContainer from './VersionsContainer'
+import ShareMock from '../../ShareMock'
+import useStore from '../../store/useStore'
 import {
   MOCK_MODEL_PATH_GIT,
   MOCK_REPOSITORY,
 } from '../../utils/GitHub'
-import useStore from '../../store/useStore'
+import VersionsContainer from './VersionsContainer'
 
 
 describe('VersionsContainer', () => {
@@ -18,7 +18,7 @@ describe('VersionsContainer', () => {
     })
     const {getByText} = render(
         <ShareMock>
-          <VersionsContainer branch="main"/>
+          <VersionsContainer filePath="/ZGRAGGEN.ifc" currentRef={'main'}/>
         </ShareMock>,
     )
     const dialogTitle = getByText('Versions')

src/Components/Versions/VersionsTimeline.jsx

@@ -47,7 +47,9 @@ function TimelineInfo({commit, active}) {
       <TimelineSeparator>
         <TimelineConnector/>
         <TimelineDot color={active ? 'primary' : 'inherit'} data-testid='commit'>
-          {(commit.commitMessage.includes('Create') || commit.commitMessage.includes('Add') || commit.commitMessage.includes('Merge')) ?
+          {(commit.commitMessage.includes('Create') ||
+            commit.commitMessage.includes('Add') ||
+            commit.commitMessage.includes('Merge')) ?
             <ControlPointIcon/> :
             <CommitIcon sx={{transform: 'rotate(90deg)'}}/>
           }
@@ -111,12 +113,12 @@ function TimelineInfo({commit, active}) {
  * Each version corresponds to a commit, and this component fetches
  * commit data for the provided branch and displays it.
  *
- * @param {Array} commitData - An array of commits.
- * @param {Function} commitNavigateCb - A callback function to navigate to a specific commit.
- * @return {object} A timeline of versions.
+ * @param {Array} commitData An array of commits
+ * @param {string} currentRef To indicate as active in the UI
+ * @param {Function} commitNavigateCb A callback function to navigate to a specific commit
+ * @return {object} A timeline of versions
  */
-export default function VersionsTimeline({commitData, commitNavigateCb}) {
-  const [activeVersion, setActiveVersion] = useState(0)
+export default function VersionsTimeline({commitData, currentRef, commitNavigateCb}) {
   const [showLoginMessage, setShowLoginMessage] = useState(false)
 
   useEffect(() => {
@@ -130,20 +132,24 @@ export default function VersionsTimeline({commitData, commitNavigateCb}) {
     return () => clearTimeout(timer)
   }, [commitData])
 
-  const handleItemClick = (index) => {
-    commitNavigateCb(index)
-    setActiveVersion(index)
-  }
-
+  const shaLength = 40
+  const refIsSha = currentRef.length === shaLength
   return (
     <Timeline>
       {commitData.length === 0 && !showLoginMessage && <Loader/>}
       {showLoginMessage && (
         <NoContent message='Please log in using your GitHub account to get access to the project timeline'/>
       )}
       {commitData.map((commit, i) => (
-        <CustomTimelineItem key={i} onClick={() => handleItemClick(i)}>
-          <TimelineInfo commit={commit} active={activeVersion === i}/>
+        <CustomTimelineItem key={i} onClick={() => commitNavigateCb(i)}>
+          <TimelineInfo
+            commit={commit}
+            active={
+              (refIsSha && commit.sha === currentRef) ?
+                true :
+                (!refIsSha && i === 0)
+            }
+          />
         </CustomTimelineItem>
       ))}
     </Timeline>

src/Components/Versions/VersionsTimeline.test.jsx

@@ -20,7 +20,12 @@ describe('CustomTimeline', () => {
 
   it('displays the correct number of timeline items', () => {
     const commitNavigateCb = jest.fn()
-    const {getByText} = render(<VersionsTimeline commitData={mockCommitData} commitNavigateCb={commitNavigateCb}/>)
+    const {getByText} = render(
+        <VersionsTimeline
+          commitData={mockCommitData}
+          currentRef={'main'}
+          commitNavigateCb={commitNavigateCb}
+        />)
     const firstItem = getByText('User1')
     const secondItem = getByText('User2')
     expect(firstItem).toBeInTheDocument()
@@ -29,7 +34,12 @@ describe('CustomTimeline', () => {
 
   it('updates the active timeline item on click', () => {
     const commitNavigateCb = jest.fn()
-    const {getByText} = render(<VersionsTimeline commitData={mockCommitData} commitNavigateCb={commitNavigateCb}/>)
+    const {getByText} = render(
+        <VersionsTimeline
+          commitData={mockCommitData}
+          currentRef={'main'}
+          commitNavigateCb={commitNavigateCb}
+        />)
     const firstItem = getByText('User1')
     fireEvent.click(firstItem)
     expect(commitNavigateCb).toHaveBeenCalledTimes(1)

src/Containers/CadView.jsx

@@ -35,6 +35,8 @@ import {
   getLatestCommitHash,
   parseGitHubRepositoryURL,
 } from '../utils/GitHub'
+// TODO(pablo): use ^^ instead of this
+import {parseGitHubPath} from '../utils/location'
 import {computeElementPathIds, setupLookupAndParentLinks} from '../utils/TreeUtils'
 import {assertDefined} from '../utils/assert'
 import debug from '../utils/debug'
@@ -498,35 +500,13 @@ export default function CadView({
             setAlertMessage(`Could not load file: ${filepath}`)
           }, customViewSettings)
     } else {
-      // Split the pathname part of the URL into components
+      // TODO(pablo): probably already available in this scope, or use
+      // parseGitHubRepositoryURL instead.
       const url = new URL(ifcURL)
-      const pathComponents = url.pathname.split('/').filter((component) => component.length > 0)
-      let owner = null
-      let repo = null
-      let branch = null
-      let filePath = null
-      let commitHash = null
-      if (pathComponents[0] === 'r') {
-        // Extract the owner, repo, and filePath
-        owner = pathComponents[1]
-        repo = pathComponents[2]
-        branch = pathComponents[3]
-        // Join the remaining parts to form the filePath
-        // eslint-disable-next-line no-magic-numbers
-        filePath = pathComponents.slice(4).join('/')
-        // get commit hash
-        commitHash = await getLatestCommitHash(owner, repo, filePath, '', branch)
-      } else {
-      // Extract the owner, repo, and filePath
-        owner = pathComponents[0]
-        repo = pathComponents[1]
-        branch = pathComponents[2]
-        // Join the remaining parts to form the filePath
-        // eslint-disable-next-line no-magic-numbers
-        filePath = pathComponents.slice(3).join('/')
-        // get commit hash
-        commitHash = await getLatestCommitHash(owner, repo, filePath, accessToken, branch)
-      }
+      const {isPublic, owner, repo, branch, filePath} = parseGitHubPath(url.pathname)
+      const commitHash = isPublic ?
+            await getLatestCommitHash(owner, repo, filePath, '', branch) :
+            await getLatestCommitHash(owner, repo, filePath, accessToken, branch)
 
       if (commitHash === null) {
         debug().error(`Error obtaining commit hash for: ${ifcURL}`)
@@ -826,6 +806,15 @@ export default function CadView({
     }
   }
 
+  // TODO(pablo): again, just need branch here for VersionsContainer
+  // below.  It's probably already available in this scope.
+  let ghPath = location.pathname
+  if (ghPath.startsWith(`${appPrefix}/v/gh`)) {
+    ghPath = ghPath.substring(`${appPrefix}/v/gh`.length)
+  }
+  const {branch} = parseGitHubPath(ghPath)
+
+
   const windowDimensions = useWindowDimensions()
   const spacingBetweenSearchAndOpsGroupPx = 20
   const operationsGroupWidthPx = 100
@@ -940,7 +929,10 @@ export default function CadView({
             }
             {
               modelPath.repo !== undefined && isVersionHistoryVisible &&
-              <VersionsContainer branch={modelPath.branch}/>
+              <VersionsContainer
+                filePath={modelPath.filepath}
+                currentRef={branch}
+              />
             }
           </Box>
         </Box>

src/utils/GitHub.js

@@ -1,17 +1,20 @@
 import {Octokit} from '@octokit/rest'
-import debug from './debug'
 import PkgJson from '../../package.json'
 import {assertDefined} from './assert'
+import debug from './debug'
 // TODO(pablo): unit tests after nicks OPFS changes go in
 
+
 /**
  * @param {object} repository
- * @param {string} branch
+ * @param {string} filepath
  * @param {string} accessToken
  * @return {Array}
  */
-export async function getCommitsForBranch(repository, branch, accessToken = '') {
-  const res = await getGitHub(repository, `commits?sha=${branch}`, {}, accessToken)
+export async function getCommitsForFile(repository, filepath, accessToken = '') {
+  const res = await getGitHub(repository, `commits`, {
+    path: filepath,
+  }, accessToken)
   const commitsArr = res.data
   return commitsArr
 }

src/utils/location.js

@@ -256,3 +256,38 @@ export function getAllHashParams(url) {
   const allHashParams = splitHref[1]
   return allHashParams
 }
+
+
+/**
+ * @param {string} path the pathname part of a url, e.g. `/the/path/to/file.ifc`
+ * @return {object} owner, repo, branch, filePath, commitHash
+ */
+export function parseGitHubPath(path) {
+  const parts = path.split('/').filter((component) => component.length > 0)
+  let owner = null
+  let repo = null
+  let branch = null
+  let filePath = null
+  let isPublic = null
+  if (parts[0] === 'r') {
+    // Extract the owner, repo, and filePath
+    owner = parts[1]
+    repo = parts[2]
+    branch = parts[3]
+    // Join the remaining parts to form the filePath
+    // eslint-disable-next-line no-magic-numbers
+    filePath = parts.slice(4).join('/')
+    // get commit hash
+    isPublic = true
+  } else {
+    // Extract the owner, repo, and filePath
+    owner = parts[0]
+    repo = parts[1]
+    branch = parts[2]
+    // Join the remaining parts to form the filePath
+    // eslint-disable-next-line no-magic-numbers
+    filePath = parts.slice(3).join('/')
+    isPublic = false
+  }
+  return {isPublic, owner, repo, branch, filePath}
+}