feat: move from embed token api to share token api (#230)

* new mutation for token exchange

* variable based

src/powerbi-data-connector/Speckle.pq

@@ -71,7 +71,7 @@ GeneratePKCEVerifier = () =>
 GeneratePKCEChallenge = (verifier as text) =>
     let
         // Create SHA256 hash of the verifier as required by RFC 7636
-        hash = Crypto.CreateHash(CryptoAlgorithm.SHA256, Text.ToBinary(verifier, TextEncoding.Ascii)),
+        hash = Crypto.CreateHash(CryptoAlgorithm.SHA256, Text.ToBinary(verifier, TextEncoding.Utf8)),
         // Convert to base64url encoding
         challenge = Base64UrlEncode(hash)
     in
@@ -272,17 +272,27 @@ Speckle = [
                     // Generate PKCE parameters for enhanced security
                     codeVerifier = GeneratePKCEVerifier(),
                     codeChallenge = GeneratePKCEChallenge(codeVerifier),
-                    // Build authorization URL with PKCE parameters
-                    authUrl = Text.Combine({server, "authn", "verify", AuthAppId, state}, "/") &
-                        "?code_challenge=" & codeChallenge &
-                        "&code_challenge_method=S256"
+                    // Detect if server supports /oauth/token
+                    oauthCheck = try Web.Contents(
+                        Text.Combine({server, "oauth", "token"}, "/"),
+                        [ManualStatusHandling = {400, 401, 403, 404, 405, 500}]
+                    ) otherwise null,
+                    useNewOAuth = oauthCheck <> null and Value.Metadata(oauthCheck)[Response.Status] = 200,
+                    // Build auth URL based on server capabilities
+                    authUrl = if useNewOAuth then
+                        Text.Combine({server, "authn", "verify", AuthAppId, codeChallenge}, "/") &
+                            "?code_challenge_method=S256" &
+                            "&pbiNew=true"
+                    else
+                        // Legacy
+                        Text.Combine({server, "authn", "verify", AuthAppId, codeVerifier}, "/")
                 in
                     [
                         LoginUri = authUrl,
                         CallbackUri = "https://oauth.powerbi.com/views/oauthredirect.html",
                         WindowHeight = 800,
                         WindowWidth = 600,
-                        Context = [code_verifier = codeVerifier]
+                        Context = [code_verifier = codeVerifier, use_new_oauth = useNewOAuth]
                     ],
             FinishLogin = (clientApplication, dataSourcePath, context, callbackUri, state) =>
                 let
@@ -290,24 +300,35 @@ Speckle = [
                         {Uri.Parts(dataSourcePath)[Scheme], "://", Uri.Parts(dataSourcePath)[Host]}
                     ),
                     Parts = Uri.Parts(callbackUri)[Query],
-                    // Extract code verifier from context for PKCE
                     codeVerifier = if context <> null then context[code_verifier] else null,
-                    // Build token request with PKCE parameters
-                    tokenRequest = [
-                        accessCode = Parts[access_code],
-                        appId = AuthAppId,
-                        appSecret = AuthAppSecret,
-                        challenge = state
-                    ] & (if codeVerifier <> null then [code_verifier = codeVerifier] else []),
-                    Source = Web.Contents(
-                        Text.Combine({server, "auth", "token"}, "/"),
-                        [
-                            Headers = [
-                                #"Content-Type" = "application/json"
-                            ],
-                            Content = Json.FromValue(tokenRequest)
-                        ]
-                    ),
+                    useNewOAuth = if context <> null and Record.HasFields(context, "use_new_oauth") then context[use_new_oauth] else false,
+                    // Single token exchange call based on server capability
+                    Source = if useNewOAuth then
+                        Web.Contents(
+                            Text.Combine({server, "oauth", "token"}, "/"),
+                            [
+                                Headers = [#"Content-Type" = "application/json"],
+                                Content = Json.FromValue([
+                                    appId = AuthAppId,
+                                    accessCode = Parts[access_code],
+                                    codeVerifier = codeVerifier
+                                ])
+                            ]
+                        )
+                    else
+                        // Legacy
+                        Web.Contents(
+                            Text.Combine({server, "auth", "token"}, "/"),
+                            [
+                                Headers = [#"Content-Type" = "application/json"],
+                                Content = Json.FromValue([
+                                    appId = AuthAppId,
+                                    appSecret = AuthAppSecret,
+                                    accessCode = Parts[access_code],
+                                    challenge = codeVerifier
+                                ])
+                            ]
+                        ),
                     json = Json.Document(Source)
                 in
                     [

src/powerbi-data-connector/speckle/GetByUrl.pqm

@@ -14,6 +14,7 @@
         GetUser = Extension.LoadFunction("GetUser.pqm"),
         GetVersion = Extension.LoadFunction("GetVersion.pqm"),
         GetWorkspace = Extension.LoadFunction("GetWorkspace.pqm"),
+        MarkReceived = Extension.LoadFunction("MarkReceived.pqm"),
 
         // the logic for importing functions from other files
         Extension.LoadFunction = (fileName as text) =>
@@ -65,7 +66,8 @@
             powerfulToken,
             {"profile:read", "streams:read", "users:read"},
             parsedUrl[projectId],
-            parsedUrl[baseUrl]
+            parsedUrl[baseUrl],
+            parsedUrl[resourceIdString]
         ),
 
         // throw error if token exchange failed - do NOT use powerful token as fallback
@@ -146,6 +148,9 @@
                     sourceApplication = modelInfo[sourceApplication],
                     versionId = modelInfo[versionId],
 
+                    // mark version as received
+                    markReceivedResult = MarkReceived(powerfulToken, versionId, parsedUrl[projectId], parsedUrl[baseUrl]),
+
                     // get structured data
                     structuredData = GetStructuredData(url),
 
@@ -178,7 +183,7 @@
                         structuredData,
                         {
                             {"Version Object ID", each rootObjectId},
-                            {"Model Info", each if desktopServiceSent or not desktopServiceSent then encodedUserInfo else encodedUserInfo}
+                            {"Model Info", each if (desktopServiceSent or not desktopServiceSent) and (markReceivedResult or not markReceivedResult) then encodedUserInfo else encodedUserInfo}
                         }
                     ),
 
@@ -240,6 +245,10 @@
                 rootObjectId = modelInfo[rootObjectId],
                 modelName = modelInfo[modelName],
                 sourceApplication = modelInfo[sourceApplication],
+                federatedVersionId = if versionId <> null then versionId else modelInfo[versionId],
+
+                // mark version as received (non-blocking, best-effort)
+                markReceivedResult = MarkReceived(powerfulToken, federatedVersionId, projectId, baseUrl),
 
                 // get structured data
                 structuredData = GetStructuredData(singleModelUrl),
@@ -269,13 +278,13 @@
                 encodedUserInfo = EncodeUserInfo(userInfoData),
 
                 // add the model name as context - with version id if exists
-                // reference desktopServiceSent to force evaluation
+                // reference desktopServiceSent and markReceivedResult to force evaluation
                 result = Table.AddColumn(
                     structuredData,
                     "Source Model",
                     each if versionId <> null then
-                        Text.Combine({modelName, "-", versionId})
-                    else if desktopServiceSent or not desktopServiceSent then
+                        if (markReceivedResult or not markReceivedResult) then Text.Combine({modelName, "-", versionId}) else Text.Combine({modelName, "-", versionId})
+                    else if (desktopServiceSent or not desktopServiceSent) and (markReceivedResult or not markReceivedResult) then
                         modelName
                     else
                         modelName,

src/powerbi-data-connector/speckle/api/ExchangeToken.pqm

@@ -1,9 +1,6 @@
 // Function to exchange powerful token for weak limited token
-(powerfulToken as text, scopes as list, projectId as text, serverUrl as text) as record =>
+(powerfulToken as text, scopes as list, projectId as text, serverUrl as text, optional resourceIdString as text) as record =>
     let
-        // Import the parser function for URL handling
-        Parser = Extension.LoadFunction("Parser.pqm"),
-
         // Helper function to load .pqm modules dynamically
         Extension.LoadFunction = (fileName as text) =>
             let
@@ -33,114 +30,106 @@
         else
             null,
 
-        // Token lifetime: 10 years (315,360,000,000 milliseconds)
-        TokenLifespanMs = 10 * 365 * 24 * 3600 * 1000,
-
-        // Generate token name with timestamp
-        TokenName = "Limited Power BI Visual Token - " & DateTime.ToText(DateTime.LocalNow(), "yyyy-MM-dd HH:mm"),
-
-        // Build scopes array string for GraphQL (e.g., ["profile:read", "streams:read"])
-        ScopesArray = Text.Combine(
-            List.Transform(scopes, each """" & _ & """"),
-            ", "
-        ),
-
-        // Build GraphQL mutation
-        GraphQLMutation = "
-            mutation {
-                apiTokenCreate(token: {
-                    name: """ & TokenName & """,
-                    scopes: [" & ScopesArray & "],
-                    lifespan: " & Number.ToText(TokenLifespanMs) & ",
-                    limitResources: [{
-                        type: project,
-                        id: """ & projectId & """
-                    }]
-                })
-            }",
-
-        // Execute token exchange if validation passes
-        Result = if ValidationError <> null then
-            [
-                Success = false,
-                Token = null,
-                ErrorMessage = ValidationError
-            ]
+        // Ensure serverUrl ends with /
+        NormalizedServerUrl = if Text.End(serverUrl, 1) = "/" then
+            serverUrl
         else
-            try
-                let
-                    // Ensure serverUrl ends with /
-                    NormalizedServerUrl = if Text.End(serverUrl, 1) = "/" then
-                        serverUrl
-                    else
-                        serverUrl & "/",
+            serverUrl & "/",
 
-                    // Make GraphQL request
-                    Response = Web.Contents(
-                        NormalizedServerUrl & "graphql",
-                        [
-                            Headers = [
-                                #"Method" = "POST",
-                                #"Content-Type" = "application/json",
-                                #"Authorization" = "Bearer " & powerfulToken
-                            ],
-                            Content = Json.FromValue([
-                                query = GraphQLMutation
-                            ]),
-                            ManualStatusHandling = {400, 401, 403, 404, 500, 502, 503, 504},
-                            Timeout = #duration(0, 0, 0, 10)
-                        ]
-                    ),
+        // New Share Token API mutation with variables
+        NewGraphQLQuery = "mutation CreateEmbedShareToken($input: CreateEmbedShareTokenInput!) {
+            sharingMutations {
+                createEmbedShareToken(input: $input) {
+                    token
+                }
+            }
+        }",
+        NewGraphQLVariables = [
+            input = [
+                projectId = projectId,
+                resourceIdString = resourceIdString
+            ]
+        ],
 
-                    StatusCode = Value.Metadata(Response)[Response.Status],
+        // Legacy apiTokenCreate mutation with variables
+        TokenLifespanMs = 10 * 365 * 24 * 3600 * 1000,
+        TokenName = "Limited Power BI Visual Token - " & DateTime.ToText(DateTime.LocalNow(), "yyyy-MM-dd HH:mm"),
+        LegacyGraphQLQuery = "mutation CreateApiToken($token: ApiTokenCreateInput!) {
+            apiTokenCreate(token: $token)
+        }",
+        LegacyGraphQLVariables = [
+            token = [
+                name = TokenName,
+                scopes = scopes,
+                lifespan = TokenLifespanMs,
+                limitResources = {[
+                    type = "project",
+                    id = projectId
+                ]}
+            ]
+        ],
 
-                    // Parse response if successful
-                    ParsedResult = if StatusCode >= 200 and StatusCode < 300 then
-                        let
-                            JsonResponse = Json.Document(Response),
+        // Helper: execute a GraphQL query with variables and extract token
+        ExecuteGraphQL = (query as text, variables as record, extractToken as function) =>
+            let
+                Response = Web.Contents(
+                    NormalizedServerUrl & "graphql",
+                    [
+                        Headers = [
+                            #"Method" = "POST",
+                            #"Content-Type" = "application/json",
+                            #"Authorization" = "Bearer " & powerfulToken
+                        ],
+                        Content = Json.FromValue([
+                            query = query,
+                            variables = variables
+                        ]),
+                        ManualStatusHandling = {400, 401, 403, 404, 500, 502, 503, 504},
+                        Timeout = #duration(0, 0, 0, 10)
+                    ]
+                ),
+                StatusCode = Value.Metadata(Response)[Response.Status],
+                JsonResponse = if StatusCode >= 200 and StatusCode < 300 then
+                    Json.Document(Response)
+                else
+                    null,
+                HasErrors = JsonResponse <> null and Record.HasFields(JsonResponse, {"errors"}),
+                Token = if JsonResponse <> null and not HasErrors then
+                    try extractToken(JsonResponse) otherwise null
+                else
+                    null,
+                ErrorMsg = if HasErrors then
+                    try JsonResponse[errors]{0}[message] otherwise "GraphQL mutation failed"
+                else if JsonResponse = null then
+                    "Request failed with status " & Number.ToText(StatusCode)
+                else
+                    null
+            in
+                [Success = Token <> null, Token = Token, ErrorMessage = ErrorMsg],
 
-                            // Check for GraphQL errors
-                            HasErrors = Record.HasFields(JsonResponse, {"errors"}),
+        // Try new API first, fall back to legacy
+        Result = if ValidationError <> null then
+            [Success = false, Token = null, ErrorMessage = ValidationError]
+        else
+            let
+                newResult = if resourceIdString <> null then
+                    try ExecuteGraphQL(
+                        NewGraphQLQuery,
+                        NewGraphQLVariables,
+                        each [data][sharingMutations][createEmbedShareToken][token]
+                    ) otherwise [Success = false, Token = null, ErrorMessage = "New API request failed"]
+                else
+                    [Success = false, Token = null, ErrorMessage = null],
 
-                            // Extract token from response
-                            WeakToken = if not HasErrors then
-                                JsonResponse[data][apiTokenCreate]
-                            else
-                                null,
-
-                            ErrorMsg = if HasErrors then
-                                try
-                                    JsonResponse[errors]{0}[message]
-                                otherwise
-                                    "GraphQL mutation failed with unknown error"
-                            else
-                                null
-                        in
-                            if WeakToken <> null then
-                                [
-                                    Success = true,
-                                    Token = WeakToken,
-                                    ErrorMessage = null
-                                ]
-                            else
-                                [
-                                    Success = false,
-                                    Token = null,
-                                    ErrorMessage = ErrorMsg
-                                ]
-                    else
-                        [
-                            Success = false,
-                            Token = null,
-                            ErrorMessage = "GraphQL request failed with status " & Number.ToText(StatusCode)
-                        ]
-                in
-                    ParsedResult
-            otherwise
-                [
-                    Success = false,
-                    Token = null,
-                    ErrorMessage = "Token exchange request failed with exception"
-                ]
+                finalResult = if newResult[Success] then
+                    newResult
+                else
+                    try ExecuteGraphQL(
+                        LegacyGraphQLQuery,
+                        LegacyGraphQLVariables,
+                        each [data][apiTokenCreate]
+                    ) otherwise [Success = false, Token = null, ErrorMessage = "Token exchange request failed"]
+            in
+                finalResult
     in
         Result

src/powerbi-data-connector/speckle/api/GetStructuredData.pqm

@@ -57,6 +57,7 @@
                         #"Speckle Type" = record[speckle_type], // Speckle Type
                         #"Version Object ID" = rootId,
                         #"Model Info" = rootId,
+                        #"Application ID" = Record.FieldOrDefault(record, "applicationId", null), // Application ID
                         data = cleanedRecord // Data
                     ]
             )

src/powerbi-data-connector/speckle/api/MarkReceived.pqm

@@ -0,0 +1,44 @@
+// Function to mark a version as received via GraphQL mutation
+// Uses the powerful token
+(powerfulToken as text, versionId as text, projectId as text, serverUrl as text) as logical =>
+    try
+        let
+            NormalizedServerUrl = if Text.End(serverUrl, 1) = "/" then
+                serverUrl
+            else
+                serverUrl & "/",
+
+            // Build GraphQL
+            GraphQLMutation = "mutation MarkVersionReceived($input: MarkReceivedVersionInput!) { versionMutations { markReceived(input: $input) } }",
+
+            Variables = [
+                input = [
+                    versionId = versionId,
+                    projectId = projectId,
+                    sourceApplication = "powerbi-data"
+                ]
+            ],
+
+            // Make GraphQL request
+            Response = Web.Contents(
+                NormalizedServerUrl & "graphql",
+                [
+                    Headers = [
+                        #"Method" = "POST",
+                        #"Content-Type" = "application/json",
+                        #"Authorization" = "Bearer " & powerfulToken
+                    ],
+                    Content = Json.FromValue([
+                        query = GraphQLMutation,
+                        variables = Variables
+                    ]),
+                    ManualStatusHandling = {400, 401, 403, 404, 500, 502, 503, 504},
+                    Timeout = #duration(0, 0, 0, 5)
+                ]
+            ),
+
+            StatusCode = Value.Metadata(Response)[Response.Status]
+        in
+            StatusCode >= 200 and StatusCode < 300
+    otherwise
+        false

src/powerbi-data-connector/speckle/api/Parser.pqm

@@ -54,5 +54,6 @@
                 modelId = if isFederated then null else processedModels{0}[modelId],
                 versionId = if isFederated then null else processedModels{0}[versionId],
                 isFederated = isFederated,
-                federatedModels = if isFederated then processedModels else null
+                federatedModels = if isFederated then processedModels else null,
+                resourceIdString = rawModelSegment
             ]

