diff --git a/docs/multiline-expression.png b/docs/multiline-expression.png new file mode 100644 index 0000000..8e90fbc Binary files /dev/null and b/docs/multiline-expression.png differ diff --git a/docs/visualization-plotly-random-walk.png b/docs/visualization-plotly-random-walk.png new file mode 100644 index 0000000..231ea4c Binary files /dev/null and b/docs/visualization-plotly-random-walk.png differ diff --git a/extension/README.md b/extension/README.md index b7d3a72..0c0a48d 100644 --- a/extension/README.md +++ b/extension/README.md @@ -23,6 +23,50 @@ See [here](../data-extraction/README.md) for documentation of the `createGraphFr Visualizers present data extracted by a _Data Extractor_. Visualizers are (mostly) React components and live in the webview of the extension. +### Graph Visualization + +The Graphviz and vis.js visualizers render data that matches the `Graph` interface. + +```ts +interface Graph { + kind: { graph: true }; + nodes: NodeGraphData[]; + edges: EdgeGraphData[]; +} + +interface NodeGraphData { + id: string; + label: string; + color?: string; +} + +interface EdgeGraphData { + from: string; + to: string; + label: string; + id?: string; + color?: string; + weight?: number; +} +``` + +The graphviz visualizer uses the SVG viewer to render the SVG created by `viz.js`. + +![](../docs/visualization-graphviz.png) +![](../docs/visualization-visjs.png) + +### Plotly Visualization + +```ts +export interface Plotly { + kind: { plotly: true }; + data: Partial[]; +} +// See plotly docs for Plotly.Data. +``` + +![](../docs/visualization-plotly-random-walk.png) + ### Tree Visualization The tree visualizer renders data that matches the `Tree` interface. @@ -102,38 +146,6 @@ interface DotGraph extends Text { `Viz.js` (Graphviz) is used for rendering. -### Graph Visualization - -The Graphviz and vis.js visualizers render data that matches the `Graph` interface. - -```ts -interface Graph { - kind: { graph: true }; - nodes: NodeGraphData[]; - edges: EdgeGraphData[]; -} - -interface NodeGraphData { - id: string; - label: string; - color?: string; -} - -interface EdgeGraphData { - from: string; - to: string; - label: string; - id?: string; - color?: string; - weight?: number; -} -``` - -The graphviz visualizer uses the SVG viewer to render the SVG created by `viz.js`. - -![](../docs/visualization-graphviz.png) -![](../docs/visualization-visjs.png) - ## Integrated Data Extractors Data extractors convert arbitrary values into visualizable data. @@ -157,10 +169,22 @@ Treats the data as direct input to the visualizer. Calls `.getDebugVisualization()` on values and treats the result as direct input to the visualizer. +### Plotly y-Values + +Uses plotly to plot an array of numbers. + +### Object Graph + +Constructs a graph containing all objects reachable from object the expression evaluates to. +Graph is constructed using a breadth search. Stops after 50 nodes. + ## UI Features -- Multiline Expressions: Press `shift+enter` to add a new line, ctrl+enter to evaluate the expression. - Subsequent new lines can be inserted with a single `enter`. +- **Multi-line Expressions**: Press `shift+enter` to add a new line and `ctrl+enter` to evaluate the expression. + When only having a single line, `enter` submits the current expression, + but when having multiple lines, `enter` inserts another line break. + + ![](../docs/multiline-expression.png) ## Limitations