molstar 4.0.1 → 4.2.0

package/lib/mol-repr/volume/representation.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -229,6 +229,9 @@ export function VolumeVisual(builder, materialId) {
         setTransparency(transparency) {
             return Visual.setTransparency(renderObject, transparency, lociApply, true);
         },
+        setEmissive(emissive) {
+            return Visual.setEmissive(renderObject, emissive, lociApply, true);
+        },
         setSubstance(substance) {
             return Visual.setSubstance(renderObject, substance, lociApply, true);
         },
@@ -336,6 +339,8 @@ export function VolumeRepresentation(label, ctx, getParams, visualCtor, getLoci,
             visual.setOverpaint(state.overpaint);
         if (state.transparency !== undefined && visual)
             visual.setTransparency(state.transparency);
+        if (state.emissive !== undefined && visual)
+            visual.setEmissive(state.emissive);
         if (state.substance !== undefined && visual)
             visual.setSubstance(state.substance);
         if (state.clipping !== undefined && visual)
@@ -346,7 +351,7 @@ export function VolumeRepresentation(label, ctx, getParams, visualCtor, getLoci,
             visual.setThemeStrength(state.themeStrength);
     }
     function setState(state) {
-        const { visible, alphaFactor, pickable, overpaint, transparency, substance, clipping, transform, themeStrength, syncManually, markerActions } = state;
+        const { visible, alphaFactor, pickable, overpaint, transparency, emissive, substance, clipping, transform, themeStrength, syncManually, markerActions } = state;
         const newState = {};
         if (visible !== undefined)
             newState.visible = visible;
@@ -358,6 +363,8 @@ export function VolumeRepresentation(label, ctx, getParams, visualCtor, getLoci,
             newState.overpaint = overpaint;
         if (transparency !== undefined)
             newState.transparency = transparency;
+        if (emissive !== undefined)
+            newState.emissive = emissive;
         if (substance !== undefined)
             newState.substance = substance;
         if (clipping !== undefined)

package/lib/mol-repr/volume/segment.d.ts

@@ -68,6 +68,7 @@ export declare function SegmentVisual(materialId: number, volume: Volume, key: n
             scale: any;
         }>[];
     }>>;
+    emissive: PD.Numeric;
     instanceGranularity: PD.BooleanParam;
     lod: PD.Vec3;
     cellSize: PD.Numeric;
@@ -125,6 +126,7 @@ export declare const SegmentMeshParams: {
             scale: any;
         }>[];
     }>>;
+    emissive: PD.Numeric;
     instanceGranularity: PD.BooleanParam;
     lod: PD.Vec3;
     cellSize: PD.Numeric;
@@ -184,6 +186,7 @@ export declare const SegmentParams: {
             scale: any;
         }>[];
     }>>;
+    emissive: PD.Numeric;
     instanceGranularity: PD.BooleanParam;
     lod: PD.Vec3;
     cellSize: PD.Numeric;
@@ -241,6 +244,7 @@ export declare function getSegmentParams(ctx: ThemeRegistryContext, volume: Volu
             scale: any;
         }>[];
     }>>;
+    emissive: PD.Numeric;
     instanceGranularity: PD.BooleanParam;
     lod: PD.Vec3;
     cellSize: PD.Numeric;
@@ -299,6 +303,7 @@ export declare const SegmentRepresentationProvider: VolumeRepresentationProvider
             scale: any;
         }>[];
     }>>;
+    emissive: PD.Numeric;
     instanceGranularity: PD.BooleanParam;
     lod: PD.Vec3;
     cellSize: PD.Numeric;

package/lib/mol-repr/volume/slice.d.ts

@@ -75,6 +75,7 @@ export declare const SliceParams: {
             scale: any;
         }>[];
     }>>;
+    emissive: PD.Numeric;
     instanceGranularity: PD.BooleanParam;
     lod: PD.Vec3;
     cellSize: PD.Numeric;
@@ -145,6 +146,7 @@ export declare function getSliceParams(ctx: ThemeRegistryContext, volume: Volume
             scale: any;
         }>[];
     }>>;
+    emissive: PD.Numeric;
     instanceGranularity: PD.BooleanParam;
     lod: PD.Vec3;
     cellSize: PD.Numeric;
