chore: Viewer not verbose and hidden stats

Merge branch 'dev' into main
bump version
2023-05-17 10:27:21 +02:00 · 2023-05-17 10:23:37 +02:00 · 2023-05-17 10:23:24 +02:00 · 2023-05-17 10:23:18 +02:00 · 2023-05-16 10:07:38 +02:00 · 2023-05-12 10:23:46 +02:00
29 changed files with 6282 additions and 2015 deletions
@@ -0,0 +1,35 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    requireConfigFile: false,
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  },
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier'
+  ],
+  env: {
+    node: true,
+    commonjs: true
+  },
+  ignorePatterns: [
+    'node_modules',
+    'dist',
+    'public',
+    'events.json',
+    '.*.{ts,js,vue,tsx,jsx}',
+    'generated/**/*'
+  ],
+  rules: {
+    'no-var': 'off',
+    '@typescript-eslint/ban-ts-comment': 'warn'
+  }
+}
+
+module.exports = config
@@ -1,78 +0,0 @@
-name: Update issue Status
-
-on:
-  issues:
-    types: [closed]
-
-jobs:
-  update_issue:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get project data
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ORGANIZATION: specklesystems
-          PROJECT_NUMBER: 9
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            query($org: String!, $number: Int!) {
-              organization(login: $org){
-                projectNext(number: $number) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      id
-                      name
-                      settings
-                    }
-                  }
-                }
-              }
-            }' -f org=$ORGANIZATION -F number=$PROJECT_NUMBER > project_data.json
-
-          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
-          
-          echo "$PROJECT_ID"
-          echo "$STATUS_FIELD_ID"
-          
-          echo 'DONE_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .settings | fromjson | .options[] | select(.name== "Done") | .id' project_data.json) >> $GITHUB_ENV
-          echo "$DONE_ID"
-
-      - name: Add Issue to project #it's already in the project, but we do this to get its node id!
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
-        run: |
-          item_id="$( gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            mutation($project:ID!, $id:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $id}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f id=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
-          
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
-          
-      - name: Update Status
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            mutation($project:ID!, $status:ID!, $id:ID!, $value:String!) {
-              set_status: updateProjectNextItemField(
-                input: {
-                  projectId: $project
-                  itemId: $id
-                  fieldId: $status
-                  value: $value
-                }
-              ) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f status=$STATUS_FIELD_ID -f id=$ITEM_ID -f value=${{ env.DONE_ID }}
-          
@@ -1,50 +0,0 @@
-name: Move new issues into Project
-
-on:
-  issues:
-    types: [opened]
-
-jobs:
-  track_issue:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get project data
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ORGANIZATION: specklesystems
-          PROJECT_NUMBER: 9
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            query($org: String!, $number: Int!) {
-              organization(login: $org){
-                projectNext(number: $number) {
-                  id
-                  fields(first:20) {
-                    nodes {
-                      id
-                      name
-                      settings
-                    }
-                  }
-                }
-              }
-            }' -f org=$ORGANIZATION -F number=$PROJECT_NUMBER > project_data.json
-
-          echo 'PROJECT_ID='$(jq '.data.organization.projectNext.id' project_data.json) >> $GITHUB_ENV
-          echo 'STATUS_FIELD_ID='$(jq '.data.organization.projectNext.fields.nodes[] | select(.name== "Status") | .id' project_data.json) >> $GITHUB_ENV
-     
-      - name: Add Issue to project
-        env:
-          GITHUB_TOKEN: ${{secrets.GHPROJECT_TOKEN}}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
-        run: |
-          item_id="$( gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            mutation($project:ID!, $id:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $id}) {
-                projectNextItem {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f id=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id')"
-          
-          echo 'ITEM_ID='$item_id >> $GITHUB_ENV
@@ -3,4 +3,5 @@ dist/
 webpack.statistics.dev.html
 .tmp/
 webpack.statistics.prod.html
-.DS_Store
+.DS_Store
+.idea/
@@ -0,0 +1,11 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "endOfLine": "auto",
+  "bracketSpacing": true,
+  "vueIndentScriptAndStyle": false,
+  "htmlWhitespaceSensitivity": "ignore",
+  "printWidth": 100,
+  "singleQuote": true
+}
@@ -2,30 +2,55 @@
  "dataRoles": [
    {
      "displayName": "Stream URL",
-      "name": "stream",
-      "kind": "Grouping"
+      "kind": "Grouping",
+      "name": "stream"
+    },
+    {
+      "displayName": "Commit Object ID",
+      "kind": "Grouping",
+      "name": "parentObject"
    },
    {
      "displayName": "Object ID",
-      "name": "object",
-      "kind": "GroupingOrMeasure"
+      "kind": "Grouping",
+      "name": "object"
    },
    {
-      "displayName": "Object Data",
-      "name": "objectData",
-      "kind": "Measure"
+      "displayName": "Color By",
+      "kind": "GroupingOrMeasure",
+      "name": "objectColorBy"
+    },
+    {
+      "displayName": "Tooltip Data",
+      "kind": "Measure",
+      "name": "objectData"
    }
  ],
  "dataViewMappings": [
    {
-      "categorical": {
-        "categories": {
+      "matrix": {
+        "rows": {
+          "dataReductionAlgorithm": {
+            "top": {
+              "count": 30000
+            }
+          },
          "select": [
            {
              "for": {
                "in": "stream"
              }
            },
+            {
+              "for": {
+                "in": "parentObject"
+              }
+            },
+            {
+              "for": {
+                "in": "objectColorBy"
+              }
+            },
            {
              "for": {
                "in": "object"
@@ -34,30 +59,21 @@
          ]
        },
        "values": {
-          "for": { "in": "objectData" }
+          "select": [
+            {
+              "bind": {
+                "to": "objectData"
+              }
+            }
+          ]
        }
      }
    }
  ],
-  "supportsHighlight": true,
-  "supportsMultiVisualSelection": true,
-  "suppressDefaultTitle": true,
-  "supportsSynchronizingFilterState": true,
-  "supportsKeyboardFocus": true,
-  "tooltips": {
-    "supportEnhancedTooltips": true
-  },
-  "drilldown": {
-    "roles": ["stream", "object"]
-  },
  "objects": {
    "camera": {
      "displayName": "Camera",
      "properties": {
-        "orthoMode": {
-          "displayName": "Ortho mode",
-          "type": { "bool": true }
-        },
        "defaultView": {
          "displayName": "Default view",
          "type": {
@@ -94,24 +110,20 @@
              }
            ]
          }
+        },
+        "orthoMode": {
+          "displayName": "Ortho mode",
+          "type": {
+            "bool": true
+          }
        }
      }
    },
    "color": {
      "displayName": "Color",
      "properties": {
-        "startColor": {
-          "displayName": "Start Color",
-          "type": {
-            "fill": {
-              "solid": {
-                "color": true
-              }
-            }
-          }
-        },
-        "midColor": {
-          "displayName": "Middle Color",
+        "background": {
+          "displayName": "Background Color",
          "type": {
            "fill": {
              "solid": {
@@ -130,8 +142,18 @@
            }
          }
        },
-        "background": {
-          "displayName": "Background Color",
+        "midColor": {
+          "displayName": "Middle Color",
+          "type": {
+            "fill": {
+              "solid": {
+                "color": true
+              }
+            }
+          }
+        },
+        "startColor": {
+          "displayName": "Start Color",
          "type": {
            "fill": {
              "solid": {
@@ -145,19 +167,33 @@
  },
  "privileges": [
    {
-      "name": "WebAccess",
      "essential": true,
+      "name": "WebAccess",
      "parameters": [
        "https://speckle.xyz",
        "https://*.speckle.xyz",
        "https://latest.speckle.dev",
        "https://*.speckle.dev",
+        "https://analytics.speckle.systems",
        "*"
      ]
    },
    {
-      "name": "ExportContent",
-      "essential": false
+      "essential": false,
+      "name": "ExportContent"
    }
-  ]
+  ],
+  "sorting": {
+    "default": {}
+  },
+  "supportsEmptyDataView": true,
+  "supportsHighlight": true,
+  "supportsKeyboardFocus": true,
+  "supportsLandingPage": true,
+  "supportsMultiVisualSelection": true,
+  "supportsSynchronizingFilterState": true,
+  "suppressDefaultTitle": true,
+  "tooltips": {
+    "supportEnhancedTooltips": true
+  }
 }
@@ -1,30 +1,47 @@
 {
-  "name": "visual",
-  "description": "default_template_value",
+  "name": "@specklesystems/powerbi-visual",
+  "description": "A 3D viewer for Speckle Object in PowerBI",
  "repository": {
-    "type": "default_template_value",
-    "url": "default_template_value"
+    "type": "github",
+    "url": "https://github.com/specklesystems/speckle-powerbi-visuals"
  },
  "license": "MIT",
  "scripts": {
    "pbiviz": "pbiviz",
    "start": "pbiviz start",
    "package": "pbiviz package",
-    "lint": "tslint -c tslint.json -p tsconfig.json"
+    "lint": "eslint -c .eslintrc.js --ext .ts src/"
  },
  "dependencies": {
-    "@babel/runtime": "7.6.0",
-    "@babel/runtime-corejs2": "7.6.0",
-    "@speckle/viewer": "^2.7.1",
-    "core-js": "3.2.1",
-    "powerbi-visuals-api": "~4.7.0",
-    "powerbi-visuals-utils-dataviewutils": "2.4.1",
-    "regenerator-runtime": "^0.13.9"
+    "@babel/runtime": "7.21.5",
+    "@babel/runtime-corejs2": "7.21.5",
+    "@speckle/viewer": "^2.13.3",
+    "color-interpolate": "^1.0.5",
+    "core-js": "3.30.2",
+    "lodash": "^4.17.21",
+    "powerbi-visuals-api": "~5.4.0",
+    "powerbi-visuals-utils-colorutils": "6.0.1",
+    "powerbi-visuals-utils-dataviewutils": "6.0.1",
+    "powerbi-visuals-utils-formattingmodel": "^5.0.0",
+    "powerbi-visuals-utils-interactivityutils": "6.0.2",
+    "powerbi-visuals-utils-tooltiputils": "6.0.1",
+    "regenerator-runtime": "^0.13.11"
  },
  "devDependencies": {
-    "ts-loader": "6.1.0",
-    "tslint": "^5.18.0",
-    "tslint-microsoft-contrib": "^6.2.0",
-    "typescript": "3.6.3"
+    "@babel/core": "^7.21.8",
+    "@babel/eslint-parser": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@types/core-js": "^2.5.5",
+    "@types/lodash": "^4.14.194",
+    "@types/regenerator-runtime": "^0.13.1",
+    "@types/three": "^0.150.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "prettier": "^2.8.8",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
+    "user-agent-data-types": "^0.3.1"
  }
 }
@@ -4,15 +4,15 @@
    "displayName": "Speckle PowerBI Viewer",
    "guid": "powerbiSpeckleVisualAA98F06515D847E8ACB33BAB487244E0",
    "visualClassName": "Visual",
-    "version": "2.0.0-alpha1",
+    "version": "2.0.0-alpha8",
    "description": "An interactive 3D viewer for Speckle Data",
    "supportUrl": "https://speckle.community",
    "gitHubUrl": "https://github.com/specklesystems/speckle-powerbi-visuals"
  },
-  "apiVersion": "4.7.0",
+  "apiVersion": "5.4.0",
  "author": { "name": "Speckle Systems", "email": "info@speckle.systems" },
  "assets": { "icon": "assets/logo.png" },
-  "externalJS": null,
+  "externalJS": [],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": null,
@@ -0,0 +1,68 @@
+export default class LandingPageHandler {
+  public enabled = false
+  public landingPage: Element = null
+  public target: HTMLElement
+
+  constructor(target: HTMLElement) {
+    this.target = target
+    this.landingPage = createLandingPageElement(this.target)
+  }
+
+  public show() {
+    console.log('Show landing page')
+    if (!this.enabled) {
+      this.target.appendChild(this.landingPage)
+      this.enabled = true
+    }
+  }
+
+  public hide() {
+    console.log('Hide landing page')
+    if (this.enabled) {
+      this.target.removeChild(this.landingPage)
+      this.enabled = false
+    }
+  }
+}
+
+function createLandingPageElement(parent: HTMLElement): Element {
+  const container = parent.appendChild(document.createElement('div'));
+  container.classList.add('speckle-landing')
+
+  const img = document.createElement('div');
+  img.classList.add('speckle-logo')
+  container.appendChild(img)
+
+  const subtext = document.createElement('p');
+  subtext.classList.add('heading')
+  subtext.textContent = 'PowerBI 3D Viewer'
+  container.appendChild(subtext)
+
+  const tipContainer = document.createElement('div');
+  tipContainer.classList.add('tip-container')
+
+  const tip = document.createElement('p');
+  tip.textContent = 'Getting started 💡'
+  tip.classList.add('tip')
+  tipContainer.appendChild(tip)
+
+  const instructions = document.createElement('p');
+  instructions.classList.add('instructions')
+  instructions.textContent = 'Please connect the Stream ID and Object ID fields.'
+  tipContainer.appendChild(instructions)
+
+  const instructions2 = document.createElement('p')
+  instructions2.classList.add('instructions')
+  instructions2.textContent =
+    "Optionally, connect the 'Object Data' field to color the objects by a value"
+  tipContainer.appendChild(instructions2)
+
+  const instructions3 = document.createElement('p')
+  instructions3.classList.add('instructions')
+  instructions3.classList.add('docs')
+  instructions3.innerHTML = 'For more info, check our docs page <b>https://speckle.guide</b>'
+  tipContainer.appendChild(instructions3)
+
+  container.appendChild(tipContainer)
+  return container
+}
@@ -0,0 +1,63 @@
+export default class SelectionHandler {
+  private selectionIdMap: Map<string, powerbi.extensibility.ISelectionId>
+  private currentSelection: Set<string>
+  private selectionManager: powerbi.extensibility.ISelectionManager
+  private host: powerbi.extensibility.visual.IVisualHost
+
+  public PingScreenPosition: (worldPosition) => { x: number; y: number }
+
+  public constructor(host: powerbi.extensibility.visual.IVisualHost) {
+    this.host = host
+    this.selectionManager = this.host.createSelectionManager()
+    this.selectionIdMap = new Map<string, powerbi.extensibility.ISelectionId>()
+    this.currentSelection = new Set<string>()
+  }
+
+  public async showContextMenu(ev: MouseEvent, hit?) {
+    const selectionId = !hit ? null : this.selectionIdMap.get(hit?.object?.id)
+
+    return this.selectionManager.showContextMenu(selectionId, {
+      x: ev.clientX,
+      y: ev.clientY
+    })
+  }
+
+  public set(url: string, data: powerbi.extensibility.ISelectionId) {
+    this.selectionIdMap.set(url, data)
+  }
+  public async select(url: string, multi = false) {
+    if (multi) {
+      await this.selectionManager.select(this.selectionIdMap.get(url), true)
+      if (this.currentSelection.has(url)) this.currentSelection.delete(url)
+      else this.currentSelection.add(url)
+    } else {
+      await this.selectionManager.select(this.selectionIdMap.get(url), false)
+      this.currentSelection.clear()
+      this.currentSelection.add(url)
+    }
+  }
+
+  public getCurrentSelection(): { id: string; selectionId: powerbi.extensibility.ISelectionId }[] {
+    return [...this.currentSelection].map((entry) => ({
+      id: entry,
+      selectionId: this.selectionIdMap.get(entry)
+    }))
+  }
+
+  public isSelected(id: string) {
+    return this.currentSelection.has(id)
+  }
+  public clear() {
+    this.selectionManager.clear()
+    this.currentSelection.clear()
+  }
+
+  public reset() {
+    this.clear()
+    this.selectionIdMap.clear()
+  }
+
+  public has(url) {
+    return this.selectionIdMap.has(url)
+  }
+}
@@ -0,0 +1,55 @@
+import powerbi from 'powerbi-visuals-api'
+import ITooltipService = powerbi.extensibility.ITooltipService
+import { IViewerTooltip } from '../types'
+import { SpeckleTooltip } from '../interfaces'
+
+export default class TooltipHandler {
+  private data: Map<string, IViewerTooltip>
+  private tooltipService: ITooltipService
+  public currentTooltip: SpeckleTooltip = null
+
+  public PingScreenPosition: (worldPosition) => { x: number; y: number } = null
+
+  constructor(tooltipService) {
+    this.tooltipService = tooltipService
+    this.data = new Map<string, IViewerTooltip>()
+  }
+
+  public setup(data: Map<string, IViewerTooltip>) {
+    this.data = data
+  }
+
+  public show(hit: { guid: string; object?; point }, screenLoc) {
+    const id = hit.object.id as string
+    const objTooltipData: IViewerTooltip = this.data.get(id)
+    if (!objTooltipData) return
+
+    const tooltipData = {
+      coordinates: [screenLoc.x, screenLoc.y],
+      dataItems: objTooltipData.data,
+      identities: [objTooltipData.selectionId],
+      isTouchEvent: false
+    }
+
+    this.currentTooltip = {
+      id: hit.object.id,
+      worldPos: hit.point,
+      screenPos: screenLoc,
+      tooltip: tooltipData
+    }
+
+    this.tooltipService.show(tooltipData)
+  }
+
+  public hide() {
+    this.tooltipService.hide({ immediately: true, isTouchEvent: false })
+    this.currentTooltip = null
+  }
+
+  public move() {
+    if (!this.currentTooltip) return
+    const pos = this.PingScreenPosition(this.currentTooltip.worldPos)
+    this.currentTooltip.tooltip.coordinates = [pos.x, pos.y]
+    this.tooltipService.move(this.currentTooltip.tooltip)
+  }
+}
@@ -0,0 +1,192 @@
+import {
+  CanonicalView,
+  FilteringState,
+  Viewer,
+  IntersectionQuery,
+  DefaultViewerParams
+} from '@speckle/viewer'
+import { createViewerContainerDiv, pickViewableHit, projectToScreen } from '../utils/viewerUtils'
+import { SpeckleVisualSettings } from '../settings'
+import { SettingsChangedType, Tracker } from '../utils/mixpanel'
+import _ from 'lodash'
+
+export default class ViewerHandler {
+  private viewer: Viewer
+  private readonly parent: HTMLElement
+  private state: FilteringState
+  private loadedObjectsCache: Set<string> = new Set<string>()
+  private settings = {
+    authToken: null,
+    batchSize: 25
+  }
+
+  public OnCameraUpdate: () => void
+
+  public constructor(parent: HTMLElement) {
+    this.parent = parent
+  }
+
+  private onCameraUpdate(args) {
+    if (this.OnCameraUpdate) this.OnCameraUpdate()
+  }
+
+  public changeSettings(oldSettings: SpeckleVisualSettings, newSettings: SpeckleVisualSettings) {
+    console.log('Changing settings in viewer')
+    if (oldSettings.camera.orthoMode != newSettings.camera.orthoMode) {
+      Tracker.settingsChanged(SettingsChangedType.OrthoMode)
+      if (newSettings.camera.orthoMode) this.viewer.cameraHandler?.setOrthoCameraOn()
+      else this.viewer.cameraHandler?.setPerspectiveCameraOn()
+    }
+
+    if (oldSettings.camera.defaultView != newSettings.camera.defaultView) {
+      Tracker.settingsChanged(SettingsChangedType.DefaultCamera)
+      this.viewer.setView(newSettings.camera.defaultView as CanonicalView)
+    }
+  }
+
+  public async init() {
+    if (this.viewer) return
+    console.log('Initializing viewer')
+    const container = createViewerContainerDiv(this.parent)
+    const viewerSettings = DefaultViewerParams
+    viewerSettings.showStats = false
+    viewerSettings.verbose = false
+    const viewer = new Viewer(container, viewerSettings)
+
+    await viewer.init()
+
+    // Setup any events here (progress, load-complete...)
+    viewer.cameraHandler.controls.addEventListener('update', this.onCameraUpdate.bind(this))
+
+    this.viewer = viewer
+    console.log('Viewer initialized')
+  }
+
+  public async unloadObjects(
+    objects: string[],
+    signal?: AbortSignal,
+    onObjectUnloaded?: (url: string) => void
+  ) {
+    console.log('Unloading objects')
+    for (const url of objects) {
+      if (signal?.aborted) return
+      await this.viewer
+        .cancelLoad(url, true)
+        .catch((e) => console.warn('Viewer Unload error', url, e))
+        .finally(() => {
+          if (this.loadedObjectsCache.has(url)) this.loadedObjectsCache.delete(url)
+          if (onObjectUnloaded) onObjectUnloaded(url)
+        })
+    }
+  }
+
+  public async loadObjectsWithAutoUnload(
+    objectUrls: string[],
+    onLoad: (url: string, index: number) => void,
+    onError: (url: string, error: Error) => void,
+    signal: AbortSignal
+  ) {
+    var objectsToUnload = _.difference([...this.loadedObjectsCache], objectUrls)
+    await this.unloadObjects(objectsToUnload, signal)
+    await this.loadObjects(objectUrls, onLoad, onError, signal)
+  }
+  public async loadObjects(
+    objectUrls: string[],
+    onLoad: (url: string, index: number) => void,
+    onError: (url: string, error: Error) => void,
+    signal: AbortSignal
+  ) {
+    console.groupCollapsed('Loading objects')
+    try {
+      let index = 0
+      let promises = []
+      for (const url of objectUrls) {
+        if (signal?.aborted) return
+        console.log('Attempting to load', url)
+        if (!this.loadedObjectsCache.has(url)) {
+          console.log('Object is not in cache')
+          const promise = this.viewer
+            .loadObjectAsync(url, this.settings.authToken, false)
+            .then(() => onLoad(url, index++))
+            .catch((e: Error) => onError(url, e))
+            .finally(() => {
+              if (!this.loadedObjectsCache.has(url)) this.loadedObjectsCache.add(url)
+            })
+          promises.push(promise)
+          if (promises.length == this.settings.batchSize) {
+            //this.promises.push(Promise.resolve(this.later(1000)))
+            await Promise.all(promises)
+            promises = []
+          }
+        } else {
+          console.log('Object was already in cache')
+        }
+      }
+      await Promise.all(promises)
+    } catch (error) {
+      throw new Error(`Load objects failed: ${error}`)
+    } finally {
+      console.groupEnd()
+    }
+  }
+
+  public async intersect(coords: { x: number; y: number }) {
+    const point = this.viewer.Utils.screenToNDC(
+      coords.x,
+      coords.y,
+      this.parent.clientWidth,
+      this.parent.clientHeight
+    )
+    const intQuery: IntersectionQuery = {
+      operation: 'Pick',
+      point
+    }
+
+    const res = this.viewer.query(intQuery)
+    if (!res) return null
+    return {
+      hit: pickViewableHit(res.objects, this.state),
+      objects: res.objects
+    }
+  }
+
+  public async unIsolateObjects() {
+    if (this.state.isolatedObjects)
+      this.state = await this.viewer.unIsolateObjects(this.state.isolatedObjects, 'powerbi', true)
+  }
+
+  public async isolateObjects(objectIds, ghost = false) {
+    this.state = await this.viewer.isolateObjects(objectIds, 'powerbi', true, ghost)
+  }
+
+  public async colorObjectsByGroup(
+    groups?: {
+      objectIds: string[]
+      color: string
+    }[]
+  ) {
+    //@ts-ignore
+    this.state = await this.viewer.setUserObjectColors(groups ?? [])
+  }
+
+  public async clear() {
+    if (this.viewer) await this.viewer.unloadAll()
+    this.loadedObjectsCache.clear()
+  }
+
+  public async selectObjects(objectIds: string[] = null) {
+    await this.viewer.resetHighlight()
+    const objIds = objectIds ?? []
+    this.state = await this.viewer.selectObjects(objIds)
+  }
+
+  public getScreenPosition(worldPosition): { x: number; y: number } {
+    return projectToScreen(this.viewer.cameraHandler.camera, worldPosition)
+  }
+
+  public dispose() {
+    this.viewer.cameraHandler.controls.removeAllEventListeners()
+    this.viewer.dispose()
+    this.viewer = null
+  }
+}
@@ -0,0 +1,20 @@
+import { IViewerTooltipData } from './types'
+
+export interface SpeckleSelectionData {
+  id: powerbi.extensibility.ISelectionId
+  data: IViewerTooltipData[]
+}
+
+export interface SpeckleTooltip {
+  worldPos: {
+    x: number
+    y: number
+    z: number
+  }
+  screenPos: {
+    x: number
+    y: number
+  }
+  tooltip
+  id: string
+}
@@ -1,26 +0,0 @@
-"use strict"
-
-import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils"
-import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser
-
-export class SpeckleVisualSettings extends DataViewObjectsParser {
-  public camera: CameraSettings = new CameraSettings()
-  public color: ColorSettings = new ColorSettings()
-}
-
-export class CameraSettings {
-  // Default color
-  public orthoMode: boolean = false
-  public defaultView: string = "default"
-}
-
-export class ColorSettings {
-  public startColor: string = "#31c116"
-  public midColor: string = "#fc8032"
-  public endColor: string = "#e70000"
-  public background: string = "#ffffff"
-
-  public getColorList() {
-    return [this.startColor, this.midColor, this.endColor]
-  }
-}
@@ -0,0 +1,45 @@
+'use strict'
+
+import { dataViewObjectsParser } from 'powerbi-visuals-utils-dataviewutils'
+import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser
+import _ from 'lodash'
+import { SpeckleVisualSettingsModel } from './visualSettingsModel'
+import { CanonicalView } from '@speckle/viewer/dist/IViewer'
+
+export class CameraSettings {
+  // Default color
+  public orthoMode = false
+  public defaultView: CanonicalView = '3D'
+}
+
+export class ColorSettings {
+  public startColor = '#31c116'
+  public midColor = '#fc8032'
+  public endColor = '#e70000'
+  public background = '#ffffff'
+}
+
+export class SpeckleVisualSettings extends DataViewObjectsParser {
+  public camera: CameraSettings
+  public color: ColorSettings
+  public static OnSettingsChanged: (oldSettings, newSettings) => void
+
+  public constructor() {
+    super()
+    this.camera = new CameraSettings()
+    this.color = new ColorSettings()
+  }
+
+  public static current: SpeckleVisualSettings = new SpeckleVisualSettings()
+
+  public static async handleSettingsUpdate(newSettings: SpeckleVisualSettings) {
+    const same = _.isEqual(this.current, newSettings)
+    if (same) return
+    this.OnSettingsChanged(this.current, newSettings)
+    this.current = newSettings
+  }
+
+  public static async handleSettingsModelUpdate(newSettings: SpeckleVisualSettingsModel) {
+    this.current.color.background = newSettings.colorsCard.backgroundColorSlice.value.value
+  }
+}
@@ -0,0 +1,51 @@
+import { formattingSettings } from 'powerbi-visuals-utils-formattingmodel'
+import { SpeckleVisualSettings } from './'
+
+import FormattingSettingsCard = formattingSettings.Card
+import FormattingSettingsModel = formattingSettings.Model
+import FormattingSettingsSlice = formattingSettings.Slice
+
+export class SpeckleVisualSettingsModel extends FormattingSettingsModel {
+  // Building my visual formatting settings card
+  colorsCard: SpeckleVisualColorSettingsCard = new SpeckleVisualColorSettingsCard()
+
+  // Add formatting settings card to cards list in model
+  cards = [this.colorsCard]
+}
+
+class SpeckleVisualColorSettingsCard extends FormattingSettingsCard {
+  public startColorSlice = new formattingSettings.ColorPicker({
+    name: 'startColor',
+    displayName: 'Start Color',
+    value: { value: '#ffffff' },
+    defaultColor: { value: '#ffffff' }
+  })
+
+  public midColorSlice = new formattingSettings.ColorPicker({
+    name: 'midColor',
+    displayName: 'Mid Color',
+    value: { value: SpeckleVisualSettings.current.color.midColor }
+  })
+
+  public endColorSlice = new formattingSettings.ColorPicker({
+    name: 'endColor',
+    displayName: 'End Color',
+    value: { value: SpeckleVisualSettings.current.color.endColor }
+  })
+
+  public backgroundColorSlice = new formattingSettings.ColorPicker({
+    name: 'backgroundColor',
+    displayName: 'Background Color',
+    value: { value: SpeckleVisualSettings.current.color.background }
+  })
+
+  name = 'speckleVisual_colors'
+  displayName = 'Colors'
+  analyticsPane = false
+  slices: Array<FormattingSettingsSlice> = [
+    this.startColorSlice,
+    this.midColorSlice,
+    this.endColorSlice,
+    this.backgroundColorSlice
+  ]
+}
@@ -0,0 +1,18 @@
+export interface IViewerTooltipData {
+  displayName: string
+  value: string
+}
+
+export interface IViewerTooltip {
+  selectionId: powerbi.extensibility.ISelectionId
+  data: IViewerTooltipData[]
+}
+
+export type SpeckleDataInput = {
+  objectsToLoad: string[]
+  objectIds: string[]
+  selectedIds: string[]
+  colorByIds: { objectIds: string[]; color: string }[]
+  objectTooltipData: Map<string, IViewerTooltip>
+  view: powerbi.DataViewMatrix
+}
@@ -0,0 +1,24 @@
+// Add data types to window.navigator for use in this file. See https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types- for more info.
+/// <reference types="user-agent-data-types" />
+export function getOS(): OS {
+  const platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
+    macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K', 'macOS'],
+    windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
+  let os = null
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    os = 'MacOS'
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    os = 'Windows'
+  } else if (/Linux/.test(platform)) {
+    os = 'Linux'
+  }
+  return os
+}
+
+export enum OS {
+  Windows,
+  MacOS,
+  Linux
+}
+
+export const currentOS = getOS()
@@ -0,0 +1,7 @@
+import { currentOS, OS } from './detectOS'
+
+export function isMultiSelect(e: MouseEvent) {
+  if (!e) return false
+  if (currentOS === OS.MacOS) return e.metaKey || e.shiftKey
+  else return e.ctrlKey || e.shiftKey
+}
@@ -0,0 +1,163 @@
+import powerbi from 'powerbi-visuals-api'
+import { IViewerTooltip, IViewerTooltipData, SpeckleDataInput } from '../types'
+import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions
+import { hasRole } from 'powerbi-visuals-utils-dataviewutils/lib/dataRoleHelper'
+import { LOD } from 'three'
+
+export function validateMatrixView(options: VisualUpdateOptions): {
+  hasColorFilter: boolean
+  view: powerbi.DataViewMatrix
+} {
+  const matrixVew = options.dataViews[0].matrix
+  if (!matrixVew) throw new Error('Data does not contain a matrix data view')
+
+  let hasStream = false,
+    hasParentObject = false,
+    hasObject = false,
+    hasColorFilter = false
+
+  matrixVew.rows.levels.forEach((level) => {
+    level.sources.forEach((source) => {
+      if (!hasStream) hasStream = source.roles['stream'] != undefined
+      if (!hasParentObject) hasParentObject = source.roles['parentObject'] != undefined
+      if (!hasObject) hasObject = source.roles['object'] != undefined
+      if (!hasColorFilter) hasColorFilter = source.roles['objectColorBy'] != undefined
+    })
+  })
+
+  if (!hasStream) throw new Error('Missing Stream ID input')
+  if (!hasParentObject) throw new Error('Missing Commit Object ID input')
+  if (!hasObject) throw new Error('Missing Object Id input')
+  return {
+    hasColorFilter,
+    view: matrixVew
+  }
+}
+
+function processObjectValues(
+  objectIdChild: powerbi.DataViewMatrixNode,
+  matrixView: powerbi.DataViewMatrix
+) {
+  const objectData: IViewerTooltipData[] = []
+  let shouldColor = true,
+    shouldSelect = false
+
+  Object.keys(objectIdChild.values).forEach((key) => {
+    const value: powerbi.DataViewMatrixNodeValue = objectIdChild.values[key]
+    const k: unknown = key
+    const colInfo = matrixView.valueSources[k as number]
+    const highLightActive = value.highlight !== undefined
+    if (highLightActive) shouldColor = false
+    const isHighlighted = value.highlight !== null
+
+    if (highLightActive && isHighlighted) {
+      shouldSelect = true
+      shouldColor = true
+    }
+    const propData: IViewerTooltipData = {
+      displayName: colInfo.displayName,
+      value: value.value.toString()
+    }
+    objectData.push(propData)
+  })
+  return { data: objectData, shouldColor, shouldSelect }
+}
+
+function processObjectNode(
+  objectIdChild: powerbi.DataViewMatrixNode,
+  host: powerbi.extensibility.visual.IVisualHost,
+  matrixView: powerbi.DataViewMatrix
+) {
+  const objId = objectIdChild.value as string
+  // Create selection IDs for each object
+  const nodeSelection = host
+    .createSelectionIdBuilder()
+    .withMatrixNode(objectIdChild, matrixView.rows.levels)
+    .createSelectionId()
+
+  // Create value records for the tooltips
+  if (objectIdChild.values) {
+    var objectValues = processObjectValues(objectIdChild, matrixView)
+  }
+  return { id: objId, selectionId: nodeSelection, ...objectValues }
+}
+
+function processObjectIdLevel(
+  parentObjectIdChild: powerbi.DataViewMatrixNode,
+  host: powerbi.extensibility.visual.IVisualHost,
+  matrixView: powerbi.DataViewMatrix
+) {
+  return parentObjectIdChild.children?.map((objectIdChild) =>
+    processObjectNode(objectIdChild, host, matrixView)
+  )
+}
+
+var previousPalette = null
+var previousPaletteKey = null
+export function processMatrixView(
+  matrixView: powerbi.DataViewMatrix,
+  host: powerbi.extensibility.visual.IVisualHost,
+  hasColorFilter: boolean,
+  onSelectionPair: (objId: string, selectionId: powerbi.extensibility.ISelectionId) => void
+): SpeckleDataInput {
+  const objectUrlsToLoad = [],
+    objectIds = [],
+    selectedIds = [],
+    colorByIds = [],
+    objectTooltipData = new Map<string, IViewerTooltip>()
+  matrixView.rows.root.children.forEach((streamUrlChild) => {
+    const url = streamUrlChild.value
+
+    streamUrlChild.children?.forEach((parentObjectIdChild) => {
+      const parentId = parentObjectIdChild.value
+      objectUrlsToLoad.push(`${url}/objects/${parentId}`)
+
+      if (!hasColorFilter) {
+        console.log('🖌️❌ NO COLOR FILTER')
+        processObjectIdLevel(parentObjectIdChild, host, matrixView).forEach((objRes) => {
+          objectIds.push(objRes.id)
+          onSelectionPair(objRes.id, objRes.selectionId)
+          if (objRes.shouldSelect) selectedIds.push(objRes.id)
+          objectTooltipData.set(objRes.id, {
+            selectionId: objRes.selectionId,
+            data: objRes.data
+          })
+        })
+      } else {
+        if (previousPalette) host.colorPalette['colorPalette'] = previousPalette
+        parentObjectIdChild.children?.forEach((colorByChild) => {
+          const color = host.colorPalette.getColor(colorByChild.value as string)
+          const colorGroup = {
+            color: color.value,
+            objectIds: []
+          }
+          processObjectIdLevel(colorByChild, host, matrixView).forEach((objRes) => {
+            objectIds.push(objRes.id)
+            onSelectionPair(objRes.id, objRes.selectionId)
+
+            if (objRes.shouldSelect) selectedIds.push(objRes.id)
+            if (objRes.shouldColor) {
+              colorGroup.objectIds.push(objRes.id)
+            }
+            objectTooltipData.set(objRes.id, {
+              selectionId: objRes.selectionId,
+              data: objRes.data
+            })
+          })
+          if (colorGroup.objectIds.length > 0) colorByIds.push(colorGroup)
+        })
+      }
+    })
+  })
+
+  previousPalette = host.colorPalette['colorPalette']
+
+  return {
+    objectsToLoad: objectUrlsToLoad,
+    objectIds,
+    selectedIds,
+    colorByIds: colorByIds.length > 0 ? colorByIds : null,
+    objectTooltipData,
+    view: matrixView
+  }
+}
@@ -0,0 +1,59 @@
+const TRACK_URL = 'https://analytics.speckle.systems/track?ip=1'
+const MIXPANEL_TOKEN = 'acd87c5a50b56df91a795e999812a3a4'
+const HOST_APP_NAME = 'powerbi-visual'
+
+export enum Event {
+  Create = 'Create',
+  Reload = 'Reload',
+  Settings = 'Settings'
+}
+
+export enum SettingsChangedType {
+  Gradient = 'Gradient',
+  DefaultCamera = 'DefaultCamera',
+  OrthoMode = 'OrthoMode'
+}
+
+export class Tracker {
+  public static async track(event: Event, properties: any = {}) {
+    return this.trackEvents([
+      {
+        event,
+        properties
+      }
+    ])
+  }
+
+  private static async trackEvents(events: Array<{ event: Event; properties: any }>) {
+    try {
+      await fetch(TRACK_URL, {
+        method: 'POST',
+        body:
+          'data=' +
+          JSON.stringify(
+            events.map((e) => {
+              Object.assign(e.properties, {
+                token: MIXPANEL_TOKEN,
+                hostApp: HOST_APP_NAME
+              })
+              return e
+            })
+          )
+      })
+    } catch (e) {
+      console.error('Create track failed', e)
+    }
+  }
+
+  public static loaded() {
+    return this.track(Event.Create)
+  }
+
+  public static dataReload() {
+    return this.track(Event.Reload)
+  }
+
+  public static settingsChanged(type: SettingsChangedType) {
+    return this.track(Event.Settings, { type })
+  }
+}
@@ -0,0 +1,65 @@
+// MIT License
+
+// Copyright (c) 2022 Davide Aversa
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import * as _ from 'lodash'
+
+export interface SignalBindingAsync<S, T> {
+  listener?: string
+  handler: (source: S, data: T) => Promise<void>
+}
+
+export interface IAsyncSignal<S, T> {
+  bind(listener: string, handler: (source: S, data: T) => Promise<void>): void
+  unbind(listener: string): void
+}
+
+export class AsyncSignal<S, T> implements IAsyncSignal<S, T> {
+  private handlers: Array<SignalBindingAsync<S, T>> = []
+
+  public bind(listener: string, handler: (source: S, data: T) => Promise<void>): void {
+    if (this.contains(listener)) {
+      this.unbind(listener)
+    }
+    this.handlers.push({ listener, handler })
+  }
+
+  public unbind(listener: string): void {
+    this.handlers = this.handlers.filter((h) => h.listener !== listener)
+  }
+
+  public async trigger(source: S, data: T): Promise<void> {
+    // Duplicate the array to avoid side effects during iteration.
+    this.handlers.slice(0).map((h) => h.handler(source, data))
+  }
+
+  public async triggerAwait(source: S, data: T): Promise<void> {
+    // Duplicate the array to avoid side effects during iteration.
+    const promises = this.handlers.slice(0).map((h) => h.handler(source, data))
+    await Promise.all(promises)
+  }
+
+  public contains(listener: string): boolean {
+    return _.some(this.handlers, (h) => h.listener === listener)
+  }
+
+  public expose(): IAsyncSignal<S, T> {
+    return this
+  }
+}
@@ -0,0 +1,37 @@
+import { FilteringState } from '@speckle/viewer'
+
+export function projectToScreen(cam, loc) {
+  cam.updateProjectionMatrix()
+  const copy = loc.clone()
+  copy.project(cam)
+  return {
+    x: (copy.x * 0.5 + 0.5) * window.innerWidth - 10,
+    y: (copy.y * -0.5 + 0.5) * window.innerHeight
+  }
+}
+
+export interface Hit {
+  guid: string
+  object?: Record<string, unknown>
+  point: { x: number; y: number; z: number }
+}
+export function pickViewableHit(hits: Hit[], state: FilteringState): Hit | null {
+  let hit = null
+  if (state.isolatedObjects) {
+    // Find the first hit contained in the isolated objects
+    hit = hits.find((hit) => {
+      const hitId = hit.object.id as string
+      return state.isolatedObjects.includes(hitId)
+    })
+  }
+  return hit
+}
+
+export const createViewerContainerDiv = (parent: HTMLElement) => {
+  const container = parent.appendChild(document.createElement('div'))
+  container.style.backgroundColor = 'transparent'
+  container.style.height = '100%'
+  container.style.width = '100%'
+  container.style.position = 'fixed'
+  return container
+}
@@ -1,299 +1,240 @@
-"use strict"
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+import './../style/visual.less'
+
+import * as _ from 'lodash'
+import { FormattingSettingsService } from 'powerbi-visuals-utils-formattingmodel'
+
+import { Tracker } from './utils/mixpanel'
+import { SpeckleDataInput } from './types'
+import { processMatrixView, validateMatrixView } from './utils/matrixViewUtils'
+import { SpeckleVisualSettings } from './settings'
+import { SpeckleVisualSettingsModel } from './settings/visualSettingsModel'
+
+import ViewerHandler from './handlers/viewerHandler'
+import LandingPageHandler from './handlers/landingPageHandler'
+import TooltipHandler from './handlers/tooltipHandler'
+import SelectionHandler from './handlers/selectionHandler'

-import "core-js/stable"
-import "regenerator-runtime/runtime" /* <---- add this line */
-import "./../style/visual.less"
-import powerbi from "powerbi-visuals-api"
 import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions
 import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions
 import IVisual = powerbi.extensibility.visual.IVisual
-import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions
-import VisualObjectInstance = powerbi.VisualObjectInstance
-import DataView = powerbi.DataView
-import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject
-
-import { SpeckleVisualSettings } from "./settings"
-import { Viewer, DefaultViewerParams } from "@speckle/viewer"
+import ITooltipService = powerbi.extensibility.ITooltipService
+import { isMultiSelect } from './utils/isMultiSelect'

+// noinspection JSUnusedGlobalSymbols
 export class Visual implements IVisual {
-  private target: HTMLElement
-  private settings: SpeckleVisualSettings
-  private host: powerbi.extensibility.IVisualHost
-  private selectionManager: powerbi.extensibility.ISelectionManager
-  private selectionIdMap: Map<string, any>
-  private viewer: Viewer
+  private readonly target: HTMLElement
+  private readonly host: powerbi.extensibility.visual.IVisualHost
+  private readonly viewerHandler: ViewerHandler

-  constructor(options: VisualConstructorOptions) {
-    console.log("Speckle 3D Visual constructor called", options)
+  private selectionHandler: SelectionHandler
+  private landingPageHandler: LandingPageHandler
+  private tooltipHandler: TooltipHandler
+  private formattingSettings: SpeckleVisualSettingsModel
+  private formattingSettingsService: FormattingSettingsService
+  private updateTask: Promise<void>
+  private ac = new AbortController()
+  private moved = false
+
+  // noinspection JSUnusedGlobalSymbols
+  public constructor(options: VisualConstructorOptions) {
+    Tracker.loaded()
    this.host = options.host
-
-    this.selectionIdMap = new Map<string, any>()
-    //@ts-ignore
-    this.selectionManager = this.host.createSelectionManager()
-
    this.target = options.element
+    this.formattingSettingsService = new FormattingSettingsService()
+
+    console.log('🚀 Init handlers')
+
+    this.selectionHandler = new SelectionHandler(this.host)
+    this.landingPageHandler = new LandingPageHandler(this.target)
+    this.viewerHandler = new ViewerHandler(this.target)
+    this.tooltipHandler = new TooltipHandler(this.host.tooltipService as ITooltipService)
+
+    console.log('🚀 Setup handler events')
+
+    this.target.addEventListener('pointerdown', this.onPointerDown)
+    this.target.addEventListener('pointerup', this.onPointerUp)
+
+    this.target.addEventListener('click', this.onClick)
+    this.target.addEventListener('auxclick', this.onAuxClick)
+
+    this.viewerHandler.OnCameraUpdate = _.throttle((args) => {
+      this.tooltipHandler.move()
+    }, 1000.0 / 60.0).bind(this)
+
+    this.tooltipHandler.PingScreenPosition = this.viewerHandler.getScreenPosition.bind(
+      this.viewerHandler
+    )
+    this.selectionHandler.PingScreenPosition = this.viewerHandler.getScreenPosition.bind(
+      this.viewerHandler
+    )
+
+    SpeckleVisualSettings.OnSettingsChanged = (oldSettings, newSettings) => {
+      this.viewerHandler.changeSettings(oldSettings, newSettings)
+    }
+
+    //Show landing Page by default
+    this.landingPageHandler.show()
  }

-  public async initViewer() {
-    if (this.viewer) {
-      console.log("Viewer was already initialized. Skipping init call...")
+  private async clear() {
+    this.ac.abort()
+    await this.updateTask
+    await this.viewerHandler.clear()
+    this.selectionHandler.clear()
+    this.ac = new AbortController()
+  }
+
+  public update(options: VisualUpdateOptions) {
+    this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(
+      SpeckleVisualSettingsModel,
+      options.dataViews
+    )
+    SpeckleVisualSettings.handleSettingsModelUpdate(this.formattingSettings)
+
+    try {
+      console.log('🔍 Validating input...', options)
+      var validationResult = validateMatrixView(options)
+      console.log('✅Input valid', validationResult)
+      this.landingPageHandler.hide()
+    } catch (e) {
+      console.log('❌Input not valid:', (e as Error).message)
+      this.host.displayWarningIcon(
+        `Incomplete data input.`,
+        `"Stream URL" and "Object ID" data inputs are mandatory`
+      )
+      console.warn(`Incomplete data input. "Stream URL" and "Object ID" data inputs are mandatory`)
+      this.clear()
+      this.landingPageHandler.show()
      return
    }

-    var container = this.target.appendChild(document.createElement("div"))
-    container.style.backgroundColor = "transparent"
-    container.style.height = "100%"
-    container.style.width = "100%"
-    container.style.position = "fixed"
-
-    const params = DefaultViewerParams
-    // Uncomment the line below to show stats
-    params.showStats = true
-
-    const viewer = new Viewer(container, params)
-
-    return viewer.init().then(() => {
-      viewer.onWindowResize()
-
-      viewer.on(
-        "load-progress",
-        (a: { progress: number; id: string; url: string }) => {
-          this.loadedUrls[a.url] = a.progress
-          if (a.progress >= 1) {
-            viewer.onWindowResize()
-          }
-        }
-      )
-
-      viewer.on("load-complete", () => {
-        //console.log("Load complete")
-      })
-
-      viewer.on("select", o => {
-        if (o.location == null) return
-        console.log("viewer object selected", o)
-        //var ids = o.userData.map(data => this.selectionIdMap[data.id])
-        // this.selectionManager.showContextMenu(ids[0] ?? {}, {
-        //   x: rect.top + o.location.x,
-        //   y: rect.left + o.location.y
-        // })
-      })
-
-      this.viewer = viewer
-    })
+    try {
+      switch (options.type) {
+        case powerbi.VisualUpdateType.Resize:
+        case powerbi.VisualUpdateType.ResizeEnd:
+        case powerbi.VisualUpdateType.Style:
+        case powerbi.VisualUpdateType.ViewMode:
+        case powerbi.VisualUpdateType.Resize + powerbi.VisualUpdateType.ResizeEnd:
+          return
+        default:
+          var input = processMatrixView(
+            validationResult.view,
+            this.host,
+            validationResult.hasColorFilter,
+            (obj, id) => this.selectionHandler.set(obj, id)
+          )
+          this.tooltipHandler.setup(input.objectTooltipData)
+          this.throttleUpdate(input)
+      }
+    } catch (error) {
+      console.error('Data update error', error ?? 'Unknown')
+    }
  }

-  private loadedUrls = {}
-
-  public update(options: VisualUpdateOptions) {
-    this.settings = Visual.parseSettings(
-      options && options.dataViews && options.dataViews[0]
+  private async handleDataUpdate(input: SpeckleDataInput, signal: AbortSignal) {
+    console.log('DATA UPDATE', input)
+    await this.viewerHandler.selectObjects(null)
+    await this.viewerHandler.loadObjectsWithAutoUnload(
+      input.objectsToLoad,
+      this.onLoad,
+      this.onError,
+      signal
    )
-
-    console.log(
-      `Update was called with update type ${options.type.toString()}`,
-      options,
-      this.settings
-    )
-
-    // TODO: These cases are not being handled right now, we will skip the update logic.
-    // Some are already handled by our viewer, such as resize, but others may require custom implementations in the future.
-    switch (options.type) {
-      case powerbi.VisualUpdateType.Resize:
-      case powerbi.VisualUpdateType.ResizeEnd:
-      case powerbi.VisualUpdateType.Style:
-      case powerbi.VisualUpdateType.ViewMode:
-      case powerbi.VisualUpdateType.Resize + powerbi.VisualUpdateType.ResizeEnd:
-        // Ignore case, nothing will happen
-        return
+    if (signal.aborted) {
+      console.warn('Aborted')
+      return
    }

-    console.log("Data was updated, updating viewer...")
-    this.initViewer().then(_ => {
-      // Handle changes in the visual objects
-      this.handleSettingsUpdate(options)
+    await this.viewerHandler.colorObjectsByGroup(input.colorByIds)
+    await this.viewerHandler.unIsolateObjects()
+    if (input.selectedIds.length == 0)
+      await this.viewerHandler.isolateObjects(input.objectIds, true)
+    else await this.viewerHandler.isolateObjects(input.selectedIds, true)
+  }
+
+  public getFormattingModel(): powerbi.visuals.FormattingModel {
+    return this.formattingSettingsService.buildFormattingModel(this.formattingSettings)
+  }
+
+  private throttleUpdate = _.throttle((input: SpeckleDataInput) => {
+    this.viewerHandler.init().then(async () => {
+      if (this.updateTask) {
+        this.ac.abort()
+        console.log('Cancelling previous load job')
+        await this.updateTask
+        this.ac = new AbortController()
+      }
      // Handle the update in data passed to this visual
-      return this.handleDataUpdate(options)
-    })
-  }
-  private currentOrthoMode: boolean = undefined
-  private currentDefaultView: string = undefined
-  private handleSettingsUpdate(options: VisualUpdateOptions) {
-    // Handle change in ortho mode
-    if (this.currentOrthoMode != this.settings.camera.orthoMode) {
-      if (this.settings.camera.orthoMode)
-        this.viewer?.cameraHandler?.setOrthoCameraOn()
-      else this.viewer?.cameraHandler?.setPerspectiveCameraOn()
-      this.currentOrthoMode = this.settings.camera.orthoMode
-    }
-
-    // Handle change in default view
-    if (this.currentDefaultView != this.settings.camera.defaultView) {
-      this.viewer.interactions.rotateTo(this.settings.camera.defaultView)
-      this.currentDefaultView = this.settings.camera.defaultView
-    }
-
-    // Update bg of viewer
-    this.target.style.backgroundColor = this.settings.color.background
-  }
-
-  private handleDataUpdate(options: VisualUpdateOptions) {
-    var categoricalView = options.dataViews[0].categorical
-    var streamCategory = categoricalView?.categories[0].values
-    var objectIdCategory = categoricalView?.categories[1].values
-    var highlightedValues = categoricalView?.values
-      ? categoricalView?.values[0].highlights
-      : null
-
-    console.log("Viewer loading:", options)
-    //@ts-ignore
-    var selectionBuilder = this.host.createSelectionIdBuilder()
-
-    var objectUrls = streamCategory.map((stream, index) => {
-      var url = `${stream}/objects/${objectIdCategory[index]}`
-      return url
-    })
-    var objectsToUnload = []
-    for (const key in this.selectionIdMap.keys()) {
-      if (!objectUrls.find(url => url.split("/").slice(-1).pop() == key)) {
-        objectsToUnload.push(key)
-      }
-    }
-    console.log(
-      `Viewer loading ${objectUrls.length} and unloading ${objectsToUnload.length}`
-    )
-    var unloadPromises = objectsToUnload.map(url => {
-      return this.viewer
-        .unloadObject(url)
-        .then(_ => {
-          this.selectionIdMap.delete(url.split("/").slice(-1).pop())
-        })
-        .catch(e => console.warn("Viewer Unload error", url, e))
-    })
-
-    var loadPromises = objectUrls.map((url, index) => {
-      if (!this.selectionIdMap.has(url.split("/").slice(-1).pop())) {
-        var selectionId = selectionBuilder.withCategory(
-          categoricalView?.categories[1].values[index]
-        )
-        return this.viewer
-          .loadObject(url, null, false)
-          .then(_ => {
-            this.selectionIdMap.set(
-              categoricalView?.categories[1].values[index].toString(),
-              selectionId
-            )
-          })
-          .catch(e => {
-            console.warn("Viewer Load error", url, e)
-          })
-      }
-    })
-
-    var unloadRes = Promise.all(unloadPromises)
-    var loadRes = Promise.all(loadPromises)
-
-    return unloadRes
-      .then(_ => loadRes)
-      .then(_ => {
-        var colorList = this.settings.color.getColorList()
-        // Once everything is loaded, run the filter
-        var filter = null
-        if (categoricalView?.values) {
-          var name = categoricalView?.values[0].source.displayName
-          var isNum =
-            categoricalView?.values[0].source.type.numeric ||
-            categoricalView?.values[0].source.type.integer
-          var filterType = isNum ? "gradient" : "category"
-          console.log("filter:", filterType, name)
-          if (highlightedValues)
-            filter = {
-              filterBy: {
-                id: highlightedValues
-                  .map((value, index) =>
-                    value ? objectIdCategory[index] : null
-                  )
-                  .filter(e => e != null)
-              },
-              ghostOthers: true,
-              colorBy: {
-                type: filterType,
-                property: this.cleanupDataColumnName(name),
-                gradientColors: isNum ? colorList : undefined,
-                minValue: categoricalView?.values[0].minLocal,
-                maxValue: categoricalView?.values[0].maxLocal
-              }
-            }
-          else
-            filter = {
-              filterBy: {
-                id: objectIdCategory
-              },
-              colorBy: {
-                type: filterType,
-                property: this.cleanupDataColumnName(name),
-                gradientColors: isNum ? colorList : undefined,
-                minValue: categoricalView?.values[0].minLocal,
-                maxValue: categoricalView?.values[0].maxLocal
-              }
-            }
-        }
-        console.log("filter:", filter)
-        return this.viewer
-          .applyFilter(filter)
-          .catch(e => {
-            console.warn("Filter failed to be applied. Filter will be reset", e)
-            return this.viewer.applyFilter(null)
-          })
-          .then(_ => this.viewer.zoomExtents())
+      this.updateTask = this.handleDataUpdate(input, this.ac.signal).then(() => {
+        this.ac = new AbortController()
+        this.updateTask = undefined
      })
+    })
+  }, 500)
+
+  private onLoad(url: string, index: number) {
+    console.log(`Loaded object ${url} with index ${index}`)
  }
-  private cleanupDataColumnName(name: string) {
-    var cleanName = name
-    var simplePrefixes = ["First", "Last"]
-    var compoundPrefixes = [
-      "Count",
-      "Sum",
-      "Average",
-      "Minimum",
-      "Maximum",
-      "Count",
-      "Standard deviation",
-      "Variance",
-      "Median"
-    ].map(prefix => prefix + " of")

-    var prefixes = [...simplePrefixes, ...compoundPrefixes].map(
-      prefix => prefix + " "
+  private onError(url: string, error: Error) {
+    console.warn(`Error loading object ${url} with error`, error)
+    this.host.displayWarningIcon(
+      'Load error',
+      `One or more objects could not be loaded 
+      Please ensure that the stream you're trying to access is PUBLIC
+      The Speckle PowerBI Viewer cannot handle private streams yet.
+      `
    )
+  }

-    for (let i = 0; i < prefixes.length; i++) {
-      const prefix = prefixes[i]
-      if (name.startsWith(prefix)) {
-        cleanName = name.slice(prefix.length)
-        break
+  private onPointerMove = (_) => {
+    this.moved = true
+  }
+  private onPointerDown = (_) => {
+    this.moved = false
+    this.target.addEventListener('pointermove', this.onPointerMove)
+  }
+  private onPointerUp = (_) => {
+    this.target.removeEventListener('pointermove', this.onPointerMove)
+  }
+
+  private onClick = async (ev) => {
+    if (this.moved) return
+    const intersectResult = await this.viewerHandler.intersect({ x: ev.clientX, y: ev.clientY })
+    const multi = isMultiSelect(ev)
+    const hit = intersectResult?.hit
+    if (hit) {
+      const id = hit.object.id as string
+
+      if (multi || !this.selectionHandler.isSelected(id))
+        await this.selectionHandler.select(id, multi)
+
+      this.tooltipHandler.show(hit, { x: ev.clientX, y: ev.clientY })
+      const selection = this.selectionHandler.getCurrentSelection()
+      const ids = selection.map((s) => s.id)
+      await this.viewerHandler.selectObjects(ids)
+    } else {
+      this.tooltipHandler.hide()
+      if (!multi) {
+        this.selectionHandler.clear()
+        await this.viewerHandler.selectObjects(null)
      }
    }
-
-    if (cleanName.startsWith("data.")) cleanName = cleanName.split("data.")[0]
-    console.log("clean name", cleanName)
-    return cleanName
  }
-  private static parseSettings(dataView: DataView): SpeckleVisualSettings {
-    return <SpeckleVisualSettings>SpeckleVisualSettings.parse(dataView)
+  private onAuxClick = async (ev) => {
+    if (ev.button != 2 || this.moved) return
+    const intersectResult = await this.viewerHandler.intersect({ x: ev.clientX, y: ev.clientY })
+    await this.selectionHandler.showContextMenu(ev, intersectResult?.hit)
  }

-  /**
-   * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
-   * objects and properties you want to expose to the users in the property pane.
-   *
-   */
-  public enumerateObjectInstances(
-    options: EnumerateVisualObjectInstancesOptions
-  ): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
-    return SpeckleVisualSettings.enumerateObjectInstances(
-      this.settings || SpeckleVisualSettings.getDefault(),
-      options
-    )
+  public async destroy() {
+    await this.clear()
+    this.viewerHandler.dispose()
+    this.target.removeEventListener('pointerup', this.onPointerUp)
+    this.target.removeEventListener('pointerdown', this.onPointerDown)
+    this.target.removeEventListener('click', this.onClick)
+    this.target.removeEventListener('auxclick', this.onAuxClick)
  }
 }
@@ -1,9 +1,53 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
+
 p {
-    font-size: 20px;
-    font-weight: bold;
-    em {
-        background: yellow;
-        padding: 5px;
-        
-    }
-}
+  font-size: 15px;
+  font-family: "Space Grotesk", sans-serif;
+}
+
+.speckle-landing {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.speckle-logo {
+  background-image: url("../assets/logo-blue-2.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  min-width: 200px;
+  min-height: 60px;
+  background-color: transparent;
+}
+
+.heading {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 10px;
+}
+
+.instructions {
+  color: grey;
+  margin: 0;
+}
+
+.tip-container {
+  background-color: gainsboro;
+  border-radius: 10px;
+  padding: 10px;
+}
+
+.tip {
+  font-weight: bold;
+  font-style: italic;
+  margin: 0;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
@@ -1,19 +1,18 @@
 {
-    "compilerOptions": {
-        "allowJs": false,
-        "emitDecoratorMetadata": true,
-        "experimentalDecorators": true,
-        "target": "es6",
-        "sourceMap": true,
-        "outDir": "./.tmp/build/",
-        "moduleResolution": "node",
-        "declaration": true,
-        "lib": [
-            "es2015",
-            "dom"
-        ]
-    },
-    "files": [
-        "./src/visual.ts"
-    ]
-}
+  "compilerOptions": {
+    "allowJs": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es2020",
+    "sourceMap": true,
+    "outDir": "./.tmp/build/",
+    "moduleResolution": "node",
+    "declaration": true,
+    "lib": ["es2020", "dom"],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "types": []
+  },
+  "files": ["./src/visual.ts"],
+  "include": ["./src/**/*.ts"]
+}
@@ -1,9 +0,0 @@
-{
-    "extends": "tslint-microsoft-contrib/recommended",
-    "rulesDirectory": [
-        "node_modules/tslint-microsoft-contrib"
-    ],
-    "rules": {
-        "no-relative-imports": false
-    }
-}
Author	SHA1	Message	Date
Alan Rynne	67cae270b6	chore: Viewer not verbose and hidden stats	2023-05-17 10:27:21 +02:00
Alan Rynne	1e417a6720	Merge branch 'dev' into main	2023-05-17 10:23:37 +02:00
Alan Rynne	51f17d476a	bump version	2023-05-17 10:23:24 +02:00
Alan Rynne	124e1f186c	fix: Apply data reduction algorithm to matrix view as expected	2023-05-17 10:23:18 +02:00
Alan Rynne	de5154b41d	fix: Initialize with DefaultParams so default environment will be preserved	2023-05-16 10:07:38 +02:00
Alan Rynne	895b9bf688	bump version and removed leftover line	2023-05-12 10:23:46 +02:00
Alan Rynne	956a7f94ee	hack: Remember initial colors to keep them consistent after slicing (#26 ) This should be properly fixed when we implement the new FormattingModel class in our visual	2023-05-12 10:05:52 +02:00
Alan Rynne	569baecc3e	Major visual refactor (#25 ) * feat: Moved viewer logic into `ViewerHandler` class * feat: Moved some logic around to simplify visual structure * fix: Minor tweaks and fixes * fix: More tweaks and fixes based on refactor * feat: Major upgrade to loading commits instead of objects * feat: Continued major refactor for "commit loading" Selection both ways, tooltips, right-click... * feat: file reordering into subfolders * fix: Minor selection improvements * fix: More selection and loading improvements * fix: UnIsolateObjects now uses state mouse events in main viewer now deal with dragging to prevent false click possitives. * fix: Loading with and without color filters * fix: Handle unload of no longer used objects	2023-05-11 22:54:38 +02:00
Alan Rynne	c491f298c5	Dependency upgrade (#24 ) * chore: Updated all packages to latest * chore: Removed unused github actions	2023-04-26 14:03:25 +02:00
Alan Rynne	ec9f9c7cd8	feat: Adopted eslint instead of tslint (#23 )	2023-04-26 13:59:50 +02:00
Alan Rynne	7e35700cfa	feat: Custom tooltips and independent color filters (#20 ) * Added new inputs to capabilities.json * Added initial tooltipHandler class * working custom tooltips * fix: Last minute null ref bug on tooltip data	2023-02-07 14:37:53 +01:00
Alan Rynne	39cfa33baf	chore: TSConfig changes	2023-02-05 13:27:25 +01:00
Alan Rynne	a1fbba71e4	refactor: Moved landing page logic to it's own file	2023-02-05 13:27:13 +01:00
Alan Rynne	10b8a68e32	ci: Use correct action	2023-01-26 23:53:22 +01:00
Alan Rynne	9e00cc85a8	bump: Alpha5	2023-01-26 16:32:27 +01:00
Alan Rynne	047f763465	feat: Added batch loading to viewer (#15 )	2023-01-26 16:28:21 +01:00
Alan Rynne	fa33719902	feat: Upgraded viewer to latest version (#12 ) * feat: Upgraded viewer to latest version * bump viewer 2.10.2 * bump powerbi version * feat: Adds user-facing error for when data is incomplete or loading fails * feat: Tooltips and selection * refactor: Moved projectToScreen to utils * refactor: Moved events into specific functions * fix: Fixed numerical filter coloring * feat: Added landing page to visual * fix: Filters not being cleared * chore: Remove leftover console.logs	2023-01-23 09:24:14 +01:00
Alan Rynne	d60f0ba2b6	ci: Updated github actions to use new actions repo	2023-01-09 20:45:48 +01:00
Alan Rynne	aac875664d	fixes #14 : Updates github actions with same code as speckle-sharp	2022-12-06 12:09:16 +01:00
Alan Rynne	ae6231f5f1	fix: Moved data reduction setting to main categorical input	2022-11-17 12:54:19 +01:00
Alan Rynne	d839573d96	bump: Version 2.0.0-alpha3	2022-11-09 22:09:22 +01:00
Alan Rynne	50c7118bff	fix: Properly handle missing fields after loading for the first time	2022-11-09 22:02:38 +01:00
Alan Rynne	d21033cd85	fix: Load up to 30k items (the maximum allowed) Use at your own peril	2022-11-08 22:49:40 +01:00
Alan Rynne	6240ec724f	Merge pull request #9 from specklesystems/tracking-events Fixes #5: Add tracking to powerbi visual	2022-11-08 22:42:26 +01:00
Alan Rynne	3248c5ad14	fix: Adds tracking to powerbi visual	2022-11-08 22:41:28 +01:00
Alan Rynne	917c7ee8a6	feat: Added initial tracking on creation	2022-11-08 18:14:53 +01:00
Alan Rynne	17c1f1c3f2	fix: Minor visual.ts cleanup	2022-11-08 17:34:21 +01:00
Alan Rynne	3bcc8c34d6	fix: Use AbortController instead of custom cancel flag	2022-11-08 16:28:00 +01:00
Alan Rynne	e9834636e6	fix: Prevents over-calling of `loadObject`, which can overwhelm the server	2022-11-08 15:44:44 +01:00