VYZN: Matrix Messaging Integration

.gitignore

@@ -7,6 +7,7 @@
 # misc
 .DS_Store
 .vscode
+.idea
 *.log
 
 cypress/videos

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r501",
+  "version": "1.0.0-r534",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {
@@ -34,6 +34,7 @@
     "@mui/styles": "^5.9.2",
     "@octokit/rest": "^19.0.3",
     "clsx": "^1.2.1",
+    "matrix-widget-api": "^1.1.1",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

src/BaseRoutes.jsx

@@ -3,7 +3,6 @@ import {Outlet, Route, Routes, useLocation, useNavigate} from 'react-router-dom'
 import ShareRoutes from './ShareRoutes'
 import debug from './utils/debug'
 
-
 /**
  * From URL design: https://github.com/bldrs-ai/Share/wiki/URL-Structure
  * ... We adopt a URL structure similar to Google Apps URL structure:

src/Containers/CadView.jsx

@@ -26,7 +26,7 @@ import SearchIndex from './SearchIndex'
  * Experimenting with a global. Just calling #indexElement and #clear
  * when new models load.
  */
-const searchIndex = new SearchIndex()
+export const searchIndex = new SearchIndex()
 
 
 let count = 0
@@ -74,6 +74,7 @@ export default function CadView({
   const setSelectedElements = useStore((state) => state.setSelectedElements)
   const setCutPlaneDirection = useStore((state) => state.setCutPlaneDirection)
   const setLevelInstance = useStore((state) => state.setLevelInstance)
+  const selectedElements = useStore((state) => state.selectedElements)
 
 
   /* eslint-disable react-hooks/exhaustive-deps */
@@ -100,6 +101,17 @@ export default function CadView({
   }, [searchParams])
 
 
+  useEffect(() => {
+    if (Array.isArray(selectedElements)) {
+      if (selectedElements.length > 0) {
+        selectItemsInScene(selectedElements.map((id) => parseInt(id)))
+      } else {
+        unSelectItems()
+      }
+    }
+  }, [selectedElements])
+
+
   // Watch for path changes within the model.
   // TODO(pablo): would be nice to have more consistent handling of path parsing.
   const location = useLocation()
@@ -324,7 +336,7 @@ export default function CadView({
         throw new Error('IllegalState: empty search query')
       }
       const resultIDs = searchIndex.search(query)
-      selectItemsInScene(resultIDs)
+      setSelectedElements(resultIDs.map((id) => `${id}`))
       setDefaultExpandedElements(resultIDs.map((id) => `${id }`))
       Privacy.recordEvent('search', {
         search_term: query,
@@ -354,8 +366,10 @@ export default function CadView({
 
   /** Unpick active scene elts and remove clip planes. */
   function unSelectItems() {
-    viewer.IFC.unpickIfcItems()
-    viewer.clipper.deleteAllPlanes()
+    if (viewer) {
+      viewer.IFC.unpickIfcItems()
+      viewer.clipper.deleteAllPlanes()
+    }
     resetState()
     const repoFilePath = modelPath.gitpath ? modelPath.getRepoPath() : modelPath.filepath
     navigate(`${pathPrefix}${repoFilePath}`)
@@ -368,7 +382,6 @@ export default function CadView({
    * @param {Array} resultIDs Array of expressIDs
    */
   async function selectItemsInScene(resultIDs) {
-    setSelectedElements(resultIDs.map((id) => `${id}`))
     try {
       await viewer.pickIfcItemsByID(0, resultIDs, true)
     } catch (e) {
@@ -397,7 +410,7 @@ export default function CadView({
     await selectItemsInScene([expressId])
     const pathIds = computeElementPathIds(lookupElt, (elt) => elt.expressID)
     setExpandedElements(pathIds.map((n) => `${n}`))
-    setSelectedElements(`${expressId}`)
+    setSelectedElements([`${expressId}`])
     const props = await viewer.getProperties(0, expressId)
     setSelectedElement(props)
     return pathIds

src/Containers/SearchIndex.js

@@ -10,6 +10,7 @@ export default class SearchIndex {
     this.eltsByType = {}
     this.eltsByName = {}
     this.eltsByGlobalId = {}
+    this.eltsByExpressId = {}
     this.eltsByText = {}
   }
 
@@ -45,6 +46,10 @@ export default class SearchIndex {
       this.indexElementByString(this.eltsByGlobalId, elt.GlobalId.value, elt)
     }
 
+    if (elt.expressID) {
+      this.indexElementByString(this.eltsByExpressId, elt.expressID.toString(), elt)
+    }
+
     const description = Ifc.getDescription(elt)
     if (description) {
       this.indexElementByStringSet(this.eltsByGlobalId,
@@ -114,6 +119,7 @@ export default class SearchIndex {
     deleteProperties(this.eltsByType)
     deleteProperties(this.eltsByName)
     deleteProperties(this.eltsByGlobalId)
+    deleteProperties(this.eltsByExpressId)
     deleteProperties(this.eltsByText)
   }
 
@@ -159,6 +165,7 @@ export default class SearchIndex {
     addAll(this.eltsByType[lowerToken])
 
     addAll(this.eltsByGlobalId[token])
+    addAll(this.eltsByExpressId[token])
 
     addAll(this.eltsByText[token])
 
@@ -167,4 +174,36 @@ export default class SearchIndex {
     debug().log('result IDs: ', resultIDs)
     return resultIDs
   }
+
+  /**
+   *
+   *
+   * @param {string} expressId.
+   * @return {string} globalId
+   */
+  getGlobalIdByExpressId(expressId) {
+    if (Object.prototype.hasOwnProperty.call(this.eltsByExpressId, expressId)) {
+      const set = this.eltsByExpressId[expressId]
+      const element = (set.values().next().value)
+      if (Object.prototype.hasOwnProperty.call(element, 'GlobalId')) {
+        return element['GlobalId'].value
+      }
+    }
+  }
+
+  /**
+   *
+   *
+   * @param {string} globalId.
+   * @return {string} expressId
+   */
+  getExpressIdByGlobalId(globalId) {
+    if (Object.prototype.hasOwnProperty.call(this.eltsByGlobalId, globalId)) {
+      const set = this.eltsByGlobalId[globalId]
+      const element = (set.values().next().value)
+      if (Object.prototype.hasOwnProperty.call(element, 'expressID')) {
+        return element['expressID'].toString()
+      }
+    }
+  }
 }

src/Share.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react'
+import React, {useEffect, useMemo, useRef, useState} from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
 import {useNavigate, useParams} from 'react-router-dom'
 import {ThemeProvider} from '@mui/material/styles'
@@ -12,6 +12,8 @@ import './index.css'
 // If icons-material isn't imported somewhere, mui dies
 /* eslint-disable */
 import AccountCircle from '@mui/icons-material/AccountCircle'
+import WidgetApi from "./WidgetApi/WidgetApi";
+import {searchIndex} from './Containers/CadView';
 /* eslint-enable */
 
 
@@ -29,6 +31,9 @@ export default function Share({installPrefix, appPrefix, pathPrefix}) {
   const [modelPath, setModelPath] = useState(null)
   const setRepository = useStore((state) => state.setRepository)
 
+  useMemo(() => {
+    new WidgetApi(navigation.current, searchIndex)
+  }, [navigation])
 
   /**
    * On a change to urlParams, setting a new model path will clear the

src/WidgetApi/ApiConnection.js

@@ -0,0 +1,75 @@
+/**
+ * Abstract ApiConnection
+ */
+class AbstractApiConnection {
+  /**
+   * event resolver.
+   *
+   * @param {string} eventName
+   * @param {Function} callable
+   */
+  on(eventName, callable) {
+    // do something on event.
+  }
+
+  /**
+   * starts the api.
+   */
+  start() {
+    console.warn('start() is not implemented')
+  }
+
+  /**
+   * stops the api.
+   */
+  stop() {
+    console.warn('stop() is not implemented')
+  }
+
+  /**
+   * send event.
+   *
+   * @param {string} eventName
+   * @param {object} data
+   */
+  send(eventName, data) {
+    console.warn('send() is not implemented')
+  }
+
+  /**
+   * requests capabilities.
+   *
+   * @param {string[]} capabilities
+   */
+  requestCapabilities(capabilities) {
+    console.warn('requestCapabilities() is not implemented')
+  }
+
+  /**
+   * returns a missing argument response.
+   *
+   * @param {string} argumentName
+   * @return {object} missing argument response.
+   */
+  missingArgumentResponse = function(argumentName) {
+    return {
+      error: true,
+      reason: `Missing argument ${argumentName}`,
+    }
+  }
+
+  /**
+   * returns a successful response.
+   *
+   * @param {object} data
+   * @return {object} successful response.
+   */
+  successfulResponse = function(data) {
+    return {
+      error: false,
+      ...data,
+    }
+  }
+}
+
+export default AbstractApiConnection

src/WidgetApi/ApiConnectionIframe.js

@@ -0,0 +1,73 @@
+import {WidgetApi as MatrixWidgetApi} from 'matrix-widget-api/lib/WidgetApi'
+import AbstractApiConnection from './ApiConnection'
+
+
+/**
+ * ApiConnection to Iframed bldrs instance
+ */
+class ApiConnectionIframe extends AbstractApiConnection {
+  widgetId = 'bldrs-share'
+  matrixWidgetApi = null
+
+  /**
+   * constructor
+   */
+  constructor() {
+    super()
+    this.matrixWidgetApi = new MatrixWidgetApi(this.widgetId)
+    this.matrixWidgetApi.requestCapabilities([])
+  }
+
+  /**
+   * event resolver.
+   *
+   * @param {string} eventName
+   * @param {Function} callable
+   */
+  on(eventName, callable) {
+    this.matrixWidgetApi.on(
+        eventName,
+        (event) => {
+          event.preventDefault()
+          const response = callable(event.detail.data)
+          this.matrixWidgetApi.transport.reply(event.detail, response)
+        },
+    )
+  }
+
+  /**
+   * send event.
+   *
+   * @param {string} eventName
+   * @param {object} data
+   */
+  send(eventName, data) {
+    this.matrixWidgetApi.transport.send(eventName, data)
+  }
+
+  /**
+   * requests capabilities.
+   *
+   * @param {string[]} capabilities
+   */
+  requestCapabilities(capabilities) {
+    this.matrixWidgetApi.requestCapabilities(capabilities)
+  }
+
+  /**
+   * starts the api.
+   */
+  start() {
+    this.matrixWidgetApi.start()
+    this.matrixWidgetApi.sendContentLoaded()
+  }
+
+  /**
+   * stops the api.
+   */
+  stop() {
+    this.matrixWidgetApi.stop()
+  }
+}
+
+export default ApiConnectionIframe