From 41357e6821b4a0bb058649cb1c37e5545918d610 Mon Sep 17 00:00:00 2001 From: Henning Dieterichs Date: Fri, 14 Aug 2020 13:48:39 +0200 Subject: [PATCH] Improves readme, removes blueprint from bundle package, some minor changes. --- README.md | 2 +- playground/webpack.config.ts | 1 - simple-demo/webpack.config.ts | 1 - visualization-bundle/README.md | 29 +++++++++++++++++++ visualization-bundle/package.json | 5 ++-- .../src/visualizers/ast-visualizer/index.tsx | 1 + .../grid-visualizer/GridVisualizer.tsx | 11 +------ visualization-core/README.md | 2 +- 8 files changed, 36 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index dbdd6ed..02d7f7e 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ const visualizations = globalVisualizationFactory.getVisualizations( /* preferred visualization id */ undefined ); // `visualizations.bestVisualization` is the visualization that is best suited to visualize the data. -// `visualiztaions.allVisualizations` contains all other available visualizations than can visualize the data. +// `visualiztaions.allVisualizations` contains all suitable visualizations. ``` If you use react, you can use the `VisualizationView` component to render a visualization: diff --git a/playground/webpack.config.ts b/playground/webpack.config.ts index f0bfac2..c19e643 100644 --- a/playground/webpack.config.ts +++ b/playground/webpack.config.ts @@ -64,7 +64,6 @@ module.exports = { plugins.push( new MonacoWebpackPlugin({ - // Add more languages here once webworker issues are solved. languages: ["typescript", "json"], }) ); diff --git a/simple-demo/webpack.config.ts b/simple-demo/webpack.config.ts index da3f52d..875c7e1 100644 --- a/simple-demo/webpack.config.ts +++ b/simple-demo/webpack.config.ts @@ -64,7 +64,6 @@ module.exports = { plugins.push( new MonacoWebpackPlugin({ - // Add more languages here once webworker issues are solved. languages: ["typescript", "json"], }) ); diff --git a/visualization-bundle/README.md b/visualization-bundle/README.md index fde4cc7..3b9e5ca 100644 --- a/visualization-bundle/README.md +++ b/visualization-bundle/README.md @@ -21,6 +21,31 @@ Don't forget to import the styles in your scss file: @import "~@hediet/visualization-bundle/style.scss"; ``` +You will need to configure webpack + +- to compile scss files: + +```js +{ test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" }, +``` + +- to compile less files: + +```js +{ test: /\.less$/, loaders: ["style-loader", "css-loader", "less-loader"] } +``` + +- to register monaco workers + +```js +plugins: [ + // ... + new MonacoWebpackPlugin({ + languages: ["typescript", "json"], + }), +]; +``` + See docs of `@hediet/visualization-core` for how to find and render visualizations! ## Supported Visualizations @@ -43,3 +68,7 @@ See docs of `@hediet/visualization-core` for how to find and render visualizatio - Graphviz Dot Visualizer - Vis.js Visualizer - Monaco Editor Source Code Visualizer + +``` + +``` diff --git a/visualization-bundle/package.json b/visualization-bundle/package.json index e6878c6..394ad72 100644 --- a/visualization-bundle/package.json +++ b/visualization-bundle/package.json @@ -1,7 +1,7 @@ { "name": "@hediet/visualization-bundle", "description": "Bundles several visualizers", - "version": "0.1.0", + "version": "0.1.2", "license": "MIT", "scripts": { "dev": "tsc --watch", @@ -14,7 +14,8 @@ }, "files": [ "dist", - "src" + "src", + "style.scss" ], "main": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/visualization-bundle/src/visualizers/ast-visualizer/index.tsx b/visualization-bundle/src/visualizers/ast-visualizer/index.tsx index 6dfa8ec..f2b0b6b 100644 --- a/visualization-bundle/src/visualizers/ast-visualizer/index.tsx +++ b/visualization-bundle/src/visualizers/ast-visualizer/index.tsx @@ -67,6 +67,7 @@ export const sAstTreeNode: Serializer = sLazy(() => export const sAstTree = sOpenObject({ kind: sOpenObject({ + ast: sLiteral(true), tree: sLiteral(true), text: sLiteral(true), }), diff --git a/visualization-bundle/src/visualizers/grid-visualizer/GridVisualizer.tsx b/visualization-bundle/src/visualizers/grid-visualizer/GridVisualizer.tsx index 154492c..a1da461 100644 --- a/visualization-bundle/src/visualizers/grid-visualizer/GridVisualizer.tsx +++ b/visualization-bundle/src/visualizers/grid-visualizer/GridVisualizer.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { observer } from "mobx-react"; import { computed, action, observable } from "mobx"; -import { Icon } from "@blueprintjs/core"; import { sGrid } from "."; export class DecoratedGridComponent extends React.Component<{ @@ -72,15 +71,7 @@ export class DecoratedGridComponent extends React.Component<{ r.columns.push({ id: m.id, kind: "empty", - content: ( - - - {m.label || m.id} - - ), + content: {m.label || m.id}, }); } } diff --git a/visualization-core/README.md b/visualization-core/README.md index 4288643..839dea8 100644 --- a/visualization-core/README.md +++ b/visualization-core/README.md @@ -35,7 +35,7 @@ const visualizations = globalVisualizationFactory.getVisualizations( /* preferred visualization id */ undefined ); // `visualizations.bestVisualization` is the visualization that is best suited to visualize the data. -// `visualiztaions.allVisualizations` contains all other available visualizations than can visualize the data. +// `visualiztaions.allVisualizations` contains all suitable visualizations. ``` If you use react, you can use the `VisualizationView` component to render a visualization: