@finos/legend-vscode-extension-dependencies 2.0.13 → 2.1.0

package/lib/components/DiagramRenderer.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getDiagram, DiagramRenderer, } from '@finos/legend-extension-dsl-diagram';
+import { createRef, useEffect, useState } from 'react';
+import '../../style/index.scss';
+import { postMessage } from '../utils/VsCodeUtils.js';
+import { GET_PROJECT_ENTITIES, GET_PROJECT_ENTITIES_RESPONSE, } from '../utils/Const.js';
+import { getPureGraph } from '../graph-manager/index.js';
+export const DiagramRendererComponent = ({ diagramId, presets }) => {
+    const ref = createRef();
+    const [diagram, setDiagram] = useState(null);
+    const [entities, setEntities] = useState([]);
+    const [error, setError] = useState();
+    useEffect(() => {
+        postMessage({
+            command: GET_PROJECT_ENTITIES,
+        });
+    }, [diagramId]);
+    window.addEventListener('message', (event) => {
+        const message = event.data;
+        if (message.command === GET_PROJECT_ENTITIES_RESPONSE) {
+            const es = message.result;
+            setEntities(es);
+        }
+    });
+    useEffect(() => {
+        if (entities.length && diagramId) {
+            getPureGraph(entities, presets)
+                .then((pureModel) => {
+                setDiagram(getDiagram(diagramId, pureModel));
+                setError(null);
+            })
+                .catch((e) => {
+                setError(e.message);
+                setDiagram(null);
+            });
+        }
+    }, [entities, diagramId, presets]);
+    useEffect(() => {
+        if (diagram) {
+            const diagramRenderer = new DiagramRenderer(ref.current, diagram);
+            diagramRenderer.render({ initial: true });
+        }
+    }, [ref, diagram]);
+    return (_jsx("div", { className: "diagram__renderer", ref: ref, children: error ? (_jsxs("div", { className: "diagram__renderer__error", children: [_jsx("span", { children: "Something went wrong. Diagram cannot be created." }), _jsx("span", { className: "diagram__renderer__error__details", title: `${error}`, children: "Error Details." })] })) : null }));
+};
+//# sourceMappingURL=DiagramRenderer.js.map

package/lib/components/DiagramRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramRenderer.js","sourceRoot":"","sources":["../../src/components/DiagramRenderer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAEL,UAAU,EACV,eAAe,GAChB,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD,MAAM,CAAC,MAAM,wBAAwB,GAGhC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9B,MAAM,GAAG,GAAG,SAAS,EAAkB,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAiB,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC;YACV,OAAO,EAAE,oBAAoB;SAC9B,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,CAAC,gBAAgB,CACrB,SAAS,EACT,CAAC,KAA0D,EAAE,EAAE;QAC7D,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC;QAC3B,IAAI,OAAO,CAAC,OAAO,KAAK,6BAA6B,EAAE,CAAC;YACtD,MAAM,EAAE,GAAa,OAAO,CAAC,MAAM,CAAC;YACpC,WAAW,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,CACF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC;YACjC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC;iBAC5B,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE;gBAClB,UAAU,CAAC,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;gBAC7C,QAAQ,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;gBACX,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;gBACpB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,CAAC,CAAC;QACP,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,eAAe,GAAG,IAAI,eAAe,CACzC,GAAG,CAAC,OAAyB,EAC7B,OAAO,CACR,CAAC;YACF,eAAe,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,cAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,GAAG,YACxC,KAAK,CAAC,CAAC,CAAC,CACP,eAAK,SAAS,EAAC,0BAA0B,aACvC,8EAA6D,EAC7D,eACE,SAAS,EAAC,mCAAmC,EAC7C,KAAK,EAAE,GAAG,KAAK,EAAE,+BAGZ,IACH,CACP,CAAC,CAAC,CAAC,IAAI,GACJ,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.d.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import type { Entity } from '@finos/legend-storage';
+import { type AbstractPreset } from '@finos/legend-shared';
 import { type PureModel } from '@finos/legend-graph';
-export declare const getPureGraph: (entities: Entity[]) => Promise<PureModel>;
+export declare const getPureGraph: (entities: Entity[], presets: AbstractPreset[]) => Promise<PureModel>;
 //# sourceMappingURL=VSCODE_Extension_GraphManagerHelper.d.ts.map

