# Model inspector A React block (a whole screen) in [Beamline](https://beamline.io/)'s [AI workspace](https://beamline.io/components/apps/ai-workspace) app. Live demo: https://beamline.io/components/model-inspector A design model's objects without needing the 3D view: the model tree, where objects with the same name are told apart by id and path; the selected object's properties, where a property it doesn't have, a null value and empty text each read differently; Hide and Isolate as buttons; and a legend by any property with colour and filter as two independent switches, every swatch labelled and counted, the objects without the property in their own hatched bucket, and how much of the model has it said. The model is drawn as a schematic plan from the same data, labelled as a plan. ## Use it for - Inspecting the objects of a building, product or factory model and their properties. - Colouring and filtering items on a plan or map by one of their properties. ## Not for - Rendering or navigating a 3D scene (not a viewer). - Plain files and folders ([file-manager](https://beamline.io/components/file-manager)). ## Anatomy - header: the product's mark, the model and version, the level - tree: find by name or id; groups with counts; objects with their id - plan: the level drawn from the data, coloured, ghosted outside an isolation, the selected outlined; what's hidden, isolated or filtered out - properties: name, id and path; every property, or not on this object, null or empty; Hide, Isolate, Show all - filter and colour: the property; Colour by it and Filter to the ticked values; coverage; each value, null, empty and without, with swatch and count ## States - nothing selected; selected; hidden; isolated - colour on or off, filter on or off, each alone; nothing ticked keeps everything - a property every object has, or only some - phone: the plan first, then properties, legend and tree - right to left: mirrors ## Keyboard - Tab through the level, the find box, the tree's groups and objects, then Hide, Isolate, the property, both switches and each value ## Motion Ghosting fades. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `model` (required) | `string` | — | The model's name and version, as the header says it ("Harbour Library · version 14"). | | `levels` (required) | `PlanLevel[]` | — | | | `objects` (required) | `ModelObject[]` | — | | | `defaultLevel` | `string` | — | | | `defaultSelected` | `string \| null` | — | | | `defaultProperty` | `string` | — | The property the legend reads at first. | | `defaultColour` | `boolean` | — | | | `defaultFilter` | `boolean` | — | | | `defaultTicked` | `string[]` | — | Legend values ticked at first (as their keys: the value, "∅null", "∅empty" or "∅missing"). | | `defaultHidden` | `string[]` | — | | | `defaultIsolated` | `string[] \| null` | — | | | `product` | `string` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Glow](https://beamline.io/components/glow.md) - [Kbd](https://beamline.io/components/kbd.md) - [Label](https://beamline.io/components/label.md) - [Search field](https://beamline.io/components/search-field.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { ModelInspector, PlanView } from "@beamline/model-inspector"; ``` ## Get it Model inspector is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in AI workspace - [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation that opens on the thread's earlier turns (each with its trace, the tools the agent called, a cited answer and any table it… - [Agent runs monitor](https://beamline.io/components/agent-runs): Every run of your agents in one place: success rate, run time, tokens and spend; the last runs as a strip of status blocks; a live table where running… - [Agent monitor](https://beamline.io/components/agent-monitor): Agents in production and on test. Monitor shows every agent or one over 24 hours, 7 or 14 days: runs, tokens, estimated cost and average run time counted… - [Conversation history](https://beamline.io/components/conversation-history): Past conversations with an assistant, ready to pick up again: the list by day with bookmarks and unsent drafts, a search through every message that… - [Knowledge base manager](https://beamline.io/components/knowledge-base): What your assistant knows and whether it is fresh: sources with live sync status (syncing with progress, out of date, failed with the reason and Retry)… - [Reading library](https://beamline.io/components/reading-library): A read-it-later library: saved views that are live filters (a query with every unreadable part named, the number that matches now, saved with a name; a… - [Artifact workbench](https://beamline.io/components/artifact-workbench): Where the things an assistant makes are checked before they leave: every document, piece of code, small app and data result from a conversation, each… - [AI image studio](https://beamline.io/components/image-studio): Write a prompt, pick a shape, a style and how many, and watch the variations generate side by side; each one opens full screen and can be upscaled or… - [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a workspace with the agent's orb large on a stage (the line being said shows under it, questions to ask… - [Model playground](https://beamline.io/components/model-playground): Try one prompt on up to three models side by side: pick each model with its price and speed in view, set the system prompt, temperature and length once… - [Model issues](https://beamline.io/components/model-issues): Issues pinned to the objects of a design model. The queue says the scope beside every count (open in the project, on the loaded models, on this version)… - [Agent builder](https://beamline.io/components/agent-builder): An agent's configuration beside an assistant that proposes tools. Ask for what the agent should do and the assistant's proposal lists each tool with why… - [Workflow composer](https://beamline.io/components/workflow-composer): A workflow drafted from a sentence and finished by hand. The prompt drafts steps that arrive one by one on the graph (a draft cut short keeps what came… - [Data binding](https://beamline.io/components/data-binding): Bind an object's properties to a view model. Each property says whether it is bound, incomplete or mismatched. A binding takes its source from the… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).