Autofocus

.github/ISSUE_TEMPLATE/workflows/callstack-reviewer.yml

@@ -0,0 +1,31 @@
+name: Callstack.ai PR Review
+
+on:
+  workflow_dispatch:
+    inputs:
+      config:
+        type: string
+        description: "config for reviewer"
+        required: true
+      head:
+        type: string
+        description: "head commit sha"
+        required: true
+      base:
+        type: string
+        description: "base commit sha"
+        required: false
+
+jobs:
+  callstack_pr_review_job:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Review PR
+        uses: callstackai/action@v1.0.7
+        with:
+          config: ${{ inputs.config }}
+          head: ${{ inputs.head }}
+          openai_key: ${{ secrets.OPENAI_KEY_2 }}
+          export: /code/chats.json
+          channel: pre-release
+          tag: develop

.github/workflows/callstack-reviewer.yml

@@ -0,0 +1,31 @@
+name: Callstack.ai PR Review
+
+on:
+  workflow_dispatch:
+    inputs:
+      config:
+        type: string
+        description: "config for reviewer"
+        required: true
+      head:
+        type: string
+        description: "head commit sha"
+        required: true
+      base:
+        type: string
+        description: "base commit sha"
+        required: false
+
+jobs:
+  callstack_pr_review_job:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Review PR
+        uses: callstackai/action@v1.0.7
+        with:
+          config: ${{ inputs.config }}
+          head: ${{ inputs.head }}
+          openai_key: ${{ secrets.OPENAI_KEY_2 }}
+          export: /code/chats.json
+          channel: pre-release
+          tag: develop

website/css/style.css

@@ -347,7 +347,7 @@ li.entry {
 }
 
 .CodeMirror .marked,
