Toolbar Reference
The Schema Builder toolbar has two rows, implemented in TopToolbar.vue and menuItems.ts.
Layout
┌────────────────────────────────────────────────────────────────────────┐
│ [Schema | Data | Settings] [action icons] [title] [🌙] [⋮] │ ← Row 1
├────────────────────────────────────────────────────────────────────────┤
│ [action icons] [zoom-] [75%] [zoom+] [🔍] [📁 eClinical] [📋 ▼][🔧] [json▼] │ ← Row 2
└──────────────────────────────── ────────────────────────────────────────┘
Row 1 — Mode Selector + Global Controls
| Control | Description |
|---|---|
| Mode tabs (Schema / Data / Settings) | Switches the active session mode; persisted in sessionStore |
| Mode-specific action icons (top position) | Context-sensitive icons for the current mode |
| App title | Displays settings.toolbarTitle (default: MetaConfigurator) |
| 🌙 Dark/light toggle | Switches PrimeVue theme between dark and light |
| ⋮ Overflow menu | App-wide actions (see below) |
⋮ Overflow Menu Items
| Item | Action |
|---|---|
| Create Project | Opens CreateEditProjectDialog — Name, Description, Owner fields; POST /api/sb/projects |
| Settings | Navigate to Settings mode |
| View Plugins | Opens PluginManagerDialog — list, toggle, and remove plugins |
| SureCentric Docs | External link to docs.surecentric.net |
| About Schema Builder | Version and license information |
| Restore default settings | Resets all settings to built-in defaults |
Row 2 — Action Icons + Session Controls
Left side: Mode-specific action icon buttons (bottom-position group)
Center: Zoom out · zoom percentage label · zoom in · 🔍 search (Ctrl+F)
Right side: Project Switcher combobox · CARD Profile combobox · 🔧 Edit profile button · | divider · Format selector (JSON / YAML / XML)
Schema Mode Action Icons
| Icon | Name | Action |
|---|---|---|
| 📄 | New Schema | Create a blank JSON-LD schema |
| 📂 | Open File | Open a .json or .jsonld file |
| 🌲 | Import Schema | Popup: Import JSON Schema or Import JSON-LD Schema (merge workflow) |
| 💾 | Download | Save the active schema in the current format |
| 🛠 | Utility | Utility operations (extract $defs, transform) |
</> | Generate Code | quicktype code generation (Python, TypeScript, Java, 18 languages) |
| 🔗 | Share Snapshot | Encode full state into a shareable URL |
| ↩ | Undo | Step backward in edit history |
| ↪ | Redo | Step forward in edit history |
| Panel toggles | Text / GUI / Diagram / Mapper / AI / Documentation | Open or close each panel; active panels highlighted in brand blue |
Data Mode Action Icons
| Icon | Name | Action |
|---|---|---|
| 📄 | New Data | Create a blank data document |
| 📂 | Open Data | Open a .json, .yaml, or .csv file |
| ⬆ | Import Data | CSV import dialog or data mapping dialog |
| 💾 | Download | Save the active data document |
| 🛠 | Utility | Data export dialog (Handlebars template) |
| 🔗 | Share Snapshot | Encode schema + data into a shareable URL |
| ↩ / ↪ | Undo / Redo | Full data edit history |
| Panel toggles | Text / GUI / Table / AI | Open or close each panel |
Project Switcher
Source: ProjectSwitcherCombobox.vue · useProjects.ts
- Fetches projects from
GET /api/sb/projectson mount - Auto-selects the first project; selection persisted to
sessionStorage - Changing project triggers CARD Profile list re-fetch
CARD Profile Combobox
Source: CardProfileCombobox.vue · useCardProfiles.ts
- Fetches profiles from
GET /api/sb/card-profiles?project_id=<current>on mount and on project change - Selecting a profile activates its listed schemas, plugins, and dataset in the session
- 🔧 button opens
CardProfileEditorDialogfor full profile editing
See the CARD System page for full details.