ai_coder/visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improves docs.

Browse Source
This commit is contained in:
Henning Dieterichs
2020-08-29 13:44:40 +02:00
parent 2c8ac3977c
commit 3cdbd1d9b1
5 changed files with 73 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
README.md
View File

@@ -1,76 +1,16 @@
# Visualization Framework
## Installation
This repository contains two packages.
You can use yarn to install the core library:
## @hediet/visualization-core
```
yarn add @hediet/visualization-core
```
This package provides basic infrastructure for implementing visualizations.
See its readme [here](./visualization-core/README.md).
If you want to use the existing visualizations, add the bundle library:
## @hediet/visualization-bundle
```
yarn add @hediet/visualization-bundle
```
This package bundles all the visualizations.
See its readme [here](./visualization-bundle/README.md).
## Usage
Import `@hediet/visualization-bundle` to register all default visualizations:
```tsx
// This registers all visualizations
import "@hediet/visualization-bundle";
```
Don't forget to import the styles in your scss file:
```scss
@import "~@hediet/visualization-bundle/style.scss";
```
Use `globalVisualizationFactory` to visualize some data:
```tsx
import { globalVisualizationFactory } from "@hediet/visualization-core";
const data = {
kind: { graph: true as true },
nodes: [
{ id: "1", label: "1" },
{ id: "2", label: "2", color: "orange" },
{ id: "3", label: "3" },
],
edges: [
{ from: "1", to: "2", color: "red" },
{ from: "1", to: "3" },
],
};
const visualizations = globalVisualizationFactory.getVisualizations(
data,
/* preferred visualization id */ undefined
);
// `visualizations.bestVisualization` is the visualization that is best suited to visualize the data.
// `visualiztaions.allVisualizations` contains all suitable visualizations.
```
If you use react, you can use the `VisualizationView` component to render a visualization:
```tsx
import { VisualizationView, Theme } from "@hediet/visualization-core";
// const visualizations = ...
function App() {
if (!visualizations.bestVisualization) {
return null;
}
return (
<VisualizationView
theme={Theme.light}
visualization={visualizations.bestVisualization}
/>
);
}
```
If you want to add your own visualization to this project, visualization-bundle is the right place!
The readme documents how to implement your own visualization.

4
playground/src/visualizations.ts
View File

@@ -1,4 +1,5 @@
//// Uncomment the visualization that you work on to increase webpack build speed!
//// If you create a new visualization, add it here!
// import "@hediet/visualization-bundle/dist/visualizers/ast-visualizer"; /*
// import "@hediet/visualization-bundle/dist/visualizers/graph/dot-graphviz-visualizer" /*
@@ -7,6 +8,7 @@
// import "@hediet/visualization-bundle/dist/visualizers/grid-visualizer" /*
// import "@hediet/visualization-bundle/dist/visualizers/image-visualizer"; /*
// import "@hediet/visualization-bundle/dist/visualizers/monaco-text-visualizer" /*
// import "@hediet/visualization-bundle/dist/visualizers/monaco-text-diff-visualizer"; /*
// import "@hediet/visualization-bundle/dist/visualizers/perspective-table-visualizer" /*
// import "@hediet/visualization-bundle/dist/visualizers/plotly-visualizer" /*
// import "@hediet/visualization-bundle/dist/visualizers/simple-text-visualizer"; /*
@@ -17,7 +19,9 @@
// This bundles the monaco editor. Uncomment it to load monaco dynamically.
// Dynamic loading increases webpack build speed significantly.
if (typeof process === undefined) {
// We check for process so that we don't load monaco from nodejs.
require("monaco-editor");
}
// This import bundles *all* visualizations. This makes webpack super slow.
import "@hediet/visualization-bundle"; // */

22
visualization-bundle/README.md
View File

@@ -1,11 +1,17 @@
# Visualization Bundle
This package registers various visualizations. If you have an idea for a cool visualization, add it here!
## Installation
You can use yarn to install this library:
```
yarn add @hediet/visualization-bundle
```
Install `@hediet/visualization-core` before!
## Usage
Import `@hediet/visualization-bundle` to register all default visualizations to `globalVisualizationFactory` of `@hediet/visualization-core`:
@@ -50,7 +56,9 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
## Supported Visualizations
### Origin Visualizations
You can find a playground that demonstrates all visualizations [here](https://hediet.github.io/visualization/).
### Source Visualizations
- Tree Visualizer
- AST Visualizer (+ Monaco Source Code View)
@@ -59,7 +67,7 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
- Image Visualizer
- Simple Text Visualizer
### Integrated Visualizations
### Integrated Visualization Libraries
- Plotly Visualizer
- Perspective JS Visualizer
@@ -69,6 +77,12 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio
- Vis.js Visualizer
- Monaco Editor Source Code Visualizer
```
## Setup Local Development Copy
```
- Clone this repository.
- Run `yarn` in the root folder.
- Run `yarn dev` in the `visualization-bundle` folder to start tsc in watch mode.
- Edit [./playground/src/visualization.ts](../playground/src/visualizations.ts) to your needs to improve webpack performance.
- Run `yarn dev` in the `playground` folder to start the playground where you can debug your visualization.
Please use the [`simple-text-visualizer`](./src/visualizers/simple-text-visualizer/index.tsx) as starting point!

54
visualization-bundle/src/visualizers/simple-text-visualizer/index.tsx
View File

@@ -8,27 +8,53 @@ import {
import { visualizationNs } from "../../consts";
export const simpleTextVisualizer = createVisualizer({
// The id must be unique
id: "simple-text",
// The name can be some display text
name: "Simple Text",
// Here you can define the schema for the data that this visualizer can handle.
// You must have a kind property of type object whose properties must be `true`.
serializer: sOpenObject({
kind: sOpenObject({
text: sLiteral(true),
}),
text: sString(),
}).defineAs(visualizationNs("SimpleTextVisualizationData")),
getVisualization: (data, self) =>
new ReactVisualization(self, { priority: 100 }, () => (
<pre
className="visualizer-simple-text"
style={{
margin: 0,
padding: 10,
color: "var(--visualizer-simple-text-color)",
}}
>
{data.text}
</pre>
)),
}).defineAs(
// This name is important for schema and code generation of the interface types.
// Make sure it is unique. It should end with "VisualizationData".
visualizationNs("SimpleTextVisualizationData")
),
getVisualization: (
/* The type of data is specified by the serializer above. */ data,
self
) =>
// If you want to use react, this is the way to go.
// Return your own implementation if you want to render directly to the DOM.
new ReactVisualization(
self,
{
// The priority is used for automatically selecting the best visualization
// if multiple visualizations can handle the data.
priority: 100,
},
() => (
<pre
className="visualizer-simple-text"
style={{
margin: 0,
padding: 10,
// Use css vars for theming.
// See ./style.scss.
color: "var(--visualizer-simple-text-color)",
}}
>
{data.text}
</pre>
)
),
});
// This registers the visualizer for automatic discovery.
// Make sure to import this file in "../index.ts" so that it gets loaded when
// someone imports "@hediet/visualization-bundle"!
globalVisualizationFactory.addVisualizer(simpleTextVisualizer);

2
visualization-bundle/src/visualizers/simple-text-visualizer/style.scss
View File

@@ -1,3 +1,5 @@
// Provide default colors for both the dark and light theme here!
.theme-dark {
--visualizer-simple-text-color: white;
}