src/powerbi-data-connector/speckle/api/SendToServer.pqm

@@ -33,7 +33,8 @@
             powerfulToken,
             {"profile:read", "streams:read", "users:read"},
             parsedUrl[projectId],
-            parsedUrl[baseUrl]
+            parsedUrl[baseUrl],
+            parsedUrl[resourceIdString]
         ),
 
         // throw error if token exchange failed - do NOT use powerful token as fallback

src/powerbi-visual/capabilities.json

@@ -120,6 +120,13 @@
         }
       }
     },
+    "sectionBox": {
+      "properties": {
+        "boxData": {
+          "type": { "text": true }
+        }
+      }
+    },
     "cameraPosition": {
       "properties": {
         "positionX": {

src/powerbi-visual/src/components/ViewerControls.vue

@@ -5,32 +5,6 @@
       <ViewerControlsButtonToggle flat tooltip="Zoom extends" @click="onZoomExtentsClicked">
         <ArrowsPointingOutIcon class="h-4 w-4 md:h-5 md:w-5" />
       </ViewerControlsButtonToggle>
-      <!-- Zoom on Filter -->
-      <ViewerControlsButtonToggle
-        :tooltip="
-          visualStore.isZoomOnFilterActive
-            ? 'Move camera on filter'
-            : 'Keep camera position on filter'
-        "
-        flat
-        @click="toggleZoomOnFilter"
-      >
-        <ZoomToFit v-if="visualStore.isZoomOnFilterActive" class="h-5 w-5" />
-        <ZoomToFit v-else class="h-5 w-5 opacity-30" />
-      </ViewerControlsButtonToggle>
-      <!-- Ghost / Hidden -->
-      <ViewerControlsButtonToggle
-        :tooltip="
-          visualStore.isGhostActive
-            ? 'Hide ghosted objects on filter'
-            : 'Show ghosted objects on filter'
-        "
-        flat
-        @click="toggleGhostHidden"
-      >
-        <Ghost v-if="visualStore.isGhostActive" class="h-5 w-5" />
-        <Ghost v-else class="h-5 w-5 opacity-30" />
-      </ViewerControlsButtonToggle>
     </ViewerControlsButtonGroup>
     <ViewerControlsButtonGroup>
       <!-- View Modes Toggle -->
@@ -49,54 +23,50 @@
           @view-mode-clicked="(viewMode, options) => $emit('view-mode-clicked', viewMode, options)"
         />
       </div>
-      <!-- Views -->
-      <ViewerViewsMenu
-        :open="viewsOpen"
+      <!-- Camera -->
+      <ViewerCameraMenu
+        :open="cameraOpen"
         :views="views"
-        @force-close-others="activeControl = 'none'"
-        @update:open="(value) => toggleActiveControl(value ? 'views' : 'none')"
+        @update:open="(value) => toggleActiveControl(value ? 'camera' : 'none')"
         @view-clicked="(view) => $emit('view-clicked', view)"
       />
-      <!-- Perspective/Ortho -->
-      <ViewerControlsButtonToggle
-        flat
-        secondary
-        tooltip="Projection"
-        :active="visualStore.isOrthoProjection"
-        @click="toggleProjection"
-      >
-        <Perspective v-if="visualStore.isOrthoProjection" class="h-3.5 md:h-4 w-4" />
-        <PerspectiveMore v-else class="h-3.5 md:h-4 w-4" />
-      </ViewerControlsButtonToggle>
+      <!-- Section box -->
+      <div class="relative">
+        <ViewerControlsButtonToggle
+          flat
+          tooltip="Section box"
+          @click="$emit('update:sectionBox')"
+        >
+          <ScissorsIcon class="h-4 w-4 md:h-5 md:w-5" />
+        </ViewerControlsButtonToggle>
+        <span
+          v-if="sectionBox"
+          class="absolute top-1 right-1 h-2 w-2 rounded-full bg-primary pointer-events-none"
+        />
+      </div>
     </ViewerControlsButtonGroup>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ArrowsPointingOutIcon } from '@heroicons/vue/24/solid'
-import { SpeckleView, ViewMode } from '@speckle/viewer'
+import { ArrowsPointingOutIcon, ScissorsIcon } from '@heroicons/vue/24/solid'
+import { CanonicalView, SpeckleView, ViewMode } from '@speckle/viewer'
 import { computed, ref } from 'vue'
 import { useVisualStore } from '@src/store/visualStore'
 import ViewerControlsButtonGroup from './viewer/controls/ViewerControlsButtonGroup.vue'
 import ViewerControlsButtonToggle from './viewer/controls/ViewerControlsButtonToggle.vue'
 
+import ViewerCameraMenu from './viewer/camera/ViewerCameraMenu.vue'
 import ViewerViewModesMenu from './viewer/view-modes/ViewerViewModesMenu.vue'
-import ViewerViewsMenu from './viewer/views/ViewerViewsMenu.vue'
 
-import Perspective from '../components/global/icon/Perspective.vue'
-import PerspectiveMore from '../components/global/icon/PerspectiveMore.vue'
 import ViewModesIcon from '../components/global/icon/ViewModes.vue'
-
-import Ghost from '../components/global/icon/Ghost.vue'
-import ZoomToFit from '../components/global/icon/ZoomToFit.vue'
 import type { ViewModeOptions } from '@src/plugins/viewer'
 
 const visualStore = useVisualStore()
 
 const emits = defineEmits<{
   (e: 'update:sectionBox', value: boolean): void
-  (e: 'view-clicked', view: SpeckleView): void
-  (e: 'toggle-projection'): void
+  (e: 'view-clicked', view: CanonicalView | SpeckleView): void
   (e: 'clear-palette'): void
   (e: 'view-mode-clicked', viewMode: ViewMode, options: ViewModeOptions): void
 }>()
@@ -107,7 +77,7 @@ withDefaults(defineProps<{ sectionBox: boolean; views: SpeckleView[] }>(), {
 type ActiveControl =
   | 'none'
   | 'viewModes'
-  | 'views'
+  | 'camera'
   | 'sun'
   | 'projection'
   | 'sectionBox'
@@ -124,29 +94,6 @@ const toggleActiveControl = (control: ActiveControl) => {
   activeControl.value = activeControl.value === control ? 'none' : control
 }
 
-const toggleProjection = () => {
-  visualStore.viewerEmit('toggleProjection')
-  visualStore.setIsOrthoProjection(!visualStore.isOrthoProjection)
-  visualStore.writeIsOrthoToFile()
-}
-
-const toggleGhostHidden = () => {
-  visualStore.setIsGhost(!visualStore.isGhostActive)
-  visualStore.viewerEmit('toggleGhostHidden', visualStore.isGhostActive)
-  visualStore.writeIsGhostToFile()
-}
-
-const toggleZoomOnFilter = () => {
-  visualStore.setIsZoomOnFilterActive(!visualStore.isZoomOnFilterActive)
-  visualStore.writeZoomOnFilterToFile()
-}
-
 const viewModesOpen = computed(() => activeControl.value === 'viewModes')
-
-const viewsOpen = computed({
-  get: () => activeControl.value === 'views',
-  set: (value) => {
-    activeControl.value = value ? 'views' : 'none'
-  }
-})
+const cameraOpen = computed(() => activeControl.value === 'camera')
 </script>

src/powerbi-visual/src/components/ViewerWrapper.vue

@@ -77,9 +77,10 @@
     <transition name="slide-left">
       <ViewerControls
         v-show="!visualStore.isNavbarHidden"
-        v-model:section-box="bboxActive"
+        :section-box="sectionBoxEnabled"
         :views="views"
         class="fixed top-11 left-2 z-30"
+        @update:section-box="onSectionBoxToggle"
         @view-clicked="(view) => viewerHandler.setView(view)"
         @view-mode-clicked="(viewMode, options) => viewerHandler.setViewMode(viewMode, options)"
       />
@@ -91,6 +92,11 @@
       </FormButton>
     </div>
 
+    <div v-if="sectionBoxVisible" class="absolute bottom-5 left-1/2 -translate-x-1/2 z-50 flex gap-2">
+      <FormButton size="sm" color="outline" @click="onSectionBoxReset">Reset</FormButton>
+      <FormButton size="sm" @click="onSectionBoxDone">Done</FormButton>
+    </div>
+
     <div
       class="absolute z-10 flex items-center text-xs cursor-pointer"
       :class="visualStore.isBrandingHidden ? 'bottom-0 right-0' : 'bottom-2 right-2'"
@@ -149,8 +155,11 @@ const tooltipHandler = inject(tooltipHandlerKey)
 let viewerHandler: ViewerHandler = null
 
 const container = ref<HTMLElement>()
-let bboxActive = ref(false)
-let views: Ref<SpeckleView[]> = ref([])
+type SectionBoxState = 'inactive' | 'editing' | 'applied'
+const sectionBoxState = ref<SectionBoxState>('inactive')
+const sectionBoxEnabled = computed(() => sectionBoxState.value !== 'inactive')
+const sectionBoxVisible = computed(() => sectionBoxState.value === 'editing')
+const views: Ref<SpeckleView[]> = ref([])
 
 const isInteractive = computed(
   () => visualStore.fieldInputState.rootObjectId && visualStore.fieldInputState.objectIds
@@ -158,6 +167,41 @@ const isInteractive = computed(
 
 const goToSpeckleWebsite = () => visualStore.host.launchUrl('https://speckle.systems')
 
+function disableSectionBox() {
+  sectionBoxState.value = 'inactive'
+  viewerHandler.toggleSectionBox(false)
+  visualStore.writeSectionBoxToFile(null)
+  visualStore.setSectionBoxData(null)
+}
+
+function onSectionBoxToggle() {
+  switch (sectionBoxState.value) {
+    case 'inactive':
+      sectionBoxState.value = 'editing'
+      viewerHandler.toggleSectionBox(true)
+      break
+    case 'editing':
+      onSectionBoxDone()
+      break
+    case 'applied':
+      sectionBoxState.value = 'editing'
+      viewerHandler.setSectionBoxVisible(true)
+      break
+  }
+}
+
+function onSectionBoxReset() {
+  disableSectionBox()
+}
+
+function onSectionBoxDone() {
+  sectionBoxState.value = 'applied'
+  viewerHandler.setSectionBoxVisible(false)
+  const boxData = viewerHandler.getSectionBoxData()
+  visualStore.setSectionBoxData(boxData)
+  visualStore.writeSectionBoxToFile(boxData)
+}
+
 onMounted(async () => {
   console.log('Viewer Wrapper mounted')
   viewerHandler = new ViewerHandler()
@@ -166,6 +210,13 @@ onMounted(async () => {
   // Set up event listener for object clicks from the FilteredSelectionExtension
   viewerHandler.emitter.on('objectClicked', handleObjectClicked)
 
+  // Sync section box UI state when restored from file
+  viewerHandler.emitter.on('objectsLoaded', () => {
+    if (visualStore.sectionBoxData) {
+      sectionBoxState.value = 'applied'
+    }
+  })
+
   visualStore.setViewerEmitter(viewerHandler.emit)
 })
 

src/powerbi-visual/src/components/global/icon/Views.vue

@@ -1,38 +0,0 @@
-<template>
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M18.5 8.79167L12 12.5833M18.5 8.79167V15.2917L12 19.0833M18.5 8.79167L12 5L5.5 8.79167M12 12.5833L5.5 8.79167M12 12.5833V19.0833M12 19.0833L5.5 15.2917V8.79167"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M5.5 15.2917L1.5 17.6251"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M18.5 15.2957L22.5 17.629"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M12 5V1"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
-</template>

src/powerbi-visual/src/components/viewer/camera/ViewerCameraMenu.vue

@@ -0,0 +1,99 @@
+<template>
+  <ViewerMenu v-model:open="open">
+    <template #trigger-icon>
+      <VideoCameraIcon class="w-5 h-5" />
+    </template>
+    <template #title>Camera</template>
+    <div class="flex flex-col p-1.5 min-w-[180px] space-y-0.5">
+      <ViewerMenuItem
+        label="Orthographic projection"
+        :active="visualStore.isOrthoProjection"
+        @click="toggleProjection"
+      />
+      <ViewerMenuItem
+        label="Move camera on filter"
+        :active="visualStore.isZoomOnFilterActive"
+        @click="toggleZoomOnFilter"
+      />
+      <ViewerMenuItem
+        label="Ghost filtered objects"
+        :active="visualStore.isGhostActive"
+        @click="toggleGhostHidden"
+      />
+
+      <div class="w-full border-b border-outline-2 my-1"></div>
+
+      <div class="text-body-2xs font-semibold text-foreground-2 px-2 py-1">Views</div>
+
+      <ViewerMenuItem
+        v-for="shortcut in viewShortcuts"
+        :key="shortcut.name"
+        :label="shortcut.name"
+        hide-active-tick
+        :active="false"
+        @click="handleViewChange(shortcut.name.toLowerCase() as CanonicalView)"
+      />
+
+      <div v-if="views.length !== 0" class="w-full border-b border-outline-2 my-1"></div>
+
+      <ViewerMenuItem
+        v-for="view in views"
+        :key="view.id"
+        hide-active-tick
+        :active="false"
+        :label="view.name ? view.name : view.id"
+        @click="handleViewChange(view)"
+      />
+    </div>
+  </ViewerMenu>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VideoCameraIcon } from '@heroicons/vue/24/outline'
+import type { CanonicalView, SpeckleView } from '@speckle/viewer'
+import { useVisualStore } from '@src/store/visualStore'
+import ViewerMenu from '../menu/ViewerMenu.vue'
+import ViewerMenuItem from '../menu/ViewerMenuItem.vue'
+import { ViewShortcuts } from '@src/helpers/viewer/shortcuts/shortcuts'
+
+const visualStore = useVisualStore()
+
+const props = defineProps<{
+  open: boolean
+  views: SpeckleView[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'view-clicked', value: CanonicalView | SpeckleView): void
+}>()
+
+const open = computed({
+  get: () => props.open,
+  set: (val) => emit('update:open', val)
+})
+
+const viewShortcuts = Object.values(ViewShortcuts)
+
+const handleViewChange = (v: CanonicalView | SpeckleView) => {
+  emit('view-clicked', v)
+}
+
+const toggleProjection = () => {
+  visualStore.viewerEmit('toggleProjection')
+  visualStore.setIsOrthoProjection(!visualStore.isOrthoProjection)
+  visualStore.writeIsOrthoToFile()
+}
+
+const toggleGhostHidden = () => {
+  visualStore.setIsGhost(!visualStore.isGhostActive)
+  visualStore.viewerEmit('toggleGhostHidden', visualStore.isGhostActive)
+  visualStore.writeIsGhostToFile()
+}
+
+const toggleZoomOnFilter = () => {
+  visualStore.setIsZoomOnFilterActive(!visualStore.isZoomOnFilterActive)
+  visualStore.writeZoomOnFilterToFile()
+}
+</script>

src/powerbi-visual/src/components/viewer/views/ViewerViewsMenu.vue

@@ -1,88 +0,0 @@
-<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
-<template>
-  <ViewerMenu v-model:open="open" title="Views">
-    <template #trigger-icon>
-      <Views class="w-5 h-5" />
-    </template>
-    <template #title>Views</template>
-    <div
-      class="max-h-64 simple-scrollbar overflow-y-auto flex flex-col p-1.5"
-      @mouseenter="cancelCloseTimer"
-      @mouseleave="isManuallyOpened ? undefined : startCloseTimer"
-      @focusin="cancelCloseTimer"
-      @focusout="isManuallyOpened ? undefined : startCloseTimer"
-    >
-      <div v-for="shortcut in viewShortcuts" :key="shortcut.name">
-        <ViewerMenuItem
-          :label="shortcut.name"
-          hide-active-tick
-          :active="activeView === shortcut.name.toLowerCase()"
-          @click="handleViewChange(shortcut.name.toLowerCase() as CanonicalView)"
-        />
-      </div>
-
-      <div v-if="views.length !== 0" class="w-full border-b my-1"></div>
-
-      <ViewerMenuItem
-        v-for="view in views"
-        :key="view.id"
-        hide-active-tick
-        :active="activeView === view.id"
-        :label="view.name ? view.name : view.id"
-        @click="handleViewChange(view)"
-      />
-    </div>
-  </ViewerMenu>
-</template>
-
-<script setup lang="ts">
-import { useTimeoutFn } from '@vueuse/core'
-import type { CanonicalView, SpeckleView } from '@speckle/viewer'
-import { onUnmounted, ref, computed } from 'vue'
-import ViewerMenu from '../menu/ViewerMenu.vue'
-import ViewerMenuItem from '../menu/ViewerMenuItem.vue'
-import Views from '../../global/icon/Views.vue'
-import { ViewShortcuts } from '../../../helpers/viewer/shortcuts/shortcuts'
-
-// Props
-const props = defineProps<{
-  views: SpeckleView[]
-  open: boolean
-}>()
-
-// Emits
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-  (e: 'force-close-others'): void
-  (e: 'view-clicked', value: CanonicalView | SpeckleView)
-}>()
-
-// Computed open for v-model
-const open = computed({
-  get: () => props.open,
-  set: (val) => emit('update:open', val)
-})
-
-// State
-const isManuallyOpened = ref(false)
-const activeView = ref<string | null>(null)
-
-const { start: startCloseTimer, stop: cancelCloseTimer } = useTimeoutFn(
-  () => {
-    open.value = false
-  },
-  3000,
-  { immediate: false }
-)
-
-const handleViewChange = (v: CanonicalView | SpeckleView) => {
-  open.value = false
-  emit('view-clicked', v)
-}
-
-const viewShortcuts = Object.values(ViewShortcuts)
-
-onUnmounted(() => {
-  cancelCloseTimer()
-})
-</script>

src/powerbi-visual/src/plugins/viewer.ts

@@ -3,6 +3,8 @@ import {
   FilteringState,
   CameraController,
   CanonicalView,
+  SectionTool,
+  SectionOutlines,
   ViewModes,
   CameraEvent,
   SpeckleView,
@@ -20,7 +22,7 @@ import { SpeckleObjectsOfflineLoader } from '@src/laoder/SpeckleObjectsOfflineLo
 import { useVisualStore } from '@src/store/visualStore'
 import { Tracker } from '@src/utils/mixpanel'
 import { createNanoEvents, Emitter } from 'nanoevents'
-import { Vector3 } from 'three'
+import { Box3, Vector3 } from 'three'
 
 export interface IViewer {
   /**
@@ -59,6 +61,8 @@ export interface IViewerEvents {
   zoomExtends: () => void
   toggleProjection: () => void
   toggleGhostHidden: (ghost: boolean) => void
+  toggleSectionBox: (enabled: boolean) => void
+  setSectionBoxVisible: (visible: boolean) => void
   loadObjects: (objects: object[]) => void
   objectsLoaded: () => void
   objectClicked: (hit: Hit | null, isMultiSelect: boolean, mouseEvent?: PointerEvent) => void
@@ -75,6 +79,8 @@ export class ViewerHandler {
   public cameraControls: CameraController
   public filtering: FilteringExtension
   public selection: FilteredSelectionExtension
+  public sectionTool: SectionTool
+  public sectionOutlines: SectionOutlines
   private filteringState: FilteringState
 
   constructor() {
@@ -94,6 +100,8 @@ export class ViewerHandler {
     this.emitter.on('objectsLoaded', this.handleObjectsLoaded)
     this.emitter.on('toggleProjection', this.toggleProjection)
     this.emitter.on('toggleGhostHidden', this.toggleGhostHidden)
+    this.emitter.on('toggleSectionBox', this.toggleSectionBox)
+    this.emitter.on('setSectionBoxVisible', this.setSectionBoxVisible)
   }
 
   async init(parent: HTMLElement) {
@@ -101,6 +109,8 @@ export class ViewerHandler {
     this.cameraControls = this.viewer.getExtension(CameraController)
     this.filtering = this.viewer.getExtension(FilteringExtension)
     this.selection = this.viewer.getExtension(FilteredSelectionExtension)
+    this.sectionTool = this.viewer.getExtension(SectionTool)
+    this.sectionOutlines = this.viewer.getExtension(SectionOutlines)
 
     const store = useVisualStore()
     if (store.isOrthoProjection) {
@@ -135,14 +145,65 @@ export class ViewerHandler {
   }
   public toggleProjection = () => this.cameraControls.toggleCameras()
 
-  public setView = (view: CanonicalView) => {
+  public setView = (view: CanonicalView | SpeckleView) => {
     this.cameraControls.setCameraView(view, false)
     this.snapshotCameraPositionAndStore()
   }
 
-  public setSectionBox = (bboxActive: boolean, objectIds: string[]) => {
-    // TODO
-    return
+  public toggleSectionBox = (enabled: boolean) => {
+    this.setSectionEnabled(enabled)
+    if (enabled) {
+      const sceneBox = this.viewer.getRenderer().sceneBox
+      this.sectionTool.setBox(sceneBox)
+      this.sectionTool.visible = true
+    }
+  }
+
+  public setSectionBoxVisible = (visible: boolean) => {
+    this.sectionTool.visible = visible
+  }
+
+  private setSectionEnabled(enabled: boolean): void {
+    this.sectionTool.enabled = enabled
+    this.sectionOutlines.enabled = enabled
+  }
+
+  public getSectionBoxData = (): string | null => {
+    if (!this.sectionTool.enabled) return null
+    const { center, halfSize } = this.sectionTool.getBox()
+    const min = new Vector3().copy(center).sub(halfSize)
+    const max = new Vector3().copy(center).add(halfSize)
+    return JSON.stringify({ min, max })
+  }
+
+  public applySectionBox = (boxData: string) => {
+    try {
+      const parsed = JSON.parse(boxData)
+
+      // Validate parsed data structure
+      if (!parsed?.min || !parsed?.max) {
+        throw new Error('Invalid section box data: missing min/max properties')
+      }
+
+      const box = new Box3(
+        new Vector3(parsed.min.x, parsed.min.y, parsed.min.z),
+        new Vector3(parsed.max.x, parsed.max.y, parsed.max.z)
+      )
+
+      this.setSectionEnabled(true)
+      this.sectionTool.setBox(box)
+      this.sectionTool.visible = false
+      this.viewer.requestRender(UpdateFlags.RENDER_RESET)
+      // Force section outlines recomputation after geometry is rendered
+      requestAnimationFrame(() => {
+        this.sectionOutlines.requestUpdate(true)
+        this.viewer.requestRender(UpdateFlags.RENDER_RESET)
+      })
+    } catch (error) {
+      console.error('Failed to apply section box, disabling feature:', error)
+      this.setSectionEnabled(false)
+      // Visual continues loading normally without section box
+    }
   }
 
   public setViewMode(viewMode: ViewMode, options?: ViewModeOptions) {
@@ -218,6 +279,9 @@ export class ViewerHandler {
 
 
   public loadObjects = async (modelObjects: object[][]) => {
+    // disable section box before unloading to prevent stale geometry references.
+    // it will be re-applied from store after new objects are loaded (see applySectionBox below).
+    this.toggleSectionBox(false)
     await this.viewer.unloadAll()
     // const stringifiedObject = JSON.stringify(objects)
 
@@ -280,6 +344,10 @@ export class ViewerHandler {
       this.cameraControls.setCameraView({ position, target }, true)
     }
 
+    if (store.sectionBoxData) {
+      this.applySectionBox(store.sectionBoxData)
+    }
+
     // Emit objects loaded event to trigger update
     this.emit('objectsLoaded')
   }
@@ -341,8 +409,8 @@ const createViewer = async (parent: HTMLElement): Promise<Viewer> => {
   viewer.createExtension(HybridCameraController) // camera controller
   viewer.createExtension(FilteringExtension) // filtering - must be created before FilteredSelectionExtension
   viewer.createExtension(FilteredSelectionExtension) // filtered selection helper - depends on FilteringExtension
-  // viewer.createExtension(SectionTool) // section tool, possibly not needed for now?
-  // viewer.createExtension(SectionOutlines) // section tool, possibly not needed for now?
+  viewer.createExtension(SectionTool) // section tool
+  viewer.createExtension(SectionOutlines) // section outlines
   // viewer.createExtension(MeasurementsExtension) // measurements, possibly not needed for now?
   viewer.createExtension(ViewModes) // view modes
 

src/powerbi-visual/src/store/visualStore.ts

@@ -61,6 +61,7 @@ export const useVisualStore = defineStore('visualStore', () => {
 
   const cameraPosition = ref<number[]>(undefined)
   const defaultViewModeInFile = ref<string>(undefined)
+  const sectionBoxData = ref<string>(undefined)
 
   // Edges settings for view modes
   const edgesEnabled = ref<boolean>(true)
@@ -430,6 +431,23 @@ export const useVisualStore = defineStore('visualStore', () => {
     })
   }
 
+  const writeSectionBoxToFile = (boxData: string | null) => {
+    postFileSaveSkipNeeded.value = true
+    host.value.persistProperties({
+      merge: [
+        {
+          objectName: 'sectionBox',
+          properties: {
+            boxData: boxData
+          },
+          selector: null
+        }
+      ]
+    })
+  }
+
+  const setSectionBoxData = (newValue: string | null) => (sectionBoxData.value = newValue)
+
   const setFieldInputState = (newFieldInputState: FieldInputState) =>
     (fieldInputState.value = newFieldInputState)
 
@@ -591,6 +609,7 @@ export const useVisualStore = defineStore('visualStore', () => {
     isLoadingFromFile,
     cameraPosition,
     defaultViewModeInFile,
+    sectionBoxData,
     edgesEnabled,
     edgesWeight,
     edgesColor,
@@ -639,6 +658,8 @@ export const useVisualStore = defineStore('visualStore', () => {
     writeIsOrthoToFile,
     writeViewModeToFile,
     writeCameraPositionToFile,
+    writeSectionBoxToFile,
+    setSectionBoxData,
     writeHideBrandingToFile,
     writeNavbarVisibilityToFile,
     writeDataLoadingModeToFile,

src/powerbi-visual/src/visual.ts

@@ -149,40 +149,25 @@ export class Visual implements IVisual {
             console.log('🔍 Checking for other saved settings:')
 
             if (!visualStore.isViewerObjectsLoaded && options.dataViews[0].metadata.objects) {
-              if (options.dataViews[0].metadata.objects.viewMode?.defaultViewMode as string) {
-                console.log(
-                  `Default View Mode: ${
-                    options.dataViews[0].metadata.objects.viewMode?.defaultViewMode as string
-                  }`
-                )
+              const defaultViewMode = options.dataViews[0].metadata.objects.viewMode?.defaultViewMode
+              if (defaultViewMode) {
+                console.log(`Default View Mode: ${defaultViewMode as string}`)
 
-                visualStore.setDefaultViewModeInFile(
-                  options.dataViews[0].metadata.objects.viewMode?.defaultViewMode as string
-                )
+                visualStore.setDefaultViewModeInFile(defaultViewMode as string)
               }
 
-              if (options.dataViews[0].metadata.objects.workspace?.brandingHidden as boolean) {
-                console.log(
-                  `Branding Hidden: ${
-                    options.dataViews[0].metadata.objects.workspace?.brandingHidden as boolean
-                  }`
-                )
+              const brandingHidden = options.dataViews[0].metadata.objects.workspace?.brandingHidden
+              if (brandingHidden !== undefined) {
+                console.log(`Branding Hidden: ${brandingHidden as boolean}`)
 
-                visualStore.setBrandingHidden(
-                  options.dataViews[0].metadata.objects.workspace?.brandingHidden as boolean
-                )
+                visualStore.setBrandingHidden(brandingHidden as boolean)
               }
 
-              if (options.dataViews[0].metadata.objects.viewMode?.navbarHidden as boolean) {
-                console.log(
-                  `Navbar Hidden: ${
-                    options.dataViews[0].metadata.objects.viewMode?.navbarHidden as boolean
-                  }`
-                )
+              const navbarHidden = options.dataViews[0].metadata.objects.viewMode?.navbarHidden
+              if (navbarHidden !== undefined) {
+                console.log(`Navbar Hidden: ${navbarHidden as boolean}`)
 
-                visualStore.setNavbarHidden(
-                  options.dataViews[0].metadata.objects.viewMode?.navbarHidden as boolean
-                )
+                visualStore.setNavbarHidden(navbarHidden as boolean)
               }
 
               // Load edges settings
@@ -203,18 +188,25 @@ export class Visual implements IVisual {
                 }
               }
 
-              if (options.dataViews[0].metadata.objects.cameraPosition?.positionX as string) {
-                console.log(`Stored camera position is found`)
+              const cameraPositionData = options.dataViews[0].metadata.objects.cameraPosition
+              if (cameraPositionData?.positionX) {
+                console.log('Stored camera position is found')
                 visualStore.setCameraPositionInFile([
-                  Number(options.dataViews[0].metadata.objects.cameraPosition?.positionX),
-                  Number(options.dataViews[0].metadata.objects.cameraPosition?.positionY),
-                  Number(options.dataViews[0].metadata.objects.cameraPosition?.positionZ),
-                  Number(options.dataViews[0].metadata.objects.cameraPosition?.targetX),
-                  Number(options.dataViews[0].metadata.objects.cameraPosition?.targetY),
-                  Number(options.dataViews[0].metadata.objects.cameraPosition?.targetZ)
+                  Number(cameraPositionData.positionX),
+                  Number(cameraPositionData.positionY),
+                  Number(cameraPositionData.positionZ),
+                  Number(cameraPositionData.targetX),
+                  Number(cameraPositionData.targetY),
+                  Number(cameraPositionData.targetZ)
                 ])
               }
 
+              const sectionBoxData = options.dataViews[0].metadata.objects.sectionBox?.boxData
+              if (sectionBoxData) {
+                console.log('Stored section box is found')
+                visualStore.setSectionBoxData(sectionBoxData as string)
+              }
+
               const camera = options.dataViews[0].metadata.objects.camera
 
               if (camera && 'isOrtho' in camera) {