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

const urlParameters = getParameters()

let initialContent: string
if (urlParameters.compressedContent !== undefined) {
    initialContent = LZString.decompressFromEncodedURIComponent(urlParameters.compressedContent)
} else if (urlParameters.initialContent !== undefined) {
    initialContent = decodeURIComponent(urlParameters.initialContent)
} else {
    initialContent = ``
}

// Create Sprotty viewer
const sprottyContainer = createContainer()
sprottyContainer.bind(TYPES.ModelSource).to(LanguageDiagramServer).inSingletonScope()
const diagramServer = sprottyContainer.get(TYPES.ModelSource)

// Create Monaco editor
const modelUri = 'inmemory:/model.elkt'
const editor = monaco.editor.create(document.getElementById('monaco-editor')!, {
    model: monaco.editor.createModel(initialContent, 'elkt', monaco.Uri.parse(modelUri))
})
editor.updateOptions({
    minimap: { enabled: false }
})
setupModelLink(editor, (event) => {
    return {
        compressedContent: LZString.compressToEncodedURIComponent(editor.getValue())
    }
})

// Create the web socket

createContainer(widgetId: string) {
        const container = new Container()
        container.load(defaultModule, boundsModule, selectModule, moveModule, viewportModule, fadeModule, multicoreModule, hoverModule)
        container.bind(TYPES.ModelSource).to(TheiaDiagramServer).inSingletonScope()

        overrideViewerOptions(container, {
            baseDiv: widgetId,
            hiddenDiv: 'sprotty-hidden-cores',
            popupDiv: 'sprotty-popup-cores',
            needsClientLayout: true,
            needsServerLayout: false
        })

        // Register views
        const viewRegistry = container.get(TYPES.ViewRegistry)
        viewRegistry.register('processor', ProcessorView)
        viewRegistry.register('core', CoreView)
        viewRegistry.register('simplecore', SimpleCoreView)
        viewRegistry.register('crossbar', CrossbarView)
        viewRegistry.register('channel', ChannelView)

const WebSocket = require('reconnecting-websocket')

const urlParameters = getParameters()

let initialContent: string
if (urlParameters.compressedContent !== undefined) {
    initialContent = LZString.decompressFromEncodedURIComponent(urlParameters.compressedContent)
} else if (urlParameters.initialContent !== undefined) {
    initialContent = decodeURIComponent(urlParameters.initialContent)
} else {
    initialContent = ``
}

// Create Sprotty viewer
const sprottyContainer = createContainer()
sprottyContainer.bind(TYPES.ModelSource).to(LanguageDiagramServer).inSingletonScope()
const diagramServer = sprottyContainer.get(TYPES.ModelSource)

// Create Monaco editor
const modelUri = 'inmemory:/model.elkt'
const editor = monaco.editor.create(document.getElementById('monaco-editor')!, {
    model: monaco.editor.createModel(initialContent, 'elkt', monaco.Uri.parse(modelUri))
})
editor.updateOptions({
    minimap: { enabled: false }
})
setupModelLink(editor, (event) => {
    return {
        compressedContent: LZString.compressToEncodedURIComponent(editor.getValue())
    }
})

createContainer(widgetId: string) {
        const container = new Container()
        container.load(defaultModule, selectModule, moveModule, boundsModule, fadeModule, viewportModule, flowModule, hoverModule)
        container.bind(TYPES.ModelSource).to(TheiaDiagramServer).inSingletonScope()

        overrideViewerOptions(container, {
            baseDiv: widgetId,
            hiddenDiv: 'sprotty-hidden-flow',
            popupDiv: 'sprotty-popup-flow',
            needsClientLayout: false,
            needsServerLayout: true
        })

        // Register views
        const viewRegistry = container.get(TYPES.ViewRegistry)
        viewRegistry.register('flow', SGraphView)
        viewRegistry.register('task', TaskNodeView)
        viewRegistry.register('barrier', BarrierNodeView)
        viewRegistry.register('edge', FlowEdgeView)
        viewRegistry.register('html', HtmlRootView)

protected createDiagramWidget(uri: URI): DiagramWidget {
        const widgetId = this.widgetRegistry.nextId()
        const svgContainerId = widgetId + '_sprotty'
        const diagramConfiguration = this.diagramConfigurationRegistry.get(this.diagramType)
        const diContainer = diagramConfiguration.createContainer(svgContainerId)
        const modelSource = diContainer.get(TYPES.ModelSource)
        if (modelSource instanceof DiagramServer)
            modelSource.clientId = widgetId
        if (modelSource instanceof TheiaLSPDiagramServer && this.diagramConnector)
            this.diagramConnector.connect(modelSource)
        else if (modelSource instanceof TheiaWebsocketDiagramServer) {
            modelSource.listen(this.glspClient.webSocket)
        }
        const newWidget = this.diagramWidgetFactory({
            id: widgetId, svgContainerId, uri, diagramType: this.diagramType, modelSource,
            actionDispatcher: diContainer.get(TYPES.IActionDispatcher)
        })
        newWidget.title.closable = true
        newWidget.title.label = uri.path.base
        newWidget.title.icon = this.iconClass
        this.widgetRegistry.addWidget(uri, this.diagramType, newWidget)
        newWidget.disposed.connect(() => {

createContainer(widgetId: string): Container {
        const container = createWorkflowDiagramContainer(widgetId);
        container.bind(TYPES.ModelSource).to(TheiaWebsocketDiagramServer)
        container.rebind(KeyTool).to(TheiaKeyTool).inSingletonScope()
        return container;
    }

createDiagramServer(widgetId: string, diagramType: string): TheiaDiagramServer {
        const diagramConfiguration = this.diagramConfigurationRegistry.get(diagramType)
        const newServer = diagramConfiguration.createContainer(widgetId).get(TYPES.ModelSource)
        newServer.connect(this)
        this.servers.push(newServer)
        return newServer
    }

createContainer(widgetId: string): Container {
        const container = createYangDiagramContainer(widgetId)
        container.bind(TYPES.ModelSource).to(TheiaDiagramServer).inSingletonScope()
        container.rebind(KeyTool).to(TheiaKeyTool).inSingletonScope()
        return container
    }
}

createContainer(widgetId: string): Container {
        const container = createYangDiagramContainer(widgetId)
        container.bind(YangDiagramServer).toSelf().inSingletonScope();
        container.bind(TheiaDiagramServer).toService(YangDiagramServer);
        container.bind(LSTheiaDiagramServer).toService(YangDiagramServer);
        container.bind(TYPES.ModelSource).toService(TheiaDiagramServer);
        container.bind(EditDiagramLocker).toSelf().inSingletonScope()
        container.rebind(KeyTool).to(TheiaKeyTool).inSingletonScope();

        container.bind(LSTheiaDiagramServerProvider).toProvider((context) => {
            return () => {
                return new Promise((resolve) => {
                    resolve(context.container.get(LSTheiaDiagramServer));
                });
            };
        });

        return container
    }
}

    constructor(@inject(TYPES.ModelSource) protected readonly modelSource: DepGraphModelSource) {}