@@ -216,6 +218,7 @@ export declare const SliceRepresentationProvider: VolumeRepresentationProvider<{
             scale: any;
         }>[];
     }>>;
+    emissive: PD.Numeric;
     instanceGranularity: PD.BooleanParam;
     lod: PD.Vec3;
     cellSize: PD.Numeric;

package/lib/mol-script/language/symbol-table/core.d.ts

@@ -14,9 +14,9 @@ export declare namespace Types {
     const AnyValueVar: Type.Variable<any>;
     const ConstrainedVar: Type.Variable<any>;
     const Regex: Type.Value<RegExp>;
-    const Set: <T extends Type>(t?: T | undefined) => Type.Container<Set<T["@type"]>>;
-    const List: <T extends Type>(t?: T | undefined) => Type.Container<List<T["@type"]>>;
-    const Fn: <T extends Type>(t?: T | undefined, alias?: string) => Type.Container<(env: any) => T["@type"]>;
+    const Set: <T extends Type>(t?: T) => Type.Container<Set<T["@type"]>>;
+    const List: <T extends Type>(t?: T) => Type.Container<List<T["@type"]>>;
+    const Fn: <T extends Type>(t?: T, alias?: string) => Type.Container<(env: any) => T['@type']>;
     const Flags: <T extends Type>(t: T, alias?: string) => Type.Container<number>;
     const BitFlags: Type.Container<number>;
 }

package/lib/mol-state/tree/immutable.d.ts

