Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

PBD protein input

By Rune Botten

Custom input for PDB protein models with content models for camera position and zoom.

Protein Data Bank Sanity Plugin

This is a plugin which adds an object type protein to your Sanity schema, and provides a custom input component to let you select a PDB protein model in a predefined list and adjust the starting camera position and zoom.

Not familiar with Sanity? Visit www.sanity.io

Quick start

While in your project folder, run sanity install pdb-input. Read more about using plugins in Sanity here.

Usage

Use it in your schema types:


{
  type: 'document',
  name: 'myDocumentType',
  title: 'A document type with a protein data structure',
  fields: [
    // [...]
    {
      name: "proteinModel", // Property name chosen by you
      title: "A PDB 3d model", // Chosen by you
      type: "protein" // The type defined by this plugin, needs to be this value
    },
  ];
}

Note that the above only works if you import and use the all:part:@sanity/base/schema-type part in your schema. This is the most common way. If you are not importing the base types in this manner, you may import the schemas/pdb.js and schemas/pdbCamera.js and include them in your schema manually.

Read more about schemas in Sanity here.

Data model example

This is an example of the strucutred content this plugin will save on your documents where you add a protein typed field.

{
  "_type": "protein",
  "camera": {
    "rotation": [
      0.4790152907371521,
      -0.8654894232749939,
      -0.14653077721595764,
      0,
      -0.14660295844078064,
      -0.24346202611923218,
      0.958766520023346,
      0,
      -0.8654779195785522,
      -0.43778201937675476,
      -0.24350611865520477,
      0,
      0,
      0,
      0,
      1
    ],
    "center": [
      -15.685999870300293,
      22.24799919128418,
      -6.605999946594238
    ],
    "zoom": 36.5915087377568
  },
  "pdb": "4HHB"
}

Displaying the PDB models in your web frontend

This plugin uses the bio-pv node module to let the editor manipulate the camera settings. You may use the same library for displaying interactive PDB models in your web frontend. You can find it here.

The display and interactivity of the models are rendered in WebGL so this works nicely on mobile, tablets etc both in the Sanity Studio and in your web frontend presentations.

Install command

sanity install pdb-input

Contributor

Categorized in

Other plugins by author

Content Calendar
- has 14 likes

Official(made by Sanity team)

Schedule and view your editorial calendar, right where you store your content. Prioritize and get organized on the fly with a visual calendar in your Studio.

Go to Content Calendar

Bynder

Adds the Bynder Digital Asset Management system to your Studio

Rune Botten
Go to Bynder

Google Translate

Official(made by Sanity team)

Machine translations from Google Translate directly in your Sanity Studio

Rune Botten
Go to Google Translate

Transifex Plugin

Official(made by Sanity team)

A studio tool to send and retrieve translated documents from Transifex!

Go to Transifex Plugin