Extend search bar functionality to open IFCs hosted on GitHub.

.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
     'jsx-a11y',
   ],
   rules: {
-    'max-len': ['error', 100],
+    'max-len': ['error', 140],
     'no-irregular-whitespace': ['error'],
     'no-trailing-spaces': ['error'],
     'prefer-rest-params': 'off',

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "buildrs",
-  "version": "1.0.0-r270",
+  "name": "bldrs-ai",
+  "version": "1.0.0-r283",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {
@@ -61,8 +61,7 @@
     "verbose": false,
     "testEnvironment": "jsdom",
     "testPathIgnorePatterns": [
-      "src/Share.test.js",
-      "src/ShareRoutes.test.js"
+      "src/Share.test.js"
     ],
     "transform": {
       "\\.[jt]sx?$": "babel-jest",

src/Components/AboutControl.jsx

@@ -119,7 +119,6 @@ function AboutContent({installPrefix}) {
       </ul>
       <Typography variant='h5' color='info'>Highlighted Projects:</Typography>
       <div className = {classes.demoContainer}>
-        {/* eslint-disable-next-line */}
         <a href={`${installPrefix}/share/v/gh/Swiss-Property-AG/Portfolio/main/KNIK.ifc#c:-12.84,3.53,9.64,-5.33,2.61,1.71`}>
           <img alt="Tinyhouse" src={`${installPrefix}/Tinyhouse.png`} className={classes.demo}/>
         </a>

src/Components/Buttons.jsx

@@ -46,11 +46,12 @@ export function TooltipToggleButton({
   onClick,
   title,
   icon,
+  size = 'medium',
   placement='left',
 }) {
   assertDefined(title, icon, onClick)
   const [isPressed, setIsPressed] = useState(false)
-  const classes = useStyles(useTheme())
+  const classes = useStyles(size === 'small' ? {buttonWidth: '40px'} : {buttonWidth: '50px'})
   return (
     <div className={classes.root}>
       <Tooltip title={title} describeChild placement={placement}>
@@ -89,11 +90,12 @@ export function ControlButton({
   setIsDialogDisplayed,
   icon,
   placement='left',
+  size = 'medium',
   dialog,
 }) {
   assertDefined(title, isDialogDisplayed, setIsDialogDisplayed, icon, dialog)
   const toggleIsDialogDisplayed = () => setIsDialogDisplayed(!isDialogDisplayed)
-  const classes = useStyles(useTheme())
+  const classes = useStyles(size === 'small' ? {buttonWidth: '40px'} : {buttonWidth: '50px'})
   return (
     <div className={classes.root}>
       <Tooltip title={title} describeChild placement={placement}>
@@ -120,7 +122,7 @@ export function ControlButton({
  */
 export function FormButton({title, icon, type='submit', placement='left', size='medium'}) {
   assertDefined(title, icon)
-  const classes = useStyles(useTheme())
+  const classes = useStyles(size === 'small' ? {buttonWidth: '40px'} : {buttonWidth: '50px'})
   return (
     <div className={classes.root}>
       <Tooltip title={title} describeChild placement={placement}>
@@ -136,8 +138,8 @@ export function FormButton({title, icon, type='submit', placement='left', size='
 const useStyles = makeStyles((theme) => ({
   root: {
     '& button': {
-      width: '50px',
-      height: '50px',
+      width: (props) => props.buttonWidth || '50px',
+      height: (props) => props.buttonWidth || '50px',
       border: 'none',
       borderRadius: '50%',
     },

src/Components/ItemProperties.jsx

@@ -141,7 +141,6 @@ async function createPsetsList(model, element, classes, expandAll) {
 }
 
 
-/* eslint-disable max-len*/
 /**
  * The keys are defined here:
  * https://standards.buildingsmart.org/IFC/DEV/IFC4_3/RC2/HTML/schema/ifcproductextension/lexical/ifcelement.htm

src/Components/NavPanel.jsx

@@ -110,7 +110,7 @@ export default function NavPanel({
 const useStyles = makeStyles({
   root: {
     'position': 'absolute',
-    'top': '80px',
+    'top': '94px',
     'left': '20px',
     'overflow': 'auto',
     'width': '300px',

src/Components/SearchBar.jsx

@@ -9,7 +9,10 @@ import Paper from '@mui/material/Paper'
 import {makeStyles} from '@mui/styles'
 import {TooltipToggleButton, FormButton} from './Buttons'
 import debug from '../utils/debug'
+import {isURL, isValidModelURL, parseIfcURL} from '../ShareRoutes'
 import SearchIcon from '../assets/2D_Icons/Search.svg'
+import LinkIcon from '../assets/2D_Icons/Link.svg'
+import ClearIcon from '../assets/2D_Icons/Close.svg'
 import TreeIcon from '../assets/2D_Icons/Tree.svg'
 
 
@@ -24,10 +27,10 @@ export default function SearchBar({onClickMenuCb, showNavPanel}) {
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
   const [inputText, setInputText] = useState('')
+  const [error, setError] = useState('')
   const onInputChange = (event) => setInputText(event.target.value)
   const searchInputRef = useRef(null)
-  const classes = useStyles()
-
+  const classes = useStyles({inputTextLength: Number(inputText.length) * 11})
 
   useEffect(() => {
     debug().log('SearchBar#useEffect[searchParams]')
@@ -44,10 +47,20 @@ export default function SearchBar({onClickMenuCb, showNavPanel}) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchParams])
 
-
   const onSubmit = (event) => {
     // Prevent form event bubbling and causing page reload.
     event.preventDefault()
+    setError('')
+    // if url is typed into the search bar open the model
+    if (isURL(inputText)) {
+      if (isValidModelURL(inputText)) {
+        const modelPath = parseIfcURL(inputText)
+        navigate(modelPath, {replace: true})
+        return
+      } else {
+        setError(`Please enter a valid url. Click on the LINK icon to learn more.`)
+      }
+    }
 
     // Searches from SearchBar clear current URL's IFC path.
     if (containsIfcPath(location)) {
@@ -63,18 +76,50 @@ export default function SearchBar({onClickMenuCb, showNavPanel}) {
   }
 
   return (
-    <Paper component='form' className={classes.root} onSubmit={onSubmit}>
-      <TooltipToggleButton
-        title='Toggle tree view'
-        onClick={onClickMenuCb}
-        icon={<TreeIcon/>}/>
-      <InputBase
-        inputRef={searchInputRef}
-        value={inputText}
-        onChange={onInputChange}
-        placeholder={'Search model'}/>
-      <FormButton title='search' icon={<SearchIcon/>}/>
-    </Paper>
+    <div>
+      <Paper component='form' className={classes.root} onSubmit={onSubmit}>
+        <TooltipToggleButton
+          placement = 'bottom'
+          title='Toggle tree view'
+          onClick={onClickMenuCb}
+          icon={<TreeIcon/>}/>
+        <InputBase
+          inputRef={searchInputRef}
+          value={inputText}
+          onChange={onInputChange}
+          error = {true}
+          placeholder={'Search model'}/>
+        {inputText.length>0?
+          <TooltipToggleButton
+            title='clear'
+            size = 'small'
+            placement = 'bottom'
+            onClick={()=>{
+              setInputText('')
+              setError('')
+            }}
+            icon={<ClearIcon/>}/>:null
+        }
+        <FormButton
+          title='search'
+          size = 'small'
+          placement = 'bottom'
+          icon={<SearchIcon/>}/>
+        <TooltipToggleButton
+          title={`Type GitHUB URL to access IFCs hosted on GitHUB.
+                  Click on the link icon to learn more.`}
+          size = 'small'
+          placement = 'right'
+          onClick={()=>{
+            window.open('https://github.com/bldrs-ai/Share/wiki/Open-IFC-model-hosted-on-GitHub')
+          }}
+          icon={<LinkIcon/>}/>
+      </Paper>
+      { inputText.length>0 &&
+        error.length>0 &&
+        <div className = {classes.error}>{error}</div>
+      }
+    </div>
   )
 }
 
@@ -142,14 +187,24 @@ export function stripIfcPathFromLocation(location, fileExtension = '.ifc') {
 const useStyles = makeStyles({
   root: {
     'display': 'flex',
-    'width': '300px',
+    'minWidth': '300px',
+    'width': (props) => props.inputTextLength,
+    'maxWidth': '800px',
     'alignItems': 'center',
     'padding': '2px 2px 2px 2px',
     '@media (max-width: 900px)': {
-      width: '250px',
+      minWidth: '300px',
+      width: '300px',
+      maxWidth: '300px',
     },
     '& .MuiInputBase-root': {
       flex: 1,
     },
   },
+  error: {
+    marginLeft: '10px',
+    marginTop: '3px',
+    fontSize: '10px',
+    color: 'red',
+  },
 })

src/Components/SnackbarMessage.jsx

@@ -21,6 +21,7 @@ export default function SnackBarMessage({message, type, open}) {
         severity={type}
         className = {classes.root}
         sx = {{backgroundColor: '#848484'}}
+        icon={false}
       >
         {message}
       </Alert>
@@ -35,13 +36,13 @@ const Alert = React.forwardRef(function Alert(props, ref) {
 const useStyles = makeStyles({
   root: {
     'position': 'relative',
-    'bottom': '60px',
+    'bottom': '70px',
     'left': '6px',
     '@media (max-width: 900px)': {
       left: '18px',
       bottom: '90px',
-      width: '220px',
-      inlineSize: '220px',
+      width: '305px',
+      inlineSize: '305px',
       overflow: 'visible',
       overflowWrap: 'anywhere',
     },

src/Containers/CadView.jsx

@@ -41,7 +41,6 @@ export default function CadView({
 }) {
   assertDefined(...arguments)
   debug().log('CadView#init: count: ', count++)
-
   // React router
   const navigate = useNavigate()
   // TODO(pablo): Removing this setter leads to a very strange stack overflow
@@ -465,7 +464,6 @@ const useStyles = makeStyles({
     // to hardcode for now and look into passing via the theme later.
     top: `20px`,
     left: '20px',
-    width: '300px',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-start',

src/ShareRoutes.jsx

@@ -6,6 +6,7 @@ import {
   useLocation,
   useNavigate,
 } from 'react-router-dom'
+import {assertDefined} from './utils/assert'
 import Share from './Share'
 import debug from './utils/debug'
 
@@ -32,6 +33,79 @@ function Forward({appPrefix}) {
 }
 
 
+/**
+ * Check if input is a url
+ * @param {input} input
+ * @return {boolean} return true if url is found
+ */
+export function isURL(input) {
+  assertDefined(input)
+  return input.includes('https://') || input.includes('www')
+}
+
+
+/**
+ * Check if input is a valid url
+ * @param {Object} input
+ * @return {boolean} return true if url is found
+ */
+export function isValidModelURL(input) {
+  assertDefined(input)
+  try {
+    const url = new URL(input)
+    const parsed = new URL(url)
+    if (parsed.hostname !== 'github.com' &&
+        parsed.hostname !== 'www.github.com' &&
+        parsed.hostname !== 'raw.githubusercontent.com') {
+      return false
+    }
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+
+/**
+ * ParseIfcURL parses Github repository URLs or raw content URLs
+ * @param {string} url
+ * @return {string} Structured path to the model repositore
+ */
+export const parseIfcURL = (url) => {
+  assertDefined(url)
+  const parsed = new URL(url)
+  const parts = parsed.pathname.split('/')
+  switch (parsed.hostname) {
+    case 'github.com':
+    case 'www.github.com':
+      if (parts.length > 4 || parts[3] === 'blob') {
+        const URLParameters = {
+          org: parts[1],
+          repo: parts[2],
+          branch: parts[4],
+          path: parts[5],
+        }
+        const modelPath = `/share/v/gh/${URLParameters.org}/${URLParameters.repo}/${URLParameters.branch}/${URLParameters.path}`
+        return modelPath
+      }
+      throw new Error('unsupported Github repository URL')
+    case 'raw.githubusercontent.com':
+      if (parts.length > 3) {
+        const URLParameters = {
+          org: parts[1],
+          repo: parts[2],
+          branch: parts[3],
+          path: parts[4],
+        }
+        const modelPath = `/share/v/gh/${URLParameters.org}/${URLParameters.repo}/${URLParameters.branch}/${URLParameters.path}`
+        return modelPath
+      }
+      throw new Error('unsupported Github user content URL')
+    default:
+      throw new Error('unexpected case!')
+  }
+}
+
 /**
  * For URL design see: https://github.com/bldrs-ai/Share/wiki/URL-Structure
  *