diff --git a/static/components/PaneSubObjects.js b/static/components/PaneSubObjects.js index f071d4c..3d43377 100644 --- a/static/components/PaneSubObjects.js +++ b/static/components/PaneSubObjects.js @@ -2,6 +2,14 @@ import { h } from 'vue'; import { ObjectShort } from './ObjectShort.js'; import { getKindGroups } from '../subobject-kinds.js'; +// Extract the P?L? fragment as a visual grouping key. +// Falls back to stripping trailing digits if the pattern is absent, +// which yields singleton groups — not a crash, just no visual grouping. +function barGroupKey(id) { + const m = id.match(/P\d+L\d+/); + return m ? m[0] : id.replace(/\d+$/, ''); +} + export const PaneSubObjects = { props: ['store', 'kind', 'onFocusFO'], setup(props) { @@ -20,6 +28,33 @@ export const PaneSubObjects = { if (!items.length) return h('div', null, h('em', null, 'No sub-objects')); + if (props.kind === 'bar') { + // Group bars by shared P?L? key; render each group as a row of inline chips. + const barGroups = []; + const seen = new Map(); + for (const item of items) { + const key = barGroupKey(item.label); + if (!seen.has(key)) { + const g = { key, items: [] }; + barGroups.push(g); + seen.set(key, g); + } + seen.get(key).items.push(item); + } + + return h('div', { class: 'se-bar-groups' }, barGroups.map(g => + h('div', { key: g.key, class: 'se-bar-group' }, + g.items.map((item, idx) => + h('button', { + key: idx, + class: ['se-bar-chip', props.store.focusPath.includes(item.node) ? 'focused' : null], + onClick: () => { props.store.pushFocus(item.node); props.onFocusFO?.(); }, + }, item.label) + ) + ) + )); + } + return h('div', null, h('ul', { class: 'se-object-list' }, items.map((item, idx) => h(ObjectShort, { diff --git a/static/style.css b/static/style.css index 832ef59..f0778e5 100644 --- a/static/style.css +++ b/static/style.css @@ -308,6 +308,41 @@ font-family: monospace; } +/* Bar sub-objects: grouped by P?L? key, chips inline per group */ +.se-bar-groups { + padding: 0.2rem 0; +} + +.se-bar-group { + padding: 0.15rem 0.1rem; + border-bottom: 1px solid #1e1e1e; + line-height: 1.8; +} + +.se-bar-chip { + display: inline-block; + font-size: 0.7rem; + font-family: monospace; + padding: 0.1rem 0.25rem; + border: 1px solid #383838; + background: #1e1e1e; + color: #777; + cursor: pointer; + margin: 1px; + line-height: 1.4; +} + +.se-bar-chip:hover { + color: #ccc; + border-color: #555; +} + +.se-bar-chip.focused { + background: #1a3a5a; + color: #ddd; + border-color: #4a7aaa; +} + /* Export log (shown in CP pane after export) */ .se-export-log { font-size: 0.75rem;