Add glyph for Frank elements and implemented in Editor" functionality

[stijnpotters1]

Added glyph and when going from studio to editor the element is highlighted

When from editor to studio the element is centered and selected

[philipsens]

:D Looks nice!

[Matthbo]

Also once again variables with single letter names

[Matthbo]

Why can't the regex be /<adapter\b[^>]\bname=["']([^"']*)["']/gi?
Normally there shouldnt be a namespace in front of the Element names right? And the extra whitespace checks seem a little unnecessary too

[stijnpotters1]

I thought i was good to prevent users from errors in the flow if they accidentally added an extra whitespace

[Matthbo]

Well the question is if the extra spaces even remain after saving, or if its formatted out

[Copilot]

Pull request overview

This PR adds bidirectional navigation between the Studio canvas and the XML Editor for Frank elements by introducing “Show in Editor” actions in Studio and clickable Monaco glyphs in the Editor that deep-link back to the corresponding Studio node (adapter + element).

Changes:

• Added a Studio “Show in Editor” action (button, context menu item, and shortcut) that opens the Editor and highlights the target XML element.
• Added Editor-side Frank element glyphs in Monaco’s glyph margin; clicking a glyph navigates to Studio and selects/centers the corresponding node.
• Introduced lightweight “pending selection/highlight” state in tab/editor stores to coordinate cross-route navigation behavior.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/main/frontend/app/stores/tab-store.ts	Adds per-studio-tab pending node selection metadata to enable selection after navigation.
src/main/frontend/app/stores/shortcut-store.ts	Registers a new Studio shortcut for “Show in Editor”.
src/main/frontend/app/stores/editor-tab-store.ts	Adds pending highlight state for Editor-side element highlighting.
src/main/frontend/app/routes/studio/context/node-context.tsx	Adds “Show in Editor” button in the node edit panel.
src/main/frontend/app/routes/studio/canvas/flow.tsx	Adds selection application logic and wiring for “Show in Editor” and pending node selection consumption.
src/main/frontend/app/routes/editor/xml-utils.ts	Adds XML scanning helpers to locate elements and compute glyph targets.
src/main/frontend/app/routes/editor/editor.tsx	Adds Monaco glyph margin decorations, click handler to open Studio at node, and pending highlight consumption.
src/main/frontend/app/components/flow/canvas-context-menu.tsx	Adds “Show in Editor” context menu item with shortcut display.
src/main/frontend/app/app.css	Adds styling for the new Monaco glyph margin marker.
src/main/frontend/app/actions/navigationActions.ts	Adds navigation helpers for Editor-at-element and Studio-at-node.

Comments suppressed due to low confidence (3)

src/main/frontend/app/routes/editor/xml-utils.ts:34

• REGEX_CLOSE_TAG is global (/g) and reused with matchAll(). If lastIndex is non-zero from a previous call, matchAll() can start matching mid-string and skip closing tags, corrupting the tag stack and glyph detection. Consider recreating the RegExp per call or explicitly resetting REGEX_CLOSE_TAG.lastIndex = 0 before iterating.

const REGEX_OPEN_TAG = /^\s*<([A-Za-z0-9_:-]+)/
const REGEX_CLOSE_TAG = /<\/([A-Za-z0-9_:-]+)>/g
const REGEX_NAME_ATTR = /\bname=["']([^"']*)["']/

src/main/frontend/app/routes/editor/editor.tsx:726

• pendingHighlight is consumed against whatever fileContent is currently loaded, and then immediately cleared in the store. If pendingHighlight is set before the editor has switched to / loaded the target file, this effect can clear the highlight without ever applying it to the intended tab. To make this reliable, key the pending highlight to the target activeTabFilePath (e.g. store it per tab, or include filepath in the highlight object and only consume when it matches the active tab and content is loaded).

  useEffect(() => {
    if (!pendingHighlight || !fileContent || !editorReference.current || isDiffTab) return

    const editor = editorReference.current
    const range = findElementRangeInXml(fileContent, pendingHighlight.subtype, pendingHighlight.name)

    useEditorTabStore.getState().setPendingHighlight(null)

    if (!range) return

src/main/frontend/app/routes/studio/canvas/flow.tsx:1054

• When pendingSelection is present, setLoading(false) is deferred until after the try/finally (in the requestAnimationFrame block). However there are return statements inside the try (e.g. if (!currentProject) return, if (!adapter) return) which will skip the post-try RAF block and leave loading stuck true. Ensure setLoading(false) runs on all exit paths (e.g. avoid early returns, or move the pendingSelection loading cleanup into finally).

      try {
        if (tab.flowJson && Object.keys(tab.flowJson).length > 0) {
          restoreFlowFromTab(tab)
        } else if (tab.configurationPath && tab.name) {
          if (!currentProject) return
          const adapter = await getAdapterFromConfiguration(
            currentProject.name,
            tab.configurationPath,
            tab.name,
            tab.adapterPosition,
          )
          if (!adapter) return
          const adapterJson = await convertAdapterXmlToJson(adapter)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud