playground: polish ast panel (#355)

Author: hardfist

website/theme/components/Playground/Editor.css

@@ -3,3 +3,10 @@
   height: 100%;
   border: 1px solid #eee;
 }
+
+/* Highlight used when clicking AST nodes */
+.monaco-editor .ast-node-highlight {
+  background: rgba(198, 228, 255, 0.65);
+  outline: 1px solid #0969da;
+  border-radius: 2px;
+}

website/theme/components/Playground/Editor.tsx

@@ -22,14 +22,17 @@ window.MonacoEnvironment = {
 export interface EditorRef {
   getValue: () => string | undefined;
   attachDiag: (diags: Diagnostic[]) => void;
+  revealRangeByOffset: (start: number, end: number) => void;
 }
 
 export const Editor = ({
   ref,
   onChange,
+  onSelectionChange,
 }: {
-  ref: Ref<{ getValue: () => string | undefined }>;
+  ref: Ref<EditorRef>;
   onChange: (value: string) => void;
+  onSelectionChange?: (start: number, end: number) => void;
 }) => {
   const divEl = useRef<HTMLDivElement>(null);
   const editorRef =
@@ -84,6 +87,8 @@ export const Editor = ({
     }, 300);
   }
   // get value from editor using forwardRef
+  const astHighlightDecorationIds = useRef<string[]>([]);
+
   React.useImperativeHandle(ref, () => ({
     getValue: () => editorRef.current?.getValue(),
     attachDiag: (diags: Diagnostic[]) => {
@@ -109,6 +114,44 @@ export const Editor = ({
         monaco.editor.setModelMarkers(model, 'rslint', markers);
       }
     },
+    revealRangeByOffset: (start: number, end: number) => {
+      const editor = editorRef.current;
+      const model = editor?.getModel();
+      if (!editor || !model) return;
+      const startPos = model.getPositionAt(Math.max(0, start));
+      const endPos = model.getPositionAt(Math.max(start, end));
+      const range = new monaco.Range(
+        startPos.lineNumber,
+        startPos.column,
+        endPos.lineNumber,
+        endPos.column,
+      );
+
+      editor.setSelection(range);
+      editor.revealRangeInCenter(range, 0 /* Immediate */);
+
+      // Apply a transient decoration for highlighting
+      if (astHighlightDecorationIds.current.length) {
+        astHighlightDecorationIds.current = editor.deltaDecorations(
+          astHighlightDecorationIds.current,
+          [],
+        );
+      }
+      astHighlightDecorationIds.current = editor.deltaDecorations(
+        [],
+        [
+          {
+            range,
+            options: {
+              inlineClassName: 'ast-node-highlight',
+              stickiness:
+                monaco.editor.TrackedRangeStickiness
+                  .NeverGrowsWhenTypingAtEdges,
+            },
+          },
+        ],
+      );
+    },
   }));
 
   useEffect(() => {
@@ -135,8 +178,28 @@ export const Editor = ({
       onChange(val);
       scheduleSerializeToUrl(val);
     });
+    // Selection change -> report offsets
+    const selDisposable = editor.onDidChangeCursorSelection(() => {
+      const model = editor.getModel();
+      if (!model) return;
+      const sel = editor.getSelection();
+      if (!sel) return;
+      const startOffset = model.getOffsetAt({
+        lineNumber: sel.startLineNumber,
+        column: sel.startColumn,
+      });
+      const endOffset = model.getOffsetAt({
+        lineNumber: sel.endLineNumber,
+        column: sel.endColumn,
+      });
+      onSelectionChange?.(
+        Math.min(startOffset, endOffset),
+        Math.max(startOffset, endOffset),
+      );
+    });
 
     return () => {
+      selDisposable.dispose();
       editor.dispose();
     };
   }, []);

website/theme/components/Playground/ResultPanel.css

@@ -186,6 +186,82 @@
   height: 100%;
 }
 
+.ast-tree {
+  height: 100%;
+  overflow: auto;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  background: #fff;
+  padding: 6px 6px 10px 6px;
+}
+
+.ast-node-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Helvetica,
+    Arial,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol;
+  font-size: 12px;
+}
+.ast-node-row:hover {
+  background: #f6f8fa;
+}
+.ast-node-row.selected {
+  background: #e7f3ff;
+  outline: 1px solid #96c7ff;
+}
+
+.twisty {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 6px solid #57606a;
+  background: transparent;
+  padding: 0;
+  margin-right: 2px;
+  cursor: pointer;
+}
+.twisty.open {
+  transform: rotate(90deg);
+}
+.twisty.placeholder {
+  width: 10px;
+  height: 10px;
+  border: none;
+}
+
+.node-type {
+  font-weight: 600;
+  color: #24292f;
+}
+.node-range {
+  color: #57606a;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+}
+.node-preview {
+  color: #6e7781;
+  margin-left: 6px;
+}
+
+.ast-children {
+  margin-left: 14px;
+}
+
 .ast-content {
   background: #f6f8fa;
   border: 1px solid #d0d7de;

website/theme/components/Playground/ResultPanel.tsx

@@ -13,18 +13,40 @@ export interface Diagnostic {
 interface ResultPanelProps {
   diagnostics: Diagnostic[];
   ast?: string;
+  astTree?: ASTNode;
   initialized?: boolean;
   error?: string;
   fixedCode?: string;
   typeInfo?: string;
   loading?: boolean;
+  onAstNodeSelect?: (start: number, end: number) => void;
+  selectedAstNodeRange?: { start: number; end: number };
 }
 
 type TabType = 'lint' | 'fixed' | 'ast' | 'type';
 
+interface ASTNode {
+  type: string;
+  start: number;
+  end: number;
+  name?: string;
+  text?: string;
+  children?: ASTNode[];
+}
+
 export const ResultPanel: React.FC<ResultPanelProps> = props => {
-  const { diagnostics, ast, error, initialized, fixedCode, typeInfo, loading } =
-    props;
+  const {
+    diagnostics,
+    ast,
+    astTree,
+    error,
+    initialized,
+    fixedCode,
+    typeInfo,
+    loading,
+    onAstNodeSelect,
+    selectedAstNodeRange,
+  } = props;
   const [activeTab, setActiveTab] = useState<TabType>(() => {
     if (typeof window === 'undefined') return 'lint';
     const params = new URLSearchParams(window.location.search);
@@ -81,6 +103,112 @@ export const ResultPanel: React.FC<ResultPanelProps> = props => {
     return () => window.removeEventListener('popstate', handler);
   }, []);
 
+  // AST tree view state
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  function nodeId(n: ASTNode) {
+    return `${n.type}:${n.start}-${n.end}`;
+  }
+
+  function toggleNode(n: ASTNode) {
+    const id = nodeId(n);
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function clickNode(n: ASTNode) {
+    setSelectedId(nodeId(n));
+    onAstNodeSelect?.(n.start, n.end);
+  }
+
+  function isExpandable(n?: ASTNode) {
+    return !!(n && n.children && n.children.length);
+  }
+
+  const renderNode = (n: ASTNode, depth = 0) => {
+    const id = nodeId(n);
+    const open = expanded.has(id);
+    const hasKids = isExpandable(n);
+    const preview = n.text ? n.text.replace(/\s+/g, ' ').slice(0, 40) : '';
+    return (
+      <div key={id} className="ast-node" style={{ paddingLeft: depth * 14 }}>
+        <div
+          className={`ast-node-row ${selectedId === id ? 'selected' : ''}`}
+          onClick={() => clickNode(n)}
+        >
+          {hasKids ? (
+            <button
+              className={`twisty ${open ? 'open' : ''}`}
+              onClick={e => {
+                e.stopPropagation();
+                toggleNode(n);
+              }}
+              aria-label={open ? 'Collapse' : 'Expand'}
+            />
+          ) : (
+            <span className="twisty placeholder" />
+          )}
+          <span className="node-type">{n.type}</span>
+          <span className="node-range">
+            [{n.start}, {n.end}]
+          </span>
+          {preview && <span className="node-preview">“{preview}”</span>}
+        </div>
+        {open && hasKids && (
+          <div className="ast-children">
+            {n.children!.map(child => renderNode(child, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // When selection in editor changes, select smallest covering AST node and expand its ancestors
+  useEffect(() => {
+    if (!astTree || !selectedAstNodeRange) return;
+    const { start, end } = selectedAstNodeRange;
+
+    let best: { node: ASTNode; depth: number; path: ASTNode[] } | null = null;
+
+    function visit(node: ASTNode, depth: number, path: ASTNode[]) {
+      if (node.start <= start && node.end >= end) {
+        if (!best || depth > best.depth) {
+          best = { node, depth, path: [...path, node] };
+        }
+        if (node.children) {
+          for (const c of node.children) visit(c, depth + 1, [...path, node]);
+        }
+      }
+    }
+    visit(astTree, 0, []);
+    if (best) {
+      const id = nodeId(best.node);
+      setSelectedId(id);
+      setExpanded(prev => {
+        const next = new Set(prev);
+        for (const p of best!.path) next.add(nodeId(p));
+        return next;
+      });
+    }
+  }, [selectedAstNodeRange, astTree]);
+
+  // Auto-expand root when a new tree arrives
+  useEffect(() => {
+    if (!astTree) return;
+    const id = nodeId(astTree);
+    setExpanded(prev => {
+      if (prev.has(id)) return prev;
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+  }, [astTree]);
+
   return (
     <div className="result-panel">
       <div className="result-header">
@@ -144,7 +272,11 @@ export const ResultPanel: React.FC<ResultPanelProps> = props => {
 
           {!error && activeTab === 'ast' && (
             <div className="ast-view">
-              {ast ? (
+              {astTree ? (
+                <div className="ast-tree" role="tree">
+                  {renderNode(astTree)}
+                </div>
+              ) : ast ? (
                 <div className="code-block-wrapper">
                   <pre className="ast-content">{ast}</pre>
                 </div>