@@ -76,7 +76,7 @@ declare namespace StateTree {
     /**
      * Get all nodes in a subtree, leafs come first.
      */
-    export function subtreePostOrder(tree: StateTree, root: StateTransform): StateTransform<import("../transformer").StateTransformer<import("../object").StateObject<any, import("../object").StateObject.Type<any>>, import("../object").StateObject<any, import("../object").StateObject.Type<any>>, any>>[];
+    export function subtreePostOrder(tree: StateTree, root: StateTransform): StateTransform<import("..").StateTransformer<import("..").StateObject<any, import("..").StateObject.Type<any>>, import("..").StateObject<any, import("..").StateObject.Type<any>>, any>>[];
     export interface Serialized {
         /** Transforms serialized in pre-order */
         transforms: StateTransform.Serialized[];

package/lib/mol-state/tree/transient.d.ts

@@ -22,7 +22,7 @@ declare class TransientTree implements StateTree {
     private changeNodes;
     private changeChildren;
     private changeDependencies;
-    get root(): StateTransform<import("../transformer").StateTransformer<import("../object").StateObject<any, import("../object").StateObject.Type<any>>, import("../object").StateObject<any, import("../object").StateObject.Type<any>>, any>>;
+    get root(): StateTransform<import("..").StateTransformer<import("..").StateObject<any, import("..").StateObject.Type<any>>, import("..").StateObject<any, import("..").StateObject.Type<any>>, any>>;
     asTransient(): TransientTree;
     private addChild;
     private removeChild;
@@ -34,7 +34,7 @@ declare class TransientTree implements StateTree {
     setParams(ref: StateTransform.Ref, params: any): boolean;
     /** Calls Transform.definition.params.areEqual if available, otherwise uses shallowEqual to check if the params changed */
     setTags(ref: StateTransform.Ref, tags: string | string[] | undefined): boolean;
-    assignState(ref: StateTransform.Ref, state?: Partial<StateTransform.State>): StateTransform<import("../transformer").StateTransformer<import("../object").StateObject<any, import("../object").StateObject.Type<any>>, import("../object").StateObject<any, import("../object").StateObject.Type<any>>, any>>;
+    assignState(ref: StateTransform.Ref, state?: Partial<StateTransform.State>): StateTransform<import("..").StateTransformer<import("..").StateObject<any, import("..").StateObject.Type<any>>, import("..").StateObject<any, import("..").StateObject.Type<any>>, any>>;
     remove(ref: StateTransform.Ref): StateTransform[];
     asImmutable(): StateTree;
     constructor(tree: StateTree);

package/lib/mol-theme/color/external-volume.d.ts

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Cai Huiyu <szmun.caihy@gmail.com>
  */
 import type { ColorTheme } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
@@ -27,6 +28,7 @@ export declare const ExternalVolumeColorThemeParams: {
         };
     }>, "relative-value">>;
     defaultColor: PD.Color;
+    normalOffset: PD.Numeric;
 };
 export type ExternalVolumeColorThemeParams = typeof ExternalVolumeColorThemeParams;
 export declare function ExternalVolumeColorTheme(ctx: ThemeDataContext, props: PD.Values<ExternalVolumeColorThemeParams>): ColorTheme<ExternalVolumeColorThemeParams>;

package/lib/mol-theme/color/external-volume.js

@@ -1,7 +1,8 @@
 /**
- * Copyright (c) 2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Cai Huiyu <szmun.caihy@gmail.com>
  */
 import { Color, ColorScale } from '../../mol-util/color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
@@ -10,7 +11,7 @@ import { isPositionLocation } from '../../mol-geo/util/location-iterator';
 import { Mat4, Vec3 } from '../../mol-math/linear-algebra';
 import { lerp } from '../../mol-math/interpolate';
 import { ColorThemeCategory } from './categories';
-const Description = `Assigns a color based volume value at a given vertex.`;
+const Description = `Assigns a color based on volume value at a given vertex.`;
 export const ExternalVolumeColorThemeParams = {
     volume: PD.ValueRef((ctx) => {
         const volumes = ctx.state.data.selectQ(q => q.root.subtree().filter(c => { var _a; return Volume.is((_a = c.obj) === null || _a === void 0 ? void 0 : _a.data); }));
@@ -37,6 +38,7 @@ export const ExternalVolumeColorThemeParams = {
         })
     }),
     defaultColor: PD.Color(Color(0xcccccc)),
+    normalOffset: PD.Numeric(0., { min: 0, max: 20, step: 0.1 }, { description: 'Offset vertex position along its normal by given amount.' }),
 };
 export function ExternalVolumeColorTheme(ctx, props) {
     let volume;
@@ -74,7 +76,11 @@ export function ExternalVolumeColorTheme(ctx, props) {
             if (!isPositionLocation(location)) {
                 return props.defaultColor;
             }
+            // Offset the vertex position along its normal
             Vec3.copy(gridCoords, location.position);
+            if (props.normalOffset > 0) {
+                Vec3.scaleAndAdd(gridCoords, gridCoords, location.normal, props.normalOffset);
+            }
             Vec3.transformMat4(gridCoords, gridCoords, cartnToGrid);
             const i = Math.floor(gridCoords[0]);
             const j = Math.floor(gridCoords[1]);

package/lib/mol-theme/color.d.ts

@@ -1029,6 +1029,7 @@ declare namespace ColorTheme {
                 };
             }>, "relative-value">>;
             defaultColor: PD.Color;
+            normalOffset: PD.Numeric;
         }, "external-volume", ColorType>;
     };
     type _BuiltIn = typeof BuiltIn;

package/lib/mol-theme/emissive.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+import { Loci } from '../mol-model/loci';
+import { Structure, StructureElement } from '../mol-model/structure';
+import { Script } from '../mol-script/script';
+export { Emissive };
+type Emissive<T extends Loci = Loci> = {
+    readonly kind: T['kind'];
+    readonly layers: ReadonlyArray<Emissive.Layer<T>>;
+};
+declare function Emissive<T extends Loci>(kind: T['kind'], layers: ReadonlyArray<Emissive.Layer<T>>): Emissive;
+declare namespace Emissive {
+    type Layer<T extends Loci = Loci> = {
+        readonly loci: T;
+        readonly value: number;
+    };
+    const Empty: Emissive;
+    function areEqual(eA: Emissive, eB: Emissive): boolean;
+    function isEmpty(emissive: Emissive): boolean;
+    function remap(emissive: Emissive, structure: Structure): Emissive;
+    function merge(emissive: Emissive): Emissive;
+    function filter(emissive: Emissive, filter: Structure): Emissive;
+    type ScriptLayer = {
+        script: Script;
+        value: number;
+    };
+    function ofScript(scriptLayers: ScriptLayer[], structure: Structure): Emissive;
+    type BundleLayer = {
+        bundle: StructureElement.Bundle;
+        value: number;
+    };
+    function ofBundle(bundleLayers: BundleLayer[], structure: Structure): Emissive;
+    function toBundle(emissive: Emissive<StructureElement.Loci>): {
+        kind: string;
+        layers: BundleLayer[];
+    };
+}

