How to use the sprotty.TYPES.ModelSource function in sprotty

export default function runStandalone() {
    const clientId = getOptionFromDom('client-id') || 'sprotty-client';
    const transport = getOptionFromDom('transport') || 'websocket';
    const container = createContainer(transport=='websocket' ? TransportMedium.Websocket : TransportMedium.LSP, clientId);
    const dispatcher = container.get(TYPES.IActionDispatcher);

    // Run
    const modelSource = container.get(TYPES.ModelSource);

    if (modelSource instanceof WebSocketDiagramServer) {
        const ws = new SockJS('http://localhost:8080/websocket');
        modelSource.listen(ws);
        ws.addEventListener('open', () => {
            dispatcher.dispatch(requestModelAction());
        });
        ws.addEventListener('error', (event) => {
            console.error(`WebSocket Error: ${event}`)
        })
    }

    if (modelSource instanceof VSCodeWebViewDiagramServer) {
        modelSource.listen(acquireVsCodeApi());
        dispatcher.dispatch(requestModelAction());
    }

const circlegraphModule = new ContainerModule((bind, unbind, isBound, rebind) => {
        switch (transport) {
            case TransportMedium.Websocket:
                bind(TYPES.ModelSource).to(ExampleWebsocketDiagramServer).inSingletonScope();
                break;
            case TransportMedium.LSP:
                bind(TYPES.ModelSource).to(VSCodeWebViewDiagramServer).inSingletonScope();
                break;
            default:
                bind(TYPES.ModelSource).to(LocalModelSource).inSingletonScope();
        }
        rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
        rebind(TYPES.LogLevel).toConstantValue(LogLevel.log);
        const context = { bind, unbind, isBound, rebind };
        configureModelElement(context, 'graph', SGraph, ExampleGraphView);
        configureModelElement(context, 'node:circle', CircularNode, CircleNodeView);
        configureModelElement(context, 'node:bean', BeanNode, BeanNodeView);
        configureModelElement(context, 'node:label', SLabel, SLabelView);
        configureModelElement(context, 'compartment', SCompartment, SCompartmentView);
        configureModelElement(context, 'edge:straight', /*OrthogonalEgde*/ SEdge, EdgeView);
        configureViewerOptions(context, {
            needsClientLayout: true,
            needsServerLayout: true,
            baseDiv: clientId,
        });
        console.log('di.config.ts : ' + clientId);

get modelSource(): DepGraphModelSource {
        return this.diContainer.get(TYPES.ModelSource);
    }

const integrationGaphModule = new ContainerModule((bind, unbind, isBound, rebind) => {
        switch (transport) {
            case TransportMedium.Websocket:
                bind(TYPES.ModelSource).to(ExampleWebsocketDiagramServer).inSingletonScope();
                break;
            case TransportMedium.LSP:
                bind(TYPES.ModelSource).to(VSCodeWebViewDiagramServer).inSingletonScope();
                break;
            default:
                bind(TYPES.ModelSource).to(LocalModelSource).inSingletonScope();
        }
        rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
        rebind(TYPES.LogLevel).toConstantValue(LogLevel.log);
        const context = { bind, unbind, isBound, rebind };
        configureModelElement(context, 'graph', SGraph, ExampleGraphView);
        configureModelElement(context, 'node:circle', CircularNode, CircleNodeView);
        configureModelElement(context, 'node:integration', RectangularNode, IntegrationNodeView, {disable: [boundsFeature]});
        configureModelElement(context, 'node:channel', RectangularNode, ChannelNodeView);
        configureModelElement(context, 'node:label', SLabel, SLabelView);
        configureModelElement(context, 'compartment', SCompartment, SCompartmentView);
        configureModelElement(context, 'edge:straight', /*OrthogonalEgde*/ SEdge, EdgeView);
        configureModelElement(context, 'html', HtmlRoot, HtmlRootView);
        configureModelElement(context, 'pre-rendered', PreRenderedElement, PreRenderedView);

import "sprotty-theia/css/theia-sprotty.css";

import { GLSPWebsocketDiagramServer, RequestOperationsAction, RequestTypeHintsAction } from "@glsp/sprotty-client/lib";
import { join, resolve } from "path";
import { IActionDispatcher, RequestModelAction, TYPES } from "sprotty";

import createContainer from "./di.config";

const container = createContainer();

const websocket = new WebSocket("ws://localhost:8081/workflow");
const loc = window.location.pathname;
const currentDir = loc.substring(0, loc.lastIndexOf('/'));
const examplePath = resolve(join(currentDir, '..', '..', 'workspace', 'example1.wf'));

const diagramServer = container.get(TYPES.ModelSource);
diagramServer.listen(websocket);
const actionDispatcher = container.get(TYPES.IActionDispatcher);
websocket.addEventListener('open', event => {
    actionDispatcher.dispatch(new RequestModelAction({
        sourceUri: `file://${examplePath}`,
        diagramType: "workflow-diagram",
    }));
    actionDispatcher.dispatch(new RequestOperationsAction());
    actionDispatcher.dispatch(new RequestTypeHintsAction("workflow-diagram"));
});

const depGraphModule = new ContainerModule((bind, unbind, isBound, rebind) => {
        bind(DependencyGraphFilter).toSelf();
        bind(IGraphGenerator).to(NpmDependencyGraphGenerator).inSingletonScope();
        bind(TYPES.ModelSource).to(DepGraphModelSource).inSingletonScope();
        rebind(ILayoutConfigurator).to(DepGraphLayoutConfigurator);
        bind(TYPES.IPopupModelProvider).to(PopupModelProvider);
        rebind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();
        rebind(TYPES.LogLevel).toConstantValue(LogLevel.warn);
        rebind(TYPES.IModelFactory).to(SGraphFactory).inSingletonScope();

        const context = { bind, unbind, isBound, rebind };
        configureModelElement(context, 'graph', SGraph, SGraphView);
        configureModelElement(context, 'node', DependencyGraphNode, DependencyNodeView, {
            disable: [moveFeature]
        });
        configureModelElement(context, 'edge', DependencyGraphEdge, DependencyEdgeView, {
            disable: [editFeature]
        });
        configureModelElement(context, 'label', SLabel, SLabelView);
        configureModelElement(context, 'compartment', SCompartment, SCompartmentView);

protected initializeSprotty() {
        const modelSource = this.diContainer.get(TYPES.ModelSource);
        if (modelSource instanceof DiagramServer)
            modelSource.clientId = this.id;
        if (modelSource instanceof GLSPTheiaDiagramServer && this.connector)
            this.connector.connect(modelSource);
        this.disposed.connect(() => {
            if (modelSource instanceof GLSPTheiaDiagramServer && this.connector)
                this.connector.disconnect(modelSource);
        });
        this.actionDispatcher.dispatch(new RequestModelAction({
            sourceUri: this.options.uri,
            diagramType: this.options.diagramType,
            needsClientLayout: 'true'
        }));

        this.actionDispatcher.dispatch(new RequestOperationsAction());
        this.actionDispatcher.dispatch(new RequestTypeHintsAction());

createContainer(widgetId: string): Container {
        const container = containerFactory((bind, unbind, isBound, rebind) => {
            bind(ElkFactory).toConstantValue(elkFactory);
            rebind(IGraphGenerator).to(NodeModulesGraphGenerator).inSingletonScope();
        });
        container.rebind(KeyTool).to(TheiaKeyTool).inSingletonScope();
        overrideViewerOptions(container, {
            baseDiv: widgetId
        });

        const graphGenerator = container.get(IGraphGenerator);
        graphGenerator.fileSystem = this.fileSystem;
        graphGenerator.registryUrl = 'npm-registry';

        const modelSource = container.get(TYPES.ModelSource);
        modelSource.loadIndicator = loading => {
            if (loading) {
                this.statusBar.setElement(widgetId + '_loadIndicator', {
                    text: 'Loading $(spinner~spin)',
                    tooltip: 'Loading package dependencies...',
                    alignment: StatusBarAlignment.RIGHT
                });
            } else {
                this.statusBar.removeElement(widgetId + '_loadIndicator');
            }
        };

        return container;
    }
}