Skip to content

Commit b6f2450

Browse files
ctrl-escpctrl-escp
committed
refactor: update ResultBrowser and StructureExplorer to use new store methods
- Replaced direct access to latestKnownStructureMatches with getKnownStructureMatches in ResultBrowser for improved data handling. - Added new findStructure and stepStructureMatch functions in StructureExplorer to enhance structure navigation and matching functionality. - Updated UI elements in StructureExplorer to include navigation buttons for stepping through structure matches, improving user interaction. - Refactored TemplateWorkbench to streamline template actions and enhance layout for better usability. - Introduced a dynamic bandaid icon animation in WorkspaceHeader for improved visual feedback.
1 parent 2493553 commit b6f2450

5 files changed

Lines changed: 249 additions & 178 deletions

File tree

‎src/components/ResultBrowser.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const visibleItems = computed(() => {
3838
}));
3939
}
4040
41-
return store.latestKnownStructureMatches.map((match) => ({
41+
return store.getKnownStructureMatches().map((match) => ({
4242
key: `match:${match.structureId}:${match.index}`,
4343
label: match.structureTitle,
4444
summary: match.summary,
@@ -66,7 +66,7 @@ const pageRange = computed(() => {
6666
return `${start} - ${end}`;
6767
});
6868
69-
const matchItems = computed(() => store.latestKnownStructureMatches.length);
69+
const matchItems = computed(() => store.getKnownStructureMatches().length);
7070
const astItems = computed(() => (store.areFiltersActive ? store.filteredNodes : store.arb?.ast ?? []).length);
7171
const relatedItems = computed(() => store.getRelatedNodes().length);
7272
@@ -119,7 +119,8 @@ function prevPage() {
119119
watch(
120120
[
121121
() => store.activeResultMode,
122-
() => store.latestKnownStructureMatches.length,
122+
() => store.activeKnownStructureId,
123+
() => store.getKnownStructureMatches().length,
123124
() => (store.areFiltersActive ? store.filteredNodes.length : store.arb?.ast?.length ?? 0),
124125
() => store.getRelatedNodes().length,
125126
],

‎src/components/StructureExplorer.vue‎

Lines changed: 72 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import IconSearch from './icons/IconSearch.vue';
55
import IconTrash from './icons/IconTrash.vue';
66
import IconListChecks from './icons/IconListChecks.vue';
77
import IconPreview from './icons/IconPreview.vue';
8-
import IconPlus from './icons/IconPlus.vue';
98
import IconArrowLeft from './icons/IconArrowLeft.vue';
109
import IconArrowRight from './icons/IconArrowRight.vue';
1110
import IconCopy from './icons/IconCopy.vue';
@@ -81,6 +80,11 @@ function activateStructure(structureId) {
8180
store.setActiveWorkspaceTab('explorer');
8281
}
8382
83+
function findStructure(structureId) {
84+
activateStructure(structureId);
85+
store.runActiveKnownStructureMatching();
86+
}
87+
8488
function canFindStructure(structure) {
8589
if (!structure?.browserRunnable || !store.isCurrentInputParsed()) {
8690
return false;
@@ -107,14 +111,41 @@ function hasStructureMatches(structure) {
107111
return getStructureMatchCount(structure) > 0;
108112
}
109113
110-
function canPreviewStructure(structure) {
111-
return hasStructureMatches(structure) && store.canPreviewKnownStructureTransform(structure.id);
114+
function stepStructureMatch(structureId, direction = 1) {
115+
const matches = store.getKnownStructureMatches(structureId);
116+
117+
if (!matches.length) {
118+
return;
119+
}
120+
121+
store.setActiveKnownStructure(structureId);
122+
123+
const currentSelection = store.selectedKnownStructureMatch?.structureId === structureId
124+
? store.selectedKnownStructureMatch
125+
: null;
126+
const rememberedIndex = store.knownStructureSelectionById[structureId];
127+
const currentIndex = currentSelection
128+
? matches.findIndex((match) => match.index === currentSelection.index)
129+
: matches.findIndex((match) => match.index === rememberedIndex);
130+
const nextIndex = currentIndex === -1
131+
? direction > 0 ? 0 : matches.length - 1
132+
: (currentIndex + direction + matches.length) % matches.length;
133+
134+
store.setSelectedKnownStructureMatch(structureId, matches[nextIndex].index);
112135
}
113136
114-
function canAddStructureToPipeline(structure) {
137+
function canTransformStructure(structure) {
115138
return hasStructureMatches(structure) && store.canPreviewKnownStructureTransform(structure.id);
116139
}
117140
141+
function openStructureTransform(structureId) {
142+
store.previewKnownStructureTransform(structureId);
143+
store.setActiveTemplate('apply-known-transform');
144+
store.setInspectedKnownStructure(structureId);
145+
activateStructure(structureId);
146+
store.setActiveWorkspaceTab('inspector');
147+
}
148+
118149
function toggleExpandedStructure(structureId) {
119150
expandedStructureId.value = expandedStructureId.value === structureId ? null : structureId;
120151
}
@@ -310,26 +341,45 @@ onBeforeUnmount(() => {
310341
<p class="structure-description">{{ structure.description }}</p>
311342
<p class="structure-note">{{ structure.support.note }}</p>
312343
313-
<div class="tag-row">
314-
<span v-for="tag in structure.tags" :key="tag" class="tag">#{{ tag }}</span>
315-
</div>
316-
317344
<div class="card-stats">
318345
<span :class="{highlighted: hasStructureMatches(structure)}">{{ getStructureMatchCount(structure) }} matches</span>
319346
<span>{{ structure.executionMode }}</span>
320347
</div>
321348
349+
<div v-if="hasStructureMatches(structure)" class="card-match-nav">
350+
<button
351+
class="structure-action structure-action-compact"
352+
type="button"
353+
title="Jump to the previous match for this structure"
354+
aria-label="Previous structure match"
355+
@click="stepStructureMatch(structure.id, -1)"
356+
>
357+
<icon-arrow-left />
358+
<span>Prev</span>
359+
</button>
360+
<button
361+
class="structure-action structure-action-compact"
362+
type="button"
363+
title="Jump to the next match for this structure"
364+
aria-label="Next structure match"
365+
@click="stepStructureMatch(structure.id, 1)"
366+
>
367+
<span>Next</span>
368+
<icon-arrow-right />
369+
</button>
370+
</div>
371+
322372
<div class="card-actions">
323373
<button
324374
class="structure-action"
325375
type="button"
326376
:disabled="!canFindStructure(structure)"
327-
title="Run matching for this structure and focus it in the workspace"
328-
aria-label="Find matches for this structure"
329-
@click="activateStructure(structure.id)"
377+
title="Run matching for just this structure"
378+
aria-label="Match this structure"
379+
@click="findStructure(structure.id)"
330380
>
331381
<icon-search />
332-
<span>Find</span>
382+
<span>Match</span>
333383
</button>
334384
<button
335385
class="structure-action"
@@ -355,24 +405,13 @@ onBeforeUnmount(() => {
355405
<button
356406
class="structure-action"
357407
type="button"
358-
:disabled="!canPreviewStructure(structure)"
359-
title="Preview the built-in transform for this structure without adding it to the pipeline"
360-
aria-label="Preview structure transform"
361-
@click="store.previewKnownStructureTransform(structure.id)"
408+
:disabled="!canTransformStructure(structure)"
409+
title="Preview this built-in transform and open it in the template panel"
410+
aria-label="Open structure transform"
411+
@click="openStructureTransform(structure.id)"
362412
>
363413
<icon-preview />
364-
<span>Preview</span>
365-
</button>
366-
<button
367-
class="structure-action structure-action-emphasis"
368-
type="button"
369-
:disabled="!canAddStructureToPipeline(structure)"
370-
title="Seed the template panel with this structure so you can add its transform to the pipeline"
371-
aria-label="Add transform to pipeline"
372-
@click="store.setActiveTemplate('apply-known-transform'); store.setInspectedKnownStructure(structure.id); activateStructure(structure.id); store.setActiveWorkspaceTab('inspector')"
373-
>
374-
<icon-plus />
375-
<span>Add</span>
414+
<span>Transform</span>
376415
</button>
377416
</div>
378417
</div>
@@ -400,9 +439,6 @@ onBeforeUnmount(() => {
400439
<div class="example-modal-header">
401440
<div class="example-modal-copy">
402441
<h3>{{ exampleStructure.title }} Example</h3>
403-
<p class="example-modal-note">
404-
Select any part of the snippet to copy just that text, or use the copy button for the full example.
405-
</p>
406442
</div>
407443
<div class="example-modal-actions">
408444
<button
@@ -446,6 +482,7 @@ onBeforeUnmount(() => {
446482
.structure-card-top,
447483
.title-row,
448484
.card-stats,
485+
.card-match-nav,
449486
.card-actions,
450487
.explorer-actions {
451488
display: flex;
@@ -458,6 +495,10 @@ onBeforeUnmount(() => {
458495
justify-content: space-between;
459496
}
460497
498+
.card-match-nav {
499+
justify-content: flex-end;
500+
}
501+
461502
h2 {
462503
font-size: 0.96rem;
463504
}

‎src/components/TemplateWorkbench.vue‎

Lines changed: 43 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -45,50 +45,7 @@ function updateDraft(key, event) {
4545
<h2>Stage reproducible steps</h2>
4646
<div class="panel-meta">{{ activeTemplate?.title || 'Choose a template' }}</div>
4747
</div>
48-
49-
<div class="template-actions primary-actions">
50-
<button
51-
class="primary-btn icon-btn"
52-
type="button"
53-
:disabled="!canApplyTemplate"
54-
:title="store.activeTemplateType === 'advanced-js-step'
55-
? 'Switch to the advanced panel and open the raw editors'
56-
: canApplyTemplate
57-
? 'Apply the selected template to the current script'
58-
: 'The selected template is not actionable yet'"
59-
:aria-label="store.activeTemplateType === 'advanced-js-step' ? 'Open advanced editors' : 'Apply template'"
60-
@click="store.applyTemplate()"
61-
>
62-
<icon-transform v-if="store.activeTemplateType === 'advanced-js-step'" />
63-
<icon-check v-else />
64-
</button>
65-
<button
66-
class="secondary-btn icon-btn"
67-
type="button"
68-
title="Switch to the advanced panel and show raw filter/transform editors"
69-
aria-label="Open advanced editors"
70-
@click="store.openAdvancedTools()"
71-
>
72-
<icon-transform />
73-
</button>
74-
</div>
75-
76-
<div class="template-grid">
77-
<button
78-
v-for="template in visibleTemplates"
79-
:key="template.type"
80-
class="template-card"
81-
:class="{active: template.type === store.activeTemplateType}"
82-
type="button"
83-
:disabled="template.type === store.activeTemplateType"
84-
:title="template.description"
85-
@click="store.setActiveTemplate(template.type)"
86-
>
87-
<strong>{{ template.title }}</strong>
88-
<span>{{ template.description }}</span>
89-
</button>
90-
</div>
91-
48+
9249
<div class="template-editor">
9350
<p class="context-copy">
9451
Active structure: <strong>{{ activeStructure?.title || 'None' }}</strong>
@@ -145,7 +102,49 @@ function updateDraft(key, event) {
145102
<div v-else class="template-help">
146103
{{ activeTemplate?.description }}
147104
</div>
105+
</div>
148106
107+
<div class="template-actions primary-actions">
108+
<button
109+
class="primary-btn icon-btn"
110+
type="button"
111+
:disabled="!canApplyTemplate"
112+
:title="store.activeTemplateType === 'advanced-js-step'
113+
? 'Switch to the advanced panel and open the raw editors'
114+
: canApplyTemplate
115+
? 'Apply the selected template to the current script'
116+
: 'The selected template is not actionable yet'"
117+
:aria-label="store.activeTemplateType === 'advanced-js-step' ? 'Open advanced editors' : 'Apply template'"
118+
@click="store.applyTemplate()"
119+
>
120+
<icon-transform v-if="store.activeTemplateType === 'advanced-js-step'" />
121+
<icon-check v-else />
122+
</button>
123+
<button
124+
class="secondary-btn icon-btn"
125+
type="button"
126+
title="Switch to the advanced panel and show raw filter/transform editors"
127+
aria-label="Open advanced editors"
128+
@click="store.openAdvancedTools()"
129+
>
130+
<icon-transform />
131+
</button>
132+
</div>
133+
134+
<div class="template-grid">
135+
<button
136+
v-for="template in visibleTemplates"
137+
:key="template.type"
138+
class="template-card"
139+
:class="{active: template.type === store.activeTemplateType}"
140+
type="button"
141+
:disabled="template.type === store.activeTemplateType"
142+
:title="template.description"
143+
@click="store.setActiveTemplate(template.type)"
144+
>
145+
<strong>{{ template.title }}</strong>
146+
<span>{{ template.description }}</span>
147+
</button>
149148
</div>
150149
</section>
151150
</template>

0 commit comments

Comments
 (0)