package/lib/mol-theme/emissive.js

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+import { Loci } from '../mol-model/loci';
+import { StructureElement } from '../mol-model/structure';
+import { Script } from '../mol-script/script';
+export { Emissive };
+function Emissive(kind, layers) {
+    return { kind, layers };
+}
+(function (Emissive) {
+    Emissive.Empty = { kind: 'empty-loci', layers: [] };
+    function areEqual(eA, eB) {
+        if (eA.layers.length === 0 && eB.layers.length === 0)
+            return true;
+        if (eA.layers.length !== eB.layers.length)
+            return false;
+        for (let i = 0, il = eA.layers.length; i < il; ++i) {
+            if (eA.layers[i].value !== eB.layers[i].value)
+                return false;
+            if (!Loci.areEqual(eA.layers[i].loci, eB.layers[i].loci))
+                return false;
+        }
+        return true;
+    }
+    Emissive.areEqual = areEqual;
+    function isEmpty(emissive) {
+        return emissive.layers.length === 0;
+    }
+    Emissive.isEmpty = isEmpty;
+    function remap(emissive, structure) {
+        if (emissive.kind === 'element-loci') {
+            const layers = [];
+            for (const layer of emissive.layers) {
+                let { loci, value } = layer;
+                loci = StructureElement.Loci.remap(loci, structure);
+                if (!StructureElement.Loci.isEmpty(loci)) {
+                    layers.push({ loci, value });
+                }
+            }
+            return { kind: 'element-loci', layers };
+        }
+        else {
+            return emissive;
+        }
+    }
+    Emissive.remap = remap;
+    function merge(emissive) {
+        if (isEmpty(emissive))
+            return emissive;
+        if (emissive.kind === 'element-loci') {
+            const { structure } = emissive.layers[0].loci;
+            const map = new Map();
+            let shadowed = StructureElement.Loci.none(structure);
+            for (let i = 0, il = emissive.layers.length; i < il; ++i) {
+                let { loci, value } = emissive.layers[il - i - 1]; // process from end
+                loci = StructureElement.Loci.subtract(loci, shadowed);
+                shadowed = StructureElement.Loci.union(loci, shadowed);
+                if (!StructureElement.Loci.isEmpty(loci)) {
+                    if (map.has(value)) {
+                        loci = StructureElement.Loci.union(loci, map.get(value));
+                    }
+                    map.set(value, loci);
+                }
+            }
+            const layers = [];
+            map.forEach((loci, value) => {
+                layers.push({ loci, value });
+            });
+            return { kind: 'element-loci', layers };
+        }
+        else {
+            return emissive;
+        }
+    }
+    Emissive.merge = merge;
+    function filter(emissive, filter) {
+        if (isEmpty(emissive))
+            return emissive;
+        if (emissive.kind === 'element-loci') {
+            const { structure } = emissive.layers[0].loci;
+            const layers = [];
+            for (const layer of emissive.layers) {
+                let { loci, value } = layer;
+                // filter by first map to the `filter` structure and
+                // then map back to the original structure of the emissive loci
+                const filtered = StructureElement.Loci.remap(loci, filter);
+                loci = StructureElement.Loci.remap(filtered, structure);
+                if (!StructureElement.Loci.isEmpty(loci)) {
+                    layers.push({ loci, value });
+                }
+            }
+            return { kind: 'element-loci', layers };
+        }
+        else {
+            return emissive;
+        }
+    }
+    Emissive.filter = filter;
+    function ofScript(scriptLayers, structure) {
+        const layers = [];
+        for (let i = 0, il = scriptLayers.length; i < il; ++i) {
+            const { script, value } = scriptLayers[i];
+            const loci = Script.toLoci(script, structure);
+            if (!StructureElement.Loci.isEmpty(loci)) {
+                layers.push({ loci, value });
+            }
+        }
+        return { kind: 'element-loci', layers };
+    }
+    Emissive.ofScript = ofScript;
+    function ofBundle(bundleLayers, structure) {
+        const layers = [];
+        for (let i = 0, il = bundleLayers.length; i < il; ++i) {
+            const { bundle, value } = bundleLayers[i];
+            const loci = StructureElement.Bundle.toLoci(bundle, structure.root);
+            layers.push({ loci, value });
+        }
+        return { kind: 'element-loci', layers };
+    }
+    Emissive.ofBundle = ofBundle;
+    function toBundle(emissive) {
+        const layers = [];
+        for (let i = 0, il = emissive.layers.length; i < il; ++i) {
+            const { loci, value } = emissive.layers[i];
+            const bundle = StructureElement.Bundle.fromLoci(loci);
+            layers.push({ bundle, value });
+        }
+        return { kind: 'element-loci', layers };
+    }
+    Emissive.toBundle = toBundle;
+})(Emissive || (Emissive = {}));

