223 lines
7.0 KiB
Markdown
223 lines
7.0 KiB
Markdown
|
|
# COMPONENT DECISION TREE
|
||
|
|
|
||
|
|
**Which Component Should I Use?**
|
||
|
|
|
||
|
|
| | |
|
||
|
|
|---|---|
|
||
|
|
| **Version** | 1.0 |
|
||
|
|
| **Status** | LOCKED |
|
||
|
|
| **Scope** | All Landvex & quiXzoom products |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## How to Use This Document
|
||
|
|
|
||
|
|
Start at the top. Answer each question. Follow the path to the recommended component.
|
||
|
|
|
||
|
|
If no existing component fits, apply the **New Component Rule** (see Design Specification §8.2):
|
||
|
|
1. Can an existing component be used?
|
||
|
|
2. Can a variant be created?
|
||
|
|
3. Can a modifier be used?
|
||
|
|
4. Can a new state solve the problem?
|
||
|
|
|
||
|
|
Only then define a new component.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## User Actions
|
||
|
|
|
||
|
|
```
|
||
|
|
Need user action?
|
||
|
|
├── Yes → Primary action?
|
||
|
|
│ ├── Yes → Button (Primary)
|
||
|
|
│ └── No → Multiple options?
|
||
|
|
│ ├── Yes → Select / Dropdown
|
||
|
|
│ └── No → Toggle state?
|
||
|
|
│ ├── Yes → Switch / Checkbox
|
||
|
|
│ └── No → Navigation?
|
||
|
|
│ ├── Yes → Navigation / Sidebar
|
||
|
|
│ └── No → Search?
|
||
|
|
│ ├── Yes → Search
|
||
|
|
│ └── No → Command Palette
|
||
|
|
└── No → Need information display?
|
||
|
|
└── Yes → See Information Display
|
||
|
|
```
|
||
|
|
|
||
|
|
## Information Display
|
||
|
|
|
||
|
|
```
|
||
|
|
Need to display information?
|
||
|
|
├── Yes → Tabular data?
|
||
|
|
│ ├── Yes → Simple table?
|
||
|
|
│ │ ├── Yes → Table
|
||
|
|
│ │ └── No → Sorting, filtering, pagination?
|
||
|
|
│ │ ├── Yes → Data Grid
|
||
|
|
│ │ └── No → Table
|
||
|
|
│ └── No → Spatial data?
|
||
|
|
│ ├── Yes → Map Panel
|
||
|
|
│ └── No → Summary metric?
|
||
|
|
│ ├── Yes → KPI Card
|
||
|
|
│ └── No → Grouped content?
|
||
|
|
│ ├── Yes → Card / Accordion
|
||
|
|
│ └── No → Single item?
|
||
|
|
│ ├── Yes → Badge / Alert
|
||
|
|
│ └── No → Tooltip
|
||
|
|
└── No → Need user input?
|
||
|
|
└── Yes → See User Input
|
||
|
|
```
|
||
|
|
|
||
|
|
## User Input
|
||
|
|
|
||
|
|
```
|
||
|
|
Need user input?
|
||
|
|
├── Yes → Text input?
|
||
|
|
│ ├── Yes → Single line?
|
||
|
|
│ │ ├── Yes → Input
|
||
|
|
│ │ └── No → Textarea
|
||
|
|
│ └── No → Choice from options?
|
||
|
|
│ ├── Yes → Single choice?
|
||
|
|
│ │ ├── Yes → Radio / Select
|
||
|
|
│ │ └── No → Multiple choice?
|
||
|
|
│ │ ├── Yes → Checkbox / Multi-select
|
||
|
|
│ │ └── No → Toggle?
|
||
|
|
│ │ ├── Yes → Switch
|
||
|
|
│ │ └── No → Date / time?
|
||
|
|
│ │ ├── Yes → Date Picker
|
||
|
|
│ │ └── No → Coordinate?
|
||
|
|
│ │ ├── Yes → Coordinate Picker
|
||
|
|
│ │ └── No → File?
|
||
|
|
│ │ ├── Yes → File Upload
|
||
|
|
│ │ └── No → Input (custom)
|
||
|
|
│ └── No → Search / filter?
|
||
|
|
│ ├── Yes → Search
|
||
|
|
│ └── No → Command Palette
|
||
|
|
└── No → Need feedback?
|
||
|
|
└── Yes → See Feedback
|
||
|
|
```
|
||
|
|
|
||
|
|
## Feedback
|
||
|
|
|
||
|
|
```
|
||
|
|
Need to provide feedback?
|
||
|
|
├── Yes → Blocking action?
|
||
|
|
│ ├── Yes → Modal / Dialog
|
||
|
|
│ └── No → Transient notification?
|
||
|
|
│ ├── Yes → Toast
|
||
|
|
│ └── No → Contextual message?
|
||
|
|
│ ├── Yes → Alert (inline) / Tooltip
|
||
|
|
│ └── No → Status indicator?
|
||
|
|
│ ├── Yes → Badge
|
||
|
|
│ └── No → Progress?
|
||
|
|
│ ├── Yes → Progress / Skeleton
|
||
|
|
│ └── No → Empty State
|
||
|
|
└── No → Navigation or structure?
|
||
|
|
└── Yes → See Navigation
|
||
|
|
```
|
||
|
|
|
||
|
|
## Navigation
|
||
|
|
|
||
|
|
```
|
||
|
|
Need navigation?
|
||
|
|
├── Yes → Primary navigation?
|
||
|
|
│ ├── Yes → Top-level sections?
|
||
|
|
│ │ ├── Yes → Navigation
|
||
|
|
│ │ └── No → Sidebar
|
||
|
|
│ └── No → Secondary navigation?
|
||
|
|
│ ├── Yes → Tabs / Breadcrumb
|
||
|
|
│ └── No → Contextual navigation?
|
||
|
|
│ ├── Yes → Pagination / Menu
|
||
|
|
│ └── No → Command Palette
|
||
|
|
└── No → Consider: is this a new component?
|
||
|
|
└── Apply New Component Rule
|
||
|
|
```
|
||
|
|
|
||
|
|
## Landvex-Specific (Domain Components)
|
||
|
|
|
||
|
|
```
|
||
|
|
Need Landvex-specific component?
|
||
|
|
├── Yes → Geospatial data?
|
||
|
|
│ ├── Yes → Map visualization?
|
||
|
|
│ │ ├── Yes → Map Panel
|
||
|
|
│ │ └── No → Layer control?
|
||
|
|
│ │ ├── Yes → Layer Selector
|
||
|
|
│ │ └── No → Feature inspection?
|
||
|
|
│ │ ├── Yes → Geospatial Inspector
|
||
|
|
│ │ └── No → Coordinate input?
|
||
|
|
│ │ └── Yes → Coordinate Picker
|
||
|
|
│ └── No → Mission data?
|
||
|
|
│ ├── Yes → Mission status?
|
||
|
|
│ │ ├── Yes → Mission Status
|
||
|
|
│ │ └── No → Mission timeline?
|
||
|
|
│ │ └── Yes → Timeline Panel
|
||
|
|
│ └── No → Asset data?
|
||
|
|
│ ├── Yes → Asset summary?
|
||
|
|
│ │ ├── Yes → Asset Summary
|
||
|
|
│ │ └── No → Dataset preview?
|
||
|
|
│ │ └── Yes → Dataset Card
|
||
|
|
│ └── No → KPI display?
|
||
|
|
│ └── Yes → KPI Card
|
||
|
|
└── No → See general decision trees above
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Quick Reference Table
|
||
|
|
|
||
|
|
| Need | Component | Tier |
|
||
|
|
|------|-----------|------|
|
||
|
|
| Primary action | Button | 1 |
|
||
|
|
| Text input | Input | 1 |
|
||
|
|
| Choice from list | Select | 1 |
|
||
|
|
| Content container | Card | 1 |
|
||
|
|
| Overlay dialog | Modal | 1 |
|
||
|
|
| Navigation | Navigation / Sidebar | 1 |
|
||
|
|
| Tabular data | Table / Data Grid | 1 |
|
||
|
|
| Search | Search | 1 |
|
||
|
|
| Map display | Map Panel | 1 |
|
||
|
|
| Status indicator | Badge | 2 |
|
||
|
|
| Message | Alert / Toast | 2 |
|
||
|
|
| Help text | Tooltip | 2 |
|
||
|
|
| Collapsible content | Accordion | 2 |
|
||
|
|
| Content switching | Tabs | 2 |
|
||
|
|
| Location indicator | Breadcrumb | 2 |
|
||
|
|
| Page navigation | Pagination | 2 |
|
||
|
|
| No content | Empty State | 2 |
|
||
|
|
| Loading | Skeleton | 2 |
|
||
|
|
| Key metric | KPI Card | 3 |
|
||
|
|
| Map tools | Map Overlay Panel | 3 |
|
||
|
|
| Layer control | Layer Selector | 3 |
|
||
|
|
| Mission state | Mission Status | 3 |
|
||
|
|
| Data preview | Dataset Card | 3 |
|
||
|
|
| Feature details | Geospatial Inspector | 3 |
|
||
|
|
| Asset overview | Asset Summary | 3 |
|
||
|
|
| Coordinate input | Coordinate Picker | 3 |
|
||
|
|
| Time data | Timeline Panel | 3 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Relationship to Other Documents
|
||
|
|
|
||
|
|
| Document | Role |
|
||
|
|
|----------|------|
|
||
|
|
| `LANDVEX_DESIGN_SPECIFICATION.md` §8 | Component tiers and inheritance |
|
||
|
|
| `COMPONENT_TEMPLATE.md` | How to document a component |
|
||
|
|
| `DESIGN_ANTI_PATTERNS.md` | What not to do |
|
||
|
|
| `COMPONENT_DECISION_TREE.md` | Which component to use |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## ÄNDRINGSHISTORIA
|
||
|
|
|
||
|
|
| Version | Datum | Beskrivning |
|
||
|
|
|---------|-------|-------------|
|
||
|
|
| 1.0 | 2026-07-02 | Initial decision trees for actions, information, input, feedback, navigation, and Landvex-specific |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## STATUS
|
||
|
|
|
||
|
|
**LOCKED**
|
||
|
|
|
||
|
|
- Mindre revideringar: 1.x-serien
|
||
|
|
- Brytande ändringar: Kräver Architecture Review, ny major-version (2.0+)
|