Add glyph for Frank elements and implemented in Editor" functionality

src/main/frontend/app/actions/navigationActions.ts

@@ -33,3 +33,47 @@ export function openInEditor(relativePath: string, filepath: string) {
   setActiveTab(filepath)
   useNavigationStore.getState().navigate('editor')
 }
+
+export function openInEditorAtElement(subtype: string, name: string | undefined, filepath: string) {
+  const editorStore = useEditorTabStore.getState()
+  const fileName = filepath.split(/[/\\]/).pop() ?? filepath
+
+  if (!editorStore.getTab(filepath)) {
+    editorStore.setTabData(filepath, {
+      name: fileName,
+      configurationPath: filepath,
+    })
+  }
+
+  editorStore.setPendingHighlight({ subtype, name })
+  editorStore.setActiveTab(filepath)
+  useNavigationStore.getState().navigate('editor')
+}
+
+export function openInStudioAtNode(
+  adapterName: string,
+  filepath: string,
+  adapterPosition: number,
+  subtype: string,
+  name: string,
+) {
+  const { setTabData, setActiveTab, getTab } = useTabStore.getState()
+
+  const tabId = `${filepath}::${adapterName}::${adapterPosition}`
+
+  const existing = getTab(tabId)
+  if (existing) {
+    setTabData(tabId, { ...existing, pendingNodeSelection: { subtype, name } })
+  } else {
+    setTabData(tabId, {
+      name: adapterName,
+      configurationPath: filepath,
+      adapterPosition,
+      flowJson: {},
+      pendingNodeSelection: { subtype, name },
+    })
+  }
+
+  setActiveTab(tabId)
+  useNavigationStore.getState().navigate('studio')
+}

src/main/frontend/app/app.css

@@ -139,6 +139,30 @@ body {
   @apply border-l-4 border-yellow-400 bg-yellow-200/30 transition-colors;
 }
 
+.monaco-editor .frank-node-glyph {
+  cursor: pointer !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+  transition: opacity 0.15s;
+}
+
+.monaco-editor .frank-node-glyph:hover {
+  opacity: 1;
+}
+
+.monaco-editor .frank-node-glyph::after {
+  content: '';
+  display: block;
+  width: 13px;
+  height: 13px;
+  margin-left: 5px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='14' height='14' rx='3' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3Cpath d='M5.5 5.5l5 2.5-5 2.5V5.5z' fill='%23888'/%3E%3C/svg%3E");
+  background-size: 13px 13px;
+  background-repeat: no-repeat;
+}
+
 .monaco-editor .xml-lint.xml-lint--fatal-error {
   border-color: #ff2424;
 }

src/main/frontend/app/components/flow/canvas-context-menu.tsx