package/lib/mol-theme/substance.d.ts

@@ -21,7 +21,7 @@ declare namespace Substance {
     };
     const Empty: Substance;
     function areEqual(sA: Substance, sB: Substance): boolean;
-    function isEmpty(overpaint: Substance): boolean;
+    function isEmpty(substance: Substance): boolean;
     function remap(substance: Substance, structure: Structure): Substance;
     function merge(substance: Substance): Substance;
     function filter(substance: Substance, filter: Structure): Substance;

package/lib/mol-theme/substance.js

@@ -30,8 +30,8 @@ function Substance(kind, layers) {
         return true;
     }
     Substance.areEqual = areEqual;
-    function isEmpty(overpaint) {
-        return overpaint.layers.length === 0;
+    function isEmpty(substance) {
+        return substance.layers.length === 0;
     }
     Substance.isEmpty = isEmpty;
     function remap(substance, structure) {

package/lib/mol-theme/transparency.d.ts

@@ -18,7 +18,6 @@ declare namespace Transparency {
         readonly value: number;
     };
     const Empty: Transparency;
-    type Variant = 'single' | 'multi';
     function areEqual(tA: Transparency, tB: Transparency): boolean;
     function isEmpty(transparency: Transparency): boolean;
     function remap(transparency: Transparency, structure: Structure): Transparency;

package/lib/mol-util/input/input-observer.js

@@ -641,6 +641,8 @@ var InputObserver;
             gestureDelta(ev, true);
         }
         function onResize() {
+            width = element.clientWidth * pixelRatio();
+            height = element.clientHeight * pixelRatio();
             resize.next({});
         }
         function insideBounds(pos) {

package/lib/mol-util/set.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/mol-util/set.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2023 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -12,6 +12,8 @@ export var SetUtils;
     SetUtils.toArray = toArray;
     /** Test if set a contains all elements of set b. */
     function isSuperset(setA, setB) {
+        if (setA === setB)
+            return true;
         if (setA.size < setB.size)
             return false;
         for (const elem of setB) {
@@ -33,6 +35,8 @@ export var SetUtils;
     /** Create set containing elements of both set a and set b. */
     function union(setA, setB) {
         const union = new Set(setA);
+        if (setA === setB)
+            return union;
         for (const elem of setB)
             union.add(elem);
         return union;
@@ -62,6 +66,8 @@ export var SetUtils;
     SetUtils.unionManyArrays = unionManyArrays;
     /** Create set containing elements of set a that are also in set b. */
     function intersection(setA, setB) {
+        if (setA === setB)
+            return new Set(setA);
         const intersection = new Set();
         for (const elem of setB) {
             if (setA.has(elem))
@@ -71,6 +77,8 @@ export var SetUtils;
     }
     SetUtils.intersection = intersection;
     function areIntersecting(setA, setB) {
+        if (setA === setB)
+            return setA.size > 0;
         if (setA.size < setB.size)
             [setA, setB] = [setB, setA];
         for (const elem of setB) {
@@ -81,6 +89,8 @@ export var SetUtils;
     }
     SetUtils.areIntersecting = areIntersecting;
     function intersectionSize(setA, setB) {
+        if (setA === setB)
+            return setA.size;
         if (setA.size < setB.size)
             [setA, setB] = [setB, setA];
         let count = 0;
@@ -93,6 +103,8 @@ export var SetUtils;
     SetUtils.intersectionSize = intersectionSize;
     /** Create set containing elements of set a that are not in set b. */
     function difference(setA, setB) {
+        if (setA === setB)
+            return new Set();
         const difference = new Set(setA);
         for (const elem of setB)
             difference.delete(elem);
@@ -101,6 +113,8 @@ export var SetUtils;
     SetUtils.difference = difference;
     /** Number of elements that are in set a but not in set b. */
     function differenceSize(setA, setB) {
+        if (setA === setB)
+            return 0;
         let count = setA.size;
         for (const elem of setA) {
             if (setB.has(elem))
@@ -111,6 +125,8 @@ export var SetUtils;
     SetUtils.differenceSize = differenceSize;
     /** Test if set a and b contain the same elements. */
     function areEqual(setA, setB) {
+        if (setA === setB)
+            return true;
         if (setA.size !== setB.size)
             return false;
         for (const elem of setB) {

package/lib/servers/common/swagger-ui/indexTemplate.js

@@ -1,67 +1,67 @@
-export const indexTemplate = `<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <title>\${title}</title>
-        <link rel="stylesheet" type="text/css" href="\${apiPrefix}/swagger-ui.css" >
-        \${shortcutIconLink}
-
-        <style>
-            html
-            {
-                box-sizing: border-box;
-                overflow: -moz-scrollbars-vertical;
-                overflow-y: scroll;
-            }
-            *,
-            *:before,
-            *:after
-            {
-                box-sizing: inherit;
-            }
-            body
-            {
-                margin:0;
-                background: #fafafa;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="swagger-ui"></div>
-
-        <script src="\${apiPrefix}/swagger-ui-bundle.js"> </script>
-        <script src="\${apiPrefix}/swagger-ui-standalone-preset.js"> </script>
-        <script>
-            function HidePlugin() {
-                // this plugin overrides some components to return nothing
-                return {
-                    components: {
-                        Topbar: function () { return null },
-                        Models: function () { return null },
-                    }
-                }
-            }
-            window.onload = function () {
-                var ui = SwaggerUIBundle({
-                    url: '\${openapiJsonUrl}',
-                    validatorUrl: null,
-                    docExpansion: 'list',
-                    dom_id: '#swagger-ui',
-                    deepLinking: true,
-                    presets: [
-                        SwaggerUIBundle.presets.apis,
-                        SwaggerUIStandalonePreset
-                    ],
-                    syntaxHighlight: { activated: false, theme: 'agate' },
-                    plugins: [
-                        SwaggerUIBundle.plugins.DownloadUrl,
-                        HidePlugin
-                    ],
-                    layout: 'StandaloneLayout'
-                })
-                window.ui = ui
-            }
-        </script>
-    </body>
+export const indexTemplate = `<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>\${title}</title>
+        <link rel="stylesheet" type="text/css" href="\${apiPrefix}/swagger-ui.css" >
+        \${shortcutIconLink}
+
+        <style>
+            html
+            {
+                box-sizing: border-box;
+                overflow: -moz-scrollbars-vertical;
+                overflow-y: scroll;
+            }
+            *,
+            *:before,
+            *:after
+            {
+                box-sizing: inherit;
+            }
+            body
+            {
+                margin:0;
+                background: #fafafa;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="swagger-ui"></div>
+
+        <script src="\${apiPrefix}/swagger-ui-bundle.js"> </script>
+        <script src="\${apiPrefix}/swagger-ui-standalone-preset.js"> </script>
+        <script>
+            function HidePlugin() {
+                // this plugin overrides some components to return nothing
+                return {
+                    components: {
+                        Topbar: function () { return null },
+                        Models: function () { return null },
+                    }
+                }
+            }
+            window.onload = function () {
+                var ui = SwaggerUIBundle({
+                    url: '\${openapiJsonUrl}',
+                    validatorUrl: null,
+                    docExpansion: 'list',
+                    dom_id: '#swagger-ui',
+                    deepLinking: true,
+                    presets: [
+                        SwaggerUIBundle.presets.apis,
+                        SwaggerUIStandalonePreset
+                    ],
+                    syntaxHighlight: { activated: false, theme: 'agate' },
+                    plugins: [
+                        SwaggerUIBundle.plugins.DownloadUrl,
+                        HidePlugin
+                    ],
+                    layout: 'StandaloneLayout'
+                })
+                window.ui = ui
+            }
+        </script>
+    </body>
 </html>`;