package/lib/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VSCODE_Extension_GraphManagerHelper.d.ts","sourceRoot":"","sources":["../../../src/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EACL,KAAK,SAAS,EAGf,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,SAAS,CA4BnE,CAAC"}
+{"version":3,"file":"VSCODE_Extension_GraphManagerHelper.d.ts","sourceRoot":"","sources":["../../../src/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,sBAAsB,CAAC;AACvE,OAAO,EACL,KAAK,SAAS,EAGf,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,YAAY,EAAE,CACzB,QAAQ,EAAE,MAAM,EAAE,EAClB,OAAO,EAAE,cAAc,EAAE,KACtB,OAAO,CAAC,SAAS,CA8BrB,CAAC"}

package/lib/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.js

@@ -17,12 +17,13 @@ import { LogService } from '@finos/legend-shared';
 import { Core_GraphManagerPreset, GraphManagerState, } from '@finos/legend-graph';
 import { LegendStudioPluginManager } from '@finos/legend-application-studio';
 import { DSL_Diagram_GraphManagerPreset } from '@finos/legend-extension-dsl-diagram/graph';
-export const getPureGraph = async (entities) => {
+export const getPureGraph = async (entities, presets) => {
     const pluginManager = LegendStudioPluginManager.create();
     pluginManager
         .usePresets([
         new Core_GraphManagerPreset(),
         new DSL_Diagram_GraphManagerPreset(),
+        ...presets,
     ])
         .install();
     const graphManagerState = new GraphManagerState(pluginManager, new LogService());

package/lib/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSCODE_Extension_GraphManagerHelper.js","sourceRoot":"","sources":["../../../src/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAEL,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,2CAA2C,CAAC;AAE3F,MAAM,CAAC,MAAM,YAAY,GAA+C,KAAK,EAC3E,QAAkB,EAClB,EAAE;IACF,MAAM,aAAa,GAAG,yBAAyB,CAAC,MAAM,EAAE,CAAC;IACzD,aAAa;SACV,UAAU,CAAC;QACV,IAAI,uBAAuB,EAAE;QAC7B,IAAI,8BAA8B,EAAE;KACrC,CAAC;SACD,OAAO,EAAE,CAAC;IACb,MAAM,iBAAiB,GAAG,IAAI,iBAAiB,CAC7C,aAAa,EACb,IAAI,UAAU,EAAE,CACjB,CAAC;IAEF,MAAM,iBAAiB,CAAC,YAAY,CAAC,UAAU,CAAC;QAC9C,GAAG,EAAE,MAAM;QACX,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,EAAE;KACjB,CAAC,CAAC;IACH,MAAM,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,iBAAiB,CAAC,YAAY,CAAC,UAAU,CAC7C,iBAAiB,CAAC,KAAK,EACvB,QAAQ,EACR,iBAAiB,CAAC,eAAe,EACjC,EAAE,CACH,CAAC;IACF,OAAO,iBAAiB,CAAC,KAAK,CAAC;AACjC,CAAC,CAAC"}
+{"version":3,"file":"VSCODE_Extension_GraphManagerHelper.js","sourceRoot":"","sources":["../../../src/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAuB,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAEL,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,2CAA2C,CAAC;AAE3F,MAAM,CAAC,MAAM,YAAY,GAGC,KAAK,EAC7B,QAAkB,EAClB,OAAyB,EACzB,EAAE;IACF,MAAM,aAAa,GAAG,yBAAyB,CAAC,MAAM,EAAE,CAAC;IACzD,aAAa;SACV,UAAU,CAAC;QACV,IAAI,uBAAuB,EAAE;QAC7B,IAAI,8BAA8B,EAAE;QACpC,GAAG,OAAO;KACX,CAAC;SACD,OAAO,EAAE,CAAC;IACb,MAAM,iBAAiB,GAAG,IAAI,iBAAiB,CAC7C,aAAa,EACb,IAAI,UAAU,EAAE,CACjB,CAAC;IAEF,MAAM,iBAAiB,CAAC,YAAY,CAAC,UAAU,CAAC;QAC9C,GAAG,EAAE,MAAM;QACX,OAAO,EAAE,CAAC;QACV,YAAY,EAAE,EAAE;KACjB,CAAC,CAAC;IACH,MAAM,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,iBAAiB,CAAC,YAAY,CAAC,UAAU,CAC7C,iBAAiB,CAAC,KAAK,EACvB,QAAQ,EACR,iBAAiB,CAAC,eAAe,EACjC,EAAE,CACH,CAAC;IACF,OAAO,iBAAiB,CAAC,KAAK,CAAC;AACjC,CAAC,CAAC"}

package/lib/index.d.ts

@@ -13,6 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from '@finos/legend-extension-dsl-diagram';
+export * from './components/DiagramRenderer.js';
 export * from './graph-manager/index.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -13,6 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from '@finos/legend-extension-dsl-diagram';
+export * from './components/DiagramRenderer.js';
 export * from './graph-manager/index.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC"}

package/lib/utils/Const.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export declare const GET_PROJECT_ENTITIES = "getProjectEntities";
+export declare const GET_PROJECT_ENTITIES_RESPONSE = "getProjectEntitiesResponse";
+//# sourceMappingURL=Const.d.ts.map

package/lib/utils/Const.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Const.d.ts","sourceRoot":"","sources":["../../src/utils/Const.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,eAAO,MAAM,oBAAoB,uBAAuB,CAAC;AACzD,eAAO,MAAM,6BAA6B,+BAA+B,CAAC"}

package/lib/utils/Const.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// Event Types
+export const GET_PROJECT_ENTITIES = 'getProjectEntities';
+export const GET_PROJECT_ENTITIES_RESPONSE = 'getProjectEntitiesResponse';
+//# sourceMappingURL=Const.js.map

package/lib/utils/Const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Const.js","sourceRoot":"","sources":["../../src/utils/Const.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc;AACd,MAAM,CAAC,MAAM,oBAAoB,GAAG,oBAAoB,CAAC;AACzD,MAAM,CAAC,MAAM,6BAA6B,GAAG,4BAA4B,CAAC"}

package/lib/utils/VsCodeUtils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export declare const postMessage: (message: unknown) => void;
+//# sourceMappingURL=VsCodeUtils.d.ts.map

package/lib/utils/VsCodeUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VsCodeUtils.d.ts","sourceRoot":"","sources":["../../src/utils/VsCodeUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAQH,eAAO,MAAM,WAAW,YAAa,OAAO,KAAG,IAE9C,CAAC"}

package/lib/utils/VsCodeUtils.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const postMessage = (message) => {
+    vscode.postMessage(message);
+};
+//# sourceMappingURL=VsCodeUtils.js.map

package/lib/utils/VsCodeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VsCodeUtils.js","sourceRoot":"","sources":["../../src/utils/VsCodeUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAQH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAgB,EAAQ,EAAE;IACpD,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC9B,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-vscode-extension-dependencies",
-  "version": "2.0.13",
+  "version": "2.1.0",
   "homepage": "https://github.com/finos/legend-studio/tree/master/packages/legend-vscode-extension-dependencies",
   "bugs": {
     "url": "https://github.com/finos/legend-studio/issues"
@@ -17,6 +17,9 @@
     ".": {
       "import": "./lib/index.js",
       "require": "./lib/bundles/bundle.cjs.js"
+    },
+    "./style/index.css": {
+      "default": "./lib/bundles/style/bundle.css"
     }
   },
   "module": "lib/index.js",
@@ -41,7 +44,8 @@
     "@finos/legend-extension-dsl-diagram": "8.0.201",
     "@finos/legend-graph": "31.10.17",
     "@finos/legend-shared": "10.0.49",
-    "@finos/legend-storage": "3.0.99"
+    "@finos/legend-storage": "3.0.99",
+    "react": "18.3.1"
   },
   "devDependencies": {
     "@babel/core": "7.24.9",
@@ -51,13 +55,16 @@
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "0.4.4",
+    "@types/vscode": "1.91.0",
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
     "npm-run-all": "4.1.5",
+    "postcss-url": "10.1.3",
     "rimraf": "6.0.1",
     "rollup": "4.19.0",
     "rollup-plugin-flow": "1.1.1",
     "rollup-plugin-import-css": "3.5.0",
+    "rollup-plugin-postcss": "4.0.2",
     "typescript": "5.5.4"
   },
   "publishConfig": {

package/src/components/DiagramRenderer.tsx

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  type Diagram,
+  getDiagram,
+  DiagramRenderer,
+} from '@finos/legend-extension-dsl-diagram';
+import type { Entity } from '@finos/legend-storage';
+import { createRef, useEffect, useState } from 'react';
+import '../../style/index.scss';
+import { postMessage } from '../utils/VsCodeUtils.js';
+import {
+  GET_PROJECT_ENTITIES,
+  GET_PROJECT_ENTITIES_RESPONSE,
+} from '../utils/Const.js';
+import { getPureGraph } from '../graph-manager/index.js';
+import type { AbstractPreset } from '@finos/legend-shared';
+
+export const DiagramRendererComponent: React.FC<{
+  diagramId: string;
+  presets: AbstractPreset[];
+}> = ({ diagramId, presets }) => {
+  const ref = createRef<HTMLDivElement>();
+  const [diagram, setDiagram] = useState<Diagram | null>(null);
+  const [entities, setEntities] = useState<Entity[]>([]);
+  const [error, setError] = useState<string | null>();
+
+  useEffect(() => {
+    postMessage({
+      command: GET_PROJECT_ENTITIES,
+    });
+  }, [diagramId]);
+
+  window.addEventListener(
+    'message',
+    (event: MessageEvent<{ result: Entity[]; command: string }>) => {
+      const message = event.data;
+      if (message.command === GET_PROJECT_ENTITIES_RESPONSE) {
+        const es: Entity[] = message.result;
+        setEntities(es);
+      }
+    },
+  );
+
+  useEffect(() => {
+    if (entities.length && diagramId) {
+      getPureGraph(entities, presets)
+        .then((pureModel) => {
+          setDiagram(getDiagram(diagramId, pureModel));
+          setError(null);
+        })
+        .catch((e) => {
+          setError(e.message);
+          setDiagram(null);
+        });
+    }
+  }, [entities, diagramId, presets]);
+
+  useEffect(() => {
+    if (diagram) {
+      const diagramRenderer = new DiagramRenderer(
+        ref.current as HTMLDivElement,
+        diagram,
+      );
+      diagramRenderer.render({ initial: true });
+    }
+  }, [ref, diagram]);
+
+  return (
+    <div className="diagram__renderer" ref={ref}>
+      {error ? (
+        <div className="diagram__renderer__error">
+          <span>Something went wrong. Diagram cannot be created.</span>
+          <span
+            className="diagram__renderer__error__details"
+            title={`${error}`}
+          >
+            Error Details.
+          </span>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.ts

@@ -15,7 +15,7 @@
  */
 
 import type { Entity } from '@finos/legend-storage';
-import { LogService } from '@finos/legend-shared';
+import { type AbstractPreset, LogService } from '@finos/legend-shared';
 import {
   type PureModel,
   Core_GraphManagerPreset,
@@ -24,14 +24,19 @@ import {
 import { LegendStudioPluginManager } from '@finos/legend-application-studio';
 import { DSL_Diagram_GraphManagerPreset } from '@finos/legend-extension-dsl-diagram/graph';
 
-export const getPureGraph: (entities: Entity[]) => Promise<PureModel> = async (
+export const getPureGraph: (
   entities: Entity[],
+  presets: AbstractPreset[],
+) => Promise<PureModel> = async (
+  entities: Entity[],
+  presets: AbstractPreset[],
 ) => {
   const pluginManager = LegendStudioPluginManager.create();
   pluginManager
     .usePresets([
       new Core_GraphManagerPreset(),
       new DSL_Diagram_GraphManagerPreset(),
+      ...presets,
     ])
     .install();
   const graphManagerState = new GraphManagerState(

package/src/index.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export * from '@finos/legend-extension-dsl-diagram';
+export * from './components/DiagramRenderer.js';
 export * from './graph-manager/index.js';

package/src/utils/Const.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Event Types
+export const GET_PROJECT_ENTITIES = 'getProjectEntities';
+export const GET_PROJECT_ENTITIES_RESPONSE = 'getProjectEntitiesResponse';

package/src/utils/VsCodeUtils.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+interface Vscode {
+  postMessage(message: unknown): void;
+}
+
+declare const vscode: Vscode;
+
+export const postMessage = (message: unknown): void => {
+  vscode.postMessage(message);
+};

package/tsconfig.json

@@ -50,7 +50,10 @@
   "files": [
     "./src/index.ts",
     "./src/graph-manager/index.ts",
-    "./src/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.ts"
+    "./src/graph-manager/helpers/VSCODE_Extension_GraphManagerHelper.ts",
+    "./src/utils/Const.ts",
+    "./src/utils/VsCodeUtils.ts",
+    "./src/components/DiagramRenderer.tsx"
   ],
   "include": [
     "src/**/*.ts",