Test viewer: Add selection scopes picker (#1140)

apps/test-viewer/src/components/ViewerOptions.tsx

@@ -6,8 +6,10 @@
 import { createContext, useContext, useState } from "react";
 import { StatusBarSection } from "@itwin/appui-react";
 import { SvgSelection, SvgVisibilityShow } from "@itwin/itwinui-icons-react";
-import { IconButton } from "@itwin/itwinui-react";
+import { IconButton, Select } from "@itwin/itwinui-react";
+import { Presentation } from "@itwin/presentation-frontend";
 
+import type { SelectionScopesManager } from "@itwin/presentation-frontend";
 import type { PropsWithChildren } from "react";
 import type { UiItemsProvider } from "@itwin/appui-react";
 
@@ -57,6 +59,12 @@ export const statusBarActionsProvider: UiItemsProvider = {
       itemPriority: 2,
       section: StatusBarSection.Left,
     },
+    {
+      id: `selectionScopeSelectorButton`,
+      content: <SelectionScopeSelectorButton />,
+      itemPriority: 3,
+      section: StatusBarSection.Left,
+    },
   ],
 };
 
@@ -77,3 +85,61 @@ function ToggleTreeNodesSelectionButton() {
     </IconButton>
   );
 }
+
+function SelectionScopeSelectorButton() {
+  const [activeScope, setActiveScope] = useState(getScopeId(Presentation.selection.scopes.activeScope));
+  return (
+    <Select
+      options={Object.entries(scopes).map(([key, { label }]) => ({
+        value: key,
+        label,
+      }))}
+      value={activeScope}
+      onChange={(value) => {
+        const scopeId = value as keyof typeof scopes;
+        setActiveScope(scopeId);
+        // TODO: Viewer should allow specifying the active selection scope without using `Presentation.selection`
+        Presentation.selection.scopes.activeScope = scopes[scopeId].props;
+      }}
+    />
+  );
+}
+function getScopeId(scopeArg: SelectionScopesManager["activeScope"]): keyof typeof scopes {
+  if (!scopeArg) {
+    return "element";
+  }
+  if (typeof scopeArg === "string") {
+    return scopeArg as keyof typeof scopes;
+  }
+  if (scopeArg.id === "element" && "ancestorLevel" in scopeArg) {
+    if (scopeArg.ancestorLevel === 1) {
+      return "assembly";
+    }
+    if (scopeArg.ancestorLevel === 2) {
+      return "top-assembly";
+    }
+  }
+  return scopeArg.id as keyof typeof scopes;
+}
+const scopes = {
+  element: {
+    props: { id: "element" },
+    label: "Element",
+  },
+  assembly: {
+    props: { id: "element", ancestorLevel: 1 },
+    label: "Assembly",
+  },
+  "top-assembly": {
+    props: { id: "element", ancestorLevel: 2 },
+    label: "Top assembly",
+  },
+  model: {
+    props: { id: "model" },
+    label: "Model",
+  },
+  category: {
+    props: { id: "category" },
+    label: "Category",
+  },
+};