-.entry.focused {
+.entry.highlighted {
   border-radius: 2px;
   background-color: rgba(255,240,6,0.4);
 }

website/src/components/ASTOutput.js

@@ -2,9 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import visualizations from './visualization';
-import getFocusPath from './getFocusPath';
 
-const {useState, useMemo} = React;
+const {useState} = React;
 
 function formatTime(time) {
   if (!time) {
@@ -16,17 +15,9 @@ function formatTime(time) {
   return `${(time / 1000).toFixed(2)}s`;
 }
 
-export default function ASTOutput({parser, parseResult={}, cursor=null}) {
+export default function ASTOutput({parseResult={}, position=null}) {
   const [selectedOutput, setSelectedOutput] = useState(0);
   const {ast=null} = parseResult;
-
-  const focusPath = useMemo(
-    () => ast && cursor != null ?
-      getFocusPath(parseResult.ast, cursor, parser) :
-      [],
-    [ast, cursor, parser],
-  );
-
   let output;
 
   if (parseResult.error) {
@@ -40,7 +31,7 @@ export default function ASTOutput({parser, parseResult={}, cursor=null}) {
         {
           React.createElement(
             visualizations[selectedOutput],
-            {parseResult, focusPath}
+            {parseResult, position}
           )
         }
       </ErrorBoundary>
@@ -68,15 +59,14 @@ export default function ASTOutput({parser, parseResult={}, cursor=null}) {
           {formatTime(parseResult.time)}
         </span>
       </div>
-      {output}
+    {output}
     </div>
   );
 }
 
 ASTOutput.propTypes = {
-  parser: PropTypes.object.isRequired,
   parseResult: PropTypes.object,
-  cursor: PropTypes.any,
+  position: PropTypes.number,
 };
 
 class ErrorBoundary extends React.Component {

website/src/components/visualization/SelectedNodeContext.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const SelectedNodeContext = React.createContext();
+
+function useSelectedNode() {
+  const context = React.useContext(SelectedNodeContext);
+  if (!context) {
+    throw new Error('useSelectedNode must be used within a SelectedNodeContext');
+  }
+  return context;
+}
+
+let unselectCallback;
+
+function setSelectedNode(node, cb) {
+  if (unselectCallback) {
+    unselectCallback();
+  }
+  if (node) {
+    global.$node = node;
+    unselectCallback = cb;
+  } else {
+    unselectCallback = null;
+    delete global.$node;
+  }
+}
+
+function SelectedNodeProvider(props) {
+  return <SelectedNodeContext.Provider value={setSelectedNode} {...props} />;
+}
+
+export {SelectedNodeProvider, useSelectedNode};

website/src/components/visualization/Tree.js

@@ -4,10 +4,12 @@ import React from 'react';
 import PubSub from 'pubsub-js';
 import {logEvent} from '../../utils/logger';
 import {treeAdapterFromParseResult} from '../../core/TreeAdapter.js';
+import {SelectedNodeProvider} from './SelectedNodeContext.js';
+import focusNodes from './focusNodes.js'
 
 import './css/tree.css'
 
-const {useReducer, useMemo} = React;
+const {useReducer, useMemo, useRef, useLayoutEffect} = React;
 
 const STORAGE_KEY = 'tree_settings';
 
@@ -48,12 +50,18 @@ function makeCheckbox(name, settings, updateSettings) {
   );
 }
 
-export default function Tree({focusPath, parseResult}) {
+export default function Tree({parseResult, position}) {
   const [settings, updateSettings] = useReducer(reducer, null, initSettings);
   const treeAdapter = useMemo(
     () => treeAdapterFromParseResult(parseResult, settings),
     [parseResult.treeAdapter, settings],
   );
+  const rootElement = useRef();
+
+  focusNodes('init');
+  useLayoutEffect(() => {
+    focusNodes('focus', rootElement);
+  });
 
   return (
     <div className="tree-visualization container">
@@ -73,21 +81,22 @@ export default function Tree({focusPath, parseResult}) {
           </span>
         ))}
       </div>
-      <ul onMouseLeave={() => {PubSub.publish('CLEAR_HIGHLIGHT');}}>
-        <Element
-          focusPath={focusPath}
-          value={parseResult.ast}
-          level={0}
-          treeAdapter={treeAdapter}
-          settings={settings}
-        />
+      <ul ref={rootElement} onMouseLeave={() => {PubSub.publish('CLEAR_HIGHLIGHT');}}>
+        <SelectedNodeProvider>
+          <Element
+            value={parseResult.ast}
+            level={0}
+            treeAdapter={treeAdapter}
+            autofocus={settings.autofocus}
+            position={position}
+          />
+        </SelectedNodeProvider>
       </ul>
     </div>
   );
 }
 
 Tree.propTypes = {
-  focusPath: PropTypes.array,
   parseResult: PropTypes.object,
-  parser: PropTypes.object,
+  position: PropTypes.number,
 };

website/src/components/visualization/focusNodes.js

@@ -0,0 +1,65 @@
+/**
+ * This may be a horrible way to do it, but this function is called from React
+ * components to "collect" all elements that represent AST nodes that are
+ * currently "focused", i.e. the position of the caret corresponds with this
+ * node.
+ * Since a node can appear multiple times in the parser output, multiple elements
+ * can be highlighted. The question is: which element should we scroll to?
+ * My current answer: The one that is closest to the center vertical center of
+ * the view.
+ * React components cannot solve this themselves since they don't have knowledge
+ * over other elements.
+ * So this function works as follows:
+ *   - At render, the tree root initializes a new set of nodes.
+ *   - Whenever a child node is rendered and "in focus", it adds a ref to the
+ *     list of elements.
+ *   - After render, the tree root triggers the focus logic. The element that is
+ *     closest to the center is scrolled into the view.
+ */
+let nodes;
+
+export default function(message, arg) {
+  switch (message) {
+    case 'init':
+      nodes = new Set();
+      break;
+    case 'add':
+      nodes.add(arg);
+      break;
+    case 'focus': {
+      const root = arg.current;
+      const size = nodes.size;
+      try {
+        if (size === 1) {
+          nodes.values().next().value.current.scrollIntoView();
+        } else if (size > 1) {
+          const rootRect = root.getBoundingClientRect();
+          const center = (rootRect.y + rootRect.height) / 2 + rootRect.y;
+          const closest = Array.from(nodes).reduce((closest, element) => {
+            if (!element.current) {
+              return closest;
+            }
+            const elementRect = element.current.getBoundingClientRect();
+            const distance = elementRect.y - center;
+            const minDistance = Math.min(
+              Math.abs(distance),
+              Math.abs(distance + elementRect.height)
+            );
+
+            if (!closest || closest[1] > minDistance) {
+              return [element.current, minDistance];
+            }
+            return closest;
+          }, null);
+          if (closest) {
+            closest[0].scrollIntoView();
+          }
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Unable to scroll node into view:', e.message);
+      }
+
+    }
+  }
+}