@@ -12,9 +12,11 @@ interface CanvasContextMenuProps {
   onCut: () => void
   onCopy: () => void
   onPaste: () => void
+  onShowInEditor: () => void
   hasSelection: boolean
   hasGroupedSelection: boolean
   hasClipboard: boolean
+  hasSingleNodeSelection: boolean
 }
 
 function formatShortcut(shortcutId: string): string | null {
@@ -33,9 +35,11 @@ export default function CanvasContextMenu({
   onCut,
   onCopy,
   onPaste,
+  onShowInEditor,
   hasSelection,
   hasGroupedSelection,
   hasClipboard,
+  hasSingleNodeSelection,
 }: CanvasContextMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null)
   useContextMenuDismiss(menuRef, onClose)
@@ -71,6 +75,8 @@ export default function CanvasContextMenu({
     >
       {menuItem('Add Note', onAddNote, true)}
       <div className="bg-border my-1 h-px" />
+      {menuItem('Show in Editor', onShowInEditor, hasSingleNodeSelection, 'studio.show-in-editor')}
+      <div className="bg-border my-1 h-px" />
       {menuItem('Group', onGroup, hasSelection, 'studio.group')}
       {menuItem('Ungroup', onUngroup, hasGroupedSelection, 'studio.ungroup')}
       <div className="bg-border my-1 h-px" />

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

@@ -36,10 +36,13 @@
   extractFlowElements,
   findAdapterIndexAtOffset,
   findAdaptersInXml,
+  findElementRangeInXml,
+  findFrankElementsForGlyphs,
   findFlowElementsStartLine,
   lineToOffset,
   wrapFlowXml,
 } from './xml-utils'
+import { openInStudioAtNode } from '~/actions/navigationActions'
 
 type LeftTab = 'files' | 'git'
 type SaveStatus = 'idle' | 'saving' | 'saved'
@@ -240,7 +243,7 @@
   ]
 }
 
 export default function CodeEditor() {
   const theme = useTheme()
   const project = useProjectStore.getState().project
   const [activeTabFilePath, setActiveTabFilePath] = useState<string>(useEditorTabStore.getState().activeTabFilePath)
@@ -255,12 +258,19 @@
   const xsdContentRef = useRef<string | null>(null)
   const errorDecorationsRef = useRef<{ clear: () => void } | null>(null)
   const flowDecorationsRef = useRef<IEditorDecorationsCollection | null>(null)
+  const highlightDecorationsRef = useRef<IEditorDecorationsCollection | null>(null)
+  const frankGlyphsDecorationsRef = useRef<IEditorDecorationsCollection | null>(null)
+  const frankElementsRef = useRef<ReturnType<typeof findFrankElementsForGlyphs>>([])
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const savedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const validationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const validationCounterRef = useRef(0)
   const contentCacheRef = useRef<Map<string, CachedFile>>(new Map())
 
+  const [pendingHighlight, setPendingHighlightLocal] = useState<{ subtype: string; name?: string } | null>(
+    () => useEditorTabStore.getState().pendingHighlight,
+  )
+
   const activeTab = useEditorTabStore(
     useShallow((state) => {
       const tab = state.activeTabFilePath ? state.tabs[state.activeTabFilePath] : undefined
@@ -301,6 +311,31 @@
     }
   }, [fileLanguage])
 
+  const applyFrankGlyphs = useCallback(
+    (content: string) => {
+      const editor = editorReference.current
+      if (!editor || fileLanguage !== 'xml') return
+
+      const elements = findFrankElementsForGlyphs(content)
+      frankElementsRef.current = elements
+
+      const decorations = elements.map((element) => ({
+        range: { startLineNumber: element.startLine, startColumn: 1, endLineNumber: element.startLine, endColumn: 1 },
+        options: {
+          glyphMarginClassName: 'frank-node-glyph',
+          glyphMarginHoverMessage: { value: `Open **${element.name}** in Studio` },
+        },
+      }))
+
+      if (frankGlyphsDecorationsRef.current) {
+        frankGlyphsDecorationsRef.current.set(decorations)
+      } else if (decorations.length > 0) {
+        frankGlyphsDecorationsRef.current = editor.createDecorationsCollection(decorations)
+      }
+    },
+    [fileLanguage],
+  )
+
   const performSave = useCallback(
     (content?: string) => {
       if (!project || !activeTabFilePath || isDiffTab) return
@@ -482,8 +517,11 @@
   const handleEditorMount: OnMount = (editor, monacoInstance) => {
     editorReference.current = editor
     monacoReference.current = monacoInstance
+    frankGlyphsDecorationsRef.current = null
     setEditorMounted(true)
 
+    editor.updateOptions({ glyphMargin: true })
+
     applyFlowHighlighter()
 
     editor.addAction({
@@ -513,6 +551,32 @@
       ],
       run: runReformat,
     })
+
+    editor.onMouseDown((event) => {
+      if (highlightDecorationsRef.current) {
+        highlightDecorationsRef.current.clear()
+        highlightDecorationsRef.current = null
+      }
+
+      if (event.target.type === monacoInstance.editor.MouseTargetType.GUTTER_GLYPH_MARGIN) {
+        const lineNumber = event.target.position?.lineNumber
+        if (!lineNumber) return
+
+        const editorTab = useEditorTabStore.getState().getTab(useEditorTabStore.getState().activeTabFilePath)
+        if (!editorTab) return
+
+        const element = frankElementsRef.current.find((element) => element.startLine === lineNumber)
+        if (!element) return
+
+        openInStudioAtNode(
+          element.adapterName,
+          editorTab.configurationPath,
+          element.adapterPosition,
+          element.subtype,
+          element.name,
+        )
+      }
+    })
   }
 
   useEffect(() => {
@@ -591,10 +655,13 @@
       errorDecorationsRef.current.clear()
       errorDecorationsRef.current = null
     }
-    // Also clear flow decorations when switching files
     if (flowDecorationsRef.current) {
       flowDecorationsRef.current.set([])
     }
+    if (frankGlyphsDecorationsRef.current) {
+      frankGlyphsDecorationsRef.current.clear()
+      frankGlyphsDecorationsRef.current = null
+    }
     const monaco = monacoReference.current
     const editor = editorReference.current
     if (monaco && editor) {
@@ -606,9 +673,14 @@
   useEffect(() => {
     if (!fileContent || !xsdLoaded || isDiffTab || fileLanguage !== 'xml') return
     runSchemaValidation(fileContent)
-    applyFlowHighlighter() // Refresh highlighter when schema is loaded or content changes
+    applyFlowHighlighter()
   }, [fileContent, xsdLoaded, isDiffTab, runSchemaValidation, fileLanguage, applyFlowHighlighter])
 
+  useEffect(() => {
+    if (!fileContent || !editorMounted || isDiffTab || fileLanguage !== 'xml') return
+    applyFrankGlyphs(fileContent)
+  }, [fileContent, editorMounted, isDiffTab, fileLanguage, applyFrankGlyphs])
+
   useEffect(() => {
     if (!fileContent || !activeTabFilePath || !editorReference.current || isDiffTab) return
 
@@ -636,6 +708,37 @@
     return () => clearTimeout(timeout)
   }, [fileContent, activeTabFilePath, isDiffTab])
 
+  useEffect(() => {
+    return useEditorTabStore.subscribe(
+      (state) => state.pendingHighlight,
+      (highlight) => setPendingHighlightLocal(highlight),
+    )
+  }, [])
+
+  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
+
+    editor.revealLineNearTop(range.startLine)
+    editor.setPosition({ lineNumber: range.startLine, column: 1 })
+    editor.focus()
+
+    highlightDecorationsRef.current?.clear()
+
+    highlightDecorationsRef.current = editor.createDecorationsCollection([
+      {
+        range: { startLineNumber: range.startLine, startColumn: 1, endLineNumber: range.endLine, endColumn: 1 },
+        options: { isWholeLine: true, className: 'highlight-line' },
+      },
+    ])
+  }, [pendingHighlight, fileContent, isDiffTab, editorMounted])
+
   const handleOpenInStudio = useCallback(() => {
     const editorTab = useEditorTabStore.getState().getTab(activeTabFilePath)
     if (!editorTab) return
@@ -737,7 +840,7 @@
                     scheduleSave()
                     if (value && fileLanguage === 'xml') {
                       scheduleSchemaValidation(value)
-                      applyFlowHighlighter() // Real-time highlight updates
+                      applyFlowHighlighter()
                     }
                   }}
                   options={{
@@ -746,6 +849,7 @@
                     tabSize: 2,
                     insertSpaces: true,
                     detectIndentation: false,
+                    glyphMargin: true,
                   }}
                 />
               </div>