Merge pull request #3283 from specklesystems/dimitrie/cnx-636-fe-handle-properties-correctly

Properties and parameters UI sugar

packages/frontend-2/components/viewer/explorer/Filters.vue

@@ -115,6 +115,7 @@ const {
 } = useFilterUtilities()
 
 const revitPropertyRegex = /^parameters\./
+const revitPropertyRegexDui3000 = /^properties\./ // note this is partially valid for civil3d, or dim should test against it
 
 const showAllFilters = ref(false)
 
@@ -123,7 +124,7 @@ const props = defineProps<{
 }>()
 
 const isRevitProperty = (key: string): boolean => {
-  return revitPropertyRegex.test(key)
+  return revitPropertyRegex.test(key) || revitPropertyRegexDui3000.test(key)
 }
 
 const relevantFilters = computed(() => {
@@ -144,6 +145,9 @@ const relevantFilters = computed(() => {
       f.key.includes('midPoint.') ||
       f.key.includes('startPoint.') ||
       f.key.includes('startPoint.') ||
+      f.key.includes('.materialName') ||
+      f.key.includes('.materialClass') ||
+      f.key.includes('.materialCategory') ||
       f.key.includes('displayStyle') ||
       f.key.includes('displayValue') ||
       f.key.includes('displayMesh')

packages/frontend-2/components/viewer/selection/Object.vue

@@ -31,7 +31,8 @@
         </div>
       </button>
     </div>
-    <div v-if="unfold" class="ml-1 space-y-1 px-2 py-1">
+    <div v-if="unfold" class="space-y-1 px-0 py-1">
+      <!-- key value pair display -->
       <div
         v-for="(kvp, index) in [
           ...categorisedValuePairs.primitives,
@@ -63,6 +64,9 @@
               >
                 {{ kvp.value === null ? 'null' : kvp.value }}
               </span>
+              <span v-if="kvp.units" class="truncate opacity-70">
+                {{ kvp.units }}
+              </span>
               <button
                 v-if="isCopyable(kvp)"
                 :class="isCopyable(kvp) ? 'cursor-pointer' : 'cursor-default'"
@@ -83,7 +87,7 @@
         <ViewerSelectionObject
           :object="(kvp.value as SpeckleObject) || {}"
           :title="(kvp.key as string)"
-          :unfold="false"
+          :unfold="autoUnfoldKeys.includes(kvp.key)"
         />
       </div>
       <div
@@ -156,6 +160,7 @@ const props = withDefaults(
 const { highlightObjects, unhighlightObjects } = useHighlightedObjectsUtilities()
 
 const unfold = ref(props.unfold)
+const autoUnfoldKeys = ['properties', 'Instance Parameters']
 
 const isAdded = computed(() => {
   if (!diffEnabled.value) return false
@@ -250,7 +255,7 @@ const ignoredProps = [
 ]
 
 const keyValuePairs = computed(() => {
-  const kvps = [] as Record<string, unknown>[]
+  const kvps = [] as (Record<string, unknown> & { key: string; value: unknown })[]
 
   // handle revit paramters
   if (props.title === 'parameters') {
@@ -273,6 +278,7 @@ const keyValuePairs = computed(() => {
   const objectKeys = Object.keys(props.object)
   for (const key of objectKeys) {
     if (ignoredProps.includes(key)) continue
+
     const type = Array.isArray(props.object[key]) ? 'array' : typeof props.object[key]
     let innerType = null
     let arrayLength = null
@@ -286,6 +292,21 @@ const keyValuePairs = computed(() => {
         if (arr.length > 10) arrayPreview += ' ...' // in case truncate doesn't hit
       }
     }
+
+    if (
+      props.object[key] &&
+      isNameValuePair(props.object[key] as Record<string, unknown>)
+    ) {
+      // note: handles name value pairs from dui3 -
+      const { value, units } = props.object[key] as { value: string; units?: string }
+      kvps.push({
+        key,
+        type: typeof value,
+        value: value as string,
+        units
+      })
+      continue
+    }
     kvps.push({
       key,
       type,
@@ -299,14 +320,24 @@ const keyValuePairs = computed(() => {
   return kvps
 })
 
+const isNameValuePair = (obj: Record<string, unknown>) => {
+  const keys = Object.keys(obj)
+  return keys.includes('name') && keys.includes('value')
+}
+
 const categorisedValuePairs = computed(() => {
   return {
     primitives: keyValuePairs.value.filter(
       (item) => item.type !== 'object' && item.type !== 'array' && item.value !== null
     ),
-    objects: keyValuePairs.value.filter(
-      (item) => item.type === 'object' && item.value !== null
-    ),
+    objects: keyValuePairs.value
+      .filter((item) => item.type === 'object' && item.value !== null)
+      .filter((item) => {
+        const keys = Object.keys(item.value as unknown as Record<string, unknown>)
+        const nvp = keys.includes('name') && keys.includes('value')
+        return !nvp
+      }) // filters out name value pairs - note on new properties structure coming out of DUI3
+      .sort((a, b) => a.key.toLowerCase().localeCompare(b.key.toLowerCase())),
     nonPrimitiveArrays: keyValuePairs.value.filter(
       (item) =>
         item.type === 'array' &&

packages/viewer/src/modules/loaders/Speckle/SpeckleLoader.ts

@@ -81,6 +81,7 @@ export class SpeckleLoader extends Loader {
     Logger.warn('Downloading object ', this._resource)
 
     const pause = new AsyncPause()
+
     for await (const obj of this.loader.getObjectIterator()) {
       if (this.isCancelled) {
         this.emit(LoaderEvent.LoadCancelled, this._resource)