From 40a940eca1856b99405d15f722edef00f22947c7 Mon Sep 17 00:00:00 2001 From: Brady Date: Tue, 16 Aug 2022 20:45:44 +0800 Subject: [PATCH 1/2] intial attempt to get snapshots to load --- _extensions/molstar/molstar.lua | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/_extensions/molstar/molstar.lua b/_extensions/molstar/molstar.lua index 664bed9..92d4997 100644 --- a/_extensions/molstar/molstar.lua +++ b/_extensions/molstar/molstar.lua @@ -129,6 +129,8 @@ local function createViewer(args) trajExtension = args.trajExtension, volumeUrl = args.volumeUrl, volumeExtension = args.volumeExtension, + snapshotUrl = args.snapshotUrl, + snapshotExtension = args.snapshotExtension, data = args.data, options = mergeMolstarOptions(args.userOptions) } @@ -174,6 +176,8 @@ local function createViewer(args) ] ); ]] + elseif args.snapshotUrl then + viewerFunction = 'viewer.loadSnapshotFromUrl(url="${snapshotUrl}", type="molj");' else -- otherwise read from url (local or remote) viewerFunction = 'viewer.loadStructureFromUrl("${url}", format="${urlExtension}");' end @@ -225,6 +229,23 @@ return { userOptions = kwargs }) end, + + ['mol-snapshot'] = function(args, kwargs, meta) + if not quarto.doc.isFormat("html:js") then + return pandoc.Null() + end + + addDependencies() + + local url = pandoc.utils.stringify(args[1]) + local appId = 'app-' .. url + + return pandoc.RawBlock('html', createViewer { + appId = appId, + snapshotUrl = url, + userOptions = kwargs + }) + end, ['mol-traj'] = function(args, kwargs) if not quarto.doc.isFormat("html:js") then From 385035690f9263277e7e7503125a2d25b2329ca1 Mon Sep 17 00:00:00 2001 From: Brady Johnston Date: Tue, 16 Aug 2022 22:54:09 +0800 Subject: [PATCH 2/2] added snapshot functionality --- _extensions/molstar/molstar.lua | 5 +- index.html | 28 +- index.qmd | 9 + www/molstar.molj | 727 ++++++++++++++++++++++++++++++++ 4 files changed, 759 insertions(+), 10 deletions(-) create mode 100644 www/molstar.molj diff --git a/_extensions/molstar/molstar.lua b/_extensions/molstar/molstar.lua index 92d4997..5151afd 100644 --- a/_extensions/molstar/molstar.lua +++ b/_extensions/molstar/molstar.lua @@ -176,8 +176,8 @@ local function createViewer(args) ] ); ]] - elseif args.snapshotUrl then - viewerFunction = 'viewer.loadSnapshotFromUrl(url="${snapshotUrl}", type="molj");' + elseif args.snapshotUrl and args.snapshotExtension then + viewerFunction = 'viewer.loadSnapshotFromUrl(url="${snapshotUrl}", "${snapshotExtension}");' else -- otherwise read from url (local or remote) viewerFunction = 'viewer.loadStructureFromUrl("${url}", format="${urlExtension}");' end @@ -243,6 +243,7 @@ return { return pandoc.RawBlock('html', createViewer { appId = appId, snapshotUrl = url, + snapshotExtension = fileExt(url), userOptions = kwargs }) end, diff --git a/index.html b/index.html index 249de6e..460ffa6 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + @@ -113,6 +113,7 @@

Table of contents

  • pdb file from url
  • local xyz file
  • local pdb and trajectory
    • +
  • snapshot file
  • local file with volume information
  • Customization
      @@ -151,7 +152,7 @@

      RCSB PDB

      {{< mol-rcsb 7sgl >}}

      @@ -162,7 +163,7 @@

      Local pdb file

      {{< mol-url ./www/7sgl.pdb >}}

      @@ -173,7 +174,7 @@

      pdb file from url

      {{< mol-url https://files.rcsb.org/download/7sgl.pdb >}}

      @@ -184,7 +185,7 @@

      local xyz file

      {{< mol-url ./www/example.xyz >} }

      @@ -195,7 +196,7 @@

      local pdb and tra

      {{< mol-traj ./www/example.pdb ./www/example.xtc >}}

      + +
      +

      snapshot file

      +

      Load a snapshot file, to share a saved Mol* session which will save aesthetic parameters and scene setup.

      +

      {{< mol-snapshot ./www/molstar.molj >}}

      +
      + +

      local file with volume information

      {{< mol-volume ./www/traj.xyz ./www/density.cube >}}

      diff --git a/index.qmd b/index.qmd index 2aa3418..10d6a88 100644 --- a/index.qmd +++ b/index.qmd @@ -49,6 +49,15 @@ Load a topology and a trajectory with: {{< mol-traj ./www/example.pdb ./www/example.xtc >}} +## snapshot file + +Load a snapshot file, to share a saved Mol* session which will save aesthetic +parameters and scene setup. + +`{{{< mol-snapshot ./www/molstar.molj >}}}` + +{{< mol-snapshot ./www/molstar.molj >}} + ## local file with volume information diff --git a/www/molstar.molj b/www/molstar.molj new file mode 100644 index 0000000..2b904b6 --- /dev/null +++ b/www/molstar.molj @@ -0,0 +1,727 @@ +{ + "timestamp": 1660605332947, + "version": "3.13.0", + "current": "UwtlAc29tvrk4mdM_c8bjA", + "playback": { + "isPlaying": false, + "nextSnapshotDelayInMs": 1500 + }, + "entries": [ + { + "timestamp": 1660605332947, + "snapshot": { + "id": "UwtlAc29tvrk4mdM_c8bjA", + "data": { + "tree": { + "transforms": [ + { + "parent": "-=root=-", + "transformer": "build-in.root", + "params": {}, + "ref": "-=root=-", + "version": "Vm3QU0dcPZ3L3lkzGiko2A" + }, + { + "parent": "-=root=-", + "transformer": "ms-plugin.download", + "params": { + "url": { + "kind": "url", + "id": "AJEGirBrJQR1ux_OGXHXJw", + "url": "https://models.rcsb.org/4KTC.bcif" + }, + "label": "", + "isBinary": true + }, + "state": { + "isGhost": true + }, + "ref": "M7RVq2Ry72eVVfouMrT8zg", + "version": "Dd-FNVctWS0UyFudp45_qw" + }, + { + "parent": "M7RVq2Ry72eVVfouMrT8zg", + "transformer": "ms-plugin.parse-cif", + "params": {}, + "state": { + "isGhost": true + }, + "ref": "6_6DMF6Tm0OfPoT3a-PTcg", + "version": "nUSoTwJ319A7I2AfG7z3Rw" + }, + { + "parent": "6_6DMF6Tm0OfPoT3a-PTcg", + "transformer": "ms-plugin.trajectory-from-mmcif", + "params": {}, + "ref": "BM2cTti2fwJy3uT1103AvQ", + "version": "FqOx17hhcdLvQq7MqQ9sjA" + }, + { + "parent": "BM2cTti2fwJy3uT1103AvQ", + "transformer": "ms-plugin.model-from-trajectory", + "params": { + "modelIndex": 0 + }, + "ref": "4cBTQWkUVx6LL5plL2EmAA", + "version": "-0Cuv1TZvepek5M3ZC7BFA" + }, + { + "parent": "4cBTQWkUVx6LL5plL2EmAA", + "transformer": "ms-plugin.structure-from-model", + "params": { + "type": { + "name": "assembly", + "params": { + "id": "1", + "dynamicBonds": false + } + } + }, + "ref": "zqdHuGte7_O8-L8axOLvqA", + "version": "gql0uXh-R-CG0HcFXx_BCA" + }, + { + "parent": "zqdHuGte7_O8-L8axOLvqA", + "transformer": "ms-plugin.structure-component", + "params": { + "type": { + "name": "static", + "params": "polymer" + }, + "nullIfEmpty": true, + "label": "" + }, + "tags": [ + "structure-component-static-polymer" + ], + "ref": "mKl2pzOVgL9E7jw7dlbMnw", + "version": "pYg1iiRToL2vEAy02XzTzg" + }, + { + "parent": "mKl2pzOVgL9E7jw7dlbMnw", + "transformer": "ms-plugin.structure-representation-3d", + "params": { + "type": { + "name": "spacefill", + "params": { + "alpha": 1, + "quality": "auto", + "material": { + "metalness": 0, + "roughness": 1, + "bumpiness": 0 + }, + "clip": { + "variant": "pixel", + "objects": [] + }, + "instanceGranularity": false, + "doubleSided": false, + "flipSided": false, + "flatShaded": false, + "ignoreLight": false, + "xrayShaded": false, + "transparentBackfaces": "off", + "bumpFrequency": 1, + "bumpAmplitude": 1, + "unitKinds": [ + "atomic", + "spheres" + ], + "includeParent": false, + "sizeFactor": 1, + "detail": 0, + "ignoreHydrogens": false, + "traceOnly": false, + "tryUseImpostor": true + } + }, + "colorTheme": { + "name": "illustrative", + "params": { + "style": { + "name": "entity-id", + "params": { + "palette": { + "name": "colors", + "params": { + "list": { + "kind": "set", + "colors": [ + 1810039, + 14245634, + 7696563, + 15149450, + 6727198, + 15117058, + 10909213, + 6710886, + 14948892, + 3636920, + 5091146, + 9981603, + 16744192, + 16777011, + 10901032, + 16220607, + 10066329, + 6734501, + 16551266, + 9281739, + 15174339, + 10934356, + 16767279, + 15058068, + 11776947 + ] + } + } + } + } + }, + "carbonLightness": 0.8 + } + }, + "sizeTheme": { + "name": "physical", + "params": { + "scale": 1 + } + } + }, + "ref": "kns_nzaDwWbotSF3K1cILg", + "version": "CBQPODY-o_cZwRM2o3DmAg" + }, + { + "parent": "zqdHuGte7_O8-L8axOLvqA", + "transformer": "ms-plugin.structure-component", + "params": { + "type": { + "name": "static", + "params": "ligand" + }, + "nullIfEmpty": true, + "label": "" + }, + "tags": [ + "structure-component-static-ligand" + ], + "ref": "XI_FqBmny4YVF5OPal2ecw", + "version": "qEomhvvyAubmjB9RQ76kyw" + }, + { + "parent": "XI_FqBmny4YVF5OPal2ecw", + "transformer": "ms-plugin.structure-representation-3d", + "params": { + "type": { + "name": "ball-and-stick", + "params": { + "alpha": 1, + "quality": "auto", + "material": { + "metalness": 0, + "roughness": 1, + "bumpiness": 0 + }, + "clip": { + "variant": "pixel", + "objects": [] + }, + "instanceGranularity": false, + "doubleSided": false, + "flipSided": false, + "flatShaded": false, + "ignoreLight": false, + "xrayShaded": false, + "transparentBackfaces": "off", + "bumpFrequency": 0, + "bumpAmplitude": 1, + "unitKinds": [ + "atomic" + ], + "includeParent": false, + "sizeFactor": 0.15, + "detail": 0, + "ignoreHydrogens": false, + "traceOnly": false, + "tryUseImpostor": true, + "sizeAspectRatio": 0.6666666666666666, + "linkScale": 0.45, + "linkSpacing": 1, + "linkCap": false, + "aromaticScale": 0.3, + "aromaticSpacing": 1.5, + "aromaticDashCount": 2, + "dashCount": 4, + "dashScale": 0.8, + "dashCap": true, + "stubCap": true, + "radialSegments": 16, + "includeTypes": [ + "covalent", + "metal-coordination", + "hydrogen-bond", + "disulfide", + "aromatic", + "computed" + ], + "excludeTypes": [], + "aromaticBonds": true, + "multipleBonds": "symmetric", + "adjustCylinderLength": false, + "visuals": [ + "element-sphere", + "intra-bond", + "inter-bond" + ] + } + }, + "colorTheme": { + "name": "element-symbol", + "params": { + "carbonColor": { + "name": "element-symbol", + "params": {} + }, + "saturation": 0, + "lightness": 0.2, + "colors": { + "name": "default", + "params": {} + } + } + }, + "sizeTheme": { + "name": "physical", + "params": { + "scale": 1 + } + } + }, + "ref": "l9dYXgt4FAkbkxx9yG_BwQ", + "version": "GF29IHVOQCiL6HoFXO4NhQ" + } + ] + } + }, + "animation": { + "state": { + "params": { + "current": "built-in.animate-model-index" + }, + "animationState": "stopped" + }, + "current": { + "paramValues": { + "mode": { + "name": "loop", + "params": { + "direction": "forward" + } + }, + "duration": { + "name": "fixed", + "params": { + "durationInS": 5 + } + } + }, + "state": {} + } + }, + "camera": { + "current": { + "mode": "perspective", + "fov": 0.7853981633974483, + "position": [ + 111.547959453894, + 5.414527413206336, + 122.60659561745621 + ], + "up": [ + 0.550661610344952, + 0.7410430989481197, + -0.3842224829361758 + ], + "target": [ + 45.596031902263064, + 40.562523665937675, + 95.87464987731107 + ], + "radius": 32.8763923415676, + "radiusMax": 32.8763923415676, + "fog": 15, + "clipFar": true + }, + "transitionStyle": "animate", + "transitionDurationInMs": 250 + }, + "canvas3d": { + "props": { + "camera": { + "mode": "perspective", + "helper": { + "axes": { + "name": "on", + "params": { + "alpha": 0.51, + "quality": "auto", + "material": { + "metalness": 0, + "roughness": 1, + "bumpiness": 0 + }, + "clip": { + "variant": "pixel", + "objects": [] + }, + "instanceGranularity": false, + "doubleSided": false, + "flipSided": false, + "flatShaded": false, + "ignoreLight": true, + "xrayShaded": false, + "transparentBackfaces": "off", + "bumpFrequency": 0, + "bumpAmplitude": 1, + "colorX": 16711680, + "colorY": 32768, + "colorZ": 255, + "scale": 0.33 + } + } + }, + "stereo": { + "name": "off", + "params": {} + }, + "manualReset": false + }, + "cameraFog": { + "name": "on", + "params": { + "intensity": 15 + } + }, + "cameraClipping": { + "far": true, + "radius": 0 + }, + "cameraResetDurationMs": 250, + "transparentBackground": false, + "viewport": { + "name": "canvas", + "params": {} + }, + "postprocessing": { + "occlusion": { + "name": "on", + "params": { + "samples": 32, + "radius": 5, + "bias": 1.3, + "blurKernelSize": 15, + "resolutionScale": 1 + } + }, + "outline": { + "name": "on", + "params": { + "scale": 1, + "threshold": 0.33, + "color": 0 + } + }, + "antialiasing": { + "name": "smaa", + "params": { + "edgeThreshold": 0.1, + "maxSearchSteps": 16 + } + } + }, + "marking": { + "enabled": true, + "highlightEdgeColor": 13119595, + "selectEdgeColor": 51712, + "edgeScale": 1, + "ghostEdgeStrength": 0.3, + "innerEdgeFactor": 1.5 + }, + "multiSample": { + "mode": "temporal", + "sampleLevel": 2 + }, + "renderer": { + "backgroundColor": 16579577, + "pickingAlphaThreshold": 0.5, + "interiorDarkening": 0.5, + "interiorColorFlag": true, + "interiorColor": 5000268, + "colorMarker": true, + "highlightColor": 16737945, + "selectColor": 3407641, + "highlightStrength": 0.3, + "selectStrength": 0.3, + "markerPriority": 1, + "xrayEdgeFalloff": 1, + "light": [], + "ambientColor": 16777215, + "ambientIntensity": 1 + }, + "trackball": { + "noScroll": true, + "rotateSpeed": 5, + "zoomSpeed": 7, + "panSpeed": 1, + "animate": { + "name": "off", + "params": {} + }, + "staticMoving": true, + "dynamicDampingFactor": 0.2, + "minDistance": 5, + "maxDistance": 328.763923415676, + "gestureScaleFactor": 1, + "maxWheelDelta": 0.02, + "bindings": { + "dragRotate": { + "triggers": [ + { + "buttons": 1, + "modifiers": { + "shift": false, + "alt": false, + "control": false, + "meta": false + } + } + ], + "action": "Rotate", + "description": "Drag using ${triggers}" + }, + "dragRotateZ": { + "triggers": [ + { + "buttons": 1, + "modifiers": { + "shift": true, + "alt": false, + "control": false, + "meta": false + } + } + ], + "action": "Rotate around z-axis", + "description": "Drag using ${triggers}" + }, + "dragPan": { + "triggers": [ + { + "buttons": 2, + "modifiers": { + "shift": false, + "alt": false, + "control": false, + "meta": false + } + }, + { + "buttons": 1, + "modifiers": { + "shift": false, + "alt": false, + "control": true, + "meta": false + } + } + ], + "action": "Pan", + "description": "Drag using ${triggers}" + }, + "dragZoom": { + "triggers": [], + "action": "", + "description": "" + }, + "dragFocus": { + "triggers": [ + { + "buttons": 8, + "modifiers": { + "shift": false, + "alt": false, + "control": false, + "meta": false + } + } + ], + "action": "Focus", + "description": "Drag using ${triggers}" + }, + "dragFocusZoom": { + "triggers": [ + { + "buttons": 4, + "modifiers": { + "shift": false, + "alt": false, + "control": false, + "meta": false + } + } + ], + "action": "Focus and zoom", + "description": "Drag using ${triggers}" + }, + "scrollZoom": { + "triggers": [ + { + "buttons": 4, + "modifiers": { + "shift": false, + "alt": false, + "control": false, + "meta": false + } + } + ], + "action": "Zoom", + "description": "Scroll using ${triggers}" + }, + "scrollFocus": { + "triggers": [ + { + "buttons": 4, + "modifiers": { + "shift": true, + "alt": false, + "control": false, + "meta": false + } + } + ], + "action": "Clip", + "description": "Scroll using ${triggers}" + }, + "scrollFocusZoom": { + "triggers": [], + "action": "", + "description": "" + } + }, + "autoAdjustMinMaxDistance": { + "name": "on", + "params": { + "minDistanceFactor": 0, + "minDistancePadding": 5, + "maxDistanceFactor": 10, + "maxDistanceMin": 20 + } + } + }, + "interaction": { + "maxFps": 30, + "preferAtomPixelPadding": 3 + }, + "debug": { + "sceneBoundingSpheres": false, + "visibleSceneBoundingSpheres": false, + "objectBoundingSpheres": false, + "instanceBoundingSpheres": false + }, + "handle": { + "handle": { + "name": "off", + "params": {} + } + } + } + }, + "interactivity": { + "props": { + "granularity": "residue" + } + }, + "structureFocus": {}, + "structureComponentManager": { + "options": { + "showHydrogens": true, + "visualQuality": "auto", + "ignoreLight": false, + "materialStyle": { + "metalness": 0, + "roughness": 1, + "bumpiness": 0 + }, + "clipObjects": { + "variant": "pixel", + "objects": [] + }, + "interactions": { + "providers": { + "ionic": { + "name": "off", + "params": {} + }, + "pi-stacking": { + "name": "on", + "params": { + "distanceMax": 5.5, + "offsetMax": 2, + "angleDevMax": 30 + } + }, + "cation-pi": { + "name": "on", + "params": { + "distanceMax": 6, + "offsetMax": 2 + } + }, + "halogen-bonds": { + "name": "on", + "params": { + "distanceMax": 4, + "angleMax": 30 + } + }, + "hydrogen-bonds": { + "name": "on", + "params": { + "distanceMax": 3.5, + "backbone": true, + "accAngleDevMax": 45, + "donAngleDevMax": 45, + "accOutOfPlaneAngleMax": 90, + "donOutOfPlaneAngleMax": 45, + "water": false, + "sulfurDistanceMax": 4.1 + } + }, + "weak-hydrogen-bonds": { + "name": "off", + "params": {} + }, + "hydrophobic": { + "name": "off", + "params": {} + }, + "metal-coordination": { + "name": "on", + "params": { + "distanceMax": 3 + } + } + }, + "contacts": { + "lineOfSightDistFactor": 1 + } + } + } + }, + "durationInMs": 1500 + } + } + ] +} \ No newline at end of file