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

v0.2.3. Updates monaco to 0.25.2, adds json schema validation.

Browse Source
This commit is contained in:
Henning Dieterichs
2021-06-19 15:35:33 +02:00
parent b6bf5feee0
commit 4cab6cc1b5
7 changed files with 91 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
visualization-bundle/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@hediet/visualization-bundle",
"description": "Bundles several visualizers",
"version": "0.2.1",
"version": "0.2.3",
"license": "MIT",
"scripts": {
"dev": "tsc --watch",
@@ -23,14 +23,14 @@
"@finos/perspective-viewer": "^0.5.2",
"@finos/perspective-viewer-d3fc": "^0.5.2",
"@finos/perspective-viewer-datagrid": "^0.5.2",
"@hediet/monaco-editor-react": "^0.1.1",
"@hediet/monaco-editor-react": "^0.2.0",
"@hediet/semantic-json": "^0.3.15",
"@hediet/std": "^0.6.0",
"classnames": "^2.2.6",
"line-column": "^1.0.2",
"mobx": "^5.15.4",
"mobx-react": "^6.1.8",
"monaco-editor": "^0.20.0",
"monaco-editor": "^0.25.2",
"plotly.js": "^1.54.7",
"react": "^16.12.0",
"react-dom": "^16.12.0",

44
visualization-bundle/src/visualizers/monaco-text-visualizer/MonacoEditor.tsx
View File

@@ -17,7 +17,10 @@ export class MonacoEditor extends React.Component<{
theme: Theme;
fileName?: string;
decorations?: Decoration[];
jsonSchemas?: { schema: unknown }[];
}> {
public static nextId = 0;
@observable private editor:
| monacoTypes.editor.IStandaloneCodeEditor
| undefined;
@@ -42,9 +45,8 @@ export class MonacoEditor extends React.Component<{
@disposeOnUnmount
private _updateText = autorun(() => {
if (this.editor) {
const decorations = new Array<
monacoTypes.editor.IModelDeltaDecoration
>();
const decorations =
new Array<monacoTypes.editor.IModelDeltaDecoration>();
const propDecorations = this.props.decorations || [];
const lines = this.props.text.split("\n");
const mappedLines = lines.map((l, idx) => {
@@ -54,7 +56,7 @@ export class MonacoEditor extends React.Component<{
if (
!propDecorations.some(
d =>
(d) =>
((d.range.endLineNumber === idx + 2 &&
d.range.endColumn === 1) ||
(d.range.startLineNumber === idx + 1 &&
@@ -82,19 +84,48 @@ export class MonacoEditor extends React.Component<{
});
const text = mappedLines.join("\n");
const modelId = MonacoEditor.nextId++;
const model = getLoadedMonaco().editor.createModel(
text,
this.languageId,
undefined
getLoadedMonaco().Uri.parse(
`inmemory://inmemory/model${modelId}`
)
);
this.editor.setModel(model);
if (this.props.jsonSchemas) {
const existingSchemas =
getLoadedMonaco().languages.json.jsonDefaults
.diagnosticsOptions.schemas || [];
getLoadedMonaco().languages.json.jsonDefaults.setDiagnosticsOptions(
{
validate: true,
schemas: [
...existingSchemas.filter(
(s) =>
!s.uri.startsWith(
"https://example.org/schemas/temp/"
)
),
...this.props.jsonSchemas.map((s, idx) => ({
uri: "https://example.org/schemas/temp/" + idx,
fileMatch: [`model${modelId}`],
schema: s.schema,
})),
],
}
);
}
this.prevDecorations = this.editor.deltaDecorations(
[],
[
...decorations,
...propDecorations.map(d => {
...propDecorations.map((d) => {
const r = getLoadedMonaco().Range.lift(d.range);
return {
range: r,
@@ -143,6 +174,7 @@ export class MonacoEditor extends React.Component<{
readOnly: true,
theme: this.props.theme.kind === "dark" ? "vs-dark" : "vs",
renderWhitespace: "all",
renderValidationDecorations: "on",
});
};

20
visualization-bundle/src/visualizers/monaco-text-visualizer/index.tsx
View File

@@ -7,6 +7,7 @@ import {
sArrayOf,
sNumber,
sUnion,
sAny,
} from "@hediet/semantic-json";
import * as React from "react";
import {
@@ -57,6 +58,20 @@ export const monacoTextVisualizer = createVisualizer({
})
)
),
jsonSchemas: sOptionalProp(
sArrayOf(
sOpenObject({
schema: sProp(sAny(), {
description:
"A json schema object that is applied when the fileName indicates a JSON document.",
}),
})
),
{
description:
"An array of schemas used to validate JSON documents.",
}
),
fileName: sOptionalProp(sString(), {
description:
"An optional filename that might be used for chosing a syntax highlighter",
@@ -66,9 +81,9 @@ export const monacoTextVisualizer = createVisualizer({
createReactVisualization(
self,
{ priority: 500, preload: MonacoEditorLazyLoadable.preload },
function({ theme }) {
function ({ theme }) {
const decorations = data.decorations
? data.decorations.map<Decoration>(d => ({
? data.decorations.map<Decoration>((d) => ({
label: d.label,
range: {
startLineNumber: d.range.start.line + 1,
@@ -85,6 +100,7 @@ export const monacoTextVisualizer = createVisualizer({
fileName={data.fileName}
theme={theme}
decorations={decorations}
jsonSchemas={data.jsonSchemas}
/>
);
}

27
visualization-bundle/src/visualizers/source-visualizer/index.tsx
View File

@@ -1,4 +1,4 @@
import { sOpenObject } from "@hediet/semantic-json";
import { JsonSchemaGenerator, sOpenObject } from "@hediet/semantic-json";
import * as React from "react";
import {
createReactVisualization,
@@ -15,13 +15,24 @@ export const sourceVisualizer = createVisualizer({
kind: sOpenObject({}),
}).defineAs(visualizationNs("SourceVisualizationData")),
getVisualization: (data, self) =>
createReactVisualization(self, { priority: -100 }, ({ theme }) => (
<MonacoEditorLazyLoadable
text={JSON.stringify(data, undefined, 4)}
fileName={"main.json"}
theme={theme}
/>
)),
createReactVisualization(self, { priority: -100 }, ({ theme }) => {
const s = new JsonSchemaGenerator();
return (
<MonacoEditorLazyLoadable
text={JSON.stringify(data, undefined, 4)}
fileName={"main.json"}
theme={theme}
jsonSchemas={[
{
schema: s.getJsonSchemaWithDefinitions(
globalVisualizationFactory.getSerializer()
),
},
]}
/>
);
}),
});
globalVisualizationFactory.addHiddenVisualizer(sourceVisualizer);