+
+ Hierarchy Mapping (Optional)
+
+
+ Map dashboard tags to hierarchy levels (overview/drilldown/detail) when explicit hierarchy tags are absent.
+ Example: Tag "prod" → "overview"
+
+
+ {/* List existing mappings */}
+ {Object.entries(config.config.hierarchyMap || {}).map(([tag, level]) => (
+
+ updateHierarchyMapping(tag, e.target.value, level)}
+ placeholder="Tag (e.g., prod)"
+ style={{
+ flex: 1,
+ padding: '8px',
+ borderRadius: '6px',
+ border: '1px solid var(--color-border-soft)',
+ backgroundColor: 'var(--color-surface-elevated)',
+ color: 'var(--color-text-primary)',
+ fontSize: '13px',
+ }}
+ />
+
+
+
+ ))}
+
+ {/* Add mapping button */}
+
+
+ ```
+
+3. Add validation helper (optional warning, per CONTEXT.md):
+ - Add validation check before rendering: detect if any level is not in ["overview", "drilldown", "detail"]
+ - If invalid level found, show warning message (yellow box) below hierarchy section
+ - Warning text: "Warning: Some mappings use invalid levels. Valid levels are: overview, drilldown, detail."
+ - Do NOT prevent save (warning-only per CONTEXT.md)
+
+4. Initialize hierarchyMap if undefined:
+ - When config.config.hierarchyMap is undefined, treat as empty object `{}`
+ - No need to explicitly initialize in state (handled by `|| {}` in handlers)
+
+**No preview UI (per CONTEXT.md):** Do not add classification preview functionality. Users configure mappings and see results after sync.
+
+**Styling consistency:** Match existing form styling patterns from VictoriaLogs and Logz.io sections. Use same color variables and spacing.
+