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);
+ }
+
+ }
+ }
+}

.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);
+ }
+
+ }
+ }
+}

.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);
+ }
+
+ }
+ }
+}

.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);
+ }
+
+ }
+ }
+}

.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);
+ }
+
+ }
+ }
+}

.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);
+ }
+
+ }
+ }
+}

.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);
+ }
+
+ }
+ }
+}

.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);
+ }
+
+ }
+ }
+}