Tunnels extension (#1105)

* create algorithm * create props * create representation * add examples * add providers to index * updated tunnel props * updated tunnel transformers * add interpolation and sampleRate * rename tunnel example * update examples * add headers * add author to contributors * fix runVisualizeTunnel example * add docs for tunnels extension * create action to download tunnels * add download tunnels to viewer * fix description for shape provider * update docs * rename props to data-model * rename transformers * add headers * add url to PluginConfig * fix ChannelsDB type * reimplement interpolation * fix geometry condition * remove fillFactor * rename projectTunnel to index * fix samplingRate * remove fillFactor * rename loci to highlight_label * fix functions args * create preset for structure tunnels * rename ids * change preset to show all tunnels --------- Co-authored-by: Dušan Veľký <velky.dusko@gmail.com>
2026-06-04 13:30:24 +08:00 · 2024-05-08 15:37:59 +02:00
parent d98350cfb2
commit 443fc9c60c
12 changed files with 1255 additions and 3 deletions
--- a/docs/docs/extensions/tunnels.md
+++ b/docs/docs/extensions/tunnels.md
@@ -0,0 +1,118 @@
+# Tunnel Visualization Extension
+This documentation outlines the usage of the Mol* extension for visualizing tunnels in molecular structures. The extension integrates with Mol* to render 3D representations of tunnels using specified data sources and properties.
+
+The extension is a key component in ChannelsDB, enabling users to visualize tunnels within molecules directly from the database. While it is used with ChannelsDB, users can also input their own data or connect to different databases, ensuring versatility across various research environments.
+
+## Data Types
+The primary data types involved in tunnel visualization are:
+
+### Tunnel
+A Tunnel object contains the actual tunnel data necessary for visualization. It consists of:
+
+- `data`: An array of `Profile` objects that describe the tunnel at various points.
+- `props`: Properties such as the tunnel's type, ID, and optional labels or descriptions.
+
+### Profile
+A `Profile` object in a `Tunnel` holds detailed geometric and physical properties of a tunnel at specific points along its length. These properties include:
+
+- `Charge`: The electric charge at a specific point in the tunnel.
+- `Radius`: The overall radius of the tunnel at this point.
+- `FreeRadius`: The radius of the tunnel not obstructed by any molecular elements.
+- `T`: Temperature factor or a similar property related to the point.
+- `Distance`: Distance along the tunnel's path from the start.
+- `X`, `Y`, `Z`: Coordinates of the point in 3D space.
+
+These profiles are crucial for understanding the physical and chemical environment inside the tunnel, allowing for detailed analysis and visualization.
+
+Example:
+```json
+"Profile": [
+    {
+        "Radius": 1.49,
+        "FreeRadius": 1.49,
+        "T": 0,
+        "Distance": 0,
+        "X": -19.152,
+        "Y": -22.654,
+        "Z": -13.034,
+        "Charge": 0
+    },
+    {
+        "Radius": 1.524,
+        "FreeRadius": 1.524,
+        "T": 0.00625,
+        "Distance": 0.087,
+        "X": -19.162,
+        "Y": -22.596,
+        "Z": -12.969,
+        "Charge": 0
+    },
+    {
+        "Radius": 1.56,
+        "FreeRadius": 1.56,
+        "T": 0.0125,
+        "Distance": 0.174,
+        "X": -19.171,
+        "Y": -22.539,
+        "Z": -12.905,
+        "Charge": 0
+    }
+]
+```
+## Transformers Usage
+The extension uses several transformations to process and visualize tunnel data:
+
+### Tunnels Data Transformer
+- `Purpose`: Converts a collection of Tunnel data into a state object.
+- `Usage`:
+    ```typescript
+    update.toRoot().apply(TunnelsFromRawData, { data: tunnels });
+    ```
+
+### Tunnel Data Provider
+- `Purpose`: Converts single Tunnel data into a state object for individual processing.
+- `Usage`:
+    ```typescript
+    update.toRoot().apply(TunnelFromRawData, { 
+        data: { 
+            data: tunnel.Profile, 
+            props: { id: tunnel.Id, type: tunnel.Type } 
+        } 
+    });
+    ```
+
+### Tunnel Shape Provider
+- `Purpose`: Provides the shapes for rendering the tunnel based on WebGL context and shape parameters.
+- `Usage`:
+    ```typescript
+    update.apply(TunnelShapeProvider, {
+        webgl,
+    }).apply(StateTransforms.Representation.ShapeRepresentation3D);
+    ```
+
+## Visualization Examples
+To help users understand how to use these transformations in practice, include detailed examples:
+
+### Visualizing Multiple Tunnels
+This example ([runVisualizeTunnels](../../../src/extensions/sb-ncbr/tunnels/examples.ts#L19)) demonstrates how to visualize multiple tunnels from a fetched dataset.
+```typescript
+update.toRoot()
+        .apply(TunnelsFromRawData, { data: tunnels })
+        .apply(SelectTunnel)
+        .apply(TunnelShapeProvider, { webgl })
+        .apply(StateTransforms.Representation.ShapeRepresentation3D);
+```
+
+### Visualizing a Single Tunnel
+This example ([runVisualizeTunnel](../../../src/extensions/sb-ncbr/tunnels/examples.ts#L46)) shows how to visualize a single tunnel.
+```typescript
+update.toRoot()
+        .apply(TunnelFromRawData, { 
+            data: { 
+                data: tunnel.Profile,
+                props: { id: tunnel.Id, type: tunnel.Type }
+            }
+        })
+        .apply(TunnelShapeProvider, { webgl })
+        .apply(StateTransforms.Representation.ShapeRepresentation3D);
+```
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -53,6 +53,7 @@ nav:
  - Extensions:
    - MolViewSpec: 'extensions/mvs/index.md'
    - wwPDB StructConn: 'extensions/struct-conn.md'
+    - Tunnels: 'extensions/tunnels.md'
  - Misc:
    - Interesting PDB entries: misc/interesting-pdb-entries.md
 repo_url: https://github.com/molstar/docs
--- a/package.json
+++ b/package.json
@@ -106,7 +106,8 @@
    "Yakov Pechersky <ffxen158@gmail.com>",
    "Christian Dominguez <christian.99dominguez@gmail.com>",
    "Cai Huiyu <szmun.caihy@gmail.com>",
-    "Ryan DiRisio <rjdiris@gmail.com>"
+    "Ryan DiRisio <rjdiris@gmail.com>",
+    "Dušan Veľký <dvelky@mail.muni.cz>"
  ],
  "license": "MIT",
  "devDependencies": {
--- a/src/apps/viewer/app.ts
+++ b/src/apps/viewer/app.ts
@@ -21,7 +21,7 @@ import { MVSData } from '../../extensions/mvs/mvs-data';
 import { PDBeStructureQualityReport } from '../../extensions/pdbe';
 import { RCSBValidationReport } from '../../extensions/rcsb';
 import { AssemblySymmetry, AssemblySymmetryConfig } from '../../extensions/assembly-symmetry';
-import { SbNcbrPartialCharges, SbNcbrPartialChargesPreset, SbNcbrPartialChargesPropertyProvider } from '../../extensions/sb-ncbr';
+import { SbNcbrPartialCharges, SbNcbrPartialChargesPreset, SbNcbrPartialChargesPropertyProvider, SbNcbrTunnels } from '../../extensions/sb-ncbr';
 import { Volseg, VolsegVolumeServerConfig } from '../../extensions/volumes-and-segmentations';
 import { wwPDBChemicalComponentDictionary } from '../../extensions/wwpdb/ccd/behavior';
 import { wwPDBStructConnExtensionFunctions } from '../../extensions/wwpdb/struct-conn';
@@ -81,6 +81,7 @@ export const ExtensionMap = {
    'sb-ncbr-partial-charges': PluginSpec.Behavior(SbNcbrPartialCharges),
    'wwpdb-chemical-component-dictionary': PluginSpec.Behavior(wwPDBChemicalComponentDictionary),
    'mvs': PluginSpec.Behavior(MolViewSpec),
+    'tunnels': PluginSpec.Behavior(SbNcbrTunnels),
 };

 const DefaultViewerOptions = {
--- a/src/extensions/sb-ncbr/index.ts
+++ b/src/extensions/sb-ncbr/index.ts
@@ -1,3 +1,12 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Dominik Tichý <tichydominik451@gmail.com>
+ * @author Dušan Veľký <dvelky@mail.muni.cz>
+ */
+
 export { SbNcbrPartialCharges } from './partial-charges/behavior';
 export { SbNcbrPartialChargesPreset } from './partial-charges/preset';
-export { SbNcbrPartialChargesPropertyProvider } from './partial-charges/property';
+export { SbNcbrPartialChargesPropertyProvider } from './partial-charges/property';
+export { SbNcbrTunnels } from './tunnels/behavior';
+export { TunnelsFromRawData, SelectTunnel, TunnelFromRawData, TunnelShapeProvider } from './tunnels/representation';
--- a/src/extensions/sb-ncbr/tunnels/actions.ts
+++ b/src/extensions/sb-ncbr/tunnels/actions.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Dušan Veľký <dvelky@mail.muni.cz>
+ */
+
+import { PluginStateObject } from '../../../mol-plugin-state/objects';
+import { StateTransforms } from '../../../mol-plugin-state/transforms';
+import { PluginContext } from '../../../mol-plugin/context';
+import { StateAction } from '../../../mol-state';
+import { Task } from '../../../mol-task';
+import { Asset } from '../../../mol-util/assets';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { assertUnreachable } from '../../../mol-util/type-helpers';
+import { ChannelsDBdata, Tunnel, TunnelDB } from './data-model';
+import { TunnelsServerConfig } from './props';
+import { TunnelsFromRawData, SelectTunnel, TunnelShapeProvider } from './representation';
+
+export const TunnelDownloadServer = {
+    'channelsdb': PD.EmptyGroup({ label: 'ChannelsDB' })
+};
+
+type DownloadTunnels = typeof DownloadTunnels
+export const DownloadTunnels = StateAction.build({
+    display: { name: 'Download Tunnels', description: 'Load a tunnels from the provided source and create theirs representations' },
+    from: PluginStateObject.Root,
+    params: (_, plugin: PluginContext) => {
+        return {
+            source: PD.MappedStatic('pdb', {
+                'pdb': PD.Group({
+                    provider: PD.Group({
+                        id: PD.Text('1tqn', { label: 'PDB Id(s)', description: 'One or more comma/space separated PDB ids.' }),
+                        server: PD.MappedStatic('channelsdb', TunnelDownloadServer),
+                    }, { pivot: 'id' }),
+                }, { isFlat: true, label: 'PDB' }),
+                'alphafolddb': PD.Group({
+                    provider: PD.Group({
+                        id: PD.Text('Q8W3K0', { label: 'UniProtKB AC(s)', description: 'One or more comma/space separated ACs.' }),
+                        server: PD.MappedStatic('channelsdb', TunnelDownloadServer),
+                    }, { pivot: 'id' })
+                }, { isFlat: true, label: 'AlphaFold DB', description: 'Loads the predicted model if available' }),
+                'url': PD.Group({
+                    url: PD.Url(''),
+                }, { isFlat: true, label: 'URL' })
+            })
+        };
+    }
+})(({ params, state }, plugin: PluginContext) => Task.create('Download Tunnels', async ctx => {
+    plugin.behaviors.layout.leftPanelTabName.next('data');
+
+    const src = params.source;
+    let downloadParams: PD.Normalize<{ url: string | Asset.Url }>[];
+
+    switch (src.name) {
+        case 'url':
+            downloadParams = [{ url: src.params.url }];
+            break;
+        case 'pdb':
+            downloadParams = src.params.provider.server.name === 'channelsdb'
+                ? [{ url: `${plugin?.config.get(TunnelsServerConfig.DefaultServerUrl)}/channels/pdb/${src.params.provider.id}` }]
+                : assertUnreachable(src as never);
+            break;
+        case 'alphafolddb':
+            downloadParams = src.params.provider.server.name === 'channelsdb'
+                ? [{ url: `${plugin?.config.get(TunnelsServerConfig.DefaultServerUrl)}/channels/alphafill/${src.params.provider.id.toLowerCase()}` }]
+                : assertUnreachable(src as never);
+            break;
+        default: assertUnreachable(src);
+    }
+
+    await state.transaction(async () => {
+        const update = plugin.build();
+        const webgl = plugin.canvas3dContext?.webgl;
+
+        for (const download of downloadParams) {
+            const response = await (await fetch(download.url.toString())).json();
+            const tunnels: Tunnel[] = [];
+
+            Object.entries(response.Channels as ChannelsDBdata).forEach(([key, values]) => {
+                if (values.length > 0) {
+                    values.forEach((item: TunnelDB) => {
+                        tunnels.push({ data: item.Profile, props: { id: item.Id, type: item.Type } });
+                    });
+                }
+            });
+
+            update
+                .toRoot()
+                .apply(TunnelsFromRawData, { data: tunnels })
+                .apply(SelectTunnel)
+                .apply(TunnelShapeProvider, {
+                    webgl,
+                })
+                .apply(StateTransforms.Representation.ShapeRepresentation3D);
+
+            await update.commit();
+        }
+    }).runInContext(ctx);
+}));
--- a/src/extensions/sb-ncbr/tunnels/algorithm.ts
+++ b/src/extensions/sb-ncbr/tunnels/algorithm.ts
@@ -0,0 +1,607 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Dušan Veľký <dvelky@mail.muni.cz>
+ */
+
+import { OrderedSet } from '../../../mol-data/int';
+import { addSphere } from '../../../mol-geo/geometry/mesh/builder/sphere';
+import { Mesh } from '../../../mol-geo/geometry/mesh/mesh';
+import { MeshBuilder } from '../../../mol-geo/geometry/mesh/mesh-builder';
+import { computeMarchingCubesMesh } from '../../../mol-geo/util/marching-cubes/algorithm';
+import { WebGLContext } from '../../../mol-gl/webgl/context';
+import { Texture } from '../../../mol-gl/webgl/texture';
+import { PositionData, Sphere3D, Box3D, GridLookup3D, fillGridDim } from '../../../mol-math/geometry';
+import { Boundary, getBoundary } from '../../../mol-math/geometry/boundary';
+import { DefaultMolecularSurfaceCalculationProps, MolecularSurfaceCalculationProps } from '../../../mol-math/geometry/molecular-surface';
+import { lerp, spline } from '../../../mol-math/interpolate';
+import { Vec3, Tensor, Mat4 } from '../../../mol-math/linear-algebra';
+import { Shape } from '../../../mol-model/shape';
+import { ensureReasonableResolution } from '../../../mol-repr/structure/visual/util/common';
+import { Task, RuntimeContext } from '../../../mol-task';
+import { ValueCell } from '../../../mol-util';
+import { Color } from '../../../mol-util/color';
+import { Tunnel, Profile } from './data-model';
+
+type MolecularSurfaceMeta = {
+    resolution?: number
+    colorTexture?: Texture
+}
+
+export async function createSpheresShape(options: { tunnel: Tunnel, color: Color, resolution: number, sampleRate: number, showRadii: boolean, prev?: Shape<Mesh> }) {
+    const builder = MeshBuilder.createState(512, 512, options.prev?.geometry);
+    const tunnel = options.tunnel;
+
+    const processedData = interpolateTunnel(tunnel.data, options.sampleRate);
+
+    if (options.showRadii) {
+        for (let i = 0; i < processedData.length; i += 1) {
+            const p = processedData[i];
+            builder.currentGroup = i;
+            const center = [p.X, p.Y, p.Z];
+            addSphere(builder, center as Vec3, p.Radius, options.resolution);
+        }
+    } else {
+        for (let i = 0; i < processedData.length; i += 1) {
+            const p = processedData[i];
+            builder.currentGroup = 0;
+            const center = [p.X, p.Y, p.Z];
+            addSphere(builder, center as Vec3, p.Radius, options.resolution);
+        }
+    }
+
+    const mesh = MeshBuilder.getMesh(builder);
+    const name = tunnel.props.highlight_label ?
+        tunnel.props.highlight_label :
+        tunnel.props.type && tunnel.props.id ?
+            `${tunnel.props.type} ${tunnel.props.id}` :
+            'Tunnel';
+
+    if (options.showRadii)
+        return Shape.create(
+            name,
+            tunnel.props,
+            mesh,
+            () => Color(options.color),
+            () => 1,
+            (i) => `[${processedData[i].X.toFixed(3)}, ${processedData[i].Y.toFixed(3)}, ${processedData[i].Z.toFixed(3)}] - radius: ${processedData[i].Radius.toFixed(3)}`,
+        );
+    return Shape.create(
+        name,
+        tunnel.props,
+        mesh,
+        () => Color(options.color),
+        () => 1,
+        () => name,
+    );
+}
+
+export async function createTunnelShape(options: { tunnel: Tunnel, color: Color, resolution: number, sampleRate: number, webgl: WebGLContext | undefined, prev?: Shape<Mesh> }) {
+    const tunnel = options.tunnel;
+    const mesh = await createTunnelMesh(tunnel.data, {
+        detail: options.resolution,
+        sampleRate: options.sampleRate,
+        webgl: options.webgl,
+        prev: options.prev?.geometry
+    });
+
+    const name = tunnel.props.highlight_label ?
+        tunnel.props.highlight_label :
+        tunnel.props.type && tunnel.props.id ?
+            `${tunnel.props.type} ${tunnel.props.id}` :
+            'Tunnel';
+
+    return Shape.create(
+        name,
+        tunnel.props,
+        mesh,
+        () => Color(options.color),
+        () => 1,
+        () => name,
+    );
+}
+
+function profileToVec3(profile: Profile): Vec3 {
+    return Vec3.create(profile.X, profile.Y, profile.Z);
+}
+
+// Centripetal Catmull–Rom spline interpolation
+function interpolateTunnel(profile: Profile[], sampleRate: number) {
+    const interpolatedProfiles: Profile[] = [];
+    if (profile.length < 4) return profile; // Ensuring there are enough points to interpolate
+
+    interpolatedProfiles.push(profile[0]);
+
+    let lastPoint = profileToVec3(profile[0]);
+    let currentDistance = 0;
+    const pointInterval = 1 / sampleRate;
+
+    for (let i = 1; i < profile.length - 2; i++) {
+        const P0 = profile[i - 1];
+        const P1 = profile[i];
+        const P2 = profile[i + 1];
+        const P3 = profile[i + 2];
+
+        for (let t = 0; t <= 1; t += 0.05) {
+            const interpolatedX = spline(P0.X, P1.X, P2.X, P3.X, t, 0.5);
+            const interpolatedY = spline(P0.Y, P1.Y, P2.Y, P3.Y, t, 0.5);
+            const interpolatedZ = spline(P0.Z, P1.Z, P2.Z, P3.Z, t, 0.5);
+            const interpolatedPoint = Vec3.create(interpolatedX, interpolatedY, interpolatedZ);
+
+            const distanceToAdd = Vec3.distance(lastPoint, interpolatedPoint);
+            currentDistance += distanceToAdd;
+
+            if (currentDistance >= pointInterval) {
+                interpolatedProfiles.push({
+                    X: interpolatedX,
+                    Y: interpolatedY,
+                    Z: interpolatedZ,
+                    Radius: spline(P0.Radius, P1.Radius, P2.Radius, P3.Radius, t, 0.5),
+                    Charge: lerp(P1.Charge, P2.Charge, t),
+                    FreeRadius: spline(P0.FreeRadius, P1.FreeRadius, P2.FreeRadius, P3.FreeRadius, t, 0.5),
+                    T: lerp(P1.T, P2.T, t),
+                    Distance: lerp(P1.Distance, P2.Distance, t)
+                });
+                lastPoint = interpolatedPoint;
+                currentDistance -= pointInterval;
+            }
+        }
+    }
+
+    // Ensuring the last profile point is included
+    interpolatedProfiles.push(profile[profile.length - 1]);
+
+    return interpolatedProfiles;
+}
+
+
+function convertToPositionData(profile: Profile[], probeRadius: number): Required<PositionData> {
+    let position = {} as PositionData;
+
+    const x: number[] = [];
+    const y: number[] = [];
+    const z: number[] = [];
+    const indices: Array<number> = [];
+    const radius: number[] = [];
+
+    let maxRadius: number = Number.MIN_SAFE_INTEGER;
+
+    let sphereCounter = 0;
+    for (const sphere of profile) {
+        x.push(sphere.X);
+        y.push(sphere.Y);
+        z.push(sphere.Z);
+        indices.push(sphereCounter);
+        radius.push(sphere.Radius + probeRadius);
+        if (sphere.Radius > maxRadius) maxRadius = sphere.Radius;
+        sphereCounter++;
+    }
+
+    position = { x, y, z, indices: OrderedSet.ofSortedArray(indices), radius, id: indices };
+
+    return position as Required<PositionData>;
+}
+
+async function createTunnelMesh(
+    data: Profile[],
+    options: {
+        detail: number,
+        sampleRate: number,
+        webgl?: WebGLContext,
+        prev?: Mesh
+    }
+) {
+    const props = {
+        ...DefaultMolecularSurfaceCalculationProps,
+    };
+    const preprocessedData = interpolateTunnel(data, options.sampleRate);
+    const positions = convertToPositionData(preprocessedData, props.probeRadius);
+    const bounds: Boundary = getBoundary(positions);
+
+    let maxR = 0;
+    for (let i = 0; i < positions.radius.length; ++i) {
+        const r = positions.radius[i];
+        if (maxR < r) maxR = r;
+    }
+
+    const p = ensureReasonableResolution(bounds.box, props);
+
+    const { field, transform, /* resolution,*/ maxRadius, /* idField */ } = await computeTunnelSurface(
+        {
+            positions,
+            boundary: bounds,
+            maxRadius: maxR,
+            box: bounds.box,
+            props: p
+        }
+    ).run();
+
+    const params = {
+        isoLevel: p.probeRadius,
+        scalarField: field,
+    };
+    const surface = await computeMarchingCubesMesh(params, options.prev).run();
+    const iterations = Math.ceil(2 / 1);
+    Mesh.smoothEdges(surface, { iterations, maxNewEdgeLength: Math.sqrt(2) });
+
+    Mesh.transform(surface, transform);
+    if (options.webgl && !options.webgl.isWebGL2) {
+        Mesh.uniformTriangleGroup(surface);
+        ValueCell.updateIfChanged(surface.varyingGroup, false);
+    } else {
+        ValueCell.updateIfChanged(surface.varyingGroup, true);
+    }
+
+    const sphere = Sphere3D.expand(Sphere3D(), bounds.sphere, maxRadius);
+    surface.setBoundingSphere(sphere);
+    (surface.meta as MolecularSurfaceMeta).resolution = options.detail;
+
+    return surface;
+}
+
+function normalToLine(out: Vec3, p: Vec3) {
+    out[0] = out[1] = out[2] = 1.0;
+    if (p[0] !== 0) {
+        out[0] = (p[1] + p[2]) / -p[0];
+    } else if (p[1] !== 0) {
+        out[1] = (p[0] + p[2]) / -p[1];
+    } else if (p[2] !== 0) {
+        out[2] = (p[0] + p[1]) / -p[2];
+    }
+    return out;
+}
+
+function computeTunnelSurface(
+    surfaceData: {
+        positions: Required<PositionData>,
+        boundary: Boundary,
+        maxRadius: number,
+        box: Box3D | null,
+        props: MolecularSurfaceCalculationProps
+    }
+) {
+    return Task.create('Tunnel Surface', async (ctx) => {
+        return await calcTunnelSurface(ctx, surfaceData);
+    });
+}
+
+type AnglesTables = { cosTable: Float32Array, sinTable: Float32Array }
+function getAngleTables(probePositions: number): AnglesTables {
+    let theta = 0.0;
+    const step = 2 * Math.PI / probePositions;
+
+    const cosTable = new Float32Array(probePositions);
+    const sinTable = new Float32Array(probePositions);
+    for (let i = 0; i < probePositions; i++) {
+        cosTable[i] = Math.cos(theta);
+        sinTable[i] = Math.sin(theta);
+        theta += step;
+    }
+    return { cosTable, sinTable };
+}
+
+// From '../../../\mol-math\geometry\molecular-surface.ts'
+async function calcTunnelSurface(ctx: RuntimeContext,
+    surfaceData: {
+        positions: Required<PositionData>,
+        boundary: Boundary,
+        maxRadius: number,
+        box: Box3D | null,
+        props: MolecularSurfaceCalculationProps
+    }) {
+    // Field generation method adapted from AstexViewer (Mike Hartshorn) by Fred Ludlow.
+    // Other parts based heavily on NGL (Alexander Rose) EDT Surface class
+
+    let lastClip = -1;
+
+    /**
+     * Is the point at x,y,z obscured by any of the atoms specifeid by indices in neighbours.
+     * Ignore indices a and b (these are the relevant atoms in projectPoints/Torii)
+     *
+     * Cache the last clipped atom (as very often the same one in subsequent calls)
+     *
+     * `a` and `b` must be resolved indices
+     */
+    function obscured(x: number, y: number, z: number, a: number, b: number) {
+        if (lastClip !== -1) {
+            const ai = lastClip;
+            if (ai !== a && ai !== b && singleAtomObscures(ai, x, y, z)) {
+                return ai;
+            } else {
+                lastClip = -1;
+            }
+        }
+
+        for (let j = 0, jl = neighbours.count; j < jl; ++j) {
+            const ai = OrderedSet.getAt(indices, neighbours.indices[j]);
+            if (ai !== a && ai !== b && singleAtomObscures(ai, x, y, z)) {
+                lastClip = ai;
+                return ai;
+            }
+        }
+
+        return -1;
+    }
+
+    /**
+     * `ai` must be a resolved index
+     */
+    function singleAtomObscures(ai: number, x: number, y: number, z: number) {
+        const r = radius[ai];
+        const dx = px[ai] - x;
+        const dy = py[ai] - y;
+        const dz = pz[ai] - z;
+        const dSq = dx * dx + dy * dy + dz * dz;
+        return dSq < (r * r);
+    }
+
+    /**
+     * For each atom:
+     *     Iterate over a subsection of the grid, for each point:
+     *         If current value < 0.0, unvisited, set positive
+     *
+     *         In any case: Project this point onto surface of the atomic sphere
+     *         If this projected point is not obscured by any other atom
+     *             Calculate delta distance and set grid value to minimum of
+     *             itself and delta
+     */
+    function projectPointsRange(begI: number, endI: number) {
+        for (let i = begI; i < endI; ++i) {
+            const j = OrderedSet.getAt(indices, i);
+            const vx = px[j], vy = py[j], vz = pz[j];
+            const rad = radius[j];
+            const rSq = rad * rad;
+
+            lookup3d.find(vx, vy, vz, rad);
+
+            // Number of grid points, round this up...
+            const ng = Math.ceil(rad * scaleFactor);
+
+            // Center of the atom, mapped to grid points (take floor)
+            const iax = Math.floor(scaleFactor * (vx - minX));
+            const iay = Math.floor(scaleFactor * (vy - minY));
+            const iaz = Math.floor(scaleFactor * (vz - minZ));
+
+            // Extents of grid to consider for this atom
+            const begX = Math.max(0, iax - ng);
+            const begY = Math.max(0, iay - ng);
+            const begZ = Math.max(0, iaz - ng);
+
+            // Add two to these points:
+            // - iax are floor'd values so this ensures coverage
+            // - these are loop limits (exclusive)
+            const endX = Math.min(dimX, iax + ng + 2);
+            const endY = Math.min(dimY, iay + ng + 2);
+            const endZ = Math.min(dimZ, iaz + ng + 2);
+
+            for (let xi = begX; xi < endX; ++xi) {
+                const dx = gridx[xi] - vx;
+                const xIdx = xi * iuv;
+                for (let yi = begY; yi < endY; ++yi) {
+                    const dy = gridy[yi] - vy;
+                    const dxySq = dx * dx + dy * dy;
+                    const xyIdx = yi * iu + xIdx;
+                    for (let zi = begZ; zi < endZ; ++zi) {
+                        const dz = gridz[zi] - vz;
+                        const dSq = dxySq + dz * dz;
+
+                        if (dSq < rSq) {
+                            const idx = zi + xyIdx;
+
+                            // if unvisited, make positive
+                            if (data[idx] < 0.0) data[idx] *= -1;
+
+                            // Project on to the surface of the sphere
+                            // sp is the projected point ( dx, dy, dz ) * ( ra / d )
+                            const d = Math.sqrt(dSq);
+                            const ap = rad / d;
+                            const spx = dx * ap + vx;
+                            const spy = dy * ap + vy;
+                            const spz = dz * ap + vz;
+
+                            if (obscured(spx, spy, spz, j, -1) === -1) {
+                                const dd = rad - d;
+                                if (dd < data[idx]) {
+                                    data[idx] = dd;
+                                    idData[idx] = id[i];
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    async function projectPoints() {
+        for (let i = 0; i < n; i += updateChunk) {
+            projectPointsRange(i, Math.min(i + updateChunk, n));
+
+            if (ctx.shouldUpdate) {
+                await ctx.update({ message: 'projecting points', current: i, max: n });
+            }
+        }
+    }
+
+    // Vectors for Torus Projection
+    const atob = Vec3();
+    const mid = Vec3();
+    const n1 = Vec3();
+    const n2 = Vec3();
+    /**
+     * `a` and `b` must be resolved indices
+     */
+    function projectTorus(a: number, b: number) {
+        const rA = radius[a];
+        const rB = radius[b];
+        const dx = atob[0] = px[b] - px[a];
+        const dy = atob[1] = py[b] - py[a];
+        const dz = atob[2] = pz[b] - pz[a];
+        const dSq = dx * dx + dy * dy + dz * dz;
+
+        // This check now redundant as already done in AVHash.withinRadii
+        // if (dSq > ((rA + rB) * (rA + rB))) { return }
+
+        const d = Math.sqrt(dSq);
+
+        // Find angle between a->b vector and the circle
+        // of their intersection by cosine rule
+        const cosA = (rA * rA + d * d - rB * rB) / (2.0 * rA * d);
+
+        // distance along a->b at intersection
+        const dmp = rA * cosA;
+
+        Vec3.normalize(atob, atob);
+
+        // Create normal to line
+        normalToLine(n1, atob);
+        Vec3.normalize(n1, n1);
+
+        // Cross together for second normal vector
+        Vec3.cross(n2, atob, n1);
+        Vec3.normalize(n2, n2);
+
+        // r is radius of circle of intersection
+        const rInt = Math.sqrt(rA * rA - dmp * dmp);
+
+        Vec3.scale(n1, n1, rInt);
+        Vec3.scale(n2, n2, rInt);
+        Vec3.scale(atob, atob, dmp);
+
+        mid[0] = atob[0] + px[a];
+        mid[1] = atob[1] + py[a];
+        mid[2] = atob[2] + pz[a];
+
+        lastClip = -1;
+
+        for (let i = 0; i < probePositions; ++i) {
+            const cost = cosTable[i];
+            const sint = sinTable[i];
+
+            const px = mid[0] + cost * n1[0] + sint * n2[0];
+            const py = mid[1] + cost * n1[1] + sint * n2[1];
+            const pz = mid[2] + cost * n1[2] + sint * n2[2];
+
+            if (obscured(px, py, pz, a, b) === -1) {
+                const iax = Math.floor(scaleFactor * (px - minX));
+                const iay = Math.floor(scaleFactor * (py - minY));
+                const iaz = Math.floor(scaleFactor * (pz - minZ));
+
+                const begX = Math.max(0, iax - ngTorus);
+                const begY = Math.max(0, iay - ngTorus);
+                const begZ = Math.max(0, iaz - ngTorus);
+
+                const endX = Math.min(dimX, iax + ngTorus + 2);
+                const endY = Math.min(dimY, iay + ngTorus + 2);
+                const endZ = Math.min(dimZ, iaz + ngTorus + 2);
+
+                for (let xi = begX; xi < endX; ++xi) {
+                    const dx = px - gridx[xi];
+                    const xIdx = xi * iuv;
+
+                    for (let yi = begY; yi < endY; ++yi) {
+                        const dy = py - gridy[yi];
+                        const dxySq = dx * dx + dy * dy;
+                        const xyIdx = yi * iu + xIdx;
+
+                        for (let zi = begZ; zi < endZ; ++zi) {
+                            const dz = pz - gridz[zi];
+                            const dSq = dxySq + dz * dz;
+
+                            const idx = zi + xyIdx;
+                            const current = data[idx];
+
+                            if (current > 0.0 && dSq < (current * current)) {
+                                data[idx] = Math.sqrt(dSq);
+                                // Is this grid point closer to a or b?
+                                // Take dot product of atob and gridpoint->p (dx, dy, dz)
+                                const dp = dx * atob[0] + dy * atob[1] + dz * atob[2];
+                                idData[idx] = id[OrderedSet.indexOf(indices, dp < 0.0 ? b : a)];
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    function projectToriiRange(begI: number, endI: number) {
+        for (let i = begI; i < endI; ++i) {
+            const k = OrderedSet.getAt(indices, i);
+            lookup3d.find(px[k], py[k], pz[k], radius[k]);
+            for (let j = 0, jl = neighbours.count; j < jl; ++j) {
+                const l = OrderedSet.getAt(indices, neighbours.indices[j]);
+                if (k < l) projectTorus(k, l);
+            }
+        }
+    }
+
+    async function projectTorii() {
+        for (let i = 0; i < n; i += updateChunk) {
+            projectToriiRange(i, Math.min(i + updateChunk, n));
+
+            if (ctx.shouldUpdate) {
+                await ctx.update({ message: 'projecting torii', current: i, max: n });
+            }
+        }
+    }
+
+    // console.time('MolecularSurface')
+    // console.time('MolecularSurface createState')
+    const { resolution, probeRadius, probePositions } = surfaceData.props;
+    const scaleFactor = 1 / resolution;
+    const ngTorus = Math.max(5, 2 + Math.floor(probeRadius * scaleFactor));
+
+    const cellSize = Vec3.create(surfaceData.maxRadius, surfaceData.maxRadius, surfaceData.maxRadius);
+    Vec3.scale(cellSize, cellSize, 2);
+    const lookup3d = GridLookup3D(surfaceData.positions, surfaceData.boundary, cellSize);
+    const neighbours = lookup3d.result;
+    if (surfaceData.box === null) surfaceData.box = lookup3d.boundary.box;
+
+    const { indices, x: px, y: py, z: pz, id, radius } = surfaceData.positions;
+    const n = OrderedSet.size(indices);
+
+    const pad = surfaceData.maxRadius + resolution;
+    const expandedBox = Box3D.expand(Box3D(), surfaceData.box, Vec3.create(pad, pad, pad));
+    const [minX, minY, minZ] = expandedBox.min;
+    const scaledBox = Box3D.scale(Box3D(), expandedBox, scaleFactor);
+    const dim = Box3D.size(Vec3(), scaledBox);
+    Vec3.ceil(dim, dim);
+
+    const [dimX, dimY, dimZ] = dim;
+    const iu = dimZ, iv = dimY, iuv = iu * iv;
+
+    const { cosTable, sinTable } = getAngleTables(probePositions);
+
+    const space = Tensor.Space(dim, [0, 1, 2], Float32Array);
+    const data = space.create();
+    const idData = space.create();
+
+    data.fill(-1001.0);
+    idData.fill(-1);
+
+    const gridx = fillGridDim(dimX, minX, resolution);
+    const gridy = fillGridDim(dimY, minY, resolution);
+    const gridz = fillGridDim(dimZ, minZ, resolution);
+
+    const updateChunk = Math.ceil(100000 / ((Math.pow(Math.pow(surfaceData.maxRadius, 3), 3) * scaleFactor)));
+    // console.timeEnd('MolecularSurface createState')
+
+    // console.time('MolecularSurface projectPoints')
+    await projectPoints();
+    // console.timeEnd('MolecularSurface projectPoints')
+
+    // console.time('MolecularSurface projectTorii')
+    await projectTorii();
+    // console.timeEnd('MolecularSurface projectTorii')
+    // console.timeEnd('MolecularSurface')
+
+    const field = Tensor.create(space, data);
+    const idField = Tensor.create(space, idData);
+
+    const transform = Mat4.identity();
+    Mat4.fromScaling(transform, Vec3.create(resolution, resolution, resolution));
+    Mat4.setTranslation(transform, expandedBox.min);
+    // console.log({ field, idField, transform, updateChunk })
+    return { field, idField, transform, resolution, maxRadius: surfaceData.maxRadius };
+}
--- a/src/extensions/sb-ncbr/tunnels/behavior.ts
+++ b/src/extensions/sb-ncbr/tunnels/behavior.ts
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Dušan Veľký <dvelky@mail.muni.cz>
+ */
+
+import { PluginBehavior } from '../../../mol-plugin/behavior';
+import { DownloadTunnels } from './actions';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { PresetStructureRepresentations, StructureRepresentationPresetProvider } from '../../../mol-plugin-state/builder/structure/representation-preset';
+import { Model, Structure } from '../../../mol-model/structure';
+import { PluginContext } from '../../../mol-plugin/context';
+import { StateObjectRef } from '../../../mol-state';
+import { getTunnelsConfig, TunnelsDataParams } from './props';
+import { StateTransforms } from '../../../mol-plugin-state/transforms';
+import { Tunnel, ChannelsDBdata, TunnelDB } from './data-model';
+import { TunnelShapeProvider, TunnelFromRawData } from './representation';
+import { ColorGenerator } from '../../meshes/mesh-utils';
+
+export const SbNcbrTunnels = PluginBehavior.create<{ autoAttach: boolean }>({
+    name: 'sb-ncbr-tunnels',
+    category: 'misc',
+    display: {
+        name: 'SB NCBR Tunnels',
+    },
+    ctor: class extends PluginBehavior.Handler<{ autoAttach: boolean }> {
+        register(): void {
+            this.ctx.state.data.actions.add(DownloadTunnels);
+            this.ctx.builders.structure.representation.registerPreset(TunnelsPreset);
+        }
+        unregister() {
+            this.ctx.state.data.actions.remove(DownloadTunnels);
+            this.ctx.builders.structure.representation.unregisterPreset(TunnelsPreset);
+        }
+    },
+    params: () => ({
+        autoAttach: PD.Boolean(true),
+    })
+});
+
+
+export function isApplicable(structure?: Structure): boolean {
+    return (
+        !!structure && structure.models.length === 1 &&
+        Model.hasPdbId(structure.models[0])
+    );
+}
+
+export const TunnelsPreset = StructureRepresentationPresetProvider({
+    id: 'sb-ncbr-preset-structure-tunnels',
+    display: {
+        name: 'Tunnels', group: 'Annotation',
+        description: 'Shows Tunnels from ChannelsDB contained in the structure.'
+    },
+    isApplicable(a) {
+        return isApplicable(a.data);
+    },
+    params: (a, plugin) => {
+        return {
+            ...StructureRepresentationPresetProvider.CommonParams,
+            ...getConfiguredDefaultParams(plugin)
+        };
+    },
+    async apply(ref, params, plugin) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, ref);
+        const structure = structureCell?.obj?.data;
+        if (!structureCell || !structure) return {};
+
+        const update = plugin.build();
+        const webgl = plugin.canvas3dContext?.webgl;
+        const response = await (await fetch(`${params.serverUrl}/channels/${params.serverType}/${structure.model.entryId.toLowerCase()}`)).json();
+        const tunnels: Tunnel[] = [];
+
+        Object.entries(response.Channels as ChannelsDBdata).forEach(([key, values]) => {
+            if (values.length > 0) {
+                values.forEach((item: TunnelDB) => {
+                    tunnels.push({ data: item.Profile, props: { id: item.Id, type: item.Type } });
+                });
+            }
+        });
+
+        await tunnels.forEach(async (tunnel) => {
+            await update
+                .toRoot()
+                .apply(TunnelFromRawData, { data: tunnel })
+                .apply(TunnelShapeProvider, {
+                    webgl,
+                    colorTheme: ColorGenerator.next().value,
+                })
+                .apply(StateTransforms.Representation.ShapeRepresentation3D);
+            await update.commit();
+        });
+
+        const preset = await PresetStructureRepresentations.auto.apply(ref, { ...params }, plugin);
+
+        return { components: preset.components, representations: { ...preset.representations, } };
+    }
+});
+
+function getConfiguredDefaultParams(plugin: PluginContext) {
+    const config = getTunnelsConfig(plugin);
+    const params = PD.clone(TunnelsDataParams);
+    PD.setDefaultValues(params, { serverType: config.DefaultServerType, serverUrl: config.DefaultServerUrl });
+    return params;
+}
--- a/src/extensions/sb-ncbr/tunnels/data-model.ts
+++ b/src/extensions/sb-ncbr/tunnels/data-model.ts
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Dušan Veľký <dvelky@mail.muni.cz>
+ */
+
+import { WebGLContext } from '../../../mol-gl/webgl/context';
+import { PluginStateObject } from '../../../mol-plugin-state/objects';
+import { Color } from '../../../mol-util/color';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+
+export interface Profile {
+    Charge: number,
+    Radius: number,
+    FreeRadius: number,
+    T: number,
+    Distance: number,
+    X: number,
+    Y: number,
+    Z: number
+}
+
+export interface Layerweightedproperties {
+    Hydrophobicity: number,
+    Hydropathy: number,
+    Polarity: number,
+    Mutability: number
+}
+
+export interface LayerGeometry {
+    MinRadius: number,
+    MinFreeRadius: number,
+    StartDistance: number,
+    EndDistance: number,
+    LocalMinimum: boolean,
+    Bottleneck: boolean,
+    bottleneck: boolean
+}
+
+export interface Properties {
+    Charge: number,
+    NumPositives: number,
+    NumNegatives: number,
+    Hydrophobicity: number,
+    Hydropathy: number,
+    Polarity: number,
+    Mutability: number
+}
+
+export interface LayersInfo {
+    LayerGeometry: LayerGeometry,
+    Residues: string[],
+    FlowIndices: string[],
+    Properties: Properties
+}
+
+export interface Layers {
+    ResidueFlow: string[],
+    HetResidues: any[],
+    LayerWeightedProperties: Layerweightedproperties
+    LayersInfo: LayersInfo[]
+}
+
+export interface TunnelDB {
+    Type: string,
+    Id: string,
+    Cavity: string,
+    Auto: boolean,
+    Properties: Properties,
+    Profile: Profile[],
+    Layers: Layers
+};
+
+export interface ChannelsDBdata {
+    'CSATunnels_MOLE': TunnelDB[],
+    'CSATunnels_Caver': TunnelDB[],
+    'ReviewedChannels_MOLE': TunnelDB[],
+    'ReviewedChannels_Caver': TunnelDB[],
+    'CofactorTunnels_MOLE': TunnelDB[],
+    'CofactorTunnels_Caver': TunnelDB[],
+    'TransmembranePores_MOLE': TunnelDB[],
+    'TransmembranePores_Caver': TunnelDB[],
+    'ProcognateTunnels_MOLE': TunnelDB[],
+    'ProcognateTunnels_Caver': TunnelDB[],
+    'AlphaFillTunnels_MOLE': TunnelDB[],
+    'AlphaFillTunnels_Caver': TunnelDB[]
+}
+
+export interface ChannelsCache {
+    Channels: ChannelsDBdata
+}
+
+export interface Tunnel {
+    data: Profile[],
+    props: {
+        highlight_label?: string,
+        type?: string,
+        id?: string,
+        label?: string,
+        description?: string
+    }
+}
+
+export const TunnelShapeParams = {
+    webgl: PD.Value<WebGLContext | null>(null),
+    colorTheme: PD.Color(Color(0xff0000)),
+    visual: PD.MappedStatic(
+        'mesh',
+        {
+            mesh: PD.Group({ resolution: PD.Numeric(2) }),
+            spheres: PD.Group({ resolution: PD.Numeric(2) })
+        }
+    ),
+    samplingRate: PD.Numeric(1, { min: 0.05, max: 1, step: 0.05 }),
+    showRadii: PD.Boolean(false),
+};
+
+export class TunnelStateObject extends PluginStateObject.Create<{ tunnel: Tunnel }>({ name: 'Tunnel Entry', typeClass: 'Data' }) { }
+export class TunnelsStateObject extends PluginStateObject.Create<{ tunnels: Tunnel[] }>({ name: 'Tunnels', typeClass: 'Data' }) { }
--- a/src/extensions/sb-ncbr/tunnels/examples.ts
+++ b/src/extensions/sb-ncbr/tunnels/examples.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Dušan Veľký <dvelky@mail.muni.cz>
+ */
+
+import { StateTransforms } from '../../../mol-plugin-state/transforms';
+import { PluginContext } from '../../../mol-plugin/context';
+import { ChannelsDBdata, Tunnel, TunnelDB } from './data-model';
+import { TunnelsFromRawData, SelectTunnel, TunnelShapeProvider, TunnelFromRawData } from './representation';
+
+
+export const DB_URL = 'https://channelsdb2.biodata.ceitec.cz/api/channels/';
+export const SUB_DB = 'pdb';
+export const CHANNEL = '1ymg';
+
+export const URL = `${DB_URL}${SUB_DB}/${CHANNEL}`;
+
+export async function runVisualizeTunnels(plugin: PluginContext, url: string = URL) {
+    const update = plugin.build();
+    const webgl = plugin.canvas3dContext?.webgl;
+
+    const response = await (await fetch(url)).json();
+
+    const tunnels: Tunnel[] = [];
+    Object.entries(response.Channels as ChannelsDBdata).forEach(([key, values]) => {
+        if (values.length > 0) {
+            values.forEach((item: TunnelDB) => {
+                tunnels.push({ data: item.Profile, props: { id: item.Id, type: item.Type } });
+            });
+        }
+    });
+
+    update
+        .toRoot()
+        .apply(TunnelsFromRawData, { data: tunnels })
+        .apply(SelectTunnel)
+        .apply(TunnelShapeProvider, {
+            webgl,
+        })
+        .apply(StateTransforms.Representation.ShapeRepresentation3D);
+
+    await update.commit();
+}
+
+export async function runVisualizeTunnel(plugin: PluginContext) {
+    const update = plugin.build();
+    const webgl = plugin.canvas3dContext?.webgl;
+
+    const response = await (await fetch(URL)).json();
+
+    const tunnel = response.Channels.TransmembranePores_MOLE[0];
+
+    update
+        .toRoot()
+        .apply(TunnelFromRawData, { data: { data: tunnel.Profile, props: { id: tunnel.Id, type: tunnel.Type } } })
+        .apply(TunnelShapeProvider, {
+            webgl,
+        })
+        .apply(StateTransforms.Representation.ShapeRepresentation3D);
+
+    await update.commit();
+}
--- a/src/extensions/sb-ncbr/tunnels/props.ts
+++ b/src/extensions/sb-ncbr/tunnels/props.ts
@@ -0,0 +1,27 @@
+import { PluginConfigItem } from '../../../mol-plugin/config';
+import { PluginContext } from '../../../mol-plugin/context';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+
+export namespace TunnelsData {
+    export const DefaultServerUrl = 'https://channelsdb2.biodata.ceitec.cz/api';
+    export const DefaultServerType = 'pdb';
+}
+
+export const TunnelsDataParams = {
+    serverType: PD.Select('pdb', [['pdb', 'pdb']] as const),
+    serverUrl: PD.Text(TunnelsData.DefaultServerUrl)
+};
+export type TunnelsDataParams = typeof TunnelsDataParams
+
+export const TunnelsServerConfig = {
+    DefaultServerUrl: new PluginConfigItem('channelsdb-server', 'https://channelsdb2.biodata.ceitec.cz/api'),
+    DefaultServerType: new PluginConfigItem<'pdb'>('serverType', 'pdb')
+};
+
+export function getTunnelsConfig(plugin: PluginContext): { [key in keyof typeof TunnelsServerConfig]: NonNullable<typeof TunnelsServerConfig[key]['defaultValue']> } {
+    return {
+        DefaultServerUrl: plugin.config.get(TunnelsServerConfig.DefaultServerUrl) ?? TunnelsServerConfig.DefaultServerUrl.defaultValue ?? TunnelsData.DefaultServerUrl,
+        DefaultServerType: plugin.config.get(TunnelsServerConfig.DefaultServerType) ?? TunnelsServerConfig.DefaultServerType.defaultValue ?? TunnelsData.DefaultServerType,
+    };
+}
+
--- a/src/extensions/sb-ncbr/tunnels/representation.ts
+++ b/src/extensions/sb-ncbr/tunnels/representation.ts
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Dušan Veľký <dvelky@mail.muni.cz>
+ */
+
+import { PluginStateObject } from '../../../mol-plugin-state/objects';
+import { StateTransformer } from '../../../mol-state';
+import { TunnelStateObject, Tunnel, TunnelShapeParams, TunnelsStateObject } from './data-model';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { Mesh } from '../../../mol-geo/geometry/mesh/mesh';
+import { Task } from '../../../mol-task';
+import { createTunnelShape, createSpheresShape } from './algorithm';
+
+const Transform = StateTransformer.builderFactory('sb-ncbr-tunnels');
+
+export const TunnelsFromRawData = Transform({
+    name: 'sb-ncbr-tunnels-from-data',
+    display: { name: 'Tunnels' },
+    from: PluginStateObject.Root,
+    to: TunnelsStateObject,
+    params: {
+        data: PD.Value<Tunnel[]>([]),
+    },
+})({
+    apply({ params }) {
+        return new TunnelsStateObject({ tunnels: params.data });
+    },
+});
+
+export const SelectTunnel = Transform({
+    name: 'sb-ncbr-tunnel-from-tunnels',
+    display: { name: 'Tunnel Selection' },
+    from: TunnelsStateObject,
+    to: TunnelStateObject,
+    params: a => {
+        return {
+            index: PD.Numeric(0, { min: 0, max: a!.data.tunnels.length - 1, step: 1 })
+        };
+    }
+})({
+    apply({ a, params }) {
+        return new TunnelStateObject({ tunnel: a.data.tunnels[params.index] });
+    }
+});
+
+export const TunnelFromRawData = Transform({
+    name: 'sb-ncbr-tunnel-from-data',
+    display: { name: 'Tunnel Entry' },
+    from: PluginStateObject.Root,
+    to: TunnelStateObject,
+    params: {
+        data: PD.Value<Tunnel>(undefined as any, { isHidden: true })
+    },
+})({
+    apply({ params }) {
+        return new TunnelStateObject({ tunnel: params.data });
+    },
+});
+
+export const TunnelShapeProvider = Transform({
+    name: 'sb-ncbr-tunnel-shape-provider',
+    display: { name: 'Tunnel' },
+    from: TunnelStateObject,
+    to: PluginStateObject.Shape.Provider,
+    params: a => { return TunnelShapeParams; },
+})({
+    apply({ a, params }) {
+        return Task.create('Tunnel Shape Representation', async ctx => {
+            return new PluginStateObject.Shape.Provider({
+                label: 'Surface',
+                data: { params, data: a.data },
+                params: Mesh.Params,
+                geometryUtils: Mesh.Utils,
+                getShape: (_, data, __, mesh) => {
+                    if (data.params.visual.name === 'mesh' && !data.params.showRadii) {
+                        return createTunnelShape({
+                            tunnel: data.data.tunnel,
+                            color: data.params.colorTheme,
+                            resolution: data.params.visual.params.resolution,
+                            sampleRate: data.params.samplingRate,
+                            webgl: data.params.webgl, prev: mesh
+                        });
+                    }
+                    return createSpheresShape({
+                        tunnel: data.data.tunnel,
+                        color: data.params.colorTheme,
+                        resolution: data.params.visual.params.resolution,
+                        sampleRate: data.params.samplingRate,
+                        showRadii: data.params.showRadii, prev: mesh
+                    });
+                }
+            }, {
+                label: a.data.tunnel.props.label ?? 'Tunnel',
+                description: a.data.tunnel.props.description
+                ?? (a.data.tunnel.props.type && a.data.tunnel.props.id)
+                    ? `${a.data.tunnel.props.type} ${a.data.tunnel.props.id}`
+                    : '',
+            });
+        });
+    },
+});