added semicolons to linting rules

.eslintrc.json

@@ -69,6 +69,7 @@
         "no-trailing-spaces": "error",
         "no-unsafe-finally": "warn",
         "no-var": "error",
-        "spaced-comment": "error"
+        "spaced-comment": "error",
+        "semi": "warn"
     }
 }

src/apps/chem-comp-bond/create-table.ts

@@ -4,57 +4,57 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import * as argparse from 'argparse'
-import * as util from 'util'
-import * as path from 'path'
-import * as fs from 'fs'
-import * as zlib from 'zlib'
-import fetch from 'node-fetch'
-require('util.promisify').shim()
-const readFile = util.promisify(fs.readFile)
-const writeFile = util.promisify(fs.writeFile)
-
-import { Progress } from '../../mol-task'
-import { Database, Table, DatabaseCollection } from '../../mol-data/db'
-import { CIF } from '../../mol-io/reader/cif'
-import { CifWriter } from '../../mol-io/writer/cif'
-import { CCD_Schema } from '../../mol-io/reader/cif/schema/ccd'
-import { SetUtils } from '../../mol-util/set'
-import { DefaultMap } from '../../mol-util/map'
+import * as argparse from 'argparse';
+import * as util from 'util';
+import * as path from 'path';
+import * as fs from 'fs';
+import * as zlib from 'zlib';
+import fetch from 'node-fetch';
+require('util.promisify').shim();
+const readFile = util.promisify(fs.readFile);
+const writeFile = util.promisify(fs.writeFile);
+
+import { Progress } from '../../mol-task';
+import { Database, Table, DatabaseCollection } from '../../mol-data/db';
+import { CIF } from '../../mol-io/reader/cif';
+import { CifWriter } from '../../mol-io/writer/cif';
+import { CCD_Schema } from '../../mol-io/reader/cif/schema/ccd';
+import { SetUtils } from '../../mol-util/set';
+import { DefaultMap } from '../../mol-util/map';
 import { mmCIF_chemCompBond_schema } from '../../mol-io/reader/cif/schema/mmcif-extras';
 
 export async function ensureAvailable(path: string, url: string) {
     if (FORCE_DOWNLOAD || !fs.existsSync(path)) {
-        console.log(`downloading ${url}...`)
-        const data = await fetch(url)
+        console.log(`downloading ${url}...`);
+        const data = await fetch(url);
         if (!fs.existsSync(DATA_DIR)) {
             fs.mkdirSync(DATA_DIR);
         }
         if (url.endsWith('.gz')) {
-            await writeFile(path, zlib.gunzipSync(await data.buffer()))
+            await writeFile(path, zlib.gunzipSync(await data.buffer()));
         } else {
-            await writeFile(path, await data.text())
+            await writeFile(path, await data.text());
         }
-        console.log(`done downloading ${url}`)
+        console.log(`done downloading ${url}`);
     }
 }
 
 export async function ensureDataAvailable() {
-    await ensureAvailable(CCD_PATH, CCD_URL)
-    await ensureAvailable(PVCD_PATH, PVCD_URL)
+    await ensureAvailable(CCD_PATH, CCD_URL);
+    await ensureAvailable(PVCD_PATH, PVCD_URL);
 }
 
 export async function readFileAsCollection<S extends Database.Schema>(path: string, schema: S) {
-    const parsed = await parseCif(await readFile(path, 'utf8'))
-    return CIF.toDatabaseCollection(schema, parsed.result)
+    const parsed = await parseCif(await readFile(path, 'utf8'));
+    return CIF.toDatabaseCollection(schema, parsed.result);
 }
 
 export async function readCCD() {
-    return readFileAsCollection(CCD_PATH, CCD_Schema)
+    return readFileAsCollection(CCD_PATH, CCD_Schema);
 }
 
 export async function readPVCD() {
-    return readFileAsCollection(PVCD_PATH, CCD_Schema)
+    return readFileAsCollection(PVCD_PATH, CCD_Schema);
 }
 
 async function parseCif(data: string | Uint8Array) {
@@ -63,12 +63,12 @@ async function parseCif(data: string | Uint8Array) {
     const parsed = await comp.run(p => console.log(Progress.format(p)), 250);
     console.timeEnd('parse cif');
     if (parsed.isError) throw parsed;
-    return parsed
+    return parsed;
 }
 
 export function getEncodedCif(name: string, database: Database<Database.Schema>, binary = false) {
     const encoder = CifWriter.createEncoder({ binary, encoderName: 'mol*' });
-    CifWriter.Encoder.writeDatabase(encoder, name, database)
+    CifWriter.Encoder.writeDatabase(encoder, name, database);
     return encoder.getData();
 }
 
@@ -76,58 +76,58 @@ type CCB = Table<CCD_Schema['chem_comp_bond']>
 type CCA = Table<CCD_Schema['chem_comp_atom']>
 
 function ccbKey(compId: string, atomId1: string, atomId2: string) {
-    return atomId1 < atomId2 ? `${compId}:${atomId1}-${atomId2}` : `${compId}:${atomId2}-${atomId1}`
+    return atomId1 < atomId2 ? `${compId}:${atomId1}-${atomId2}` : `${compId}:${atomId2}-${atomId1}`;
 }
 
 function addChemCompBondToSet(set: Set<string>, ccb: CCB) {
     for (let i = 0, il = ccb._rowCount; i < il; ++i) {
-        set.add(ccbKey(ccb.comp_id.value(i), ccb.atom_id_1.value(i), ccb.atom_id_2.value(i)))
+        set.add(ccbKey(ccb.comp_id.value(i), ccb.atom_id_1.value(i), ccb.atom_id_2.value(i)));
     }
-    return set
+    return set;
 }
 
 function addChemCompAtomToSet(set: Set<string>, cca: CCA) {
     for (let i = 0, il = cca._rowCount; i < il; ++i) {
-        set.add(cca.atom_id.value(i))
+        set.add(cca.atom_id.value(i));
     }
-    return set
+    return set;
 }
 
 function checkAddingBondsFromPVCD(pvcd: DatabaseCollection<CCD_Schema>) {
-    const ccbSetByParent = DefaultMap<string, Set<string>>(() => new Set())
+    const ccbSetByParent = DefaultMap<string, Set<string>>(() => new Set());
 
     for (const k in pvcd) {
-        const { chem_comp, chem_comp_bond } = pvcd[k]
+        const { chem_comp, chem_comp_bond } = pvcd[k];
         if (chem_comp_bond._rowCount) {
-            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0)
+            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0);
             if (parentIds.length === 0) {
-                const set = ccbSetByParent.getDefault(chem_comp.id.value(0))
-                addChemCompBondToSet(set, chem_comp_bond)
+                const set = ccbSetByParent.getDefault(chem_comp.id.value(0));
+                addChemCompBondToSet(set, chem_comp_bond);
             } else {
                 for (let i = 0, il = parentIds.length; i < il; ++i) {
-                    const parentId = parentIds[i]
-                    const set = ccbSetByParent.getDefault(parentId)
-                    addChemCompBondToSet(set, chem_comp_bond)
+                    const parentId = parentIds[i];
+                    const set = ccbSetByParent.getDefault(parentId);
+                    addChemCompBondToSet(set, chem_comp_bond);
                 }
             }
         }
     }
 
     for (const k in pvcd) {
-        const { chem_comp, chem_comp_atom, chem_comp_bond } = pvcd[k]
+        const { chem_comp, chem_comp_atom, chem_comp_bond } = pvcd[k];
         if (chem_comp_bond._rowCount) {
-            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0)
+            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0);
             if (parentIds.length > 0) {
                 for (let i = 0, il = parentIds.length; i < il; ++i) {
-                    const entryBonds = addChemCompBondToSet(new Set<string>(), chem_comp_bond)
-                    const entryAtoms = addChemCompAtomToSet(new Set<string>(), chem_comp_atom)
-                    const extraBonds = SetUtils.difference(ccbSetByParent.get(parentIds[i])!, entryBonds)
+                    const entryBonds = addChemCompBondToSet(new Set<string>(), chem_comp_bond);
+                    const entryAtoms = addChemCompAtomToSet(new Set<string>(), chem_comp_atom);
+                    const extraBonds = SetUtils.difference(ccbSetByParent.get(parentIds[i])!, entryBonds);
                     extraBonds.forEach(bk => {
-                        const [a1, a2] = bk.split('|')
+                        const [a1, a2] = bk.split('|');
                         if (entryAtoms.has(a1) && entryAtoms.has(a2)) {
-                            console.error(`Adding all PVCD bonds would wrongly add bond ${bk} for ${k}`)
+                            console.error(`Adding all PVCD bonds would wrongly add bond ${bk} for ${k}`);
                         }
-                    })
+                    });
                 }
             }
         }
@@ -135,51 +135,51 @@ function checkAddingBondsFromPVCD(pvcd: DatabaseCollection<CCD_Schema>) {
 }
 
 async function createBonds() {
-    await ensureDataAvailable()
-    const ccd = await readCCD()
-    const pvcd = await readPVCD()
+    await ensureDataAvailable();
+    const ccd = await readCCD();
+    const pvcd = await readPVCD();
 
-    const ccbSet = new Set<string>()
+    const ccbSet = new Set<string>();
 
-    const comp_id: string[] = []
-    const atom_id_1: string[] = []
-    const atom_id_2: string[] = []
-    const value_order: typeof mmCIF_chemCompBond_schema['value_order']['T'][] = []
-    const pdbx_aromatic_flag: typeof mmCIF_chemCompBond_schema['pdbx_aromatic_flag']['T'][] = []
-    const pdbx_stereo_config: typeof mmCIF_chemCompBond_schema['pdbx_stereo_config']['T'][] = []
-    const molstar_protonation_variant: string[] = []
+    const comp_id: string[] = [];
+    const atom_id_1: string[] = [];
+    const atom_id_2: string[] = [];
+    const value_order: typeof mmCIF_chemCompBond_schema['value_order']['T'][] = [];
+    const pdbx_aromatic_flag: typeof mmCIF_chemCompBond_schema['pdbx_aromatic_flag']['T'][] = [];
+    const pdbx_stereo_config: typeof mmCIF_chemCompBond_schema['pdbx_stereo_config']['T'][] = [];
+    const molstar_protonation_variant: string[] = [];
 
     function addBonds(compId: string, ccb: CCB, protonationVariant: boolean) {
         for (let i = 0, il = ccb._rowCount; i < il; ++i) {
-            const atomId1 = ccb.atom_id_1.value(i)
-            const atomId2 = ccb.atom_id_2.value(i)
-            const k = ccbKey(compId, atomId1, atomId2)
+            const atomId1 = ccb.atom_id_1.value(i);
+            const atomId2 = ccb.atom_id_2.value(i);
+            const k = ccbKey(compId, atomId1, atomId2);
             if (!ccbSet.has(k)) {
-                atom_id_1.push(atomId1)
-                atom_id_2.push(atomId2)
-                comp_id.push(compId)
-                value_order.push(ccb.value_order.value(i))
-                pdbx_aromatic_flag.push(ccb.pdbx_aromatic_flag.value(i))
-                pdbx_stereo_config.push(ccb.pdbx_stereo_config.value(i))
-                molstar_protonation_variant.push(protonationVariant ? 'Y' : 'N')
-                ccbSet.add(k)
+                atom_id_1.push(atomId1);
+                atom_id_2.push(atomId2);
+                comp_id.push(compId);
+                value_order.push(ccb.value_order.value(i));
+                pdbx_aromatic_flag.push(ccb.pdbx_aromatic_flag.value(i));
+                pdbx_stereo_config.push(ccb.pdbx_stereo_config.value(i));
+                molstar_protonation_variant.push(protonationVariant ? 'Y' : 'N');
+                ccbSet.add(k);
             }
         }
     }
 
     // check adding bonds from PVCD
-    checkAddingBondsFromPVCD(pvcd)
+    checkAddingBondsFromPVCD(pvcd);
 
     // add bonds from PVCD
     for (const k in pvcd) {
-        const { chem_comp, chem_comp_bond } = pvcd[k]
+        const { chem_comp, chem_comp_bond } = pvcd[k];
         if (chem_comp_bond._rowCount) {
-            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0)
+            const parentIds = chem_comp.mon_nstd_parent_comp_id.value(0);
             if (parentIds.length === 0) {
-                addBonds(chem_comp.id.value(0), chem_comp_bond, false)
+                addBonds(chem_comp.id.value(0), chem_comp_bond, false);
             } else {
                 for (let i = 0, il = parentIds.length; i < il; ++i) {
-                    addBonds(parentIds[i], chem_comp_bond, true)
+                    addBonds(parentIds[i], chem_comp_bond, true);
                 }
             }
         }
@@ -187,43 +187,43 @@ async function createBonds() {
 
     // add bonds from CCD
     for (const k in ccd) {
-        const { chem_comp, chem_comp_bond } = ccd[k]
+        const { chem_comp, chem_comp_bond } = ccd[k];
         if (chem_comp_bond._rowCount) {
-            addBonds(chem_comp.id.value(0), chem_comp_bond, false)
+            addBonds(chem_comp.id.value(0), chem_comp_bond, false);
         }
     }
 
     const bondTable = Table.ofArrays(mmCIF_chemCompBond_schema, {
         comp_id, atom_id_1, atom_id_2, value_order,
         pdbx_aromatic_flag, pdbx_stereo_config, molstar_protonation_variant
-    })
+    });
 
     const bondDatabase =  Database.ofTables(
         TABLE_NAME,
         { chem_comp_bond: mmCIF_chemCompBond_schema },
         { chem_comp_bond: bondTable }
-    )
+    );
 
-    return bondDatabase
+    return bondDatabase;
 }
 
 async function run(out: string, binary = false) {
-    const bonds = await createBonds()
+    const bonds = await createBonds();
 
-    const cif = getEncodedCif(TABLE_NAME, bonds, binary)
+    const cif = getEncodedCif(TABLE_NAME, bonds, binary);
     if (!fs.existsSync(path.dirname(out))) {
         fs.mkdirSync(path.dirname(out));
     }
-    writeFile(out, cif)
+    writeFile(out, cif);
 }
 
-const TABLE_NAME = 'CHEM_COMP_BONDS'
+const TABLE_NAME = 'CHEM_COMP_BONDS';
 
-const DATA_DIR = path.join(__dirname, '..', '..', '..', 'build/data')
-const CCD_PATH = path.join(DATA_DIR, 'components.cif')
-const PVCD_PATH = path.join(DATA_DIR, 'aa-variants-v1.cif')
-const CCD_URL = 'http://ftp.wwpdb.org/pub/pdb/data/monomers/components.cif'
-const PVCD_URL = 'http://ftp.wwpdb.org/pub/pdb/data/monomers/aa-variants-v1.cif'
+const DATA_DIR = path.join(__dirname, '..', '..', '..', 'build/data');
+const CCD_PATH = path.join(DATA_DIR, 'components.cif');
+const PVCD_PATH = path.join(DATA_DIR, 'aa-variants-v1.cif');
+const CCD_URL = 'http://ftp.wwpdb.org/pub/pdb/data/monomers/components.cif';
+const PVCD_URL = 'http://ftp.wwpdb.org/pub/pdb/data/monomers/aa-variants-v1.cif';
 
 const parser = new argparse.ArgumentParser({
     addHelp: true,
@@ -247,6 +247,6 @@ interface Args {
 }
 const args: Args = parser.parseArgs();
 
-const FORCE_DOWNLOAD = args.forceDownload
+const FORCE_DOWNLOAD = args.forceDownload;
 
-run(args.out, args.binary)
+run(args.out, args.binary);

src/apps/cif2bcif/converter.ts

@@ -5,11 +5,11 @@
  * @author Sebastian Bittrich <sebastian.bittrich@rcsb.org>
  */
 
-import { CIF, CifCategory, getCifFieldType, CifField, CifFile } from '../../mol-io/reader/cif'
-import { CifWriter, EncodingStrategyHint } from '../../mol-io/writer/cif'
-import * as util from 'util'
-import * as fs from 'fs'
-import * as zlib from 'zlib'
+import { CIF, CifCategory, getCifFieldType, CifField, CifFile } from '../../mol-io/reader/cif';
+import { CifWriter, EncodingStrategyHint } from '../../mol-io/writer/cif';
+import * as util from 'util';
+import * as fs from 'fs';
+import * as zlib from 'zlib';
 import { Progress, Task, RuntimeContext } from '../../mol-task';
 import { classifyFloatArray, classifyIntArray } from '../../mol-io/common/binary-cif';
 import { BinaryEncodingProvider } from '../../mol-io/writer/cif/encoder/binary';
@@ -27,7 +27,7 @@ const unzipAsync = util.promisify<zlib.InputType, Buffer>(zlib.unzip);
 async function readFile(ctx: RuntimeContext, filename: string): Promise<ReaderResult<CifFile>> {
     const isGz = /\.gz$/i.test(filename);
     if (filename.match(/\.bcif/)) {
-        let input = await readFileAsync(filename)
+        let input = await readFileAsync(filename);
         if (isGz) input = await unzipAsync(input);
         return await CIF.parseBinary(new Uint8Array(input)).runInContext(ctx);
     } else {
@@ -101,7 +101,7 @@ export default function convert(path: string, asText = false, hints?: EncodingSt
                 const cat = b.categories[c];
                 const fields: CifWriter.Field[] = [];
                 for (const f of cat.fieldNames) {
-                    fields.push(classify(f, cat.getField(f)!))
+                    fields.push(classify(f, cat.getField(f)!));
                     current++;
                     if (ctx.shouldUpdate) await ctx.update({ message: 'Encoding...', current, max: maxProgress });
                 }

src/apps/cif2bcif/index.ts

@@ -5,11 +5,11 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import * as argparse from 'argparse'
-import * as util from 'util'
-import * as fs from 'fs'
-import * as zlib from 'zlib'
-import convert from './converter'
+import * as argparse from 'argparse';
+import * as util from 'util';
+import * as fs from 'fs';
+import * as zlib from 'zlib';
+import convert from './converter';
 
 require('util.promisify').shim();
 
@@ -32,7 +32,7 @@ async function write(outPath: string, res: Uint8Array) {
 }
 
 function run(args: Args) {
-    process(args.src, args.out, args.config, args.filter)
+    process(args.src, args.out, args.config, args.filter);
 }
 
 const parser = new argparse.ArgumentParser({
@@ -63,5 +63,5 @@ interface Args {
 const args: Args = parser.parseArgs();
 
 if (args) {
-    run(args)
+    run(args);
 }

src/apps/cifschema/index.ts

@@ -4,177 +4,177 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import * as argparse from 'argparse'
-import * as fs from 'fs'
-import * as path from 'path'
-import fetch from 'node-fetch'
-
-import { parseCsv } from '../../mol-io/reader/csv/parser'
-import { CifFrame, CifBlock } from '../../mol-io/reader/cif'
-import parseText from '../../mol-io/reader/cif/text/parser'
-import { generateSchema } from './util/cif-dic'
-import { generate } from './util/generate'
-import { Filter, Database } from './util/schema'
-import { parseImportGet } from './util/helper'
+import * as argparse from 'argparse';
+import * as fs from 'fs';
+import * as path from 'path';
+import fetch from 'node-fetch';
+
+import { parseCsv } from '../../mol-io/reader/csv/parser';
+import { CifFrame, CifBlock } from '../../mol-io/reader/cif';
+import parseText from '../../mol-io/reader/cif/text/parser';
+import { generateSchema } from './util/cif-dic';
+import { generate } from './util/generate';
+import { Filter, Database } from './util/schema';
+import { parseImportGet } from './util/helper';
 
 function getDicVersion(block: CifBlock) {
-    return block.categories.dictionary.getField('version')!.str(0)
+    return block.categories.dictionary.getField('version')!.str(0);
 }
 
 function getDicNamespace(block: CifBlock) {
-    return block.categories.dictionary.getField('namespace')!.str(0)
+    return block.categories.dictionary.getField('namespace')!.str(0);
 }
 
 async function runGenerateSchemaMmcif(name: string, fieldNamesPath: string, typescript = false, out: string, moldbImportPath: string, addAliases: boolean) {
-    await ensureMmcifDicAvailable()
+    await ensureMmcifDicAvailable();
     const mmcifDic = await parseText(fs.readFileSync(MMCIF_DIC_PATH, 'utf8')).run();
-    if (mmcifDic.isError) throw mmcifDic
+    if (mmcifDic.isError) throw mmcifDic;
 
-    await ensureIhmDicAvailable()
+    await ensureIhmDicAvailable();
     const ihmDic = await parseText(fs.readFileSync(IHM_DIC_PATH, 'utf8')).run();
-    if (ihmDic.isError) throw ihmDic
+    if (ihmDic.isError) throw ihmDic;
 
-    await ensureCarbBranchDicAvailable()
+    await ensureCarbBranchDicAvailable();
     const carbBranchDic = await parseText(fs.readFileSync(CARB_BRANCH_DIC_PATH, 'utf8')).run();
-    if (carbBranchDic.isError) throw carbBranchDic
+    if (carbBranchDic.isError) throw carbBranchDic;
 
-    await ensureCarbCompDicAvailable()
+    await ensureCarbCompDicAvailable();
     const carbCompDic = await parseText(fs.readFileSync(CARB_COMP_DIC_PATH, 'utf8')).run();
-    if (carbCompDic.isError) throw carbCompDic
+    if (carbCompDic.isError) throw carbCompDic;
 
-    const mmcifDicVersion = getDicVersion(mmcifDic.result.blocks[0])
-    const ihmDicVersion = getDicVersion(ihmDic.result.blocks[0])
-    const carbDicVersion = 'draft'
-    const version = `Dictionary versions: mmCIF ${mmcifDicVersion}, IHM ${ihmDicVersion}, CARB ${carbDicVersion}.`
+    const mmcifDicVersion = getDicVersion(mmcifDic.result.blocks[0]);
+    const ihmDicVersion = getDicVersion(ihmDic.result.blocks[0]);
+    const carbDicVersion = 'draft';
+    const version = `Dictionary versions: mmCIF ${mmcifDicVersion}, IHM ${ihmDicVersion}, CARB ${carbDicVersion}.`;
 
-    const frames: CifFrame[] = [...mmcifDic.result.blocks[0].saveFrames, ...ihmDic.result.blocks[0].saveFrames, ...carbBranchDic.result.blocks[0].saveFrames, ...carbCompDic.result.blocks[0].saveFrames]
-    const schema = generateSchema(frames)
+    const frames: CifFrame[] = [...mmcifDic.result.blocks[0].saveFrames, ...ihmDic.result.blocks[0].saveFrames, ...carbBranchDic.result.blocks[0].saveFrames, ...carbCompDic.result.blocks[0].saveFrames];
+    const schema = generateSchema(frames);
 
-    await runGenerateSchema(name, version, schema, fieldNamesPath, typescript, out, moldbImportPath, addAliases)
+    await runGenerateSchema(name, version, schema, fieldNamesPath, typescript, out, moldbImportPath, addAliases);
 }
 
 async function runGenerateSchemaCifCore(name: string, fieldNamesPath: string, typescript = false, out: string, moldbImportPath: string, addAliases: boolean) {
-    await ensureCifCoreDicAvailable()
+    await ensureCifCoreDicAvailable();
     const cifCoreDic = await parseText(fs.readFileSync(CIF_CORE_DIC_PATH, 'utf8')).run();
-    if (cifCoreDic.isError) throw cifCoreDic
+    if (cifCoreDic.isError) throw cifCoreDic;
 
-    const cifCoreDicVersion = getDicVersion(cifCoreDic.result.blocks[0])
-    const version = `Dictionary versions: CifCore ${cifCoreDicVersion}.`
+    const cifCoreDicVersion = getDicVersion(cifCoreDic.result.blocks[0]);
+    const version = `Dictionary versions: CifCore ${cifCoreDicVersion}.`;
 
-    const frames: CifFrame[] = [...cifCoreDic.result.blocks[0].saveFrames]
-    const imports = await resolveImports(frames, DIC_DIR)
-    const schema = generateSchema(frames, imports)
+    const frames: CifFrame[] = [...cifCoreDic.result.blocks[0].saveFrames];
+    const imports = await resolveImports(frames, DIC_DIR);
+    const schema = generateSchema(frames, imports);
 
-    await runGenerateSchema(name, version, schema, fieldNamesPath, typescript, out, moldbImportPath, addAliases)
+    await runGenerateSchema(name, version, schema, fieldNamesPath, typescript, out, moldbImportPath, addAliases);
 }
 
 async function resolveImports(frames: CifFrame[], baseDir: string): Promise<Map<string, CifFrame[]>> {
-    const imports = new Map<string, CifFrame[]>()
+    const imports = new Map<string, CifFrame[]>();
 
     for (const d of frames) {
         if ('import' in d.categories) {
-            const importGet = parseImportGet(d.categories['import'].getField('get')!.str(0))
+            const importGet = parseImportGet(d.categories['import'].getField('get')!.str(0));
             for (const g of importGet) {
-                const { file } = g
-                if (!file) continue
-                if (imports.has(file)) continue
+                const { file } = g;
+                if (!file) continue;
+                if (imports.has(file)) continue;
 
                 const dic = await parseText(fs.readFileSync(path.join(baseDir, file), 'utf8')).run();
-                if (dic.isError) throw dic
+                if (dic.isError) throw dic;
 
-                imports.set(file, [...dic.result.blocks[0].saveFrames])
+                imports.set(file, [...dic.result.blocks[0].saveFrames]);
             }
         }
     }
 
-    return imports
+    return imports;
 }
 
 async function runGenerateSchemaDic(name: string, dicPath: string, fieldNamesPath: string, typescript = false, out: string, moldbImportPath: string, addAliases: boolean) {
     const dic = await parseText(fs.readFileSync(dicPath, 'utf8')).run();
-    if (dic.isError) throw dic
+    if (dic.isError) throw dic;
 
-    const dicVersion = getDicVersion(dic.result.blocks[0])
-    const dicName = getDicNamespace(dic.result.blocks[0])
-    const version = `Dictionary versions: ${dicName} ${dicVersion}.`
+    const dicVersion = getDicVersion(dic.result.blocks[0]);
+    const dicName = getDicNamespace(dic.result.blocks[0]);
+    const version = `Dictionary versions: ${dicName} ${dicVersion}.`;
 
-    const frames: CifFrame[] = [...dic.result.blocks[0].saveFrames]
-    const imports = await resolveImports(frames, path.dirname(dicPath))
-    const schema = generateSchema(frames, imports)
+    const frames: CifFrame[] = [...dic.result.blocks[0].saveFrames];
+    const imports = await resolveImports(frames, path.dirname(dicPath));
+    const schema = generateSchema(frames, imports);
 
-    await runGenerateSchema(name, version, schema, fieldNamesPath, typescript, out, moldbImportPath, addAliases)
+    await runGenerateSchema(name, version, schema, fieldNamesPath, typescript, out, moldbImportPath, addAliases);
 }
 
 async function runGenerateSchema(name: string, version: string, schema: Database, fieldNamesPath: string, typescript = false, out: string, moldbImportPath: string, addAliases: boolean) {
-    const filter = fieldNamesPath ? await getFieldNamesFilter(fieldNamesPath) : undefined
-    const output = typescript ? generate(name, version, schema, filter, moldbImportPath, addAliases) : JSON.stringify(schema, undefined, 4)
+    const filter = fieldNamesPath ? await getFieldNamesFilter(fieldNamesPath) : undefined;
+    const output = typescript ? generate(name, version, schema, filter, moldbImportPath, addAliases) : JSON.stringify(schema, undefined, 4);
 
     if (out) {
-        fs.writeFileSync(out, output)
+        fs.writeFileSync(out, output);
     } else {
-        console.log(output)
+        console.log(output);
     }
 }
 
 async function getFieldNamesFilter(fieldNamesPath: string): Promise<Filter> {
-    const fieldNamesStr = fs.readFileSync(fieldNamesPath, 'utf8')
+    const fieldNamesStr = fs.readFileSync(fieldNamesPath, 'utf8');
     const parsed = await parseCsv(fieldNamesStr, { noColumnNames: true }).run();
-    if (parsed.isError) throw parser.error
+    if (parsed.isError) throw parser.error;
     const csvFile = parsed.result;
 
-    const fieldNamesCol = csvFile.table.getColumn('0')
-    if (!fieldNamesCol) throw 'error getting fields columns'
-    const fieldNames = fieldNamesCol.toStringArray()
+    const fieldNamesCol = csvFile.table.getColumn('0');
+    if (!fieldNamesCol) throw 'error getting fields columns';
+    const fieldNames = fieldNamesCol.toStringArray();
 
-    const filter: Filter = {}
+    const filter: Filter = {};
     fieldNames.forEach((name, i) => {
-        const [ category, field ] = name.split('.')
+        const [ category, field ] = name.split('.');
         // console.log(category, field)
-        if (!filter[ category ]) filter[ category ] = {}
-        filter[ category ][ field ] = true
-    })
-    return filter
+        if (!filter[ category ]) filter[ category ] = {};
+        filter[ category ][ field ] = true;
+    });
+    return filter;
 }
 
-async function ensureMmcifDicAvailable() { await ensureDicAvailable(MMCIF_DIC_PATH, MMCIF_DIC_URL) }
-async function ensureIhmDicAvailable() { await ensureDicAvailable(IHM_DIC_PATH, IHM_DIC_URL) }
-async function ensureCarbBranchDicAvailable() { await ensureDicAvailable(CARB_BRANCH_DIC_PATH, CARB_BRANCH_DIC_URL) }
-async function ensureCarbCompDicAvailable() { await ensureDicAvailable(CARB_COMP_DIC_PATH, CARB_COMP_DIC_URL) }
+async function ensureMmcifDicAvailable() { await ensureDicAvailable(MMCIF_DIC_PATH, MMCIF_DIC_URL); }
+async function ensureIhmDicAvailable() { await ensureDicAvailable(IHM_DIC_PATH, IHM_DIC_URL); }
+async function ensureCarbBranchDicAvailable() { await ensureDicAvailable(CARB_BRANCH_DIC_PATH, CARB_BRANCH_DIC_URL); }
+async function ensureCarbCompDicAvailable() { await ensureDicAvailable(CARB_COMP_DIC_PATH, CARB_COMP_DIC_URL); }
 async function ensureCifCoreDicAvailable() {
-    await ensureDicAvailable(CIF_CORE_DIC_PATH, CIF_CORE_DIC_URL)
-    await ensureDicAvailable(CIF_CORE_ENUM_PATH, CIF_CORE_ENUM_URL)
-    await ensureDicAvailable(CIF_CORE_ATTR_PATH, CIF_CORE_ATTR_URL)
+    await ensureDicAvailable(CIF_CORE_DIC_PATH, CIF_CORE_DIC_URL);
+    await ensureDicAvailable(CIF_CORE_ENUM_PATH, CIF_CORE_ENUM_URL);
+    await ensureDicAvailable(CIF_CORE_ATTR_PATH, CIF_CORE_ATTR_URL);
 }
 
 async function ensureDicAvailable(dicPath: string, dicUrl: string) {
     if (FORCE_DIC_DOWNLOAD || !fs.existsSync(dicPath)) {
-        const name = dicUrl.substr(dicUrl.lastIndexOf('/') + 1)
-        console.log(`downloading ${name}...`)
-        const data = await fetch(dicUrl)
+        const name = dicUrl.substr(dicUrl.lastIndexOf('/') + 1);
+        console.log(`downloading ${name}...`);
+        const data = await fetch(dicUrl);
         if (!fs.existsSync(DIC_DIR)) {
             fs.mkdirSync(DIC_DIR);
         }
-        fs.writeFileSync(dicPath, await data.text())
-        console.log(`done downloading ${name}`)
+        fs.writeFileSync(dicPath, await data.text());
+        console.log(`done downloading ${name}`);
     }
 }
 
-const DIC_DIR = path.resolve(__dirname, '../../../build/dics/')
-const MMCIF_DIC_PATH = `${DIC_DIR}/mmcif_pdbx_v50.dic`
-const MMCIF_DIC_URL = 'http://mmcif.wwpdb.org/dictionaries/ascii/mmcif_pdbx_v50.dic'
-const IHM_DIC_PATH = `${DIC_DIR}/ihm-extension.dic`
-const IHM_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/IHM-dictionary/master/ihm-extension.dic'
-const CARB_BRANCH_DIC_PATH = `${DIC_DIR}/entity_branch-extension.dic`
-const CARB_BRANCH_DIC_URL = 'https://raw.githubusercontent.com/pdbxmmcifwg/carbohydrate-extension/master/dict/entity_branch-extension.dic'
-const CARB_COMP_DIC_PATH = `${DIC_DIR}/chem_comp-extension.dic`
-const CARB_COMP_DIC_URL = 'https://raw.githubusercontent.com/pdbxmmcifwg/carbohydrate-extension/master/dict/chem_comp-extension.dic'
-
-const CIF_CORE_DIC_PATH = `${DIC_DIR}/cif_core.dic`
-const CIF_CORE_DIC_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/cif_core.dic'
-const CIF_CORE_ENUM_PATH = `${DIC_DIR}/templ_enum.cif`
-const CIF_CORE_ENUM_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/templ_enum.cif'
-const CIF_CORE_ATTR_PATH = `${DIC_DIR}/templ_attr.cif`
-const CIF_CORE_ATTR_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/templ_attr.cif'
+const DIC_DIR = path.resolve(__dirname, '../../../build/dics/');
+const MMCIF_DIC_PATH = `${DIC_DIR}/mmcif_pdbx_v50.dic`;
+const MMCIF_DIC_URL = 'http://mmcif.wwpdb.org/dictionaries/ascii/mmcif_pdbx_v50.dic';
+const IHM_DIC_PATH = `${DIC_DIR}/ihm-extension.dic`;
+const IHM_DIC_URL = 'https://raw.githubusercontent.com/ihmwg/IHM-dictionary/master/ihm-extension.dic';
+const CARB_BRANCH_DIC_PATH = `${DIC_DIR}/entity_branch-extension.dic`;
+const CARB_BRANCH_DIC_URL = 'https://raw.githubusercontent.com/pdbxmmcifwg/carbohydrate-extension/master/dict/entity_branch-extension.dic';
+const CARB_COMP_DIC_PATH = `${DIC_DIR}/chem_comp-extension.dic`;
+const CARB_COMP_DIC_URL = 'https://raw.githubusercontent.com/pdbxmmcifwg/carbohydrate-extension/master/dict/chem_comp-extension.dic';
+
+const CIF_CORE_DIC_PATH = `${DIC_DIR}/cif_core.dic`;
+const CIF_CORE_DIC_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/cif_core.dic';
+const CIF_CORE_ENUM_PATH = `${DIC_DIR}/templ_enum.cif`;
+const CIF_CORE_ENUM_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/templ_enum.cif';
+const CIF_CORE_ATTR_PATH = `${DIC_DIR}/templ_attr.cif`;
+const CIF_CORE_ATTR_URL = 'https://raw.githubusercontent.com/COMCIFS/cif_core/master/templ_attr.cif';
 
 const parser = new argparse.ArgumentParser({
     addHelp: true,
@@ -231,44 +231,44 @@ interface Args {
 }
 const args: Args = parser.parseArgs();
 
-const FORCE_DIC_DOWNLOAD = args.forceDicDownload
+const FORCE_DIC_DOWNLOAD = args.forceDicDownload;
 
 switch (args.preset) {
     case 'mmCIF':
-        args.name = 'mmCIF'
-        args.dic = 'mmCIF'
-        args.fieldNamesPath = path.resolve(__dirname, '../../../data/cif-field-names/mmcif-field-names.csv')
-        break
+        args.name = 'mmCIF';
+        args.dic = 'mmCIF';
+        args.fieldNamesPath = path.resolve(__dirname, '../../../data/cif-field-names/mmcif-field-names.csv');
+        break;
     case 'CCD':
-        args.name = 'CCD'
-        args.dic = 'mmCIF'
-        args.fieldNamesPath = path.resolve(__dirname, '../../../data/cif-field-names/ccd-field-names.csv')
-        break
+        args.name = 'CCD';
+        args.dic = 'mmCIF';
+        args.fieldNamesPath = path.resolve(__dirname, '../../../data/cif-field-names/ccd-field-names.csv');
+        break;
     case 'BIRD':
-        args.name = 'BIRD'
-        args.dic = 'mmCIF'
-        args.fieldNamesPath = path.resolve(__dirname, '../../../data/cif-field-names/bird-field-names.csv')
-        break
+        args.name = 'BIRD';
+        args.dic = 'mmCIF';
+        args.fieldNamesPath = path.resolve(__dirname, '../../../data/cif-field-names/bird-field-names.csv');
+        break;
     case 'CifCore':
-        args.name = 'CifCore'
-        args.dic = 'CifCore'
-        args.fieldNamesPath = path.resolve(__dirname, '../../../data/cif-field-names/cif-core-field-names.csv')
-        break
+        args.name = 'CifCore';
+        args.dic = 'CifCore';
+        args.fieldNamesPath = path.resolve(__dirname, '../../../data/cif-field-names/cif-core-field-names.csv');
+        break;
 }
 
 if (args.name) {
-    const typescript = args.targetFormat === 'typescript-molstar'
+    const typescript = args.targetFormat === 'typescript-molstar';
     if (args.dicPath) {
         runGenerateSchemaDic(args.name, args.dicPath, args.fieldNamesPath, typescript, args.out, args.moldataImportPath, args.addAliases).catch(e => {
-            console.error(e)
-        })
+            console.error(e);
+        });
     } else if (args.dic === 'mmCIF') {
         runGenerateSchemaMmcif(args.name, args.fieldNamesPath, typescript, args.out, args.moldataImportPath, args.addAliases).catch(e => {
-            console.error(e)
-        })
+            console.error(e);
+        });
     } else if (args.dic === 'CifCore') {
         runGenerateSchemaCifCore(args.name, args.fieldNamesPath, typescript, args.out, args.moldataImportPath, args.addAliases).catch(e => {
-            console.error(e)
-        })
+            console.error(e);
+        });
     }
 }

src/apps/cifschema/util/cif-dic.ts

@@ -4,9 +4,9 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Database, Column, EnumCol, StrCol, IntCol, ListCol, FloatCol, CoordCol, MatrixCol, VectorCol } from './schema'
-import { parseImportGet } from './helper'
-import * as Data from '../../../mol-io/reader/cif/data-model'
+import { Database, Column, EnumCol, StrCol, IntCol, ListCol, FloatCol, CoordCol, MatrixCol, VectorCol } from './schema';
+import { parseImportGet } from './helper';
+import * as Data from '../../../mol-io/reader/cif/data-model';
 import { CifFrame } from '../../../mol-io/reader/cif/data-model';
 
 export function getFieldType(type: string, description: string, values?: string[], container?: string): Column {
@@ -21,7 +21,7 @@ export function getFieldType(type: string, description: string, values?: string[
         case 'uchar3':
         case 'uchar1':
         case 'boolean':
-            return values && values.length ? EnumCol(values, 'str', description) : StrCol(description)
+            return values && values.length ? EnumCol(values, 'str', description) : StrCol(description);
         case 'aliasname':
         case 'name':
         case 'idname':
@@ -56,19 +56,19 @@ export function getFieldType(type: string, description: string, values?: string[
         case 'symop':
         case 'exp_data_doi':
         case 'asym_id':
-            return StrCol(description)
+            return StrCol(description);
         case 'int':
         case 'non_negative_int':
         case 'positive_int':
-            return values && values.length ? EnumCol(values, 'int', description) : IntCol(description)
+            return values && values.length ? EnumCol(values, 'int', description) : IntCol(description);
         case 'float':
-            return FloatCol(description)
+            return FloatCol(description);
         case 'ec-type':
         case 'ucode-alphanum-csv':
         case 'id_list':
-            return ListCol('str', ',', description)
+            return ListCol('str', ',', description);
         case 'id_list_spc':
-            return ListCol('str', ' ', description)
+            return ListCol('str', ' ', description);
 
         // cif
         case 'Text':
@@ -82,28 +82,28 @@ export function getFieldType(type: string, description: string, values?: string[
         case 'Datetime':
         case 'Tag':
         case 'Implied':
-            return wrapContainer('str', ',', description, container)
+            return wrapContainer('str', ',', description, container);
         case 'Real':
-            return wrapContainer('float', ',', description, container)
+            return wrapContainer('float', ',', description, container);
         case 'Integer':
-            return wrapContainer('int', ',', description, container)
+            return wrapContainer('int', ',', description, container);
 
     }
-    console.log(`unknown type '${type}'`)
-    return StrCol(description)
+    console.log(`unknown type '${type}'`);
+    return StrCol(description);
 }
 
 function ColFromType(type: 'int' | 'str' | 'float' | 'coord', description: string): Column {
     switch (type) {
-        case 'int': return IntCol(description)
-        case 'str': return StrCol(description)
-        case 'float': return FloatCol(description)
-        case 'coord': return CoordCol(description)
+        case 'int': return IntCol(description);
+        case 'str': return StrCol(description);
+        case 'float': return FloatCol(description);
+        case 'coord': return CoordCol(description);
     }
 }
 
 function wrapContainer(type: 'int' | 'str' | 'float' | 'coord', separator: string, description: string, container?: string) {
-    return container && container === 'List' ? ListCol(type, separator, description) : ColFromType(type, description)
+    return container && container === 'List' ? ListCol(type, separator, description) : ColFromType(type, description);
 }
 
 type FrameCategories = { [category: string]: Data.CifFrame }
@@ -117,107 +117,107 @@ interface FrameData {
 type Imports = Map<string, CifFrame[]>
 
 function getImportFrames(d: Data.CifFrame, imports: Imports) {
-    const frames: Data.CifFrame[] = []
-    if (!('import' in d.categories)) return frames
+    const frames: Data.CifFrame[] = [];
+    if (!('import' in d.categories)) return frames;
 
-    const importGet = parseImportGet(d.categories['import'].getField('get')!.str(0))
+    const importGet = parseImportGet(d.categories['import'].getField('get')!.str(0));
     for (const g of importGet) {
-        const { file, save } = g
+        const { file, save } = g;
         if (!file || !save) {
-            console.warn(`missing 'save' or 'file' for import in '${d.header}'`)
-            continue
+            console.warn(`missing 'save' or 'file' for import in '${d.header}'`);
+            continue;
         }
-        const importFrames = imports.get(file)
+        const importFrames = imports.get(file);
         if (!importFrames) {
-            console.warn(`missing '${file}' entry in imports`)
-            continue
+            console.warn(`missing '${file}' entry in imports`);
+            continue;
         }
-        const importSave = importFrames.find(id => id.header.toLowerCase() === save.toLowerCase())
+        const importSave = importFrames.find(id => id.header.toLowerCase() === save.toLowerCase());
         if (!importSave) {
-            console.warn(`missing '${save}' save frame in '${file}'`)
-            continue
+            console.warn(`missing '${save}' save frame in '${file}'`);
+            continue;
         }
 
-        frames.push(importSave)
+        frames.push(importSave);
     }
 
-    return frames
+    return frames;
 }
 
 /** get field from given or linked category */
 function getField(category: string, field: string, d: Data.CifFrame, imports: Imports, ctx: FrameData): Data.CifField|undefined {
-    const { categories, links } = ctx
-    const cat = d.categories[category]
+    const { categories, links } = ctx;
+    const cat = d.categories[category];
     if (cat) {
-        return cat.getField(field)
+        return cat.getField(field);
     } else if (d.header in links) {
-        const linkName = links[d.header]
+        const linkName = links[d.header];
         if (linkName in categories) {
-            return getField(category, field, categories[linkName], imports, ctx)
+            return getField(category, field, categories[linkName], imports, ctx);
         } else {
             // console.log(`link '${linkName}' not found`)
         }
     } else {
-        const importFrames = getImportFrames(d, imports)
+        const importFrames = getImportFrames(d, imports);
         for (const idf of importFrames) {
-            return getField(category, field, idf, imports, ctx)
+            return getField(category, field, idf, imports, ctx);
         }
     }
 }
 
 function getEnums(d: Data.CifFrame, imports: Imports, ctx: FrameData) {
-    const value = getField('item_enumeration', 'value', d, imports, ctx)
-    const enums: string[] = []
+    const value = getField('item_enumeration', 'value', d, imports, ctx);
+    const enums: string[] = [];
     if (value) {
         for (let i = 0; i < value.rowCount; ++i) {
-            enums.push(value.str(i))
+            enums.push(value.str(i));
             // console.log(value.str(i))
         }
-        return enums
+        return enums;
     } else {
         // console.log(`item_enumeration.value not found for '${d.header}'`)
     }
 }
 
 function getContainer(d: Data.CifFrame, imports: Imports, ctx: FrameData) {
-    const value = getField('type', 'container', d, imports, ctx)
-    return value ? value.str(0) : undefined
+    const value = getField('type', 'container', d, imports, ctx);
+    return value ? value.str(0) : undefined;
 }
 
 function getCode(d: Data.CifFrame, imports: Imports, ctx: FrameData): [string, string[] | undefined, string | undefined ] | undefined {
-    const code = getField('item_type', 'code', d, imports, ctx) || getField('type', 'contents', d, imports, ctx)
+    const code = getField('item_type', 'code', d, imports, ctx) || getField('type', 'contents', d, imports, ctx);
     if (code) {
-        return [ code.str(0), getEnums(d, imports, ctx), getContainer(d, imports, ctx) ]
+        return [ code.str(0), getEnums(d, imports, ctx), getContainer(d, imports, ctx) ];
     } else {
-        console.log(`item_type.code or type.contents not found for '${d.header}'`)
+        console.log(`item_type.code or type.contents not found for '${d.header}'`);
     }
 }
 
 function getSubCategory(d: Data.CifFrame, imports: Imports, ctx: FrameData): string | undefined {
-    const value = getField('item_sub_category', 'id', d, imports, ctx)
+    const value = getField('item_sub_category', 'id', d, imports, ctx);
     if (value) {
-        return value.str(0)
+        return value.str(0);
     }
 }
 
 function getDescription(d: Data.CifFrame, imports: Imports, ctx: FrameData): string | undefined {
-    const value = getField('item_description', 'description', d, imports, ctx) || getField('description', 'text', d, imports, ctx)
+    const value = getField('item_description', 'description', d, imports, ctx) || getField('description', 'text', d, imports, ctx);
     if (value) {
         // trim (after newlines) and remove references to square brackets
         return value.str(0).trim()
             .replace(/(\r\n|\r|\n)([ \t]+)/g, '\n')
             .replace(/(\[[1-3]\])+ element/, 'elements')
-            .replace(/(\[[1-3]\])+/, '')
+            .replace(/(\[[1-3]\])+/, '');
     }
 }
 
 function getAliases(d: Data.CifFrame, imports: Imports, ctx: FrameData): string[] | undefined {
-    const value = getField('item_aliases', 'alias_name', d, imports, ctx) || getField('alias', 'definition_id', d, imports, ctx)
-    return value ? value.toStringArray().map(v => v.substr(1)) : undefined
+    const value = getField('item_aliases', 'alias_name', d, imports, ctx) || getField('alias', 'definition_id', d, imports, ctx);
+    return value ? value.toStringArray().map(v => v.substr(1)) : undefined;
 }
 
-const reMatrixField = /\[[1-3]\]\[[1-3]\]/
-const reVectorField = /\[[1-3]\]/
+const reMatrixField = /\[[1-3]\]\[[1-3]\]/;
+const reVectorField = /\[[1-3]\]/;
 
 const FORCE_INT_FIELDS = [
     '_atom_site.id',
@@ -245,8 +245,8 @@ const FORCE_MATRIX_FIELDS_MAP: { [k: string]: string } = {
     'atom_site_aniso.U_23_su': 'U_su',
     'atom_site_aniso.U_13_su': 'U_su',
     'atom_site_aniso.U_12_su': 'U_su',
-}
-const FORCE_MATRIX_FIELDS = Object.keys(FORCE_MATRIX_FIELDS_MAP)
+};
+const FORCE_MATRIX_FIELDS = Object.keys(FORCE_MATRIX_FIELDS_MAP);
 
 const EXTRA_ALIASES: Database['aliases'] = {
     'atom_site_aniso.U': [
@@ -256,7 +256,7 @@ const EXTRA_ALIASES: Database['aliases'] = {
         'atom_site_aniso_U_esd',
         'atom_site_anisotrop_U_esd',
     ],
-}
+};
 
 const COMMA_SEPARATED_LIST_FIELDS = [
     '_atom_site.pdbx_struct_group_id',
@@ -294,7 +294,7 @@ const SPACE_SEPARATED_LIST_FIELDS = [
 
 const SEMICOLON_SEPARATED_LIST_FIELDS = [
     '_chem_comp.pdbx_synonyms' // GLYCERIN; PROPANE-1,2,3-TRIOL
-]
+];
 
 /**
  * Useful when a dictionary extension will add enum values to an existing dictionary.
@@ -303,173 +303,173 @@ const SEMICOLON_SEPARATED_LIST_FIELDS = [
  */
 const EXTRA_ENUM_VALUES: { [k: string]: string[] } = {
 
-}
+};
 
 export function generateSchema(frames: CifFrame[], imports: Imports = new Map()): Database {
-    const tables: Database['tables'] = {}
-    const aliases: Database['aliases'] = { ...EXTRA_ALIASES }
+    const tables: Database['tables'] = {};
+    const aliases: Database['aliases'] = { ...EXTRA_ALIASES };
 
-    const categories: FrameCategories = {}
-    const links: FrameLinks = {}
-    const ctx = { categories, links }
+    const categories: FrameCategories = {};
+    const links: FrameLinks = {};
+    const ctx = { categories, links };
 
     // get category metadata
     frames.forEach(d => {
         // category definitions in mmCIF start with '_' and don't include a '.'
         // category definitions in cifCore don't include a '.'
-        if (d.header[0] === '_'  || d.header.includes('.')) return
-        const categoryName = d.header.toLowerCase()
+        if (d.header[0] === '_'  || d.header.includes('.')) return;
+        const categoryName = d.header.toLowerCase();
         // console.log(d.header, d.categoryNames, d.categories)
-        let descriptionField: Data.CifField | undefined
-        const categoryKeyNames = new Set<string>()
+        let descriptionField: Data.CifField | undefined;
+        const categoryKeyNames = new Set<string>();
 
         if ('category' in d.categories && 'category_key' in d.categories) {
-            const category = d.categories['category']
-            const categoryKey = d.categories['category_key']
+            const category = d.categories['category'];
+            const categoryKey = d.categories['category_key'];
             if (categoryKey) {
-                const categoryKey_names = categoryKey.getField('name')
+                const categoryKey_names = categoryKey.getField('name');
                 if (categoryKey_names) {
                     for (let i = 0, il = categoryKey_names.rowCount; i < il; ++i) {
-                        categoryKeyNames.add(categoryKey_names.str(i))
+                        categoryKeyNames.add(categoryKey_names.str(i));
                     }
                 }
             }
 
-            descriptionField = category.getField('description')
+            descriptionField = category.getField('description');
 
             if (categoryKeyNames.size === 0) {
-                console.log(`no key given for category '${categoryName}'`)
+                console.log(`no key given for category '${categoryName}'`);
             }
         }
 
         if ('description' in d.categories) {
-            descriptionField = d.categories['description'].getField('text')
+            descriptionField = d.categories['description'].getField('text');
         }
 
-        let description = ''
+        let description = '';
         if (descriptionField) {
             description = descriptionField.str(0).trim()
-                .replace(/(\r\n|\r|\n)([ \t]+)/g, '\n') // remove padding after newlines
+                .replace(/(\r\n|\r|\n)([ \t]+)/g, '\n'); // remove padding after newlines
         } else {
-            console.log(`no description given for category '${categoryName}'`)
+            console.log(`no description given for category '${categoryName}'`);
         }
 
-        tables[categoryName] = { description, key: categoryKeyNames, columns: {} }
+        tables[categoryName] = { description, key: categoryKeyNames, columns: {} };
 
         // console.log('++++++++++++++++++++++++++++++++++++++++++')
         // console.log('name', categoryName)
         // console.log('desc', description)
         // console.log('key', categoryKeyNames)
-    })
+    });
 
     // build list of links between categories
     frames.forEach(d => {
-        if (d.header[0] !== '_' && !d.header.includes('.')) return
-        categories[d.header] = d
-        const item_linked = d.categories['item_linked']
+        if (d.header[0] !== '_' && !d.header.includes('.')) return;
+        categories[d.header] = d;
+        const item_linked = d.categories['item_linked'];
         if (item_linked) {
-            const child_name = item_linked.getField('child_name')
-            const parent_name = item_linked.getField('parent_name')
+            const child_name = item_linked.getField('child_name');
+            const parent_name = item_linked.getField('parent_name');
             if (child_name && parent_name) {
                 for (let i = 0; i < item_linked.rowCount; ++i) {
-                    const childName = child_name.str(i)
-                    const parentName = parent_name.str(i)
+                    const childName = child_name.str(i);
+                    const parentName = parent_name.str(i);
                     if (childName in links && links[childName] !== parentName) {
-                        console.log(`${childName} linked to ${links[childName]}, ignoring link to ${parentName}`)
+                        console.log(`${childName} linked to ${links[childName]}, ignoring link to ${parentName}`);
                     }
-                    links[childName] = parentName
+                    links[childName] = parentName;
                 }
             }
         }
-    })
+    });
 
     // get field data
     Object.keys(categories).forEach(fullName => {
-        const d = categories[fullName]
+        const d = categories[fullName];
         if (!d) {
-            console.log(`'${fullName}' not found, moving on`)
-            return
+            console.log(`'${fullName}' not found, moving on`);
+            return;
         }
 
-        const categoryName = d.header.substring(d.header[0] === '_' ? 1 : 0, d.header.indexOf('.'))
-        const itemName = d.header.substring(d.header.indexOf('.') + 1)
-        let fields: { [k: string]: Column }
+        const categoryName = d.header.substring(d.header[0] === '_' ? 1 : 0, d.header.indexOf('.'));
+        const itemName = d.header.substring(d.header.indexOf('.') + 1);
+        let fields: { [k: string]: Column };
         if (categoryName in tables) {
-            fields = tables[categoryName].columns
-            tables[categoryName].key.add(itemName)
+            fields = tables[categoryName].columns;
+            tables[categoryName].key.add(itemName);
         } else if (categoryName.toLowerCase() in tables) {
             // take case from category name in 'field' data as it is better if data is from cif dictionaries
-            tables[categoryName] = tables[categoryName.toLowerCase()]
-            fields = tables[categoryName].columns
+            tables[categoryName] = tables[categoryName.toLowerCase()];
+            fields = tables[categoryName].columns;
         } else {
-            console.log(`category '${categoryName}' has no metadata`)
-            fields = {}
+            console.log(`category '${categoryName}' has no metadata`);
+            fields = {};
             tables[categoryName] = {
                 description: '',
                 key: new Set(),
                 columns: fields
-            }
+            };
         }
 
-        const itemAliases = getAliases(d, imports, ctx)
-        if (itemAliases) aliases[`${categoryName}.${itemName}`] = itemAliases
+        const itemAliases = getAliases(d, imports, ctx);
+        if (itemAliases) aliases[`${categoryName}.${itemName}`] = itemAliases;
 
-        const description = getDescription(d, imports, ctx) || ''
+        const description = getDescription(d, imports, ctx) || '';
 
         // need to use regex to check for matrix or vector items
         // as sub_category assignment is missing for some entries
-        const subCategory = getSubCategory(d, imports, ctx)
+        const subCategory = getSubCategory(d, imports, ctx);
         if (subCategory === 'cartesian_coordinate' || subCategory === 'fractional_coordinate') {
-            fields[itemName] = CoordCol(description)
+            fields[itemName] = CoordCol(description);
         } else if (FORCE_INT_FIELDS.includes(d.header)) {
-            fields[itemName] = IntCol(description)
-            console.log(`forcing int: ${d.header}`)
+            fields[itemName] = IntCol(description);
+            console.log(`forcing int: ${d.header}`);
         } else if (FORCE_MATRIX_FIELDS.includes(d.header)) {
-            fields[itemName] = FloatCol(description)
-            fields[FORCE_MATRIX_FIELDS_MAP[d.header]] = MatrixCol(3, 3, description)
-            console.log(`forcing matrix: ${d.header}`)
+            fields[itemName] = FloatCol(description);
+            fields[FORCE_MATRIX_FIELDS_MAP[d.header]] = MatrixCol(3, 3, description);
+            console.log(`forcing matrix: ${d.header}`);
         } else if (subCategory === 'matrix') {
-            fields[itemName.replace(reMatrixField, '')] = MatrixCol(3, 3, description)
+            fields[itemName.replace(reMatrixField, '')] = MatrixCol(3, 3, description);
         } else if (subCategory === 'vector') {
-            fields[itemName.replace(reVectorField, '')] = VectorCol(3, description)
+            fields[itemName.replace(reVectorField, '')] = VectorCol(3, description);
         } else {
             if (itemName.match(reMatrixField)) {
-                fields[itemName.replace(reMatrixField, '')] = MatrixCol(3, 3, description)
-                console.log(`${d.header} should have 'matrix' _item_sub_category.id`)
+                fields[itemName.replace(reMatrixField, '')] = MatrixCol(3, 3, description);
+                console.log(`${d.header} should have 'matrix' _item_sub_category.id`);
             } else if (itemName.match(reVectorField)) {
-                fields[itemName.replace(reVectorField, '')] = VectorCol(3, description)
-                console.log(`${d.header} should have 'vector' _item_sub_category.id`)
+                fields[itemName.replace(reVectorField, '')] = VectorCol(3, description);
+                console.log(`${d.header} should have 'vector' _item_sub_category.id`);
             } else {
-                const code = getCode(d, imports, ctx)
+                const code = getCode(d, imports, ctx);
                 if (code) {
                     let fieldType = getFieldType(code[0], description, code[1], code[2]);
                     if (fieldType.type === 'str') {
                         if (COMMA_SEPARATED_LIST_FIELDS.includes(d.header)) {
-                            fieldType = ListCol('str', ',', description)
-                            console.log(`forcing comma separated: ${d.header}`)
+                            fieldType = ListCol('str', ',', description);
+                            console.log(`forcing comma separated: ${d.header}`);
                         } else if (SPACE_SEPARATED_LIST_FIELDS.includes(d.header)) {
-                            fieldType = ListCol('str', ' ', description)
-                            console.log(`forcing space separated: ${d.header}`)
+                            fieldType = ListCol('str', ' ', description);
+                            console.log(`forcing space separated: ${d.header}`);
                         } else if (SEMICOLON_SEPARATED_LIST_FIELDS.includes(d.header)) {
-                            fieldType = ListCol('str', ';', description)
-                            console.log(`forcing space separated: ${d.header}`)
+                            fieldType = ListCol('str', ';', description);
+                            console.log(`forcing space separated: ${d.header}`);
                         }
                     }
                     if (d.header in EXTRA_ENUM_VALUES) {
                         if (fieldType.type === 'enum') {
-                            fieldType.values.push(...EXTRA_ENUM_VALUES[d.header])
+                            fieldType.values.push(...EXTRA_ENUM_VALUES[d.header]);
                         } else {
-                            console.warn(`expected enum: ${d.header}`)
+                            console.warn(`expected enum: ${d.header}`);
                         }
                     }
-                    fields[itemName] = fieldType
+                    fields[itemName] = fieldType;
                 } else {
-                    fields[itemName] = StrCol(description)
+                    fields[itemName] = StrCol(description);
                     // console.log(`could not determine code for '${d.header}'`)
                 }
             }
         }
-    })
+    });
 
-    return { tables, aliases }
+    return { tables, aliases };
 }

src/apps/cifschema/util/generate.ts

@@ -4,8 +4,8 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Database, Filter, Column } from './schema'
-import { indentString } from '../../../mol-util/string'
+import { Database, Filter, Column } from './schema';
+import { indentString } from '../../../mol-util/string';
 import { FieldPath } from '../../../mol-io/reader/cif/schema';
 
 function header (name: string, info: string, moldataImportPath: string) {
@@ -19,133 +19,133 @@ function header (name: string, info: string, moldataImportPath: string) {
 
 import { Database, Column } from '${moldataImportPath}/db'
 
-import Schema = Column.Schema`
+import Schema = Column.Schema`;
 }
 
 function footer (name: string) {
     return `
 export type ${name}_Schema = typeof ${name}_Schema;
-export interface ${name}_Database extends Database<${name}_Schema> {}`
+export interface ${name}_Database extends Database<${name}_Schema> {}`;
 }
 
 function getTypeShorthands(schema: Database, fields?: Filter) {
-    const types = new Set<string>()
+    const types = new Set<string>();
     Object.keys(schema.tables).forEach(table => {
-        if (fields && !fields[table]) return
-        const { columns } = schema.tables[table]
+        if (fields && !fields[table]) return;
+        const { columns } = schema.tables[table];
         Object.keys(columns).forEach(columnName => {
-            if (fields && !fields[table][columnName]) return
-            types.add(schema.tables[table].columns[columnName].type)
-        })
-    })
-    const shorthands: string[] = []
+            if (fields && !fields[table][columnName]) return;
+            types.add(schema.tables[table].columns[columnName].type);
+        });
+    });
+    const shorthands: string[] = [];
     types.forEach(type => {
         switch (type) {
-            case 'str': shorthands.push('const str = Schema.str;'); break
-            case 'int': shorthands.push('const int = Schema.int;'); break
-            case 'float': shorthands.push('const float = Schema.float;'); break
-            case 'coord': shorthands.push('const coord = Schema.coord;'); break
-            case 'enum': shorthands.push('const Aliased = Schema.Aliased;'); break
-            case 'matrix': shorthands.push('const Matrix = Schema.Matrix;'); break
-            case 'vector': shorthands.push('const Vector = Schema.Vector;'); break
-            case 'list': shorthands.push('const List = Schema.List;'); break
+            case 'str': shorthands.push('const str = Schema.str;'); break;
+            case 'int': shorthands.push('const int = Schema.int;'); break;
+            case 'float': shorthands.push('const float = Schema.float;'); break;
+            case 'coord': shorthands.push('const coord = Schema.coord;'); break;
+            case 'enum': shorthands.push('const Aliased = Schema.Aliased;'); break;
+            case 'matrix': shorthands.push('const Matrix = Schema.Matrix;'); break;
+            case 'vector': shorthands.push('const Vector = Schema.Vector;'); break;
+            case 'list': shorthands.push('const List = Schema.List;'); break;
         }
-    })
-    return shorthands.join('\n')
+    });
+    return shorthands.join('\n');
 }
 
 function getTypeDef(c: Column): string {
     switch (c.type) {
-        case 'str': return 'str'
-        case 'int': return 'int'
-        case 'float': return 'float'
-        case 'coord': return 'coord'
+        case 'str': return 'str';
+        case 'int': return 'int';
+        case 'float': return 'float';
+        case 'coord': return 'coord';
         case 'enum':
-            return `Aliased<'${c.values.map(v => v.replace(/'/g, '\\\'')).join(`' | '`)}'>(${c.subType})`
+            return `Aliased<'${c.values.map(v => v.replace(/'/g, '\\\'')).join(`' | '`)}'>(${c.subType})`;
         case 'matrix':
-            return `Matrix(${c.rows}, ${c.columns})`
+            return `Matrix(${c.rows}, ${c.columns})`;
         case 'vector':
-            return `Vector(${c.length})`
+            return `Vector(${c.length})`;
         case 'list':
             if (c.subType === 'int') {
-                return `List('${c.separator}', x => parseInt(x, 10))`
+                return `List('${c.separator}', x => parseInt(x, 10))`;
             } else if (c.subType === 'float' || c.subType === 'coord') {
-                return `List('${c.separator}', x => parseFloat(x))`
+                return `List('${c.separator}', x => parseFloat(x))`;
             } else {
-                return `List('${c.separator}', x => x)`
+                return `List('${c.separator}', x => x)`;
             }
     }
 }
 
-const reSafePropertyName = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/
-function safePropertyString(name: string) { return name.match(reSafePropertyName) ? name : `'${name}'` }
+const reSafePropertyName = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;
+function safePropertyString(name: string) { return name.match(reSafePropertyName) ? name : `'${name}'`; }
 
 function doc(description: string, spacesCount: number) {
-    const spaces = ' '.repeat(spacesCount)
+    const spaces = ' '.repeat(spacesCount);
     return [
         `${spaces}/**`,
         `${indentString(description, 1, `${spaces} * `)}`.replace(/ +\n/g, '\n'),
         `${spaces} */`
-    ].join('\n')
+    ].join('\n');
 }
 
 export function generate (name: string, info: string, schema: Database, fields: Filter | undefined, moldataImportPath: string, addAliases: boolean) {
-    const codeLines: string[] = []
+    const codeLines: string[] = [];
 
     if (fields) {
         Object.keys(fields).forEach(table => {
             if (table in schema.tables) {
-                const schemaTable = schema.tables[table]
+                const schemaTable = schema.tables[table];
                 Object.keys(fields[table]).forEach(column => {
                     if (!(column in schemaTable.columns)) {
-                        console.log(`filter field '${table}.${column}' not found in schema`)
+                        console.log(`filter field '${table}.${column}' not found in schema`);
                     }
-                })
+                });
             } else {
-                console.log(`filter category '${table}' not found in schema`)
+                console.log(`filter category '${table}' not found in schema`);
             }
-        })
+        });
     }
 
-    codeLines.push(`export const ${name}_Schema = {`)
+    codeLines.push(`export const ${name}_Schema = {`);
     Object.keys(schema.tables).forEach(table => {
-        if (fields && !fields[table]) return
-        const { description, columns } = schema.tables[table]
-        if (description) codeLines.push(doc(description, 4))
-        codeLines.push(`    ${safePropertyString(table)}: {`)
+        if (fields && !fields[table]) return;
+        const { description, columns } = schema.tables[table];
+        if (description) codeLines.push(doc(description, 4));
+        codeLines.push(`    ${safePropertyString(table)}: {`);
         Object.keys(columns).forEach(columnName => {
-            if (fields && !fields[table][columnName]) return
-            const c = columns[columnName]
-            const typeDef = getTypeDef(c)
-            if (c.description) codeLines.push(doc(c.description, 8))
-            codeLines.push(`        ${safePropertyString(columnName)}: ${typeDef},`)
-        })
-        codeLines.push('    },')
-    })
-    codeLines.push('}')
+            if (fields && !fields[table][columnName]) return;
+            const c = columns[columnName];
+            const typeDef = getTypeDef(c);
+            if (c.description) codeLines.push(doc(c.description, 8));
+            codeLines.push(`        ${safePropertyString(columnName)}: ${typeDef},`);
+        });
+        codeLines.push('    },');
+    });
+    codeLines.push('}');
 
     if (addAliases) {
-        codeLines.push('')
-        codeLines.push(`export const ${name}_Aliases = {`)
+        codeLines.push('');
+        codeLines.push(`export const ${name}_Aliases = {`);
         Object.keys(schema.aliases).forEach(path => {
-            const [ table, columnName ] = path.split('.')
-            if (fields && !fields[table]) return
-            if (fields && !fields[table][columnName]) return
+            const [ table, columnName ] = path.split('.');
+            if (fields && !fields[table]) return;
+            if (fields && !fields[table][columnName]) return;
 
-            const filteredAliases = new Set<string>()
+            const filteredAliases = new Set<string>();
             schema.aliases[path].forEach(p => {
-                if (!FieldPath.equal(p, path)) filteredAliases.add(FieldPath.canonical(p))
-            })
+                if (!FieldPath.equal(p, path)) filteredAliases.add(FieldPath.canonical(p));
+            });
 
-            if (filteredAliases.size === 0) return
-            codeLines.push(`    ${safePropertyString(path)}: [`)
+            if (filteredAliases.size === 0) return;
+            codeLines.push(`    ${safePropertyString(path)}: [`);
             filteredAliases.forEach(alias => {
-                codeLines.push(`        '${alias}',`)
-            })
-            codeLines.push('    ],')
-        })
-        codeLines.push('}')
+                codeLines.push(`        '${alias}',`);
+            });
+            codeLines.push('    ],');
+        });
+        codeLines.push('}');
     }
 
-    return `${header(name, info, moldataImportPath)}\n\n${getTypeShorthands(schema, fields)}\n\n${codeLines.join('\n')}\n${footer(name)}`
+    return `${header(name, info, moldataImportPath)}\n\n${getTypeShorthands(schema, fields)}\n\n${codeLines.join('\n')}\n${footer(name)}`;
 }

src/apps/cifschema/util/helper.ts

@@ -10,11 +10,11 @@ export function parseImportGet(s: string): Import[] {
     // [{'save':hi_ang_Fox_coeffs  'file':templ_attr.cif}   {'save':hi_ang_Fox_c0  'file':templ_enum.cif}]
     // [{"file":'templ_enum.cif' "save":'H_M_ref'}]
     return s.trim().substring(2, s.length - 2).split(/}[ \n\t]*{/g).map(s => {
-        const save = s.match(/('save'|"save"):([^ \t\n]+)/)
-        const file = s.match(/('file'|"file"):([^ \t\n]+)/)
+        const save = s.match(/('save'|"save"):([^ \t\n]+)/);
+        const file = s.match(/('file'|"file"):([^ \t\n]+)/);
         return {
             save: save ? save[0].substr(7).replace(/['"]/g, '') : undefined,
             file: file ? file[0].substr(7).replace(/['"]/g, '') : undefined
-        }
-    })
+        };
+    });
 }

src/apps/cifschema/util/schema.ts

@@ -18,60 +18,60 @@ export type Column = IntCol | StrCol | FloatCol | CoordCol | EnumCol | VectorCol
 type BaseCol = { description: string }
 
 export type IntCol = { type: 'int' } & BaseCol
-export function IntCol(description: string): IntCol { return { type: 'int', description } }
+export function IntCol(description: string): IntCol { return { type: 'int', description }; }
 
 export type StrCol = { type: 'str' } & BaseCol
-export function StrCol(description: string): StrCol { return { type: 'str', description } }
+export function StrCol(description: string): StrCol { return { type: 'str', description }; }
 
 export type FloatCol = { type: 'float' } & BaseCol
-export function FloatCol(description: string): FloatCol { return { type: 'float', description } }
+export function FloatCol(description: string): FloatCol { return { type: 'float', description }; }
 
 export type CoordCol = { type: 'coord' } & BaseCol
-export function CoordCol(description: string): CoordCol { return { type: 'coord', description } }
+export function CoordCol(description: string): CoordCol { return { type: 'coord', description }; }
 
 export type EnumCol = { type: 'enum', subType: 'int' | 'str', values: string[] } & BaseCol
 export function EnumCol(values: string[], subType: 'int' | 'str', description: string): EnumCol {
-    return { type: 'enum', description, values, subType }
+    return { type: 'enum', description, values, subType };
 }
 
 export type VectorCol = { type: 'vector', length: number } & BaseCol
 export function VectorCol(length: number, description: string): VectorCol {
-    return { type: 'vector', description, length }
+    return { type: 'vector', description, length };
 }
 
 export type MatrixCol = { type: 'matrix', rows: number, columns: number } & BaseCol
 export function MatrixCol(columns: number, rows: number, description: string): MatrixCol {
-    return { type: 'matrix', description, columns, rows }
+    return { type: 'matrix', description, columns, rows };
 }
 
 export type ListCol = { type: 'list', subType: 'int' | 'str' | 'float' | 'coord', separator: string } & BaseCol
 export function ListCol(subType: 'int' | 'str' | 'float' | 'coord', separator: string, description: string): ListCol {
-    return { type: 'list', description, separator, subType }
+    return { type: 'list', description, separator, subType };
 }
 
 export type Filter = { [ table: string ]: { [ column: string ]: true } }
 
 export function mergeFilters (...filters: Filter[]) {
-    const n = filters.length
-    const mergedFilter: Filter = {}
-    const fields: Map<string, number> = new Map()
+    const n = filters.length;
+    const mergedFilter: Filter = {};
+    const fields: Map<string, number> = new Map();
     filters.forEach(filter => {
         Object.keys(filter).forEach(category => {
             Object.keys(filter[ category ]).forEach(field => {
-                const key = `${category}.${field}`
-                const value = fields.get(key) || 0
-                fields.set(key, value + 1)
-            })
-        })
-    })
+                const key = `${category}.${field}`;
+                const value = fields.get(key) || 0;
+                fields.set(key, value + 1);
+            });
+        });
+    });
     fields.forEach((v, k) => {
-        if (v !== n) return
-        const [categoryName, fieldName] = k.split('.')
+        if (v !== n) return;
+        const [categoryName, fieldName] = k.split('.');
         if (categoryName in mergedFilter) {
-            mergedFilter[categoryName][fieldName] = true
+            mergedFilter[categoryName][fieldName] = true;
         } else {
-            mergedFilter[categoryName] = { fieldName: true }
+            mergedFilter[categoryName] = { fieldName: true };
         }
-    })
-    return mergedFilter
+    });
+    return mergedFilter;
 }

src/apps/state-docs/index.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as _ from '../../mol-plugin-state/transforms'
+import * as _ from '../../mol-plugin-state/transforms';
 import { StateTransformer, StateObject } from '../../mol-state';
 import { StringBuilder } from '../../mol-util';
 import * as fs from 'fs';
@@ -13,7 +13,7 @@ import { PluginContext } from '../../mol-plugin/context';
 import { ParamDefinition } from '../../mol-util/param-definition';
 
 // force the transform to be evaluated
-_.StateTransforms.Data.Download.id
+_.StateTransforms.Data.Download.id;
 
 // Empty plugin context
 const ctx = new PluginContext({
@@ -32,7 +32,7 @@ function writeTransformer(t: StateTransformer) {
     StringBuilder.write(builder, `## <a name="${t.id.replace('.', '-')}"></a>${t.id} :: ${typeToString(t.definition.from)} -> ${typeToString(t.definition.to)}`);
     StringBuilder.newline(builder);
     if (t.definition.display.description) {
-        StringBuilder.write(builder, `*${t.definition.display.description}*`)
+        StringBuilder.write(builder, `*${t.definition.display.description}*`);
         StringBuilder.newline(builder);
     }
     StringBuilder.newline(builder);
@@ -48,7 +48,7 @@ function writeTransformer(t: StateTransformer) {
         StringBuilder.write(builder, `\`\`\`js\n${JSON.stringify(ParamDefinition.getDefaultValues(params), null, 2)}\n\`\`\``);
         StringBuilder.newline(builder);
     }
-    StringBuilder.write(builder, '----------------------------')
+    StringBuilder.write(builder, '----------------------------');
     StringBuilder.newline(builder);
 }
 
@@ -62,7 +62,7 @@ transformers.forEach(t => {
     StringBuilder.newline(builder);
 });
 StringBuilder.newline(builder);
-StringBuilder.write(builder, '----------------------------')
+StringBuilder.write(builder, '----------------------------');
 StringBuilder.newline(builder);
 transformers.forEach(t => writeTransformer(t));
 

src/apps/structure-info/helpers.ts

@@ -4,19 +4,19 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as util from 'util'
-import * as fs from 'fs'
-import fetch from 'node-fetch'
+import * as util from 'util';
+import * as fs from 'fs';
+import fetch from 'node-fetch';
 require('util.promisify').shim();
 
-import { CIF } from '../../mol-io/reader/cif'
-import { Progress } from '../../mol-task'
+import { CIF } from '../../mol-io/reader/cif';
+import { Progress } from '../../mol-task';
 
 const readFileAsync = util.promisify(fs.readFile);
 
 async function readFile(path: string) {
     if (path.match(/\.bcif$/)) {
-        const input = await readFileAsync(path)
+        const input = await readFileAsync(path);
         const data = new Uint8Array(input.byteLength);
         for (let i = 0; i < input.byteLength; i++) data[i] = input[i];
         return data;

src/apps/structure-info/model.ts

@@ -5,11 +5,11 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as argparse from 'argparse'
+import * as argparse from 'argparse';
 require('util.promisify').shim();
 
-import { CifFrame } from '../../mol-io/reader/cif'
-import { Model, Structure, StructureElement, Unit, StructureProperties, UnitRing } from '../../mol-model/structure'
+import { CifFrame } from '../../mol-io/reader/cif';
+import { Model, Structure, StructureElement, Unit, StructureProperties, UnitRing } from '../../mol-model/structure';
 // import { Run, Progress } from '../../mol-task'
 import { OrderedSet } from '../../mol-data/int';
 import { openCif, downloadCif } from './helpers';
@@ -32,30 +32,30 @@ export async function readCifFile(path: string) {
 }
 
 export function atomLabel(model: Model, aI: number) {
-    const { atoms, residues, chains, residueAtomSegments, chainAtomSegments } = model.atomicHierarchy
-    const { label_atom_id } = atoms
-    const { label_comp_id, label_seq_id } = residues
-    const { label_asym_id } = chains
-    const rI = residueAtomSegments.index[aI]
-    const cI = chainAtomSegments.index[aI]
-    return `${label_asym_id.value(cI)} ${label_comp_id.value(rI)} ${label_seq_id.value(rI)} ${label_atom_id.value(aI)}`
+    const { atoms, residues, chains, residueAtomSegments, chainAtomSegments } = model.atomicHierarchy;
+    const { label_atom_id } = atoms;
+    const { label_comp_id, label_seq_id } = residues;
+    const { label_asym_id } = chains;
+    const rI = residueAtomSegments.index[aI];
+    const cI = chainAtomSegments.index[aI];
+    return `${label_asym_id.value(cI)} ${label_comp_id.value(rI)} ${label_seq_id.value(rI)} ${label_atom_id.value(aI)}`;
 }
 
 export function residueLabel(model: Model, rI: number) {
-    const { residues, chains, residueAtomSegments, chainAtomSegments } = model.atomicHierarchy
-    const { label_comp_id, label_seq_id } = residues
-    const { label_asym_id } = chains
-    const cI = chainAtomSegments.index[residueAtomSegments.offsets[rI]]
-    return `${label_asym_id.value(cI)} ${label_comp_id.value(rI)} ${label_seq_id.value(rI)}`
+    const { residues, chains, residueAtomSegments, chainAtomSegments } = model.atomicHierarchy;
+    const { label_comp_id, label_seq_id } = residues;
+    const { label_asym_id } = chains;
+    const cI = chainAtomSegments.index[residueAtomSegments.offsets[rI]];
+    return `${label_asym_id.value(cI)} ${label_comp_id.value(rI)} ${label_seq_id.value(rI)}`;
 }
 
 export function printSecStructure(model: Model) {
     console.log('\nSecondary Structure\n=============');
     const { residues } = model.atomicHierarchy;
     const secondaryStructure = ModelSecondaryStructure.Provider.get(model);
-    if (!secondaryStructure) return
+    if (!secondaryStructure) return;
 
-    const { key, elements } = secondaryStructure
+    const { key, elements } = secondaryStructure;
     const count = residues._rowCount;
     let rI = 0;
     while (rI < count) {
@@ -116,7 +116,7 @@ export function printSequence(model: Model) {
     const { byEntityKey } = model.sequence;
     for (const key of Object.keys(byEntityKey)) {
         const { sequence, entityId } = byEntityKey[+key];
-        const { seqId, compId } = sequence
+        const { seqId, compId } = sequence;
         console.log(`${entityId} (${sequence.kind} ${seqId.value(0)} (offset ${sequence.offset}), ${seqId.value(seqId.rowCount - 1)}) (${compId.value(0)}, ${compId.value(compId.rowCount - 1)})`);
         console.log(`${Sequence.getSequenceString(sequence)}`);
     }
@@ -132,7 +132,7 @@ export function printRings(structure: Structure) {
         for (let i = 0, _i = Math.min(5, all.length); i < _i; i++) {
             fps[fps.length] = UnitRing.fingerprint(unit, all[i]);
         }
-        if (all.length > 5) fps.push('...')
+        if (all.length > 5) fps.push('...');
         console.log(`Unit ${unit.id}, ${all.length} ring(s), ${byFingerprint.size} different fingerprint(s).\n  ${fps.join(', ')}`);
     }
     console.log();
@@ -171,8 +171,8 @@ export function printUnits(structure: Structure) {
 
 export function printSymmetryInfo(model: Model) {
     console.log('\nSymmetry Info\n=============');
-    const symmetry = ModelSymmetry.Provider.get(model)
-    if (!symmetry) return
+    const symmetry = ModelSymmetry.Provider.get(model);
+    if (!symmetry) return;
     const { size, anglesInRadians } = symmetry.spacegroup.cell;
     console.log(`Spacegroup: ${symmetry.spacegroup.name} size: ${Vec3.toString(size)} angles: ${Vec3.toString(anglesInRadians)}`);
     console.log(`Assembly names: ${symmetry.assemblies.map(a => a.id).join(', ')}`);
@@ -213,7 +213,7 @@ async function run(frame: CifFrame, args: Args) {
 }
 
 async function runDL(pdb: string, args: Args) {
-    const mmcif = await downloadFromPdb(pdb)
+    const mmcif = await downloadFromPdb(pdb);
     run(mmcif, args);
 }
 
@@ -255,5 +255,5 @@ interface Args {
 }
 const args: Args = parser.parseArgs();
 
-if (args.download) runDL(args.download, args)
-else if (args.file) runFile(args.file, args)
+if (args.download) runDL(args.download, args);
+else if (args.file) runFile(args.file, args);

src/apps/structure-info/volume.ts

@@ -4,13 +4,13 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as fs from 'fs'
-import * as argparse from 'argparse'
-import * as util from 'util'
+import * as fs from 'fs';
+import * as argparse from 'argparse';
+import * as util from 'util';
 
-import { VolumeData, VolumeIsoValue } from '../../mol-model/volume'
-import { downloadCif } from './helpers'
-import { CIF } from '../../mol-io/reader/cif'
+import { VolumeData, VolumeIsoValue } from '../../mol-model/volume';
+import { downloadCif } from './helpers';
+import { CIF } from '../../mol-io/reader/cif';
 import { DensityServer_Data_Database } from '../../mol-io/reader/cif/schema/density-server';
 import { Table } from '../../mol-data/db';
 import { StringBuilder } from '../../mol-util';

src/apps/viewer/extensions/cellpack/color.ts

@@ -4,40 +4,40 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { ThemeDataContext } from '../../../../mol-theme/theme'
-import { ParamDefinition as PD } from '../../../../mol-util/param-definition'
-import { Color } from '../../../../mol-util/color'
-import { getPalette } from '../../../../mol-util/color/palette'
-import { ColorTheme, LocationColor } from '../../../../mol-theme/color'
-import { ScaleLegend, TableLegend } from '../../../../mol-util/legend'
-import { StructureElement, Bond } from '../../../../mol-model/structure'
+import { ThemeDataContext } from '../../../../mol-theme/theme';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
+import { Color } from '../../../../mol-util/color';
+import { getPalette } from '../../../../mol-util/color/palette';
+import { ColorTheme, LocationColor } from '../../../../mol-theme/color';
+import { ScaleLegend, TableLegend } from '../../../../mol-util/legend';
+import { StructureElement, Bond } from '../../../../mol-model/structure';
 import { Location } from '../../../../mol-model/location';
-import { CellPackInfoProvider } from './property'
-import { distinctColors } from '../../../../mol-util/color/distinct'
-import { Hcl } from '../../../../mol-util/color/spaces/hcl'
+import { CellPackInfoProvider } from './property';
+import { distinctColors } from '../../../../mol-util/color/distinct';
+import { Hcl } from '../../../../mol-util/color/spaces/hcl';
 
 
-const DefaultColor = Color(0xCCCCCC)
-const Description = 'Gives every model in a CellPack packing a unique color similar to other models in the packing.'
+const DefaultColor = Color(0xCCCCCC);
+const Description = 'Gives every model in a CellPack packing a unique color similar to other models in the packing.';
 
-export const CellPackColorThemeParams = {}
+export const CellPackColorThemeParams = {};
 export type CellPackColorThemeParams = typeof CellPackColorThemeParams
 export function getCellPackColorThemeParams(ctx: ThemeDataContext) {
-    return CellPackColorThemeParams // TODO return copy
+    return CellPackColorThemeParams; // TODO return copy
 }
 
 export function CellPackColorTheme(ctx: ThemeDataContext, props: PD.Values<CellPackColorThemeParams>): ColorTheme<CellPackColorThemeParams> {
-    let color: LocationColor
-    let legend: ScaleLegend | TableLegend | undefined
+    let color: LocationColor;
+    let legend: ScaleLegend | TableLegend | undefined;
 
-    const info = ctx.structure && CellPackInfoProvider.get(ctx.structure).value
+    const info = ctx.structure && CellPackInfoProvider.get(ctx.structure).value;
 
     if (ctx.structure && info) {
-        const colors = distinctColors(info.packingsCount)
-        const hcl = Hcl.fromColor(Hcl(), colors[info.packingIndex])
-        const hue = [Math.max(0, hcl[0] - 35), Math.min(360, hcl[0] + 35)] as [number, number]
+        const colors = distinctColors(info.packingsCount);
+        const hcl = Hcl.fromColor(Hcl(), colors[info.packingIndex]);
+        const hue = [Math.max(0, hcl[0] - 35), Math.min(360, hcl[0] + 35)] as [number, number];
 
-        const { models } = ctx.structure.root
+        const { models } = ctx.structure.root;
 
         let size = 0;
         for (const m of models) size = Math.max(size, m.trajectoryInfo.size);
@@ -49,24 +49,24 @@ export function CellPackColorTheme(ctx: ThemeDataContext, props: PD.Values<CellP
                 clusteringStepCount: 50, minSampleCount: 800, maxCount: 75,
                 minLabel: 'Min', maxLabel: 'Max', valueLabel: (i: number) => `${i + 1}`,
             }
-        }})
-        legend = palette.legend
-        const modelColor = new Map<number, Color>()
+        }});
+        legend = palette.legend;
+        const modelColor = new Map<number, Color>();
         for (let i = 0, il = models.length; i < il; ++i) {
             const idx = models[i].trajectoryInfo.index;
-            modelColor.set(models[i].trajectoryInfo.index, palette.color(idx))
+            modelColor.set(models[i].trajectoryInfo.index, palette.color(idx));
         }
 
         color = (location: Location): Color => {
             if (StructureElement.Location.is(location)) {
-                return modelColor.get(location.unit.model.trajectoryInfo.index)!
+                return modelColor.get(location.unit.model.trajectoryInfo.index)!;
             } else if (Bond.isLocation(location)) {
-                return modelColor.get(location.aUnit.model.trajectoryInfo.index)!
+                return modelColor.get(location.aUnit.model.trajectoryInfo.index)!;
             }
-            return DefaultColor
-        }
+            return DefaultColor;
+        };
     } else {
-        color = () => DefaultColor
+        color = () => DefaultColor;
     }
 
     return {
@@ -76,7 +76,7 @@ export function CellPackColorTheme(ctx: ThemeDataContext, props: PD.Values<CellP
         props,
         description: Description,
         legend
-    }
+    };
 }
 
 export const CellPackColorThemeProvider: ColorTheme.Provider<CellPackColorThemeParams, 'cellpack'> = {
@@ -91,6 +91,6 @@ export const CellPackColorThemeProvider: ColorTheme.Provider<CellPackColorThemeP
             !!ctx.structure && ctx.structure.elementCount > 0 &&
             ctx.structure.models[0].trajectoryInfo.size > 1 &&
             !!CellPackInfoProvider.get(ctx.structure).value
-        )
+        );
     }
-}
+};

src/apps/viewer/extensions/cellpack/curve.ts

@@ -14,210 +14,210 @@ interface Frame {
     s: Vec3,
 }
 
-const a0Tmp = Vec3()
-const a1Tmp = Vec3()
-const a2Tmp = Vec3()
-const a3Tmp = Vec3()
+const a0Tmp = Vec3();
+const a1Tmp = Vec3();
+const a2Tmp = Vec3();
+const a3Tmp = Vec3();
 function CubicInterpolate(out: Vec3, y0: Vec3, y1: Vec3, y2: Vec3, y3: Vec3, mu: number): Vec3 {
     const mu2 = mu * mu;
-    Vec3.sub(a0Tmp, y3, y2)
-    Vec3.sub(a0Tmp, a0Tmp, y0)
-    Vec3.add(a0Tmp, a0Tmp, y1)
+    Vec3.sub(a0Tmp, y3, y2);
+    Vec3.sub(a0Tmp, a0Tmp, y0);
+    Vec3.add(a0Tmp, a0Tmp, y1);
 
-    Vec3.sub(a1Tmp, y0, y1)
-    Vec3.sub(a1Tmp, a1Tmp, a0Tmp)
+    Vec3.sub(a1Tmp, y0, y1);
+    Vec3.sub(a1Tmp, a1Tmp, a0Tmp);
 
-    Vec3.sub(a2Tmp, y2, y0)
+    Vec3.sub(a2Tmp, y2, y0);
 
-    Vec3.copy(a3Tmp, y1)
+    Vec3.copy(a3Tmp, y1);
 
-    out[0] = a0Tmp[0] * mu * mu2 + a1Tmp[0] * mu2 + a2Tmp[0] * mu + a3Tmp[0]
-    out[1] = a0Tmp[1] * mu * mu2 + a1Tmp[1] * mu2 + a2Tmp[1] * mu + a3Tmp[1]
-    out[2] = a0Tmp[2] * mu * mu2 + a1Tmp[2] * mu2 + a2Tmp[2] * mu + a3Tmp[2]
+    out[0] = a0Tmp[0] * mu * mu2 + a1Tmp[0] * mu2 + a2Tmp[0] * mu + a3Tmp[0];
+    out[1] = a0Tmp[1] * mu * mu2 + a1Tmp[1] * mu2 + a2Tmp[1] * mu + a3Tmp[1];
+    out[2] = a0Tmp[2] * mu * mu2 + a1Tmp[2] * mu2 + a2Tmp[2] * mu + a3Tmp[2];
 
-    return out
+    return out;
 }
 
-const cp0 = Vec3()
-const cp1 = Vec3()
-const cp2 = Vec3()
-const cp3 = Vec3()
-const currentPosition = Vec3()
+const cp0 = Vec3();
+const cp1 = Vec3();
+const cp2 = Vec3();
+const cp3 = Vec3();
+const currentPosition = Vec3();
 function ResampleControlPoints(points: NumberArray, segmentLength: number) {
-    const nP = points.length / 3
+    const nP = points.length / 3;
     // insert a point at the end and at the begining
     // controlPoints.Insert(0, controlPoints[0] + (controlPoints[0] - controlPoints[1]) / 2.0f);
     // controlPoints.Add(controlPoints[nP - 1] + (controlPoints[nP - 1] - controlPoints[nP - 2]) / 2.0f);
 
-    let resampledControlPoints: Vec3[] = []
+    let resampledControlPoints: Vec3[] = [];
     // resampledControlPoints.Add(controlPoints[0]);
     // resampledControlPoints.Add(controlPoints[1]);
 
-    let idx = 1
+    let idx = 1;
     // const currentPosition = Vec3.create(points[idx * 3], points[idx * 3 + 1], points[idx * 3 + 2])
-    Vec3.fromArray(currentPosition, points, idx * 3)
+    Vec3.fromArray(currentPosition, points, idx * 3);
 
-    let lerpValue = 0.0
+    let lerpValue = 0.0;
 
     // Normalize the distance between control points
     while (true) {
-        if (idx + 2 >= nP) break
-        Vec3.fromArray(cp0, points, (idx - 1) * 3)
-        Vec3.fromArray(cp1, points, idx * 3)
-        Vec3.fromArray(cp2, points, (idx + 1) * 3)
-        Vec3.fromArray(cp3, points, (idx + 2) * 3)
+        if (idx + 2 >= nP) break;
+        Vec3.fromArray(cp0, points, (idx - 1) * 3);
+        Vec3.fromArray(cp1, points, idx * 3);
+        Vec3.fromArray(cp2, points, (idx + 1) * 3);
+        Vec3.fromArray(cp3, points, (idx + 2) * 3);
         // const cp0 = Vec3.create(points[(idx-1)*3], points[(idx-1)*3+1], points[(idx-1)*3+2]) // controlPoints[currentPointId - 1];
         // const cp1 = Vec3.create(points[idx*3], points[idx*3+1], points[idx*3+2]) // controlPoints[currentPointId];
         // const cp2 = Vec3.create(points[(idx+1)*3], points[(idx+1)*3+1], points[(idx+1)*3+2]) // controlPoints[currentPointId + 1];
         // const cp3 = Vec3.create(points[(idx+2)*3], points[(idx+2)*3+1], points[(idx+2)*3+2]); // controlPoints[currentPointId + 2];
-        let found = false
+        let found = false;
         for (; lerpValue <= 1; lerpValue += 0.01) {
             // lerp?slerp
             // let candidate:Vec3 = Vec3.lerp(Vec3.zero(), cp0, cp1, lerpValue);
             // const candidate:Vec3 = Vec3.bezier(Vec3.zero(), cp0, cp1, cp2, cp3, lerpValue);
-            const candidate = CubicInterpolate(Vec3(), cp0, cp1, cp2, cp3, lerpValue)
+            const candidate = CubicInterpolate(Vec3(), cp0, cp1, cp2, cp3, lerpValue);
             const d = Vec3.distance(currentPosition, candidate);
             if (d > segmentLength) {
-                resampledControlPoints.push(candidate)
-                Vec3.copy(currentPosition, candidate)
-                found = true
-                break
+                resampledControlPoints.push(candidate);
+                Vec3.copy(currentPosition, candidate);
+                found = true;
+                break;
             }
         }
         if (!found) {
-            lerpValue = 0
-            idx += 1
+            lerpValue = 0;
+            idx += 1;
         }
     }
-    return resampledControlPoints
+    return resampledControlPoints;
 }
 
 
-const prevV = Vec3()
-const tmpV1 = Vec3()
-const tmpV2 = Vec3()
-const tmpV3 = Vec3()
+const prevV = Vec3();
+const tmpV1 = Vec3();
+const tmpV2 = Vec3();
+const tmpV3 = Vec3();
 
 // easier to align to theses normals
 function GetSmoothNormals(points: Vec3[]) {
     const nP: number = points.length;
-    const smoothNormals: Vec3[] = []
+    const smoothNormals: Vec3[] = [];
     if (points.length < 3) {
         for (let i = 0; i < points.length; ++i)
-            smoothNormals.push(Vec3.normalize(Vec3(), points[i]))
+            smoothNormals.push(Vec3.normalize(Vec3(), points[i]));
         return smoothNormals;
     }
-    let p0 = points[0]
-    let p1 = points[1]
-    let p2 = points[2]
-    const p21 = Vec3.sub(tmpV1, p2, p1)
-    const p01 =  Vec3.sub(tmpV2, p0, p1)
-    const p0121 = Vec3.cross(tmpV3, p01, p21)
-    Vec3.normalize(prevV, p0121)
-    smoothNormals.push(Vec3.clone(prevV))
+    let p0 = points[0];
+    let p1 = points[1];
+    let p2 = points[2];
+    const p21 = Vec3.sub(tmpV1, p2, p1);
+    const p01 =  Vec3.sub(tmpV2, p0, p1);
+    const p0121 = Vec3.cross(tmpV3, p01, p21);
+    Vec3.normalize(prevV, p0121);
+    smoothNormals.push(Vec3.clone(prevV));
     for (let i = 1; i < points.length - 1; ++i) {
-        p0 = points[i - 1]
-        p1 = points[i]
-        p2 = points[i + 1]
-        const t = Vec3.normalize(tmpV1, Vec3.sub(tmpV1, p2, p0))
-        const b = Vec3.normalize(tmpV2, Vec3.cross(tmpV2, t, prevV))
-        const n = Vec3.normalize(Vec3(), Vec3.cross(tmpV3, t, b))
-        Vec3.negate(n, n)
-        Vec3.copy(prevV, n)
-        smoothNormals.push(n)
+        p0 = points[i - 1];
+        p1 = points[i];
+        p2 = points[i + 1];
+        const t = Vec3.normalize(tmpV1, Vec3.sub(tmpV1, p2, p0));
+        const b = Vec3.normalize(tmpV2, Vec3.cross(tmpV2, t, prevV));
+        const n = Vec3.normalize(Vec3(), Vec3.cross(tmpV3, t, b));
+        Vec3.negate(n, n);
+        Vec3.copy(prevV, n);
+        smoothNormals.push(n);
     }
-    const last = Vec3()
+    const last = Vec3();
     Vec3.normalize(last, Vec3.cross(last,
         Vec3.sub(tmpV1, points[nP - 3], points[nP - 2]),
         Vec3.sub(tmpV2, points[nP - 2], points[nP - 1]))
-    )
-    smoothNormals.push(last)
+    );
+    smoothNormals.push(last);
     return smoothNormals;
 }
 
-const frameTmpV1 = Vec3()
-const frameTmpV2 = Vec3()
-const frameTmpV3 = Vec3()
+const frameTmpV1 = Vec3();
+const frameTmpV2 = Vec3();
+const frameTmpV3 = Vec3();
 
 function getFrame(reference: Vec3, tangent: Vec3) {
     const t = Vec3.normalize(Vec3(), tangent);
     // make reference vector orthogonal to tangent
     const proj_r_to_t = Vec3.scale(
         frameTmpV1, tangent, Vec3.dot(reference, tangent) / Vec3.dot(tangent, tangent)
-    )
-    const r = Vec3.normalize(Vec3(), Vec3.sub(frameTmpV2, reference, proj_r_to_t))
+    );
+    const r = Vec3.normalize(Vec3(), Vec3.sub(frameTmpV2, reference, proj_r_to_t));
     // make bitangent vector orthogonal to the others
-    const s = Vec3.normalize(Vec3(), Vec3.cross(frameTmpV3, t, r))
-    return { t, r, s }
+    const s = Vec3.normalize(Vec3(), Vec3.cross(frameTmpV3, t, r));
+    return { t, r, s };
 }
 
-const mfTmpV1 = Vec3()
-const mfTmpV2 = Vec3()
-const mfTmpV3 = Vec3()
-const mfTmpV4 = Vec3()
-const mfTmpV5 = Vec3()
-const mfTmpV6 = Vec3()
-const mfTmpV7 = Vec3()
-const mfTmpV8 = Vec3()
-const mfTmpV9 = Vec3()
+const mfTmpV1 = Vec3();
+const mfTmpV2 = Vec3();
+const mfTmpV3 = Vec3();
+const mfTmpV4 = Vec3();
+const mfTmpV5 = Vec3();
+const mfTmpV6 = Vec3();
+const mfTmpV7 = Vec3();
+const mfTmpV8 = Vec3();
+const mfTmpV9 = Vec3();
 
 // easier to align to theses normals
 // https://github.com/bzamecnik/gpg/blob/master/rotation-minimizing-frame/rmf.py
 function GetMiniFrame(points: Vec3[], normals: Vec3[]) {
     const frames: Frame[] = [];
-    const t0 = Vec3.normalize(mfTmpV1, Vec3.sub(mfTmpV1, points[1], points[0]))
-    frames.push(getFrame(normals[0], t0))
+    const t0 = Vec3.normalize(mfTmpV1, Vec3.sub(mfTmpV1, points[1], points[0]));
+    frames.push(getFrame(normals[0], t0));
 
     for (let i = 0; i < points.length - 2; ++i) {
-        const t2 = Vec3.normalize(mfTmpV1, Vec3.sub(mfTmpV1, points[i + 2], points[i + 1]))
-        const v1 = Vec3.sub(mfTmpV2, points[i + 1], points[i]) // this is tangeant
-        const c1 = Vec3.dot(v1, v1)
+        const t2 = Vec3.normalize(mfTmpV1, Vec3.sub(mfTmpV1, points[i + 2], points[i + 1]));
+        const v1 = Vec3.sub(mfTmpV2, points[i + 1], points[i]); // this is tangeant
+        const c1 = Vec3.dot(v1, v1);
         // compute r_i^L = R_1 * r_i
-        const v1r = Vec3.scale(mfTmpV3, v1, (2.0 / c1) * Vec3.dot(v1, frames[i].r))
-        const ref_L_i = Vec3.sub(mfTmpV4, frames[i].r, v1r)
+        const v1r = Vec3.scale(mfTmpV3, v1, (2.0 / c1) * Vec3.dot(v1, frames[i].r));
+        const ref_L_i = Vec3.sub(mfTmpV4, frames[i].r, v1r);
         // compute t_i^L = R_1 * t_i
-        const v1t = Vec3.scale(mfTmpV5, v1, (2.0 / c1) * Vec3.dot(v1, frames[i].t))
-        const tan_L_i = Vec3.sub(mfTmpV6, frames[i].t, v1t)
+        const v1t = Vec3.scale(mfTmpV5, v1, (2.0 / c1) * Vec3.dot(v1, frames[i].t));
+        const tan_L_i = Vec3.sub(mfTmpV6, frames[i].t, v1t);
         // # compute reflection vector of R_2
-        const v2 =  Vec3.sub(mfTmpV7, t2, tan_L_i)
-        const c2 = Vec3.dot(v2, v2)
+        const v2 =  Vec3.sub(mfTmpV7, t2, tan_L_i);
+        const c2 = Vec3.dot(v2, v2);
         // compute r_(i+1) = R_2 * r_i^L
-        const v2l = Vec3.scale(mfTmpV8, v1, (2.0 / c2) * Vec3.dot(v2, ref_L_i))
-        const ref_next = Vec3.sub(mfTmpV9, ref_L_i, v2l) // ref_L_i - (2 / c2) * v2.dot(ref_L_i) * v2
-        frames.push(getFrame(ref_next, t2)) // frames.append(Frame(ref_next, tangents[i+1]))
+        const v2l = Vec3.scale(mfTmpV8, v1, (2.0 / c2) * Vec3.dot(v2, ref_L_i));
+        const ref_next = Vec3.sub(mfTmpV9, ref_L_i, v2l); // ref_L_i - (2 / c2) * v2.dot(ref_L_i) * v2
+        frames.push(getFrame(ref_next, t2)); // frames.append(Frame(ref_next, tangents[i+1]))
     }
     return frames;
 }
 
-const rpTmpVec1 = Vec3()
+const rpTmpVec1 = Vec3();
 
 export function getMatFromResamplePoints(points: NumberArray, segmentLength: number) {
-    const new_points = ResampleControlPoints(points, segmentLength)
-    const npoints = new_points.length
-    const new_normal = GetSmoothNormals(new_points)
-    const frames = GetMiniFrame(new_points, new_normal)
-    const limit = npoints
-    const transforms: Mat4[] = []
+    const new_points = ResampleControlPoints(points, segmentLength);
+    const npoints = new_points.length;
+    const new_normal = GetSmoothNormals(new_points);
+    const frames = GetMiniFrame(new_points, new_normal);
+    const limit = npoints;
+    const transforms: Mat4[] = [];
     const pti = Vec3.copy(rpTmpVec1, new_points[0]);
     for (let i = 0; i < npoints - 2; ++i) {
-        const pti1: Vec3 = new_points[i + 1] // Vec3.create(points[(i+1)*3],points[(i+1)*3+1],points[(i+1)*3+2]);
-        const d = Vec3.distance(pti, pti1)
+        const pti1: Vec3 = new_points[i + 1]; // Vec3.create(points[(i+1)*3],points[(i+1)*3+1],points[(i+1)*3+2]);
+        const d = Vec3.distance(pti, pti1);
         if (d >= segmentLength) {
             // use twist or random?
-            const quat = Quat.rotationTo(Quat.zero(), Vec3.create(0, 0, 1), frames[i].t) // Quat.rotationTo(Quat.zero(), Vec3.create(0,0,1),new_normal[i]);//Quat.rotationTo(Quat.zero(), Vec3.create(0,0,1),direction);new_normal
-            const rq = Quat.setAxisAngle(Quat.zero(), frames[i].t, Math.random() * 3.60 ) // Quat.setAxisAngle(Quat.zero(),direction, Math.random()*3.60 );//Quat.identity();//
-            const m = Mat4.fromQuat(Mat4.zero(), Quat.multiply(Quat.zero(), rq, quat)) // Mat4.fromQuat(Mat4.zero(),Quat.multiply(Quat.zero(),quat1,quat2));//Mat4.fromQuat(Mat4.zero(),quat);//Mat4.identity();//Mat4.fromQuat(Mat4.zero(),Quat.multiply(Quat.zero(),rq,quat));
+            const quat = Quat.rotationTo(Quat.zero(), Vec3.create(0, 0, 1), frames[i].t); // Quat.rotationTo(Quat.zero(), Vec3.create(0,0,1),new_normal[i]);//Quat.rotationTo(Quat.zero(), Vec3.create(0,0,1),direction);new_normal
+            const rq = Quat.setAxisAngle(Quat.zero(), frames[i].t, Math.random() * 3.60 ); // Quat.setAxisAngle(Quat.zero(),direction, Math.random()*3.60 );//Quat.identity();//
+            const m = Mat4.fromQuat(Mat4.zero(), Quat.multiply(Quat.zero(), rq, quat)); // Mat4.fromQuat(Mat4.zero(),Quat.multiply(Quat.zero(),quat1,quat2));//Mat4.fromQuat(Mat4.zero(),quat);//Mat4.identity();//Mat4.fromQuat(Mat4.zero(),Quat.multiply(Quat.zero(),rq,quat));
             // let pos:Vec3 = Vec3.add(Vec3.zero(),pti1,pti)
             // pos = Vec3.scale(pos,pos,1.0/2.0);
             // Vec3.makeRotation(Mat4.zero(),Vec3.create(0,0,1),frames[i].t);//
-            Mat4.setTranslation(m, pti1)
+            Mat4.setTranslation(m, pti1);
             // let m2:Mat4 = GetTubePropertiesMatrix(pti,pti1);
             // let q:Quat = Quat.rotationTo(Quat.zero(), Vec3.create(0,1,0),Vec3.create(0,0,1))
             // m2=Mat4.mul(Mat4.identity(),Mat4.fromQuat(Mat4.zero(),q),m2);
-            transforms.push(m)
-            Vec3.copy(pti, pti1)
+            transforms.push(m);
+            Vec3.copy(pti, pti1);
         }
-        if (transforms.length >= limit) break
+        if (transforms.length >= limit) break;
     }
-    return transforms
+    return transforms;
 }

src/apps/viewer/extensions/cellpack/model.ts

@@ -31,124 +31,124 @@ import { CellPackInfoProvider } from './property';
 import { CellPackColorThemeProvider } from './color';
 
 function getCellPackModelUrl(fileName: string, baseUrl: string) {
-    return `${baseUrl}/results/${fileName}`
+    return `${baseUrl}/results/${fileName}`;
 }
 
 async function getModel(id: string, model_id: number, baseUrl: string, file?: File) {
     let model: Model;
     if (file) {
-        const text = await file.text()
+        const text = await file.text();
         if (file.name.endsWith('.cif')) {
-            const cif = (await parseCif(text)).blocks[0]
-            model = (await trajectoryFromMmCIF(cif).run())[model_id]
+            const cif = (await parseCif(text)).blocks[0];
+            model = (await trajectoryFromMmCIF(cif).run())[model_id];
         } else if (file.name.endsWith('.pdb')) {
-            const pdb = await parsePDBfile(text, id)
+            const pdb = await parsePDBfile(text, id);
 
-            model = (await trajectoryFromPDB(pdb).run())[model_id]
+            model = (await trajectoryFromPDB(pdb).run())[model_id];
         } else {
-            throw new Error(`unsupported file type '${file.name}'`)
+            throw new Error(`unsupported file type '${file.name}'`);
         }
     } else if (id.match(/^[1-9][a-zA-Z0-9]{3,3}$/i)) {
-        const cif = await getFromPdb(id)
-        model = (await trajectoryFromMmCIF(cif).run())[model_id]
+        const cif = await getFromPdb(id);
+        model = (await trajectoryFromMmCIF(cif).run())[model_id];
     } else {
-        const pdb = await getFromCellPackDB(id, baseUrl)
-        model = (await trajectoryFromPDB(pdb).run())[model_id]
+        const pdb = await getFromCellPackDB(id, baseUrl);
+        model = (await trajectoryFromPDB(pdb).run())[model_id];
     }
-    return model
+    return model;
 }
 
 async function getStructure(model: Model, source: IngredientSource, props: { assembly?: string } = {}) {
-    let structure = Structure.ofModel(model)
-    const { assembly } = props
+    let structure = Structure.ofModel(model);
+    const { assembly } = props;
 
     if (assembly) {
-        structure = await StructureSymmetry.buildAssembly(structure, assembly).run()
+        structure = await StructureSymmetry.buildAssembly(structure, assembly).run();
     }
     let query;
     if (source.selection){
-        const asymIds: string[] = source.selection.replace(' :', '').split(' or')
+        const asymIds: string[] = source.selection.replace(' :', '').split(' or');
         query = MS.struct.modifier.union([
             MS.struct.generator.atomGroups({
                 'entity-test': MS.core.rel.eq([MS.ammp('entityType'), 'polymer']),
                 'chain-test': MS.core.set.has([MS.set(...asymIds), MS.ammp('auth_asym_id')])
             })
-        ])
+        ]);
     } else {
         query = MS.struct.modifier.union([
             MS.struct.generator.atomGroups({
                 'entity-test': MS.core.rel.eq([MS.ammp('entityType'), 'polymer'])
             })
-        ])
+        ]);
     }
 
-    const compiled = compile<StructureSelection>(query)
-    const result = compiled(new QueryContext(structure))
-    structure = StructureSelection.unionStructure(result)
+    const compiled = compile<StructureSelection>(query);
+    const result = compiled(new QueryContext(structure));
+    structure = StructureSelection.unionStructure(result);
 
-    return structure
+    return structure;
 }
 
 function getTransformLegacy(trans: Vec3, rot: Quat) {
-    const q: Quat = Quat.create(-rot[3], rot[0], rot[1], rot[2])
-    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q)
-    Mat4.transpose(m, m)
-    Mat4.scale(m, m, Vec3.create(-1.0, 1.0, -1.0))
-    Mat4.setTranslation(m, trans)
-    return m
+    const q: Quat = Quat.create(-rot[3], rot[0], rot[1], rot[2]);
+    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q);
+    Mat4.transpose(m, m);
+    Mat4.scale(m, m, Vec3.create(-1.0, 1.0, -1.0));
+    Mat4.setTranslation(m, trans);
+    return m;
 }
 
 function getTransform(trans: Vec3, rot: Quat) {
-    const q: Quat = Quat.create(rot[0], rot[1], rot[2], rot[3])
-    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q)
-    const p: Vec3 = Vec3.create(trans[0], trans[1], trans[2])
-    Mat4.setTranslation(m, p)
-    return m
+    const q: Quat = Quat.create(rot[0], rot[1], rot[2], rot[3]);
+    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q);
+    const p: Vec3 = Vec3.create(trans[0], trans[1], trans[2]);
+    Mat4.setTranslation(m, p);
+    return m;
 }
 
 
 function getResultTransforms(results: Ingredient['results'], legacy: boolean) {
-    if (legacy) return results.map((r: Ingredient['results'][0]) => getTransformLegacy(r[0], r[1]))
-    else return results.map((r: Ingredient['results'][0]) => getTransform(r[0], r[1]))
+    if (legacy) return results.map((r: Ingredient['results'][0]) => getTransformLegacy(r[0], r[1]));
+    else return results.map((r: Ingredient['results'][0]) => getTransform(r[0], r[1]));
 }
 
 function getCurveTransforms(ingredient: Ingredient) {
-    const n = ingredient.nbCurve || 0
-    const instances: Mat4[] = []
+    const n = ingredient.nbCurve || 0;
+    const instances: Mat4[] = [];
     const segmentLength = ingredient.radii
         ? (ingredient.radii[0].radii
             ? ingredient.radii[0].radii[0] * 2.0
             : 3.4)
         : 3.4;
     for (let i = 0; i < n; ++i) {
-        const cname = `curve${i}`
+        const cname = `curve${i}`;
         if (!(cname in ingredient)) {
             // console.warn(`Expected '${cname}' in ingredient`)
-            continue
+            continue;
         }
-        const _points = ingredient[cname] as Vec3[]
+        const _points = ingredient[cname] as Vec3[];
         if (_points.length <= 2) {
             // TODO handle curve with 2 or less points
-            continue
+            continue;
         }
-        const points = new Float32Array(_points.length * 3)
-        for (let i = 0, il = _points.length; i < il; ++i) Vec3.toArray(_points[i], points, i * 3)
-        const newInstances = getMatFromResamplePoints(points, segmentLength)
-        instances.push(...newInstances)
+        const points = new Float32Array(_points.length * 3);
+        for (let i = 0, il = _points.length; i < il; ++i) Vec3.toArray(_points[i], points, i * 3);
+        const newInstances = getMatFromResamplePoints(points, segmentLength);
+        instances.push(...newInstances);
     }
 
-    return instances
+    return instances;
 }
 
 function getAssembly(transforms: Mat4[], structure: Structure) {
-    const builder = Structure.Builder()
+    const builder = Structure.Builder();
     const { units } = structure;
 
     for (let i = 0, il = transforms.length; i < il; ++i) {
-        const id = `${i + 1}`
-        const op = SymmetryOperator.create(id, transforms[i], { assembly: { id, operId: i, operList: [ id ] } })
+        const id = `${i + 1}`;
+        const op = SymmetryOperator.create(id, transforms[i], { assembly: { id, operId: i, operList: [ id ] } });
         for (const unit of units) {
-            builder.addWithOperator(unit, op)
+            builder.addWithOperator(unit, op);
         }
     }
 
@@ -156,51 +156,51 @@ function getAssembly(transforms: Mat4[], structure: Structure) {
 }
 
 function getCifCurve(name: string, transforms: Mat4[], model: Model) {
-    if (!MmcifFormat.is(model.sourceData)) throw new Error('mmcif source data needed')
+    if (!MmcifFormat.is(model.sourceData)) throw new Error('mmcif source data needed');
 
-    const { db } = model.sourceData.data
-    const d = db.atom_site
-    const n = d._rowCount
-    const rowCount = n * transforms.length
+    const { db } = model.sourceData.data;
+    const d = db.atom_site;
+    const n = d._rowCount;
+    const rowCount = n * transforms.length;
 
-    const { offsets, count } = model.atomicHierarchy.chainAtomSegments
+    const { offsets, count } = model.atomicHierarchy.chainAtomSegments;
 
-    const x = d.Cartn_x.toArray()
-    const y = d.Cartn_y.toArray()
-    const z = d.Cartn_z.toArray()
+    const x = d.Cartn_x.toArray();
+    const y = d.Cartn_y.toArray();
+    const z = d.Cartn_z.toArray();
 
-    const Cartn_x = new Float32Array(rowCount)
-    const Cartn_y = new Float32Array(rowCount)
-    const Cartn_z = new Float32Array(rowCount)
-    const map = new Uint32Array(rowCount)
-    const seq = new Int32Array(rowCount)
-    let offset = 0
+    const Cartn_x = new Float32Array(rowCount);
+    const Cartn_y = new Float32Array(rowCount);
+    const Cartn_z = new Float32Array(rowCount);
+    const map = new Uint32Array(rowCount);
+    const seq = new Int32Array(rowCount);
+    let offset = 0;
     for (let c = 0; c < count; ++c) {
-        const cStart = offsets[c]
-        const cEnd = offsets[c + 1]
-        const cLength = cEnd - cStart
+        const cStart = offsets[c];
+        const cEnd = offsets[c + 1];
+        const cLength = cEnd - cStart;
         for (let t = 0, tl = transforms.length; t < tl; ++t) {
-            const m = transforms[t]
+            const m = transforms[t];
             for (let j = cStart; j < cEnd; ++j) {
-                const i = offset + j - cStart
-                const xj = x[j], yj = y[j], zj = z[j]
-                Cartn_x[i] = m[0] * xj + m[4] * yj + m[8] * zj + m[12]
-                Cartn_y[i] = m[1] * xj + m[5] * yj + m[9] * zj + m[13]
-                Cartn_z[i] = m[2] * xj + m[6] * yj + m[10] * zj + m[14]
-                map[i] = j
-                seq[i] = t + 1
+                const i = offset + j - cStart;
+                const xj = x[j], yj = y[j], zj = z[j];
+                Cartn_x[i] = m[0] * xj + m[4] * yj + m[8] * zj + m[12];
+                Cartn_y[i] = m[1] * xj + m[5] * yj + m[9] * zj + m[13];
+                Cartn_z[i] = m[2] * xj + m[6] * yj + m[10] * zj + m[14];
+                map[i] = j;
+                seq[i] = t + 1;
             }
-            offset += cLength
+            offset += cLength;
         }
     }
 
     function multColumn<T>(column: Column<T>) {
-        const array = column.toArray()
+        const array = column.toArray();
         return Column.ofLambda({
             value: row => array[map[row]],
             areValuesEqual: (rowA, rowB) => map[rowA] === map[rowB] || array[map[rowA]] === array[map[rowB]],
             rowCount, schema: column.schema
-        })
+        });
     }
 
     const _atom_site: CifCategory.SomeFields<mmCIF_Schema['atom_site']> = {
@@ -233,13 +233,13 @@ function getCifCurve(name: string, transforms: Mat4[], model: Model) {
 
         pdbx_PDB_ins_code: CifField.ofColumn(Column.ofConst('', rowCount, Column.Schema.str)),
         pdbx_PDB_model_num: CifField.ofColumn(Column.ofConst(1, rowCount, Column.Schema.int)),
-    }
+    };
 
     const categories = {
         entity: CifCategory.ofTable('entity', db.entity),
         chem_comp: CifCategory.ofTable('chem_comp', db.chem_comp),
         atom_site: CifCategory.ofFields('atom_site', _atom_site)
-    }
+    };
 
     return {
         header: name,
@@ -249,125 +249,125 @@ function getCifCurve(name: string, transforms: Mat4[], model: Model) {
 }
 
 async function getCurve(name: string, ingredient: Ingredient, transforms: Mat4[], model: Model) {
-    const cif = getCifCurve(name, transforms, model)
+    const cif = getCifCurve(name, transforms, model);
 
     const curveModelTask = Task.create('Curve Model', async ctx => {
-        const format = MmcifFormat.fromFrame(cif)
-        const models = await createModels(format.data.db, format, ctx)
-        return models[0]
-    })
+        const format = MmcifFormat.fromFrame(cif);
+        const models = await createModels(format.data.db, format, ctx);
+        return models[0];
+    });
 
-    const curveModel = await curveModelTask.run()
-    return getStructure(curveModel, ingredient.source)
+    const curveModel = await curveModelTask.run();
+    return getStructure(curveModel, ingredient.source);
 }
 
 async function getIngredientStructure(ingredient: Ingredient, baseUrl: string, ingredientFiles: IngredientFiles) {
-    const { name, source, results, nbCurve } = ingredient
-    if (source.pdb === 'None') return
+    const { name, source, results, nbCurve } = ingredient;
+    if (source.pdb === 'None') return;
 
-    const file = ingredientFiles[source.pdb]
+    const file = ingredientFiles[source.pdb];
     if (!file) {
         // TODO can these be added to the library?
-        if (name === 'HIV1_CAhex_0_1_0') return
-        if (name === 'HIV1_CAhexCyclophilA_0_1_0') return
-        if (name === 'iLDL') return
-        if (name === 'peptides') return
-        if (name === 'lypoglycane') return
+        if (name === 'HIV1_CAhex_0_1_0') return;
+        if (name === 'HIV1_CAhexCyclophilA_0_1_0') return;
+        if (name === 'iLDL') return;
+        if (name === 'peptides') return;
+        if (name === 'lypoglycane') return;
     }
 
     // model id in case structure is NMR
     const model_id = (ingredient.source.model) ? parseInt(ingredient.source.model) : 0;
-    const model = await getModel(source.pdb || name, model_id, baseUrl, file)
-    if (!model) return
+    const model = await getModel(source.pdb || name, model_id, baseUrl, file);
+    if (!model) return;
 
     if (nbCurve) {
-        return getCurve(name, ingredient, getCurveTransforms(ingredient), model)
+        return getCurve(name, ingredient, getCurveTransforms(ingredient), model);
     } else {
         let bu: string|undefined = source.bu ? source.bu : undefined;
         if (bu){
             if (bu === 'AU') {
                 bu = undefined;
             } else {
-                bu = bu.slice(2)
+                bu = bu.slice(2);
             }
         }
-        let structure = await getStructure(model, source, { assembly: bu })
+        let structure = await getStructure(model, source, { assembly: bu });
         // transform with offset and pcp
-        let legacy: boolean = true
+        let legacy: boolean = true;
         if (ingredient.offset || ingredient.principalAxis){
             // center the structure
-            legacy = false
-            const boundary = structure.boundary
-            let structureCenter: Vec3 = Vec3.zero()
-            Vec3.negate(structureCenter, boundary.sphere.center)
-            const m1: Mat4 = Mat4.identity()
-            Mat4.setTranslation(m1, structureCenter)
-            structure = Structure.transform(structure, m1)
+            legacy = false;
+            const boundary = structure.boundary;
+            let structureCenter: Vec3 = Vec3.zero();
+            Vec3.negate(structureCenter, boundary.sphere.center);
+            const m1: Mat4 = Mat4.identity();
+            Mat4.setTranslation(m1, structureCenter);
+            structure = Structure.transform(structure, m1);
             if (ingredient.offset){
                 if (!Vec3.exactEquals(ingredient.offset, Vec3.zero())){
                     const m: Mat4 = Mat4.identity();
-                    Mat4.setTranslation(m, ingredient.offset)
+                    Mat4.setTranslation(m, ingredient.offset);
                     structure = Structure.transform(structure, m);
                 }
             }
             if (ingredient.principalAxis){
                 if (!Vec3.exactEquals(ingredient.principalAxis, Vec3.unitZ)){
                     const q: Quat = Quat.identity();
-                    Quat.rotationTo(q, ingredient.principalAxis, Vec3.unitZ)
-                    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q)
+                    Quat.rotationTo(q, ingredient.principalAxis, Vec3.unitZ);
+                    const m: Mat4 = Mat4.fromQuat(Mat4.zero(), q);
                     structure = Structure.transform(structure, m);
                 }
             }
         }
-        return getAssembly(getResultTransforms(results, legacy), structure)
+        return getAssembly(getResultTransforms(results, legacy), structure);
     }
 }
 
 export function createStructureFromCellPack(packing: CellPacking, baseUrl: string, ingredientFiles: IngredientFiles) {
     return Task.create('Create Packing Structure', async ctx => {
-        const { ingredients, name } = packing
-        const structures: Structure[] = []
+        const { ingredients, name } = packing;
+        const structures: Structure[] = [];
         for (const iName in ingredients) {
-            if (ctx.shouldUpdate) await ctx.update(iName)
-            const s = await getIngredientStructure(ingredients[iName], baseUrl, ingredientFiles)
-            if (s) structures.push(s)
+            if (ctx.shouldUpdate) await ctx.update(iName);
+            const s = await getIngredientStructure(ingredients[iName], baseUrl, ingredientFiles);
+            if (s) structures.push(s);
         }
 
-        if (ctx.shouldUpdate) await ctx.update(`${name} - units`)
-        const builder = Structure.Builder({ label: name })
-        let offsetInvariantId = 0
+        if (ctx.shouldUpdate) await ctx.update(`${name} - units`);
+        const builder = Structure.Builder({ label: name });
+        let offsetInvariantId = 0;
         for (const s of structures) {
-            if (ctx.shouldUpdate) await ctx.update(`${s.label}`)
-            let maxInvariantId = 0
+            if (ctx.shouldUpdate) await ctx.update(`${s.label}`);
+            let maxInvariantId = 0;
             for (const u of s.units) {
-                const invariantId = u.invariantId + offsetInvariantId
-                if (u.invariantId > maxInvariantId) maxInvariantId = u.invariantId
-                builder.addUnit(u.kind, u.model, u.conformation.operator, u.elements, Unit.Trait.None, invariantId)
+                const invariantId = u.invariantId + offsetInvariantId;
+                if (u.invariantId > maxInvariantId) maxInvariantId = u.invariantId;
+                builder.addUnit(u.kind, u.model, u.conformation.operator, u.elements, Unit.Trait.None, invariantId);
             }
-            offsetInvariantId += maxInvariantId + 1
+            offsetInvariantId += maxInvariantId + 1;
         }
 
-        if (ctx.shouldUpdate) await ctx.update(`${name} - structure`)
-        const s = builder.getStructure()
+        if (ctx.shouldUpdate) await ctx.update(`${name} - structure`);
+        const s = builder.getStructure();
         for( let i = 0, il = s.models.length; i < il; ++i) {
-            const { trajectoryInfo } = s.models[i]
-            trajectoryInfo.size = il
-            trajectoryInfo.index = i
+            const { trajectoryInfo } = s.models[i];
+            trajectoryInfo.size = il;
+            trajectoryInfo.index = i;
         }
-        return s
-    })
+        return s;
+    });
 }
 
 async function handleHivRna(ctx: { runtime: RuntimeContext, fetch: AjaxTask }, packings: CellPacking[], baseUrl: string) {
     for (let i = 0, il = packings.length; i < il; ++i) {
         if (packings[i].name === 'HIV1_capsid_3j3q_PackInner_0_1_0') {
-            const url = `${baseUrl}/extras/rna_allpoints.json`
+            const url = `${baseUrl}/extras/rna_allpoints.json`;
             const data = await ctx.fetch({ url, type: 'string' }).runInContext(ctx.runtime);
-            const { points } = await (new Response(data)).json() as { points: number[] }
+            const { points } = await (new Response(data)).json() as { points: number[] };
 
-            const curve0: Vec3[] = []
+            const curve0: Vec3[] = [];
             for (let j = 0, jl = points.length; j < jl; j += 3) {
-                curve0.push(Vec3.fromArray(Vec3(), points, j))
+                curve0.push(Vec3.fromArray(Vec3(), points, j));
             }
             packings[i].ingredients['RNA'] = {
                 source: { pdb: 'RNA_U_Base.pdb', transform: { center: false } },
@@ -375,106 +375,106 @@ async function handleHivRna(ctx: { runtime: RuntimeContext, fetch: AjaxTask }, p
                 name: 'RNA',
                 nbCurve: 1,
                 curve0
-            }
+            };
         }
     }
 }
 
 async function loadMembrane(name: string, plugin: PluginContext, runtime: RuntimeContext, state: State, params: LoadCellPackModelParams) {
-    const fname: string  = `${name}.bcif`
-    let ingredientFiles: IngredientFiles = {}
+    const fname: string  = `${name}.bcif`;
+    let ingredientFiles: IngredientFiles = {};
     if (params.ingredients.files !== null) {
         for (let i = 0, il = params.ingredients.files.length; i < il; ++i) {
-            const file = params.ingredients.files.item(i)
-            if (file) ingredientFiles[file.name] = file
+            const file = params.ingredients.files.item(i);
+            if (file) ingredientFiles[file.name] = file;
         }
     }
 
-    let b = state.build().toRoot()
+    let b = state.build().toRoot();
     if (fname in ingredientFiles) {
         const file = ingredientFiles[fname];
-        b = b.apply(StateTransforms.Data.ReadFile, { file, isBinary: true, label: file.name }, { state: { isGhost: true } })
+        b = b.apply(StateTransforms.Data.ReadFile, { file, isBinary: true, label: file.name }, { state: { isGhost: true } });
     } else {
-        const url = `${params.baseUrl}/membranes/${name}.bcif`
-        b = b.apply(StateTransforms.Data.Download, { url, isBinary: true, label: name }, { state: { isGhost: true } })
+        const url = `${params.baseUrl}/membranes/${name}.bcif`;
+        b = b.apply(StateTransforms.Data.Download, { url, isBinary: true, label: name }, { state: { isGhost: true } });
     }
 
     const membrane = await b.apply(StateTransforms.Data.ParseCif, undefined, { state: { isGhost: true } })
         .apply(StateTransforms.Model.TrajectoryFromMmCif, undefined, { state: { isGhost: true } })
         .apply(StateTransforms.Model.ModelFromTrajectory, undefined, { state: { isGhost: true } })
         .apply(StateTransforms.Model.StructureFromModel)
-        .commit()
+        .commit();
 
     const membraneParams = {
         representation: params.preset.representation,
-    }
-    await CellpackMembranePreset.apply(membrane, membraneParams, plugin)
+    };
+    await CellpackMembranePreset.apply(membrane, membraneParams, plugin);
 }
 
 async function loadHivMembrane(plugin: PluginContext, runtime: RuntimeContext, state: State, params: LoadCellPackModelParams) {
-    const url = `${params.baseUrl}/membranes/hiv_lipids.bcif`
+    const url = `${params.baseUrl}/membranes/hiv_lipids.bcif`;
     const membrane = await state.build().toRoot()
         .apply(StateTransforms.Data.Download, { label: 'hiv_lipids', url, isBinary: true }, { state: { isGhost: true } })
         .apply(StateTransforms.Data.ParseCif, undefined, { state: { isGhost: true } })
         .apply(StateTransforms.Model.TrajectoryFromMmCif, undefined, { state: { isGhost: true } })
         .apply(StateTransforms.Model.ModelFromTrajectory, undefined, { state: { isGhost: true } })
         .apply(StateTransforms.Model.StructureFromModel)
-        .commit()
+        .commit();
 
     const membraneParams = {
         representation: params.preset.representation,
-    }
+    };
 
-    await CellpackMembranePreset.apply(membrane, membraneParams, plugin)
+    await CellpackMembranePreset.apply(membrane, membraneParams, plugin);
 }
 
 async function loadPackings(plugin: PluginContext, runtime: RuntimeContext, state: State, params: LoadCellPackModelParams) {
-    let cellPackJson: StateBuilder.To<PSO.Format.Json, StateTransformer<PSO.Data.String, PSO.Format.Json>>
+    let cellPackJson: StateBuilder.To<PSO.Format.Json, StateTransformer<PSO.Data.String, PSO.Format.Json>>;
     if (params.source.name === 'id') {
-        const url = getCellPackModelUrl(params.source.params, params.baseUrl)
+        const url = getCellPackModelUrl(params.source.params, params.baseUrl);
         cellPackJson = state.build().toRoot()
-            .apply(StateTransforms.Data.Download, { url, isBinary: false, label: params.source.params }, { state: { isGhost: true } })
+            .apply(StateTransforms.Data.Download, { url, isBinary: false, label: params.source.params }, { state: { isGhost: true } });
     } else {
-        const file = params.source.params
+        const file = params.source.params;
         if (file === null) {
-            plugin.log.error('No file selected')
-            return
+            plugin.log.error('No file selected');
+            return;
         }
         cellPackJson = state.build().toRoot()
-            .apply(StateTransforms.Data.ReadFile, { file, isBinary: false, label: file.name }, { state: { isGhost: true } })
+            .apply(StateTransforms.Data.ReadFile, { file, isBinary: false, label: file.name }, { state: { isGhost: true } });
     }
 
     const cellPackBuilder = cellPackJson
         .apply(StateTransforms.Data.ParseJson, undefined, { state: { isGhost: true } })
-        .apply(ParseCellPack)
+        .apply(ParseCellPack);
 
-    const cellPackObject = await state.updateTree(cellPackBuilder).runInContext(runtime)
-    const { packings } = cellPackObject.obj!.data
+    const cellPackObject = await state.updateTree(cellPackBuilder).runInContext(runtime);
+    const { packings } = cellPackObject.obj!.data;
 
-    await handleHivRna({ runtime, fetch: plugin.fetch }, packings, params.baseUrl)
+    await handleHivRna({ runtime, fetch: plugin.fetch }, packings, params.baseUrl);
 
     for (let i = 0, il = packings.length; i < il; ++i) {
-        const p = { packing: i, baseUrl: params.baseUrl, ingredientFiles: params.ingredients.files }
+        const p = { packing: i, baseUrl: params.baseUrl, ingredientFiles: params.ingredients.files };
 
         const packing = await state.build()
             .to(cellPackBuilder.ref)
             .apply(StructureFromCellpack, p)
-            .commit({ revertOnError: true })
+            .commit({ revertOnError: true });
 
-        const structure = packing.obj?.data
+        const structure = packing.obj?.data;
         if (structure) {
             await CellPackInfoProvider.attach({ fetch: plugin.fetch, runtime }, structure, {
                 info: { packingsCount: packings.length, packingIndex: i }
-            })
+            });
         }
 
         const packingParams = {
             traceOnly: params.preset.traceOnly,
             representation: params.preset.representation,
-        }
-        await CellpackPackingPreset.apply(packing, packingParams, plugin)
+        };
+        await CellpackPackingPreset.apply(packing, packingParams, plugin);
         if ( packings[i].location === 'surface' ){
-            await loadMembrane(packings[i].name, plugin, runtime, state, params)
+            await loadMembrane(packings[i].name, plugin, runtime, state, params);
         }
     }
 }
@@ -500,7 +500,7 @@ const LoadCellPackModelParams = {
         traceOnly: PD.Boolean(false),
         representation: PD.Select('gaussian-surface', PD.arrayToOptions(['spacefill', 'gaussian-surface', 'point', 'ellipsoid']))
     }, { isExpanded: true })
-}
+};
 type LoadCellPackModelParams = PD.Values<typeof LoadCellPackModelParams>
 
 export const LoadCellPackModel = StateAction.build({
@@ -509,12 +509,12 @@ export const LoadCellPackModel = StateAction.build({
     from: PSO.Root
 })(({ state, params }, ctx: PluginContext) => Task.create('CellPack Loader', async taskCtx => {
     if (!ctx.representation.structure.themes.colorThemeRegistry.has(CellPackColorThemeProvider)) {
-        ctx.representation.structure.themes.colorThemeRegistry.add(CellPackColorThemeProvider)
+        ctx.representation.structure.themes.colorThemeRegistry.add(CellPackColorThemeProvider);
     }
 
     if (params.source.name === 'id' && params.source.params === 'hiv_lipids.bcif') {
-        await loadHivMembrane(ctx, taskCtx, state, params)
+        await loadHivMembrane(ctx, taskCtx, state, params);
     } else {
-        await loadPackings(ctx, taskCtx, state, params)
+        await loadPackings(ctx, taskCtx, state, params);
     }
 }));

src/apps/viewer/extensions/cellpack/preset.ts

@@ -13,7 +13,7 @@ import { CellPackColorThemeProvider } from './color';
 export const CellpackPackingPresetParams = {
     traceOnly: PD.Boolean(true),
     representation: PD.Select('gaussian-surface', PD.arrayToOptions(['gaussian-surface', 'spacefill', 'point', 'orientation'])),
-}
+};
 export type CellpackPackingPresetParams = PD.ValuesFor<typeof CellpackPackingPresetParams>
 
 export const CellpackPackingPreset = StructureRepresentationPresetProvider({
@@ -35,18 +35,18 @@ export const CellpackPackingPreset = StructureRepresentationPresetProvider({
         if (params.representation === 'gaussian-surface') {
             Object.assign(reprProps, {
                 quality: 'custom', resolution: 10, radiusOffset: 2, doubleSided: false
-            })
+            });
         } else if (params.representation === 'spacefill' && params.traceOnly) {
-            Object.assign(reprProps, { sizeFactor: 2 })
+            Object.assign(reprProps, { sizeFactor: 2 });
         }
 
         const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, {});
-        const color = CellPackColorThemeProvider.name
+        const color = CellPackColorThemeProvider.name;
         const representations = {
             polymer: builder.buildRepresentation<any>(update, components.polymer, { type: params.representation, typeParams: { ...typeParams, ...reprProps }, color }, { tag: 'polymer' })
         };
 
-        await update.commit({ revertOnError: true })
+        await update.commit({ revertOnError: true });
         return { components, representations };
     }
 });
@@ -55,7 +55,7 @@ export const CellpackPackingPreset = StructureRepresentationPresetProvider({
 
 export const CellpackMembranePresetParams = {
     representation: PD.Select('gaussian-surface', PD.arrayToOptions(['gaussian-surface', 'spacefill', 'point', 'orientation'])),
-}
+};
 export type CellpackMembranePresetParams = PD.ValuesFor<typeof CellpackMembranePresetParams>
 
 export const CellpackMembranePreset = StructureRepresentationPresetProvider({
@@ -76,7 +76,7 @@ export const CellpackMembranePreset = StructureRepresentationPresetProvider({
         if (params.representation === 'gaussian-surface') {
             Object.assign(reprProps, {
                 quality: 'custom', resolution: 10, radiusOffset: 2, doubleSided: false
-            })
+            });
         }
 
         const { update, builder, typeParams } = StructureRepresentationPresetProvider.reprBuilder(plugin, {});
@@ -84,7 +84,7 @@ export const CellpackMembranePreset = StructureRepresentationPresetProvider({
             membrane: builder.buildRepresentation(update, components.membrane, { type: 'gaussian-surface', typeParams: { ...typeParams, ...reprProps }, color: 'uniform', colorParams: { value: ColorNames.lightgrey } }, { tag: 'all' })
         };
 
-        await update.commit({ revertOnError: true })
+        await update.commit({ revertOnError: true });
         return { components, representations };
     }
 });

src/apps/viewer/extensions/cellpack/property.ts

@@ -4,10 +4,10 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { CustomStructureProperty } from '../../../../mol-model-props/common/custom-structure-property'
-import { Structure, CustomPropertyDescriptor } from '../../../../mol-model/structure'
-import { CustomProperty } from '../../../../mol-model-props/common/custom-property'
-import { ParamDefinition as PD } from '../../../../mol-util/param-definition'
+import { CustomStructureProperty } from '../../../../mol-model-props/common/custom-structure-property';
+import { Structure, CustomPropertyDescriptor } from '../../../../mol-model/structure';
+import { CustomProperty } from '../../../../mol-model-props/common/custom-property';
+import { ParamDefinition as PD } from '../../../../mol-util/param-definition';
 
 export type CellPackInfoValue = {
     packingsCount: number
@@ -16,7 +16,7 @@ export type CellPackInfoValue = {
 
 const CellPackInfoParams = {
     info: PD.Value<CellPackInfoValue>({ packingsCount: 1, packingIndex: 0 }, { isHidden: true })
-}
+};
 type CellPackInfoParams = PD.Values<typeof CellPackInfoParams>
 
 export const CellPackInfoProvider: CustomStructureProperty.Provider<typeof CellPackInfoParams, CellPackInfoValue> = CustomStructureProperty.createProvider({
@@ -27,6 +27,6 @@ export const CellPackInfoProvider: CustomStructureProperty.Provider<typeof CellP
     getParams: (data: Structure) => CellPackInfoParams,
     isApplicable: (data: Structure) => true,
     obtain: async (ctx: CustomProperty.Context, data: Structure, props: CellPackInfoParams) => {
-        return { ...CellPackInfoParams.info.defaultValue, ...props.info }
+        return { ...CellPackInfoParams.info.defaultValue, ...props.info };
     }
-})
+});

src/apps/viewer/extensions/cellpack/state.ts

@@ -11,11 +11,11 @@ import { CellPack as _CellPack, Cell, CellPacking } from './data';
 import { createStructureFromCellPack } from './model';
 import { IngredientFiles } from './util';
 
-export const DefaultCellPackBaseUrl = 'https://mesoscope.scripps.edu/data/cellPACK_data/cellPACK_database_1.1.0/'
+export const DefaultCellPackBaseUrl = 'https://mesoscope.scripps.edu/data/cellPACK_data/cellPACK_database_1.1.0/';
 
 export class CellPack extends PSO.Create<_CellPack>({ name: 'CellPack', typeClass: 'Object' }) { }
 
-export { ParseCellPack }
+export { ParseCellPack };
 type ParseCellPack = typeof ParseCellPack
 const ParseCellPack = PluginStateTransform.BuiltIn({
     name: 'parse-cellpack',
@@ -25,25 +25,25 @@ const ParseCellPack = PluginStateTransform.BuiltIn({
 })({
     apply({ a }) {
         return Task.create('Parse CellPack', async ctx => {
-            const cell = a.data as Cell
+            const cell = a.data as Cell;
 
-            const packings: CellPacking[] = []
-            const { compartments, cytoplasme } = cell
+            const packings: CellPacking[] = [];
+            const { compartments, cytoplasme } = cell;
             if (compartments) {
                 for (const name in compartments) {
-                    const { surface, interior } = compartments[name]
-                    if (surface) packings.push({ name, location: 'surface', ingredients: surface.ingredients })
-                    if (interior) packings.push({ name, location: 'interior', ingredients: interior.ingredients })
+                    const { surface, interior } = compartments[name];
+                    if (surface) packings.push({ name, location: 'surface', ingredients: surface.ingredients });
+                    if (interior) packings.push({ name, location: 'interior', ingredients: interior.ingredients });
                 }
             }
-            if (cytoplasme) packings.push({ name: 'Cytoplasme', location: 'cytoplasme', ingredients: cytoplasme.ingredients })
+            if (cytoplasme) packings.push({ name: 'Cytoplasme', location: 'cytoplasme', ingredients: cytoplasme.ingredients });
 
             return new CellPack({ cell, packings });
         });
     }
 });
 
-export { StructureFromCellpack }
+export { StructureFromCellpack };
 type StructureFromCellpack = typeof ParseCellPack
 const StructureFromCellpack = PluginStateTransform.BuiltIn({
     name: 'structure-from-cellpack',
@@ -58,26 +58,26 @@ const StructureFromCellpack = PluginStateTransform.BuiltIn({
                 ingredientFiles: PD.FileList({ accept: '.cif,.pdb' })
             };
         }
-        const options = a.data.packings.map((d, i) => [i, d.name] as [number, string])
+        const options = a.data.packings.map((d, i) => [i, d.name] as [number, string]);
         return {
             packing: PD.Select(0, options),
             baseUrl: PD.Text(DefaultCellPackBaseUrl),
             ingredientFiles: PD.FileList({ accept: '.cif,.pdb' })
-        }
+        };
     }
 })({
     apply({ a, params }) {
         return Task.create('Structure from CellPack', async ctx => {
-            const packing = a.data.packings[params.packing]
-            const ingredientFiles: IngredientFiles = {}
+            const packing = a.data.packings[params.packing];
+            const ingredientFiles: IngredientFiles = {};
             if (params.ingredientFiles !== null) {
                 for (let i = 0, il = params.ingredientFiles.length; i < il; ++i) {
-                    const file = params.ingredientFiles.item(i)
-                    if (file) ingredientFiles[file.name] = file
+                    const file = params.ingredientFiles.item(i);
+                    if (file) ingredientFiles[file.name] = file;
                 }
             }
-            const structure = await createStructureFromCellPack(packing, params.baseUrl, ingredientFiles).runInContext(ctx)
-            return new PSO.Molecule.Structure(structure, { label: packing.name })
+            const structure = await createStructureFromCellPack(packing, params.baseUrl, ingredientFiles).runInContext(ctx);
+            return new PSO.Molecule.Structure(structure, { label: packing.name });
         });
     }
 });

src/apps/viewer/extensions/cellpack/util.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { CIF } from '../../../../mol-io/reader/cif'
+import { CIF } from '../../../../mol-io/reader/cif';
 import { parsePDB } from '../../../../mol-io/reader/pdb/parser';
 
 export async function parseCif(data: string|Uint8Array) {
@@ -37,12 +37,12 @@ export async function getFromPdb(id: string) {
 }
 
 function getCellPackDataUrl(id: string, baseUrl: string) {
-    const url = `${baseUrl}/other/${id}`
-    return url.endsWith('.pdb') ? url : `${url}.pdb`
+    const url = `${baseUrl}/other/${id}`;
+    return url.endsWith('.pdb') ? url : `${url}.pdb`;
 }
 
 export async function getFromCellPackDB(id: string, baseUrl: string) {
-    const name = id.endsWith('.pdb') ? id.substring(0, id.length - 4) : id
+    const name = id.endsWith('.pdb') ? id.substring(0, id.length - 4) : id;
     const parsed = await downloadPDB(getCellPackDataUrl(id, baseUrl), name);
     return parsed;
 }

src/apps/viewer/index.ts

@@ -7,8 +7,8 @@
 
 import '../../mol-util/polyfill';
 import { createPlugin, DefaultPluginSpec } from '../../mol-plugin';
-import './index.html'
-import './favicon.ico'
+import './index.html';
+import './favicon.ico';
 import { PluginContext } from '../../mol-plugin/context';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { PluginSpec } from '../../mol-plugin/spec';
@@ -16,7 +16,7 @@ import { LoadCellPackModel } from './extensions/cellpack/model';
 import { StructureFromCellpack } from './extensions/cellpack/state';
 import { DownloadStructure } from '../../mol-plugin-state/actions/structure';
 import { PluginConfig } from '../../mol-plugin/config';
-require('mol-plugin-ui/skin/light.scss')
+require('mol-plugin-ui/skin/light.scss');
 
 function getParam(name: string, regex: string): string {
     let r = new RegExp(`${name}=(${regex})[&]?`, 'i');
@@ -62,7 +62,7 @@ async function trySetSnapshot(ctx: PluginContext) {
         const url = snapshotId
             ? `https://webchem.ncbr.muni.cz/molstar-state/get/${snapshotId}`
             : snapshotUrl;
-        await PluginCommands.State.Snapshots.Fetch(ctx, { url })
+        await PluginCommands.State.Snapshots.Fetch(ctx, { url });
     } catch (e) {
         ctx.log.error('Failed to load snapshot.');
         console.warn('Failed to load snapshot', e);

src/examples/basic-wrapper/coloring.ts

@@ -21,10 +21,10 @@ export const StripedResidues = CustomElementProperty.create<number>({
         return map;
     },
     coloring: {
-        getColor(e) { return e === 0 ? Color(0xff0000) : Color(0x0000ff) },
+        getColor(e) { return e === 0 ? Color(0xff0000) : Color(0x0000ff); },
         defaultColor: Color(0x777777)
     },
     getLabel(e) {
-        return e === 0 ? 'Odd stripe' : 'Even stripe'
+        return e === 0 ? 'Odd stripe' : 'Even stripe';
     }
-})
+});

src/examples/basic-wrapper/index.ts

@@ -19,7 +19,7 @@ import { StripedResidues } from './coloring';
 import { CustomToastMessage } from './controls';
 import './index.html';
 import { buildStaticSuperposition, dynamicSuperpositionTest, StaticSuperpositionTestData } from './superposition';
-require('mol-plugin-ui/skin/light.scss')
+require('mol-plugin-ui/skin/light.scss');
 
 type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
 
@@ -62,7 +62,7 @@ class BasicWrapper {
     }
 
     setBackground(color: number) {
-        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: props => { props.renderer.backgroundColor = Color(color) } });
+        PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: props => { props.renderer.backgroundColor = Color(color); } });
     }
 
     toggleSpin() {
@@ -79,10 +79,10 @@ class BasicWrapper {
     animate = {
         modelIndex: {
             maxFPS: 8,
-            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }) },
-            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }) },
-            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }) },
-            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }) },
+            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }); },
+            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }); },
+            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }); },
+            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }); },
             stop: () => this.plugin.state.animation.stop()
         }
     }
@@ -91,14 +91,14 @@ class BasicWrapper {
         applyStripes: async () => {
             this.plugin.dataTransaction(async () => {
                 for (const s of this.plugin.managers.structure.hierarchy.current.structures) {
-                    await this.plugin.managers.structure.component.updateRepresentationsTheme(s.components, { color: StripedResidues.propertyProvider.descriptor.name as any })
+                    await this.plugin.managers.structure.component.updateRepresentationsTheme(s.components, { color: StripedResidues.propertyProvider.descriptor.name as any });
                 }
             });
         },
         applyDefault: async () => {
             this.plugin.dataTransaction(async () => {
                 for (const s of this.plugin.managers.structure.hierarchy.current.structures) {
-                    await this.plugin.managers.structure.component.updateRepresentationsTheme(s.components, { color: 'default' })
+                    await this.plugin.managers.structure.component.updateRepresentationsTheme(s.components, { color: 'default' });
                 }
             });
         }
@@ -130,7 +130,7 @@ class BasicWrapper {
             return dynamicSuperpositionTest(this.plugin, ['1tqn', '2hhb', '4hhb'], 'HEM');
         },
         toggleValidationTooltip: () => {
-            return this.plugin.state.updateBehavior(PDBeStructureQualityReport, params => { params.showTooltip = !params.showTooltip });
+            return this.plugin.state.updateBehavior(PDBeStructureQualityReport, params => { params.showTooltip = !params.showTooltip; });
         },
         showToasts: () => {
             PluginCommands.Toast.Show(this.plugin, {

src/examples/basic-wrapper/superposition.ts

@@ -30,7 +30,7 @@ export function buildStaticSuperposition(plugin: PluginContext, src: Superpositi
             const chain = await plugin.builders.structure.tryCreateComponentFromExpression(structure, chainSelection(s.auth_asym_id), `Chain ${s.auth_asym_id}`);
             if (chain) await plugin.builders.structure.representation.addRepresentation(chain, { type: 'cartoon' });
         }
-    })
+    });
 }
 
 export const StaticSuperpositionTestData: SuperpositionTestInput = [

src/examples/domain-annotation-server/mapping.ts

@@ -4,9 +4,9 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Table } from '../../mol-data/db'
-import { CifWriter } from '../../mol-io/writer/cif'
-import * as S from './schemas'
+import { Table } from '../../mol-data/db';
+import { CifWriter } from '../../mol-io/writer/cif';
+import * as S from './schemas';
 // import { getCategoryInstanceProvider } from './utils'
 
 export default function create(allData: any) {

src/examples/domain-annotation-server/schemas.ts

@@ -4,21 +4,21 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Column } from '../../mol-data/db'
+import { Column } from '../../mol-data/db';
 
 import Type = Column.Schema
 
 export const Sources = {
     id: Type.str,
     count: Type.int
-}
+};
 export type Sources = typeof Sources
 
 export const Base = {
     id: Type.str,
     identifier: Type.str,
     mapping_group_id: Type.int
-}
+};
 export type Base = typeof Base
 
 export const mapping = {
@@ -36,17 +36,17 @@ export const mapping = {
     end_label_seq_id: Type.int,
     end_auth_seq_id: Type.int,
     pdbx_end_PDB_ins_code: Type.str
-}
+};
 export type mapping = typeof mapping
 
 export const Pfam = {
     description: Type.str
-}
+};
 export type Pfam = typeof Pfam
 
 export const InterPro = {
     name: Type.str
-}
+};
 export type InterPro = typeof InterPro
 
 export const CATH = {
@@ -56,32 +56,32 @@ export const CATH = {
     identifier: Type.str,
     class: Type.str,
     topology: Type.str,
-}
+};
 export type CATH = typeof CATH
 
 export const EC = {
     accepted_name: Type.str,
     reaction: Type.str,
     systematic_name: Type.str
-}
+};
 export type EC = typeof EC
 
 export const UniProt = {
     name: Type.str
-}
+};
 export type UniProt = typeof UniProt
 
 export const SCOP = {
     sccs: Type.str,
     description: Type.str
-}
+};
 export type SCOP = typeof SCOP
 
 export const GO = {
     category: Type.str,
     definition: Type.str,
     name: Type.str
-}
+};
 export type GO = typeof GO
 
 export const categories = {
@@ -92,4 +92,4 @@ export const categories = {
     UniProt,
     SCOP,
     GO
-}
+};

src/examples/domain-annotation-server/server.ts

@@ -4,9 +4,9 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import express from 'express'
-import fetch from 'node-fetch'
-import createMapping from './mapping'
+import express from 'express';
+import fetch from 'node-fetch';
+import createMapping from './mapping';
 
 async function getMappings(id: string) {
     const data = await fetch(`https://www.ebi.ac.uk/pdbe/api/mappings/${id}`);
@@ -19,7 +19,7 @@ let PORT = process.env.port || 1338;
 
 const app = express();
 
-const PREFIX = '/'
+const PREFIX = '/';
 
 app.get(`${PREFIX}/:id`, async (req, res) => {
     try {
@@ -41,7 +41,7 @@ app.get(`${PREFIX}/:id`, async (req, res) => {
 app.get(`${PREFIX}`, (req, res) => {
     res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
     res.end('Usage: /pdb_id, e.g. /1tqn');
-})
+});
 
 app.listen(PORT);
 

src/examples/domain-annotation-server/test.ts

@@ -4,8 +4,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import fetch from 'node-fetch'
-import createMapping from './mapping'
+import fetch from 'node-fetch';
+import createMapping from './mapping';
 
 (async function () {
     const data = await fetch('https://www.ebi.ac.uk/pdbe/api/mappings/1tqn?pretty=true');

src/examples/lighting/index.ts

@@ -10,7 +10,7 @@ import { BuiltInTrajectoryFormat } from '../../mol-plugin-state/formats/trajecto
 import { PluginCommands } from '../../mol-plugin/commands';
 import { PluginContext } from '../../mol-plugin/context';
 import './index.html';
-require('mol-plugin-ui/skin/light.scss')
+require('mol-plugin-ui/skin/light.scss');
 
 type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
 
@@ -57,7 +57,7 @@ const Canvas3DPresets = {
             lightIntensity: 0.6,
         }
     }
-}
+};
 
 type Canvas3DPreset = keyof typeof Canvas3DPresets
 
@@ -80,7 +80,7 @@ class LightingDemo {
     }
 
     setPreset(preset: Canvas3DPreset) {
-        const props = Canvas3DPresets[preset]
+        const props = Canvas3DPresets[preset];
         PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: {
             ...props,
             multiSample: {

src/examples/proteopedia-wrapper/annotation.ts

@@ -30,8 +30,8 @@ export const EvolutionaryConservation = CustomElementProperty.create<number>({
     type: 'static',
     async getData(model: Model, ctx: CustomProperty.Context) {
         const id = model.entryId.toLowerCase();
-        const url = `https://proteopedia.org/cgi-bin/cnsrf?${id}`
-        const json = await ctx.fetch({ url, type: 'json' }).runInContext(ctx.runtime)
+        const url = `https://proteopedia.org/cgi-bin/cnsrf?${id}`;
+        const json = await ctx.fetch({ url, type: 'json' }).runInContext(ctx.runtime);
         const annotations = (json && json.residueAnnotations) || [];
 
         const conservationMap = new Map<string, number>();

src/examples/proteopedia-wrapper/coloring.ts

@@ -11,58 +11,58 @@ import { Unit, StructureProperties, StructureElement, Bond } from '../../mol-mod
 import { Color } from '../../mol-util/color';
 import { Location } from '../../mol-model/location';
 import { ColorTheme, LocationColor } from '../../mol-theme/color';
-import { ParamDefinition as PD } from '../../mol-util/param-definition'
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { ThemeDataContext } from '../../mol-theme/theme';
 import { Column } from '../../mol-data/db';
 
-const Description = 'Gives every chain a color from a list based on its `asym_id` value.'
+const Description = 'Gives every chain a color from a list based on its `asym_id` value.';
 
 export function createProteopediaCustomTheme(colors: number[]) {
     const ProteopediaCustomColorThemeParams = {
         colors: PD.ObjectList({ color: PD.Color(Color(0xffffff)) }, ({ color }) => Color.toHexString(color),
             { defaultValue: colors.map(c => ({ color: Color(c) })) })
-    }
+    };
     type ProteopediaCustomColorThemeParams = typeof ProteopediaCustomColorThemeParams
     function getChainIdColorThemeParams(ctx: ThemeDataContext) {
-        return ProteopediaCustomColorThemeParams // TODO return copy
+        return ProteopediaCustomColorThemeParams; // TODO return copy
     }
 
     function getAsymId(unit: Unit): StructureElement.Property<string> {
         switch (unit.kind) {
             case Unit.Kind.Atomic:
-                return StructureProperties.chain.label_asym_id
+                return StructureProperties.chain.label_asym_id;
             case Unit.Kind.Spheres:
             case Unit.Kind.Gaussians:
-                return StructureProperties.coarse.asym_id
+                return StructureProperties.coarse.asym_id;
         }
     }
 
     function addAsymIds(map: Map<string, number>, data: Column<string>) {
-        let j = map.size
+        let j = map.size;
         for (let o = 0, ol = data.rowCount; o < ol; ++o) {
-            const k = data.value(o)
+            const k = data.value(o);
             if (!map.has(k)) {
-                map.set(k, j)
-                j += 1
+                map.set(k, j);
+                j += 1;
             }
         }
     }
 
     function ProteopediaCustomColorTheme(ctx: ThemeDataContext, props: PD.Values<ProteopediaCustomColorThemeParams>): ColorTheme<ProteopediaCustomColorThemeParams> {
-        let color: LocationColor
+        let color: LocationColor;
 
         const colors = props.colors, colorCount = colors.length, defaultColor = colors[0].color;
 
         if (ctx.structure) {
-            const l = StructureElement.Location.create(ctx.structure)
-            const { models } = ctx.structure
-            const asymIdSerialMap = new Map<string, number>()
+            const l = StructureElement.Location.create(ctx.structure);
+            const { models } = ctx.structure;
+            const asymIdSerialMap = new Map<string, number>();
             for (let i = 0, il = models.length; i < il; ++i) {
-                const m = models[i]
-                addAsymIds(asymIdSerialMap, m.atomicHierarchy.chains.label_asym_id)
+                const m = models[i];
+                addAsymIds(asymIdSerialMap, m.atomicHierarchy.chains.label_asym_id);
                 if (m.coarseHierarchy.isDefined) {
-                    addAsymIds(asymIdSerialMap, m.coarseHierarchy.spheres.asym_id)
-                    addAsymIds(asymIdSerialMap, m.coarseHierarchy.gaussians.asym_id)
+                    addAsymIds(asymIdSerialMap, m.coarseHierarchy.spheres.asym_id);
+                    addAsymIds(asymIdSerialMap, m.coarseHierarchy.gaussians.asym_id);
                 }
             }
 
@@ -72,16 +72,16 @@ export function createProteopediaCustomTheme(colors: number[]) {
                     const o = asymIdSerialMap.get(asym_id(location)) || 0;
                     return colors[o % colorCount].color;
                 } else if (Bond.isLocation(location)) {
-                    const asym_id = getAsymId(location.aUnit)
-                    l.unit = location.aUnit
-                    l.element = location.aUnit.elements[location.aIndex]
+                    const asym_id = getAsymId(location.aUnit);
+                    l.unit = location.aUnit;
+                    l.element = location.aUnit.elements[location.aIndex];
                     const o = asymIdSerialMap.get(asym_id(l)) || 0;
                     return colors[o % colorCount].color;
                 }
-                return defaultColor
-            }
+                return defaultColor;
+            };
         } else {
-            color = () => defaultColor
+            color = () => defaultColor;
         }
 
         return {
@@ -91,7 +91,7 @@ export function createProteopediaCustomTheme(colors: number[]) {
             props,
             description: Description,
             legend: undefined
-        }
+        };
     }
 
     return {
@@ -102,5 +102,5 @@ export function createProteopediaCustomTheme(colors: number[]) {
         getParams: getChainIdColorThemeParams,
         defaultValues: PD.getDefaultValues(ProteopediaCustomColorThemeParams),
         isApplicable: (ctx: ThemeDataContext) => !!ctx.structure
-    }
+    };
 }

src/examples/proteopedia-wrapper/helpers.ts

@@ -70,7 +70,7 @@ export namespace ModelInfo {
         }
 
         const preferredAssemblyId = await pref;
-        const symmetry = ModelSymmetry.Provider.get(model)
+        const symmetry = ModelSymmetry.Provider.get(model);
 
         return {
             hetResidues: hetResidues,

src/examples/proteopedia-wrapper/index.ts

@@ -6,7 +6,7 @@
 
 import * as ReactDOM from 'react-dom';
 import { createPlugin, DefaultPluginSpec } from '../../mol-plugin';
-import './index.html'
+import './index.html';
 import { PluginContext } from '../../mol-plugin/context';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { StateTransforms } from '../../mol-plugin-state/transforms';
@@ -28,7 +28,7 @@ import { DefaultCanvas3DParams, Canvas3DProps } from '../../mol-canvas3d/canvas3
 import { createStructureRepresentationParams } from '../../mol-plugin-state/helpers/structure-representation-params';
 import { download } from '../../mol-util/download';
 import { getFormattedTime } from '../../mol-util/date';
-require('../../mol-plugin-ui/skin/light.scss')
+require('../../mol-plugin-ui/skin/light.scss');
 
 class MolStarProteopediaWrapper {
     static VERSION_MAJOR = 5;
@@ -74,7 +74,7 @@ class MolStarProteopediaWrapper {
     }
 
     private download(b: StateBuilder.To<PSO.Root>, url: string) {
-        return b.apply(StateTransforms.Data.Download, { url, isBinary: false })
+        return b.apply(StateTransforms.Data.Download, { url, isBinary: false });
     }
 
     private model(b: StateBuilder.To<PSO.Data.Binary | PSO.Data.String>, format: SupportedFormats) {
@@ -93,7 +93,7 @@ class MolStarProteopediaWrapper {
                 name: 'assembly' as const,
                 params: { id: assemblyId || 'deposited' }
             }
-        }
+        };
 
         const s = model
             .apply(StateTransforms.Model.StructureFromModel, props, { ref: StateElements.Assembly });
@@ -185,7 +185,7 @@ class MolStarProteopediaWrapper {
         const model = this.getObj<PluginStateObject.Molecule.Model>('model');
         if (!model) return;
 
-        const info = await ModelInfo.get(this.plugin, model, checkPreferredAssembly)
+        const info = await ModelInfo.get(this.plugin, model, checkPreferredAssembly);
         this.events.modelInfo.next(info);
         return info;
     }
@@ -223,7 +223,7 @@ class MolStarProteopediaWrapper {
                     name: 'assembly' as const,
                     params: { id: asmId || 'deposited' }
                 }
-            }
+            };
             tree.to(StateElements.Assembly).update(StateTransforms.Model.StructureFromModel, p => ({ ...p, ...props }));
             await this.applyState(tree);
         }
@@ -289,10 +289,10 @@ class MolStarProteopediaWrapper {
     animate = {
         modelIndex: {
             maxFPS: 8,
-            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }) },
-            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }) },
-            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }) },
-            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }) },
+            onceForward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'forward' } } }); },
+            onceBackward: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'once', params: { direction: 'backward' } } }); },
+            palindrome: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'palindrome', params: {} } }); },
+            loop: () => { this.plugin.state.animation.play(AnimateModelIndex, { maxFPS: Math.max(0.5, this.animate.modelIndex.maxFPS | 0), mode: { name: 'loop', params: {} } }); },
             stop: () => this.plugin.state.animation.stop()
         }
     }
@@ -371,12 +371,35 @@ class MolStarProteopediaWrapper {
             ]);
             const surroundings = MS.struct.modifier.includeSurroundings({ 0: core, radius: 5, 'as-whole-residues': true });
 
+            const onlySurroundings = MS.struct.modifier.exceptBy({ 0: surroundings, by: core });
+
             const group = update.to(StateElements.Assembly).group(StateTransforms.Misc.CreateGroup, { label: compId }, { ref: StateElements.HetGroupFocusGroup });
 
-            group.apply(StateTransforms.Model.StructureSelectionFromExpression, { label: 'Core', expression: core }, { ref: StateElements.HetGroupFocus })
-                .apply(StateTransforms.Representation.StructureRepresentation3D, this.createCoreVisualParams());
+            const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
+
+            const coreSel = group.apply(StateTransforms.Model.StructureSelectionFromExpression, { label: 'Core', expression: core }, { ref: StateElements.HetGroupFocus });
+
+            coreSel.apply(StateTransforms.Representation.StructureRepresentation3D, createStructureRepresentationParams(this.plugin, asm.data, {
+                type: 'ball-and-stick'
+            }));
+            coreSel.apply(StateTransforms.Representation.StructureRepresentation3D, createStructureRepresentationParams(this.plugin, asm.data, {
+                type: 'label',
+                typeParams: { level: 'element' }
+            }), { tags: ['proteopedia-labels'] });
+
             group.apply(StateTransforms.Model.StructureSelectionFromExpression, { label: 'Surroundings', expression: surroundings })
-                .apply(StateTransforms.Representation.StructureRepresentation3D, this.createSurVisualParams());
+                .apply(StateTransforms.Representation.StructureRepresentation3D, createStructureRepresentationParams(this.plugin, asm.data, {
+                    type: 'ball-and-stick',
+                    color: 'uniform', colorParams: { value: ColorNames.gray },
+                    size: 'uniform', sizeParams: { value: 0.33 }
+                }));
+
+            group.apply(StateTransforms.Model.StructureSelectionFromExpression, { label: 'Surroundings (only)', expression: onlySurroundings })
+                .apply(StateTransforms.Representation.StructureRepresentation3D, createStructureRepresentationParams(this.plugin, asm.data, {
+                    type: 'label',
+                    typeParams: { level: 'residue' }
+                }), { tags: ['proteopedia-labels'] }); // the tag can later be used to toggle the labels
+
             // sel.apply(StateTransforms.Representation.StructureLabels3D, {
             //     target: { name: 'residues', params: { } },
             //     options: {
@@ -396,27 +419,27 @@ class MolStarProteopediaWrapper {
             // const position = Vec3.sub(Vec3.zero(), sphere.center, asmCenter);
             // Vec3.normalize(position, position);
             // Vec3.scaleAndAdd(position, sphere.center, position, sphere.radius);
-            const radius = Math.max(sphere.radius, 5)
+            const radius = Math.max(sphere.radius, 5);
             const snapshot = this.plugin.canvas3d!.camera.getFocus(sphere.center, radius);
             PluginCommands.Camera.SetSnapshot(this.plugin, { snapshot, durationMs: 250 });
         }
     }
 
-    private createSurVisualParams() {
-        const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
-        return createStructureRepresentationParams(this.plugin, asm.data, {
-            type: 'ball-and-stick',
-            color: 'uniform', colorParams: { value: ColorNames.gray },
-            size: 'uniform', sizeParams: { value: 0.33 }
-        });
-    }
-
-    private createCoreVisualParams() {
-        const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
-        return createStructureRepresentationParams(this.plugin, asm.data, {
-            type: 'ball-and-stick'
-        });
-    }
+    // private createSurVisualParams() {
+    //     const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
+    //     return createStructureRepresentationParams(this.plugin, asm.data, {
+    //         type: 'ball-and-stick',
+    //         color: 'uniform', colorParams: { value: ColorNames.gray },
+    //         size: 'uniform', sizeParams: { value: 0.33 }
+    //     });
+    // }
+
+    // private createCoreVisualParams() {
+    //     const asm = this.state.select(StateElements.Assembly)[0].obj as PluginStateObject.Molecule.Structure;
+    //     return createStructureRepresentationParams(this.plugin, asm.data, {
+    //         type: 'ball-and-stick'
+    //     });
+    // }
 
     snapshot = {
         get: () => {
@@ -428,7 +451,7 @@ class MolStarProteopediaWrapper {
         download: () => {
             const json = JSON.stringify(this.plugin.state.getSnapshot(), null, 2);
             const blob = new Blob([json], {type : 'application/json;charset=utf-8'});
-            download(blob, `mol-star_state_${(name || getFormattedTime())}.json`)
+            download(blob, `mol-star_state_${(name || getFormattedTime())}.json`);
         },
         fetch: async (url: string) => {
             try {

src/examples/task.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Task, Progress, Scheduler, MultistepTask, chunkedSubtask } from '../mol-task'
+import { Task, Progress, Scheduler, MultistepTask, chunkedSubtask } from '../mol-task';
 import { now } from '../mol-util/now';
 
 export async function test1() {
@@ -85,19 +85,19 @@ export const ms = MultistepTask('ms-task', ['step 1', 'step 2', 'step 3'], async
     await step(0);
 
     const child = Task.create('chunked', async ctx => {
-        const s = await chunkedSubtask(ctx, 25, { i: 0, current: 0, total: 125 }, processChunk, (ctx, s, p) => ctx.update('chunk test ' + p))
+        const s = await chunkedSubtask(ctx, 25, { i: 0, current: 0, total: 125 }, processChunk, (ctx, s, p) => ctx.update('chunk test ' + p));
         return s.i;
     });
 
     await child.runAsChild(ctx);
     await Scheduler.delay(250);
     await step(1);
-    await chunkedSubtask(ctx, 25, { i: 0, current: 0, total: 80 }, processChunk, (ctx, s, p) => ctx.update('chunk test ' + p))
+    await chunkedSubtask(ctx, 25, { i: 0, current: 0, total: 80 }, processChunk, (ctx, s, p) => ctx.update('chunk test ' + p));
     await Scheduler.delay(250);
     await step(2);
     await Scheduler.delay(250);
     return p.i + 3;
-})
+});
 
 
 export function abortingObserver(p: Progress) {

src/mol-canvas3d/camera.ts

@@ -5,12 +5,12 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Mat4, Vec3, Vec4, EPSILON } from '../mol-math/linear-algebra'
+import { Mat4, Vec3, Vec4, EPSILON } from '../mol-math/linear-algebra';
 import { Viewport, cameraProject, cameraUnproject } from './camera/util';
 import { CameraTransitionManager } from './camera/transition';
 import { BehaviorSubject } from 'rxjs';
 
-export { Camera }
+export { Camera };
 
 class Camera {
     readonly view: Mat4 = Mat4.identity();
@@ -66,8 +66,8 @@ class Camera {
         const changed = !Mat4.areEqual(this.projection, this.prevProjection, EPSILON) || !Mat4.areEqual(this.view, this.prevView, EPSILON);
 
         if (changed) {
-            Mat4.mul(this.projectionView, this.projection, this.view)
-            Mat4.invert(this.inverseProjectionView, this.projectionView)
+            Mat4.mul(this.projectionView, this.projection, this.view);
+            Mat4.invert(this.inverseProjectionView, this.projectionView);
 
             Mat4.copy(this.prevView, this.view);
             Mat4.copy(this.prevProjection, this.projection);
@@ -86,30 +86,30 @@ class Camera {
     }
 
     getTargetDistance(radius: number) {
-        const r = Math.max(radius, 0.01)
-        const { fov } = this.state
-        const { width, height } = this.viewport
-        const aspect = width / height
-        const aspectFactor = (height < width ? 1 : aspect)
-        return Math.abs((r / aspectFactor) / Math.sin(fov / 2))
+        const r = Math.max(radius, 0.01);
+        const { fov } = this.state;
+        const { width, height } = this.viewport;
+        const aspect = width / height;
+        const aspectFactor = (height < width ? 1 : aspect);
+        return Math.abs((r / aspectFactor) / Math.sin(fov / 2));
     }
 
     getFocus(target: Vec3, radius: number, up?: Vec3, dir?: Vec3): Partial<Camera.Snapshot> {
-        const r = Math.max(radius, 0.01)
-        const targetDistance = this.getTargetDistance(r)
+        const r = Math.max(radius, 0.01);
+        const targetDistance = this.getTargetDistance(r);
 
-        Vec3.sub(this.deltaDirection, this.target, this.position)
-        if (dir) Vec3.matchDirection(this.deltaDirection, dir, this.deltaDirection)
-        Vec3.setMagnitude(this.deltaDirection, this.deltaDirection, targetDistance)
-        Vec3.sub(this.newPosition, target, this.deltaDirection)
+        Vec3.sub(this.deltaDirection, this.target, this.position);
+        if (dir) Vec3.matchDirection(this.deltaDirection, dir, this.deltaDirection);
+        Vec3.setMagnitude(this.deltaDirection, this.deltaDirection, targetDistance);
+        Vec3.sub(this.newPosition, target, this.deltaDirection);
 
-        const state = Camera.copySnapshot(Camera.createDefaultSnapshot(), this.state)
-        state.target = Vec3.clone(target)
-        state.radius = r
-        state.position = Vec3.clone(this.newPosition)
-        if (up) Vec3.matchDirection(state.up, up, state.up)
+        const state = Camera.copySnapshot(Camera.createDefaultSnapshot(), this.state);
+        state.target = Vec3.clone(target);
+        state.radius = r;
+        state.position = Vec3.clone(this.newPosition);
+        if (up) Vec3.matchDirection(state.up, up, state.up);
 
-        return state
+        return state;
     }
 
     focus(target: Vec3, radius: number, durationMs?: number, up?: Vec3, dir?: Vec3) {
@@ -119,11 +119,11 @@ class Camera {
     }
 
     project(out: Vec4, point: Vec3) {
-        return cameraProject(out, point, this.viewport, this.projectionView)
+        return cameraProject(out, point, this.viewport, this.projectionView);
     }
 
     unproject(out: Vec3, point: Vec3) {
-        return cameraUnproject(out, point, this.viewport, this.inverseProjectionView)
+        return cameraUnproject(out, point, this.viewport, this.inverseProjectionView);
     }
 
     constructor(state?: Partial<Camera.Snapshot>, viewport = Viewport.create(-1, -1, 1, 1)) {
@@ -151,12 +151,12 @@ namespace Camera {
     }
 
     export function setViewOffset(out: ViewOffset, fullWidth: number, fullHeight: number, offsetX: number, offsetY: number, width: number, height: number) {
-        out.fullWidth = fullWidth
-        out.fullHeight = fullHeight
-        out.offsetX = offsetX
-        out.offsetY = offsetY
-        out.width = width
-        out.height = height
+        out.fullWidth = fullWidth;
+        out.fullHeight = fullHeight;
+        out.offsetX = offsetX;
+        out.offsetY = offsetY;
+        out.width = width;
+        out.height = height;
     }
 
     export function createDefaultSnapshot(): Snapshot {
@@ -209,90 +209,90 @@ namespace Camera {
 }
 
 function updateOrtho(camera: Camera) {
-    const { viewport, zoom, near, far, viewOffset } = camera
+    const { viewport, zoom, near, far, viewOffset } = camera;
 
-    const fullLeft = -(viewport.width - viewport.x) / 2
-    const fullRight = (viewport.width - viewport.x) / 2
-    const fullTop = (viewport.height - viewport.y) / 2
-    const fullBottom = -(viewport.height - viewport.y) / 2
+    const fullLeft = -(viewport.width - viewport.x) / 2;
+    const fullRight = (viewport.width - viewport.x) / 2;
+    const fullTop = (viewport.height - viewport.y) / 2;
+    const fullBottom = -(viewport.height - viewport.y) / 2;
 
-    const dx = (fullRight - fullLeft) / (2 * zoom)
-    const dy = (fullTop - fullBottom) / (2 * zoom)
-    const cx = (fullRight + fullLeft) / 2
-    const cy = (fullTop + fullBottom) / 2
+    const dx = (fullRight - fullLeft) / (2 * zoom);
+    const dy = (fullTop - fullBottom) / (2 * zoom);
+    const cx = (fullRight + fullLeft) / 2;
+    const cy = (fullTop + fullBottom) / 2;
 
-    let left = cx - dx
-    let right = cx + dx
-    let top = cy + dy
-    let bottom = cy - dy
+    let left = cx - dx;
+    let right = cx + dx;
+    let top = cy + dy;
+    let bottom = cy - dy;
 
     if (viewOffset.enabled) {
-        const zoomW = zoom / (viewOffset.width / viewOffset.fullWidth)
-        const zoomH = zoom / (viewOffset.height / viewOffset.fullHeight)
-        const scaleW = (fullRight - fullLeft) / viewOffset.width
-        const scaleH = (fullTop - fullBottom) / viewOffset.height
-        left += scaleW * (viewOffset.offsetX / zoomW)
-        right = left + scaleW * (viewOffset.width / zoomW)
-        top -= scaleH * (viewOffset.offsetY / zoomH)
-        bottom = top - scaleH * (viewOffset.height / zoomH)
+        const zoomW = zoom / (viewOffset.width / viewOffset.fullWidth);
+        const zoomH = zoom / (viewOffset.height / viewOffset.fullHeight);
+        const scaleW = (fullRight - fullLeft) / viewOffset.width;
+        const scaleH = (fullTop - fullBottom) / viewOffset.height;
+        left += scaleW * (viewOffset.offsetX / zoomW);
+        right = left + scaleW * (viewOffset.width / zoomW);
+        top -= scaleH * (viewOffset.offsetY / zoomH);
+        bottom = top - scaleH * (viewOffset.height / zoomH);
     }
 
     // build projection matrix
-    Mat4.ortho(camera.projection, left, right, top, bottom, near, far)
+    Mat4.ortho(camera.projection, left, right, top, bottom, near, far);
 
     // build view matrix
-    Mat4.lookAt(camera.view, camera.position, camera.target, camera.up)
+    Mat4.lookAt(camera.view, camera.position, camera.target, camera.up);
 }
 
 function updatePers(camera: Camera) {
-    const aspect = camera.viewport.width / camera.viewport.height
+    const aspect = camera.viewport.width / camera.viewport.height;
 
-    const { near, far, viewOffset } = camera
+    const { near, far, viewOffset } = camera;
 
-    let top = near * Math.tan(0.5 * camera.state.fov)
-    let height = 2 * top
-    let width = aspect * height
-    let left = -0.5 * width
+    let top = near * Math.tan(0.5 * camera.state.fov);
+    let height = 2 * top;
+    let width = aspect * height;
+    let left = -0.5 * width;
 
     if (viewOffset.enabled) {
-        left += viewOffset.offsetX * width / viewOffset.fullWidth
-        top -= viewOffset.offsetY * height / viewOffset.fullHeight
-        width *= viewOffset.width / viewOffset.fullWidth
-        height *= viewOffset.height / viewOffset.fullHeight
+        left += viewOffset.offsetX * width / viewOffset.fullWidth;
+        top -= viewOffset.offsetY * height / viewOffset.fullHeight;
+        width *= viewOffset.width / viewOffset.fullWidth;
+        height *= viewOffset.height / viewOffset.fullHeight;
     }
 
     // build projection matrix
-    Mat4.perspective(camera.projection, left, left + width, top, top - height, near, far)
+    Mat4.perspective(camera.projection, left, left + width, top, top - height, near, far);
 
     // build view matrix
-    Mat4.lookAt(camera.view, camera.position, camera.target, camera.up)
+    Mat4.lookAt(camera.view, camera.position, camera.target, camera.up);
 }
 
 function updateClip(camera: Camera) {
-    let { radius, radiusMax, mode, fog, clipFar } = camera.state
-    if (radius < 0.01) radius = 0.01
+    let { radius, radiusMax, mode, fog, clipFar } = camera.state;
+    if (radius < 0.01) radius = 0.01;
 
-    const normalizedFar = clipFar ? radius : radiusMax
-    const cameraDistance = Vec3.distance(camera.position, camera.target)
-    let near = cameraDistance - radius
-    let far = cameraDistance + normalizedFar
+    const normalizedFar = clipFar ? radius : radiusMax;
+    const cameraDistance = Vec3.distance(camera.position, camera.target);
+    let near = cameraDistance - radius;
+    let far = cameraDistance + normalizedFar;
 
-    const fogNearFactor = -(50 - fog) / 50
-    let fogNear = cameraDistance - (normalizedFar * fogNearFactor)
-    let fogFar = far
+    const fogNearFactor = -(50 - fog) / 50;
+    let fogNear = cameraDistance - (normalizedFar * fogNearFactor);
+    let fogFar = far;
 
     if (mode === 'perspective') {
         // set at least to 5 to avoid slow sphere impostor rendering
-        near = Math.max(5, near)
-        far = Math.max(5, far)
+        near = Math.max(5, near);
+        far = Math.max(5, far);
     } else {
-        near = Math.max(0, near)
-        far = Math.max(0, far)
+        near = Math.max(0, near);
+        far = Math.max(0, far);
     }
 
     if (near === far) {
         // make sure near and far are not identical to avoid Infinity in the projection matrix
-        far = near + 0.01
+        far = near + 0.01;
     }
 
     camera.near = near;

src/mol-canvas3d/camera/transition.ts

@@ -8,7 +8,7 @@ import { Camera } from '../camera';
 import { Quat, Vec3 } from '../../mol-math/linear-algebra';
 import { lerp } from '../../mol-math/interpolate';
 
-export { CameraTransitionManager }
+export { CameraTransitionManager };
 
 class CameraTransitionManager {
     private t = 0;
@@ -21,8 +21,8 @@ class CameraTransitionManager {
     private _target: Camera.Snapshot = Camera.createDefaultSnapshot();
     private _current = Camera.createDefaultSnapshot();
 
-    get source(): Readonly<Camera.Snapshot> { return this._source }
-    get target(): Readonly<Camera.Snapshot> { return this._target }
+    get source(): Readonly<Camera.Snapshot> { return this._source; }
+    get target(): Readonly<Camera.Snapshot> { return this._target; }
 
     apply(to: Partial<Camera.Snapshot>, durationMs: number = 0, transition?: CameraTransitionManager.TransitionFunc) {
         if (!this.inTransition || durationMs > 0) {
@@ -36,7 +36,7 @@ class CameraTransitionManager {
         Camera.copySnapshot(this._target, to);
 
         if (this._target.radius > this._target.radiusMax) {
-            this._target.radius = this._target.radiusMax
+            this._target.radius = this._target.radiusMax;
         }
 
         if (!this.inTransition && durationMs <= 0 || (typeof to.mode !== 'undefined' && to.mode !== this.camera.state.mode)) {

src/mol-canvas3d/camera/util.ts

@@ -4,9 +4,9 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Mat4, Vec3, Vec4 } from '../../mol-math/linear-algebra'
+import { Mat4, Vec3, Vec4 } from '../../mol-math/linear-algebra';
 
-export { Viewport }
+export { Viewport };
 
 type Viewport = {
     x: number
@@ -16,74 +16,74 @@ type Viewport = {
 }
 
 function Viewport() {
-    return Viewport.zero()
+    return Viewport.zero();
 }
 
 namespace Viewport {
     export function zero(): Viewport {
-        return { x: 0, y: 0, width: 0, height: 0 }
+        return { x: 0, y: 0, width: 0, height: 0 };
     }
     export function create(x: number, y: number, width: number, height: number): Viewport {
-        return { x, y, width, height }
+        return { x, y, width, height };
     }
     export function clone(viewport: Viewport): Viewport {
-        return { ...viewport }
+        return { ...viewport };
     }
     export function copy(target: Viewport, source: Viewport): Viewport {
-        return Object.assign(target, source)
+        return Object.assign(target, source);
     }
     export function set(viewport: Viewport, x: number, y: number, width: number, height: number): Viewport {
-        viewport.x = x
-        viewport.y = y
-        viewport.width = width
-        viewport.height = height
-        return viewport
+        viewport.x = x;
+        viewport.y = y;
+        viewport.width = width;
+        viewport.height = height;
+        return viewport;
     }
 
     export function toVec4(v4: Vec4, viewport: Viewport): Vec4 {
-        v4[0] = viewport.x
-        v4[1] = viewport.y
-        v4[2] = viewport.width
-        v4[3] = viewport.height
-        return v4
+        v4[0] = viewport.x;
+        v4[1] = viewport.y;
+        v4[2] = viewport.width;
+        v4[3] = viewport.height;
+        return v4;
     }
 
     export function equals(a: Viewport, b: Viewport) {
-        return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
+        return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
     }
 }
 
 //
 
-const NEAR_RANGE = 0
-const FAR_RANGE = 1
+const NEAR_RANGE = 0;
+const FAR_RANGE = 1;
 
-const tmpVec4 = Vec4()
+const tmpVec4 = Vec4();
 
 /** Transform point into 2D window coordinates. */
 export function cameraProject (out: Vec4, point: Vec3, viewport: Viewport, projectionView: Mat4) {
-    const { x: vX, y: vY, width: vWidth, height: vHeight } = viewport
+    const { x: vX, y: vY, width: vWidth, height: vHeight } = viewport;
 
     // clip space -> NDC -> window coordinates, implicit 1.0 for w component
-    Vec4.set(tmpVec4, point[0], point[1], point[2], 1.0)
+    Vec4.set(tmpVec4, point[0], point[1], point[2], 1.0);
 
     // transform into clip space
-    Vec4.transformMat4(tmpVec4, tmpVec4, projectionView)
+    Vec4.transformMat4(tmpVec4, tmpVec4, projectionView);
 
     // transform into NDC
-    const w = tmpVec4[3]
+    const w = tmpVec4[3];
     if (w !== 0) {
-        tmpVec4[0] /= w
-        tmpVec4[1] /= w
-        tmpVec4[2] /= w
+        tmpVec4[0] /= w;
+        tmpVec4[1] /= w;
+        tmpVec4[2] /= w;
     }
 
     // transform into window coordinates, set fourth component is (1/clip.w) as in gl_FragCoord.w
-    out[0] = vX + vWidth / 2 * tmpVec4[0] + (0 + vWidth / 2)
-    out[1] = vY + vHeight / 2 * tmpVec4[1] + (0 + vHeight / 2)
-    out[2] = (FAR_RANGE - NEAR_RANGE) / 2 * tmpVec4[2] + (FAR_RANGE + NEAR_RANGE) / 2
-    out[3] = w === 0 ? 0 : 1 / w
-    return out
+    out[0] = vX + vWidth / 2 * tmpVec4[0] + (0 + vWidth / 2);
+    out[1] = vY + vHeight / 2 * tmpVec4[1] + (0 + vHeight / 2);
+    out[2] = (FAR_RANGE - NEAR_RANGE) / 2 * tmpVec4[2] + (FAR_RANGE + NEAR_RANGE) / 2;
+    out[3] = w === 0 ? 0 : 1 / w;
+    return out;
 }
 
 /**
@@ -91,14 +91,14 @@ export function cameraProject (out: Vec4, point: Vec3, viewport: Viewport, proje
  * The point must have x and y set to 2D window coordinates and z between 0 (near) and 1 (far).
  */
 export function cameraUnproject (out: Vec3, point: Vec3, viewport: Viewport, inverseProjectionView: Mat4) {
-    const { x: vX, y: vY, width: vWidth, height: vHeight } = viewport
+    const { x: vX, y: vY, width: vWidth, height: vHeight } = viewport;
 
-    const x = point[0] - vX
-    const y = (vHeight - point[1] - 1) - vY
-    const z = point[2]
+    const x = point[0] - vX;
+    const y = (vHeight - point[1] - 1) - vY;
+    const z = point[2];
 
-    out[0] = (2 * x) / vWidth - 1
-    out[1] = (2 * y) / vHeight - 1
-    out[2] = 2 * z - 1
-    return Vec3.transformMat4(out, out, inverseProjectionView)
+    out[0] = (2 * x) / vWidth - 1;
+    out[1] = (2 * y) / vHeight - 1;
+    out[2] = 2 * z - 1;
+    return Vec3.transformMat4(out, out, inverseProjectionView);
 }

src/mol-canvas3d/canvas3d.ts

@@ -7,12 +7,12 @@
 
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { now } from '../mol-util/now';
-import { Vec3 } from '../mol-math/linear-algebra'
-import InputObserver, { ModifiersKeys, ButtonsType } from '../mol-util/input/input-observer'
-import Renderer, { RendererStats, RendererParams } from '../mol-gl/renderer'
-import { GraphicsRenderObject } from '../mol-gl/render-object'
-import { TrackballControls, TrackballControlsParams } from './controls/trackball'
-import { Viewport } from './camera/util'
+import { Vec3 } from '../mol-math/linear-algebra';
+import InputObserver, { ModifiersKeys, ButtonsType } from '../mol-util/input/input-observer';
+import Renderer, { RendererStats, RendererParams } from '../mol-gl/renderer';
+import { GraphicsRenderObject } from '../mol-gl/render-object';
+import { TrackballControls, TrackballControlsParams } from './controls/trackball';
+import { Viewport } from './camera/util';
 import { createContext, WebGLContext, getGLContext } from '../mol-gl/webgl/context';
 import { Representation } from '../mol-repr/representation';
 import Scene from '../mol-gl/scene';
@@ -61,11 +61,11 @@ export const Canvas3DParams = {
     renderer: PD.Group(RendererParams),
     trackball: PD.Group(TrackballControlsParams),
     debug: PD.Group(DebugHelperParams)
-}
+};
 export const DefaultCanvas3DParams = PD.getDefaultValues(Canvas3DParams);
 export type Canvas3DProps = PD.Values<typeof Canvas3DParams>
 
-export { Canvas3D }
+export { Canvas3D };
 
 interface Canvas3D {
     readonly webgl: WebGLContext,
@@ -107,7 +107,7 @@ interface Canvas3D {
     dispose(): void
 }
 
-const requestAnimationFrame = typeof window !== 'undefined' ? window.requestAnimationFrame : (f: (time: number) => void) => setImmediate(()=>f(Date.now()))
+const requestAnimationFrame = typeof window !== 'undefined' ? window.requestAnimationFrame : (f: (time: number) => void) => setImmediate(()=>f(Date.now()));
 
 namespace Canvas3D {
     export interface HoverEvent { current: Representation.Loci, buttons: ButtonsType, button: ButtonsType.Flag, modifiers: ModifiersKeys }
@@ -120,139 +120,139 @@ namespace Canvas3D {
             depth: true,
             preserveDrawingBuffer: true,
             premultipliedAlpha: false,
-        })
-        if (gl === null) throw new Error('Could not create a WebGL rendering context')
-        const input = InputObserver.fromElement(canvas)
-        const webgl = createContext(gl)
+        });
+        if (gl === null) throw new Error('Could not create a WebGL rendering context');
+        const input = InputObserver.fromElement(canvas);
+        const webgl = createContext(gl);
 
         if (isDebugMode) {
-            const loseContextExt = gl.getExtension('WEBGL_lose_context')
+            const loseContextExt = gl.getExtension('WEBGL_lose_context');
             if (loseContextExt) {
                 canvas.addEventListener('mousedown', e => {
-                    if (webgl.isContextLost) return
-                    if (!e.shiftKey || !e.ctrlKey || !e.altKey) return
+                    if (webgl.isContextLost) return;
+                    if (!e.shiftKey || !e.ctrlKey || !e.altKey) return;
 
-                    console.log('lose context')
-                    loseContextExt.loseContext()
+                    console.log('lose context');
+                    loseContextExt.loseContext();
 
                     setTimeout(() => {
-                        if (!webgl.isContextLost) return
-                        console.log('restore context')
-                        loseContextExt.restoreContext()
-                    }, 1000)
-                }, false)
+                        if (!webgl.isContextLost) return;
+                        console.log('restore context');
+                        loseContextExt.restoreContext();
+                    }, 1000);
+                }, false);
             }
         }
 
         // https://www.khronos.org/webgl/wiki/HandlingContextLost
 
         canvas.addEventListener('webglcontextlost', e => {
-            webgl.setContextLost()
-            e.preventDefault()
-            if (isDebugMode) console.log('context lost')
-        }, false)
+            webgl.setContextLost();
+            e.preventDefault();
+            if (isDebugMode) console.log('context lost');
+        }, false);
 
         canvas.addEventListener('webglcontextrestored', () => {
-            if (!webgl.isContextLost) return
-            webgl.handleContextRestored()
-            if (isDebugMode) console.log('context restored')
-        }, false)
+            if (!webgl.isContextLost) return;
+            webgl.handleContextRestored();
+            if (isDebugMode) console.log('context restored');
+        }, false);
 
-        return Canvas3D.create(webgl, input, props)
+        return Canvas3D.create(webgl, input, props);
     }
 
     export function create(webgl: WebGLContext, input: InputObserver, props: Partial<Canvas3DProps> = {}): Canvas3D {
-        const p = { ...DefaultCanvas3DParams, ...props }
+        const p = { ...DefaultCanvas3DParams, ...props };
 
-        const reprRenderObjects = new Map<Representation.Any, Set<GraphicsRenderObject>>()
-        const reprUpdatedSubscriptions = new Map<Representation.Any, Subscription>()
-        const reprCount = new BehaviorSubject(0)
+        const reprRenderObjects = new Map<Representation.Any, Set<GraphicsRenderObject>>();
+        const reprUpdatedSubscriptions = new Map<Representation.Any, Subscription>();
+        const reprCount = new BehaviorSubject(0);
 
-        const startTime = now()
-        const didDraw = new BehaviorSubject<now.Timestamp>(0 as now.Timestamp)
+        const startTime = now();
+        const didDraw = new BehaviorSubject<now.Timestamp>(0 as now.Timestamp);
 
-        const { gl, contextRestored } = webgl
+        const { gl, contextRestored } = webgl;
 
-        let width = gl.drawingBufferWidth
-        let height = gl.drawingBufferHeight
+        let width = gl.drawingBufferWidth;
+        let height = gl.drawingBufferHeight;
 
-        const scene = Scene.create(webgl)
+        const scene = Scene.create(webgl);
 
         const camera = new Camera({
             position: Vec3.create(0, 0, 100),
             mode: p.camera.mode,
             fog: p.cameraFog.name === 'on' ? p.cameraFog.params.intensity : 0,
             clipFar: p.cameraClipping.far
-        })
+        });
 
-        const controls = TrackballControls.create(input, camera, p.trackball)
-        const renderer = Renderer.create(webgl, p.renderer)
+        const controls = TrackballControls.create(input, camera, p.trackball);
+        const renderer = Renderer.create(webgl, p.renderer);
         const debugHelper = new BoundingSphereHelper(webgl, scene, p.debug);
         const interactionHelper = new Canvas3dInteractionHelper(identify, getLoci, input);
 
         const drawPass = new DrawPass(webgl, renderer, scene, camera, debugHelper, {
             cameraHelper: p.camera.helper
-        })
-        const pickPass = new PickPass(webgl, renderer, scene, camera, 0.5)
-        const postprocessing = new PostprocessingPass(webgl, camera, drawPass, p.postprocessing)
-        const multiSample = new MultiSamplePass(webgl, camera, drawPass, postprocessing, p.multiSample)
+        });
+        const pickPass = new PickPass(webgl, renderer, scene, camera, 0.5);
+        const postprocessing = new PostprocessingPass(webgl, camera, drawPass, p.postprocessing);
+        const multiSample = new MultiSamplePass(webgl, camera, drawPass, postprocessing, p.multiSample);
 
-        let drawPending = false
-        let cameraResetRequested = false
-        let nextCameraResetDuration: number | undefined = void 0
-        let nextCameraResetSnapshot: Partial<Camera.Snapshot> | undefined = void 0
+        let drawPending = false;
+        let cameraResetRequested = false;
+        let nextCameraResetDuration: number | undefined = void 0;
+        let nextCameraResetSnapshot: Partial<Camera.Snapshot> | undefined = void 0;
 
         function getLoci(pickingId: PickingId) {
-            let loci: Loci = EmptyLoci
-            let repr: Representation.Any = Representation.Empty
+            let loci: Loci = EmptyLoci;
+            let repr: Representation.Any = Representation.Empty;
             reprRenderObjects.forEach((_, _repr) => {
-                const _loci = _repr.getLoci(pickingId)
+                const _loci = _repr.getLoci(pickingId);
                 if (!isEmptyLoci(_loci)) {
                     if (!isEmptyLoci(loci)) {
-                        console.warn('found another loci, this should not happen')
+                        console.warn('found another loci, this should not happen');
                     }
-                    loci = _loci
-                    repr = _repr
+                    loci = _loci;
+                    repr = _repr;
                 }
-            })
-            return { loci, repr }
+            });
+            return { loci, repr };
         }
 
         function mark(reprLoci: Representation.Loci, action: MarkerAction) {
-            const { repr, loci } = reprLoci
-            let changed = false
+            const { repr, loci } = reprLoci;
+            let changed = false;
             if (repr) {
-                changed = repr.mark(loci, action)
+                changed = repr.mark(loci, action);
             } else {
-                reprRenderObjects.forEach((_, _repr) => { changed = _repr.mark(loci, action) || changed })
+                reprRenderObjects.forEach((_, _repr) => { changed = _repr.mark(loci, action) || changed; });
             }
             if (changed) {
-                scene.update(void 0, true)
-                const prevPickDirty = pickPass.pickDirty
-                draw(true)
-                pickPass.pickDirty = prevPickDirty // marking does not change picking buffers
+                scene.update(void 0, true);
+                const prevPickDirty = pickPass.pickDirty;
+                draw(true);
+                pickPass.pickDirty = prevPickDirty; // marking does not change picking buffers
             }
         }
 
         function render(force: boolean) {
-            if (webgl.isContextLost) return false
+            if (webgl.isContextLost) return false;
 
-            let didRender = false
-            controls.update(currentTime)
-            Viewport.set(camera.viewport, 0, 0, width, height)
-            const cameraChanged = camera.update()
-            multiSample.update(force || cameraChanged, currentTime)
+            let didRender = false;
+            controls.update(currentTime);
+            Viewport.set(camera.viewport, 0, 0, width, height);
+            const cameraChanged = camera.update();
+            multiSample.update(force || cameraChanged, currentTime);
 
             if (force || cameraChanged || multiSample.enabled) {
-                renderer.setViewport(0, 0, width, height)
+                renderer.setViewport(0, 0, width, height);
                 if (multiSample.enabled) {
-                    multiSample.render(true, p.transparentBackground)
+                    multiSample.render(true, p.transparentBackground);
                 } else {
-                    drawPass.render(!postprocessing.enabled, p.transparentBackground)
-                    if (postprocessing.enabled) postprocessing.render(true)
+                    drawPass.render(!postprocessing.enabled, p.transparentBackground);
+                    if (postprocessing.enabled) postprocessing.render(true);
                 }
-                pickPass.pickDirty = true
-                didRender = true
+                pickPass.pickDirty = true;
+                didRender = true;
             }
 
             return didRender;
@@ -263,15 +263,15 @@ namespace Canvas3D {
 
         function draw(force?: boolean) {
             if (render(!!force || forceNextDraw)) {
-                didDraw.next(now() - startTime as now.Timestamp)
+                didDraw.next(now() - startTime as now.Timestamp);
             }
             forceNextDraw = false;
-            drawPending = false
+            drawPending = false;
         }
 
         function requestDraw(force?: boolean) {
-            if (drawPending) return
-            drawPending = true
+            if (drawPending) return;
+            drawPending = true;
             forceNextDraw = !!force;
         }
 
@@ -284,11 +284,11 @@ namespace Canvas3D {
             if (!camera.transition.inTransition && !webgl.isContextLost) {
                 interactionHelper.tick(currentTime);
             }
-            requestAnimationFrame(animate)
+            requestAnimationFrame(animate);
         }
 
         function identify(x: number, y: number): PickingId | undefined {
-            return webgl.isContextLost ? undefined : pickPass.identify(x, y)
+            return webgl.isContextLost ? undefined : pickPass.identify(x, y);
         }
 
         function commit(isSynchronous: boolean = false) {
@@ -302,7 +302,7 @@ namespace Canvas3D {
 
             const { center, radius } = scene.boundingSphereVisible;
             if (radius > 0) {
-                const duration = nextCameraResetDuration === undefined ? p.cameraResetDurationMs : nextCameraResetDuration
+                const duration = nextCameraResetDuration === undefined ? p.cameraResetDurationMs : nextCameraResetDuration;
                 const focus = camera.getFocus(center, radius);
                 const snapshot = nextCameraResetSnapshot ? { ...focus, ...nextCameraResetSnapshot } : focus;
                 camera.setState(snapshot, duration);
@@ -321,8 +321,8 @@ namespace Canvas3D {
 
             if (camera.transition.inTransition || nextCameraResetSnapshot) return false;
 
-            let cameraSphereOverlapsNone = true
-            Sphere3D.set(cameraSphere, camera.state.target, camera.state.radius)
+            let cameraSphereOverlapsNone = true;
+            Sphere3D.set(cameraSphere, camera.state.target, camera.state.radius);
 
             // check if any renderable has moved outside of the old bounding sphere
             // and if no renderable is overlapping with the camera sphere
@@ -354,7 +354,7 @@ namespace Canvas3D {
             }
             if (oldBoundingSphereVisible.radius === 0) nextCameraResetDuration = 0;
 
-            camera.setState({ radiusMax: scene.boundingSphere.radius }, 0)
+            camera.setState({ radiusMax: scene.boundingSphere.radius }, 0);
             reprCount.next(reprRenderObjects.size);
 
             return true;
@@ -363,31 +363,31 @@ namespace Canvas3D {
         function add(repr: Representation.Any) {
             registerAutoUpdate(repr);
 
-            const oldRO = reprRenderObjects.get(repr)
-            const newRO = new Set<GraphicsRenderObject>()
-            repr.renderObjects.forEach(o => newRO.add(o))
+            const oldRO = reprRenderObjects.get(repr);
+            const newRO = new Set<GraphicsRenderObject>();
+            repr.renderObjects.forEach(o => newRO.add(o));
 
             if (oldRO) {
                 if (!SetUtils.areEqual(newRO, oldRO)) {
-                    newRO.forEach(o => { if (!oldRO.has(o)) scene.add(o) })
-                    oldRO.forEach(o => { if (!newRO.has(o)) scene.remove(o) })
+                    newRO.forEach(o => { if (!oldRO.has(o)) scene.add(o); });
+                    oldRO.forEach(o => { if (!newRO.has(o)) scene.remove(o); });
                 }
             } else {
-                repr.renderObjects.forEach(o => scene.add(o))
+                repr.renderObjects.forEach(o => scene.add(o));
             }
-            reprRenderObjects.set(repr, newRO)
+            reprRenderObjects.set(repr, newRO);
 
-            scene.update(repr.renderObjects, false)
+            scene.update(repr.renderObjects, false);
         }
 
         function remove(repr: Representation.Any) {
             unregisterAutoUpdate(repr);
 
-            const renderObjects = reprRenderObjects.get(repr)
+            const renderObjects = reprRenderObjects.get(repr);
             if (renderObjects) {
-                renderObjects.forEach(o => scene.remove(o))
-                reprRenderObjects.delete(repr)
-                scene.update(repr.renderObjects, false, true)
+                renderObjects.forEach(o => scene.remove(o));
+                reprRenderObjects.delete(repr);
+                scene.update(repr.renderObjects, false, true);
             }
         }
 
@@ -396,7 +396,7 @@ namespace Canvas3D {
 
             reprUpdatedSubscriptions.set(repr, repr.updated.subscribe(_ => {
                 if (!repr.state.syncManually) add(repr);
-            }))
+            }));
         }
 
         function unregisterAutoUpdate(repr: Representation.Any) {
@@ -410,7 +410,7 @@ namespace Canvas3D {
         function getProps(): Canvas3DProps {
             const radius = scene.boundingSphere.radius > 0
                 ? 100 - Math.round((camera.transition.target.radius / scene.boundingSphere.radius) * 100)
-                : 0
+                : 0;
 
             return {
                 camera: {
@@ -429,15 +429,15 @@ namespace Canvas3D {
                 renderer: { ...renderer.props },
                 trackball: { ...controls.props },
                 debug: { ...debugHelper.props }
-            }
+            };
         }
 
-        handleResize()
+        handleResize();
 
         const contextRestoredSub = contextRestored.subscribe(() => {
-            pickPass.pickDirty = true
-            draw(true)
-        })
+            pickPass.pickDirty = true;
+            draw(true);
+        });
 
         return {
             webgl,
@@ -450,26 +450,26 @@ namespace Canvas3D {
                     if (!reprRenderObjects.has(repr)) return;
                     scene.update(repr.renderObjects, !!keepSphere);
                 } else {
-                    scene.update(void 0, !!keepSphere)
+                    scene.update(void 0, !!keepSphere);
                 }
             },
             clear: () => {
-                reprUpdatedSubscriptions.forEach(v => v.unsubscribe())
-                reprUpdatedSubscriptions.clear()
-                reprRenderObjects.clear()
-                scene.clear()
-                debugHelper.clear()
-                requestDraw(true)
-                reprCount.next(reprRenderObjects.size)
+                reprUpdatedSubscriptions.forEach(v => v.unsubscribe());
+                reprUpdatedSubscriptions.clear();
+                reprRenderObjects.clear();
+                scene.clear();
+                debugHelper.clear();
+                requestDraw(true);
+                reprCount.next(reprRenderObjects.size);
             },
             syncVisibility: () => {
                 if (camera.state.radiusMax === 0) {
-                    cameraResetRequested = true
-                    nextCameraResetDuration = 0
+                    cameraResetRequested = true;
+                    nextCameraResetDuration = 0;
                 }
 
                 if (scene.syncVisibility()) {
-                    if (debugHelper.isEnabled) debugHelper.update()
+                    if (debugHelper.isEnabled) debugHelper.update();
                 }
             },
 
@@ -490,11 +490,11 @@ namespace Canvas3D {
             boundingSphere: scene.boundingSphere,
             getPixelData: (variant: GraphicsRenderVariant) => {
                 switch (variant) {
-                    case 'color': return webgl.getDrawingBufferPixelData()
-                    case 'pickObject': return pickPass.objectPickTarget.getPixelData()
-                    case 'pickInstance': return pickPass.instancePickTarget.getPixelData()
-                    case 'pickGroup': return pickPass.groupPickTarget.getPixelData()
-                    case 'depth': return readTexture(webgl, drawPass.depthTexture) as PixelData
+                    case 'color': return webgl.getDrawingBufferPixelData();
+                    case 'pickObject': return pickPass.objectPickTarget.getPixelData();
+                    case 'pickInstance': return pickPass.instancePickTarget.getPixelData();
+                    case 'pickGroup': return pickPass.groupPickTarget.getPixelData();
+                    case 'depth': return readTexture(webgl, drawPass.depthTexture) as PixelData;
                 }
             },
             didDraw,
@@ -504,48 +504,48 @@ namespace Canvas3D {
                     ? produce(getProps(), properties)
                     : properties;
 
-                const cameraState: Partial<Camera.Snapshot> = Object.create(null)
+                const cameraState: Partial<Camera.Snapshot> = Object.create(null);
                 if (props.camera && props.camera.mode !== undefined && props.camera.mode !== camera.state.mode) {
-                    cameraState.mode = props.camera.mode
+                    cameraState.mode = props.camera.mode;
                 }
                 if (props.cameraFog !== undefined) {
-                    const newFog = props.cameraFog.name === 'on' ? props.cameraFog.params.intensity : 0
-                    if (newFog !== camera.state.fog) cameraState.fog = newFog
+                    const newFog = props.cameraFog.name === 'on' ? props.cameraFog.params.intensity : 0;
+                    if (newFog !== camera.state.fog) cameraState.fog = newFog;
                 }
                 if (props.cameraClipping !== undefined) {
                     if (props.cameraClipping.far !== undefined && props.cameraClipping.far !== camera.state.clipFar) {
-                        cameraState.clipFar = props.cameraClipping.far
+                        cameraState.clipFar = props.cameraClipping.far;
                     }
                     if (props.cameraClipping.radius !== undefined) {
-                        const radius = (scene.boundingSphere.radius / 100) * (100 - props.cameraClipping.radius)
+                        const radius = (scene.boundingSphere.radius / 100) * (100 - props.cameraClipping.radius);
                         if (radius > 0 && radius !== cameraState.radius) {
                             // if radius = 0, NaNs happen
-                            cameraState.radius = Math.max(radius, 0.01)
+                            cameraState.radius = Math.max(radius, 0.01);
                         }
                     }
                 }
-                if (Object.keys(cameraState).length > 0) camera.setState(cameraState)
+                if (Object.keys(cameraState).length > 0) camera.setState(cameraState);
 
-                if (props.camera?.helper) drawPass.setProps({ cameraHelper: props.camera.helper })
-                if (props.cameraResetDurationMs !== undefined) p.cameraResetDurationMs = props.cameraResetDurationMs
-                if (props.transparentBackground !== undefined) p.transparentBackground = props.transparentBackground
+                if (props.camera?.helper) drawPass.setProps({ cameraHelper: props.camera.helper });
+                if (props.cameraResetDurationMs !== undefined) p.cameraResetDurationMs = props.cameraResetDurationMs;
+                if (props.transparentBackground !== undefined) p.transparentBackground = props.transparentBackground;
 
-                if (props.postprocessing) postprocessing.setProps(props.postprocessing)
-                if (props.multiSample) multiSample.setProps(props.multiSample)
-                if (props.renderer) renderer.setProps(props.renderer)
-                if (props.trackball) controls.setProps(props.trackball)
-                if (props.debug) debugHelper.setProps(props.debug)
+                if (props.postprocessing) postprocessing.setProps(props.postprocessing);
+                if (props.multiSample) multiSample.setProps(props.multiSample);
+                if (props.renderer) renderer.setProps(props.renderer);
+                if (props.trackball) controls.setProps(props.trackball);
+                if (props.debug) debugHelper.setProps(props.debug);
 
-                requestDraw(true)
+                requestDraw(true);
             },
             getImagePass: (props: Partial<ImageProps> = {}) => {
-                return new ImagePass(webgl, renderer, scene, camera, debugHelper, props)
+                return new ImagePass(webgl, renderer, scene, camera, debugHelper, props);
             },
 
             get props() {
                 const radius = scene.boundingSphere.radius > 0
                     ? 100 - Math.round((camera.transition.target.radius / scene.boundingSphere.radius) * 100)
-                    : 0
+                    : 0;
 
                 return {
                     camera: {
@@ -564,43 +564,43 @@ namespace Canvas3D {
                     renderer: { ...renderer.props },
                     trackball: { ...controls.props },
                     debug: { ...debugHelper.props }
-                }
+                };
             },
             get input() {
-                return input
+                return input;
             },
             get stats() {
-                return renderer.stats
+                return renderer.stats;
             },
             get interaction() {
-                return interactionHelper.events
+                return interactionHelper.events;
             },
             dispose: () => {
-                contextRestoredSub.unsubscribe()
-
-                scene.clear()
-                debugHelper.clear()
-                input.dispose()
-                controls.dispose()
-                renderer.dispose()
-                interactionHelper.dispose()
+                contextRestoredSub.unsubscribe();
+
+                scene.clear();
+                debugHelper.clear();
+                input.dispose();
+                controls.dispose();
+                renderer.dispose();
+                interactionHelper.dispose();
             }
-        }
+        };
 
         function handleResize() {
-            width = gl.drawingBufferWidth
-            height = gl.drawingBufferHeight
+            width = gl.drawingBufferWidth;
+            height = gl.drawingBufferHeight;
 
-            renderer.setViewport(0, 0, width, height)
-            Viewport.set(camera.viewport, 0, 0, width, height)
-            Viewport.set(controls.viewport, 0, 0, width, height)
+            renderer.setViewport(0, 0, width, height);
+            Viewport.set(camera.viewport, 0, 0, width, height);
+            Viewport.set(controls.viewport, 0, 0, width, height);
 
-            drawPass.setSize(width, height)
-            pickPass.setSize(width, height)
-            postprocessing.setSize(width, height)
-            multiSample.setSize(width, height)
+            drawPass.setSize(width, height);
+            pickPass.setSize(width, height);
+            postprocessing.setSize(width, height);
+            multiSample.setSize(width, height);
 
-            requestDraw(true)
+            requestDraw(true);
         }
     }
 }

src/mol-canvas3d/controls/trackball.ts

@@ -16,9 +16,9 @@ import { Camera } from '../camera';
 import { absMax } from '../../mol-math/misc';
 import { Binding } from '../../mol-util/binding';
 
-const B = ButtonsType
-const M = ModifiersKeys
-const Trigger = Binding.Trigger
+const B = ButtonsType;
+const M = ModifiersKeys;
+const Trigger = Binding.Trigger;
 
 export const DefaultTrackballBindings = {
     dragRotate: Binding([Trigger(B.Flag.Primary, M.create())], 'Rotate', 'Drag using ${triggers}'),
@@ -31,7 +31,7 @@ export const DefaultTrackballBindings = {
     scrollZoom: Binding([Trigger(B.Flag.Auxilary, M.create())], 'Zoom', 'Scroll using ${triggers}'),
     scrollFocus: Binding([Trigger(B.Flag.Auxilary, M.create({ shift: true }))], 'Clip', 'Scroll using ${triggers}'),
     scrollFocusZoom: Binding.Empty,
-}
+};
 
 export const TrackballControlsParams = {
     noScroll: PD.Boolean(true, { isHidden: true }),
@@ -50,10 +50,10 @@ export const TrackballControlsParams = {
     maxDistance: PD.Numeric(1e150, {}, { isHidden: true }),
 
     bindings: PD.Value(DefaultTrackballBindings, { isHidden: true })
-}
+};
 export type TrackballControlsProps = PD.Values<typeof TrackballControlsParams>
 
-export { TrackballControls }
+export { TrackballControls };
 interface TrackballControls {
     viewport: Viewport
 
@@ -66,48 +66,48 @@ interface TrackballControls {
 }
 namespace TrackballControls {
     export function create(input: InputObserver, camera: Camera, props: Partial<TrackballControlsProps> = {}): TrackballControls {
-        const p = { ...PD.getDefaultValues(TrackballControlsParams), ...props }
+        const p = { ...PD.getDefaultValues(TrackballControlsParams), ...props };
 
-        const viewport = Viewport()
+        const viewport = Viewport();
 
-        let disposed = false
+        let disposed = false;
 
-        const dragSub = input.drag.subscribe(onDrag)
-        const interactionEndSub = input.interactionEnd.subscribe(onInteractionEnd)
-        const wheelSub = input.wheel.subscribe(onWheel)
-        const pinchSub = input.pinch.subscribe(onPinch)
+        const dragSub = input.drag.subscribe(onDrag);
+        const interactionEndSub = input.interactionEnd.subscribe(onInteractionEnd);
+        const wheelSub = input.wheel.subscribe(onWheel);
+        const pinchSub = input.pinch.subscribe(onPinch);
 
         let _isInteracting = false;
 
         // For internal use
-        const lastPosition = Vec3()
+        const lastPosition = Vec3();
 
-        const _eye = Vec3()
+        const _eye = Vec3();
 
-        const _rotPrev = Vec2()
-        const _rotCurr = Vec2()
-        const _rotLastAxis = Vec3()
-        let _rotLastAngle = 0
+        const _rotPrev = Vec2();
+        const _rotCurr = Vec2();
+        const _rotLastAxis = Vec3();
+        let _rotLastAngle = 0;
 
-        const _zRotPrev = Vec2()
-        const _zRotCurr = Vec2()
-        let _zRotLastAngle = 0
+        const _zRotPrev = Vec2();
+        const _zRotCurr = Vec2();
+        let _zRotLastAngle = 0;
 
-        const _zoomStart = Vec2()
-        const _zoomEnd = Vec2()
+        const _zoomStart = Vec2();
+        const _zoomEnd = Vec2();
 
-        const _focusStart = Vec2()
-        const _focusEnd = Vec2()
+        const _focusStart = Vec2();
+        const _focusEnd = Vec2();
 
-        const _panStart = Vec2()
-        const _panEnd = Vec2()
+        const _panStart = Vec2();
+        const _panEnd = Vec2();
 
         // Initial values for reseting
-        const target0 = Vec3.clone(camera.target)
-        const position0 = Vec3.clone(camera.position)
-        const up0 = Vec3.clone(camera.up)
+        const target0 = Vec3.clone(camera.target);
+        const position0 = Vec3.clone(camera.position);
+        const up0 = Vec3.clone(camera.up);
 
-        const mouseOnScreenVec2 = Vec2()
+        const mouseOnScreenVec2 = Vec2();
         function getMouseOnScreen(pageX: number, pageY: number) {
             return Vec2.set(
                 mouseOnScreenVec2,
@@ -116,7 +116,7 @@ namespace TrackballControls {
             );
         }
 
-        const mouseOnCircleVec2 = Vec2()
+        const mouseOnCircleVec2 = Vec2();
         function getMouseOnCircle(pageX: number, pageY: number) {
             return Vec2.set(
                 mouseOnCircleVec2,
@@ -125,125 +125,125 @@ namespace TrackballControls {
             );
         }
 
-        const rotAxis = Vec3()
-        const rotQuat = Quat()
-        const rotEyeDir = Vec3()
-        const rotObjUpDir = Vec3()
-        const rotObjSideDir = Vec3()
-        const rotMoveDir = Vec3()
+        const rotAxis = Vec3();
+        const rotQuat = Quat();
+        const rotEyeDir = Vec3();
+        const rotObjUpDir = Vec3();
+        const rotObjSideDir = Vec3();
+        const rotMoveDir = Vec3();
 
         function rotateCamera() {
-            const dx = _rotCurr[0] - _rotPrev[0]
-            const dy = _rotCurr[1] - _rotPrev[1]
+            const dx = _rotCurr[0] - _rotPrev[0];
+            const dy = _rotCurr[1] - _rotPrev[1];
             Vec3.set(rotMoveDir, dx, dy, 0);
 
             const angle = Vec3.magnitude(rotMoveDir) * p.rotateSpeed;
 
             if (angle) {
-                Vec3.sub(_eye, camera.position, camera.target)
+                Vec3.sub(_eye, camera.position, camera.target);
 
-                Vec3.normalize(rotEyeDir, _eye)
-                Vec3.normalize(rotObjUpDir, camera.up)
-                Vec3.normalize(rotObjSideDir, Vec3.cross(rotObjSideDir, rotObjUpDir, rotEyeDir))
+                Vec3.normalize(rotEyeDir, _eye);
+                Vec3.normalize(rotObjUpDir, camera.up);
+                Vec3.normalize(rotObjSideDir, Vec3.cross(rotObjSideDir, rotObjUpDir, rotEyeDir));
 
-                Vec3.setMagnitude(rotObjUpDir, rotObjUpDir, dy)
-                Vec3.setMagnitude(rotObjSideDir, rotObjSideDir, dx)
+                Vec3.setMagnitude(rotObjUpDir, rotObjUpDir, dy);
+                Vec3.setMagnitude(rotObjSideDir, rotObjSideDir, dx);
 
-                Vec3.add(rotMoveDir, rotObjUpDir, rotObjSideDir)
-                Vec3.normalize(rotAxis, Vec3.cross(rotAxis, rotMoveDir, _eye))
-                Quat.setAxisAngle(rotQuat, rotAxis, angle)
+                Vec3.add(rotMoveDir, rotObjUpDir, rotObjSideDir);
+                Vec3.normalize(rotAxis, Vec3.cross(rotAxis, rotMoveDir, _eye));
+                Quat.setAxisAngle(rotQuat, rotAxis, angle);
 
-                Vec3.transformQuat(_eye, _eye, rotQuat)
-                Vec3.transformQuat(camera.up, camera.up, rotQuat)
+                Vec3.transformQuat(_eye, _eye, rotQuat);
+                Vec3.transformQuat(camera.up, camera.up, rotQuat);
 
-                Vec3.copy(_rotLastAxis, rotAxis)
+                Vec3.copy(_rotLastAxis, rotAxis);
                 _rotLastAngle = angle;
             } else if (!p.staticMoving && _rotLastAngle) {
                 _rotLastAngle *= Math.sqrt(1.0 - p.dynamicDampingFactor);
-                Vec3.sub(_eye, camera.position, camera.target)
-                Quat.setAxisAngle(rotQuat, _rotLastAxis, _rotLastAngle)
+                Vec3.sub(_eye, camera.position, camera.target);
+                Quat.setAxisAngle(rotQuat, _rotLastAxis, _rotLastAngle);
 
-                Vec3.transformQuat(_eye, _eye, rotQuat)
-                Vec3.transformQuat(camera.up, camera.up, rotQuat)
+                Vec3.transformQuat(_eye, _eye, rotQuat);
+                Vec3.transformQuat(camera.up, camera.up, rotQuat);
             }
 
-            Vec2.copy(_rotPrev, _rotCurr)
+            Vec2.copy(_rotPrev, _rotCurr);
         }
 
-        const zRotQuat = Quat()
+        const zRotQuat = Quat();
 
         function zRotateCamera() {
-            const dx = _zRotCurr[0] - _zRotPrev[0]
-            const dy = _zRotCurr[1] - _zRotPrev[1]
-            const angle = p.rotateSpeed * (-dx + dy) * -0.05
+            const dx = _zRotCurr[0] - _zRotPrev[0];
+            const dy = _zRotCurr[1] - _zRotPrev[1];
+            const angle = p.rotateSpeed * (-dx + dy) * -0.05;
 
             if (angle) {
-                Vec3.sub(_eye, camera.position, camera.target)
-                Quat.setAxisAngle(zRotQuat, _eye, angle)
-                Vec3.transformQuat(camera.up, camera.up, zRotQuat)
+                Vec3.sub(_eye, camera.position, camera.target);
+                Quat.setAxisAngle(zRotQuat, _eye, angle);
+                Vec3.transformQuat(camera.up, camera.up, zRotQuat);
                 _zRotLastAngle = angle;
             } else if (!p.staticMoving && _zRotLastAngle) {
                 _zRotLastAngle *= Math.sqrt(1.0 - p.dynamicDampingFactor);
-                Vec3.sub(_eye, camera.position, camera.target)
-                Quat.setAxisAngle(zRotQuat, _eye, _zRotLastAngle)
-                Vec3.transformQuat(camera.up, camera.up, zRotQuat)
+                Vec3.sub(_eye, camera.position, camera.target);
+                Quat.setAxisAngle(zRotQuat, _eye, _zRotLastAngle);
+                Vec3.transformQuat(camera.up, camera.up, zRotQuat);
             }
 
-            Vec2.copy(_zRotPrev, _zRotCurr)
+            Vec2.copy(_zRotPrev, _zRotCurr);
         }
 
         function zoomCamera() {
-            const factor = 1.0 + (_zoomEnd[1] - _zoomStart[1]) * p.zoomSpeed
+            const factor = 1.0 + (_zoomEnd[1] - _zoomStart[1]) * p.zoomSpeed;
             if (factor !== 1.0 && factor > 0.0) {
-                Vec3.scale(_eye, _eye, factor)
+                Vec3.scale(_eye, _eye, factor);
             }
 
             if (p.staticMoving) {
-                Vec2.copy(_zoomStart, _zoomEnd)
+                Vec2.copy(_zoomStart, _zoomEnd);
             } else {
-                _zoomStart[1] += (_zoomEnd[1] - _zoomStart[1]) * p.dynamicDampingFactor
+                _zoomStart[1] += (_zoomEnd[1] - _zoomStart[1]) * p.dynamicDampingFactor;
             }
         }
 
         function focusCamera() {
-            const factor = (_focusEnd[1] - _focusStart[1]) * p.zoomSpeed
+            const factor = (_focusEnd[1] - _focusStart[1]) * p.zoomSpeed;
             if (factor !== 0.0) {
-                const radius = Math.max(1, camera.state.radius + camera.state.radius * factor)
-                camera.setState({ radius })
+                const radius = Math.max(1, camera.state.radius + camera.state.radius * factor);
+                camera.setState({ radius });
             }
 
             if (p.staticMoving) {
-                Vec2.copy(_focusStart, _focusEnd)
+                Vec2.copy(_focusStart, _focusEnd);
             } else {
-                _focusStart[1] += (_focusEnd[1] - _focusStart[1]) * p.dynamicDampingFactor
+                _focusStart[1] += (_focusEnd[1] - _focusStart[1]) * p.dynamicDampingFactor;
             }
         }
 
-        const panMouseChange = Vec2()
-        const panObjUp = Vec3()
-        const panOffset = Vec3()
+        const panMouseChange = Vec2();
+        const panObjUp = Vec3();
+        const panOffset = Vec3();
 
         function panCamera() {
-            Vec2.sub(panMouseChange, Vec2.copy(panMouseChange, _panEnd), _panStart)
+            Vec2.sub(panMouseChange, Vec2.copy(panMouseChange, _panEnd), _panStart);
 
             if (Vec2.squaredMagnitude(panMouseChange)) {
-                Vec2.scale(panMouseChange, panMouseChange, Vec3.magnitude(_eye) * p.panSpeed)
+                Vec2.scale(panMouseChange, panMouseChange, Vec3.magnitude(_eye) * p.panSpeed);
 
-                Vec3.cross(panOffset, Vec3.copy(panOffset, _eye), camera.up)
-                Vec3.setMagnitude(panOffset, panOffset, panMouseChange[0])
+                Vec3.cross(panOffset, Vec3.copy(panOffset, _eye), camera.up);
+                Vec3.setMagnitude(panOffset, panOffset, panMouseChange[0]);
 
-                Vec3.setMagnitude(panObjUp, camera.up, panMouseChange[1])
-                Vec3.add(panOffset, panOffset, panObjUp)
+                Vec3.setMagnitude(panObjUp, camera.up, panMouseChange[1]);
+                Vec3.add(panOffset, panOffset, panObjUp);
 
-                Vec3.add(camera.position, camera.position, panOffset)
-                Vec3.add(camera.target, camera.target, panOffset)
+                Vec3.add(camera.position, camera.position, panOffset);
+                Vec3.add(camera.target, camera.target, panOffset);
 
                 if (p.staticMoving) {
-                    Vec2.copy(_panStart, _panEnd)
+                    Vec2.copy(_panStart, _panEnd);
                 } else {
-                    Vec2.sub(panMouseChange, _panEnd, _panStart)
-                    Vec2.scale(panMouseChange, panMouseChange, p.dynamicDampingFactor)
-                    Vec2.add(_panStart, _panStart, panMouseChange)
+                    Vec2.sub(panMouseChange, _panEnd, _panStart);
+                    Vec2.scale(panMouseChange, panMouseChange, p.dynamicDampingFactor);
+                    Vec2.add(_panStart, _panStart, panMouseChange);
                 }
             }
         }
@@ -253,19 +253,19 @@ namespace TrackballControls {
          * and not too large compared to `camera.state.radiusMax`
          */
         function checkDistances() {
-            const maxDistance = Math.min(Math.max(camera.state.radiusMax * 1000, 0.01), p.maxDistance)
+            const maxDistance = Math.min(Math.max(camera.state.radiusMax * 1000, 0.01), p.maxDistance);
             if (Vec3.squaredMagnitude(_eye) > maxDistance * maxDistance) {
-                Vec3.setMagnitude(_eye, _eye, maxDistance)
-                Vec3.add(camera.position, camera.target, _eye)
-                Vec2.copy(_zoomStart, _zoomEnd)
-                Vec2.copy(_focusStart, _focusEnd)
+                Vec3.setMagnitude(_eye, _eye, maxDistance);
+                Vec3.add(camera.position, camera.target, _eye);
+                Vec2.copy(_zoomStart, _zoomEnd);
+                Vec2.copy(_focusStart, _focusEnd);
             }
 
             if (Vec3.squaredMagnitude(_eye) < p.minDistance * p.minDistance) {
-                Vec3.setMagnitude(_eye, _eye, p.minDistance)
-                Vec3.add(camera.position, camera.target, _eye)
-                Vec2.copy(_zoomStart, _zoomEnd)
-                Vec2.copy(_focusStart, _focusEnd)
+                Vec3.setMagnitude(_eye, _eye, p.minDistance);
+                Vec3.add(camera.position, camera.target, _eye);
+                Vec2.copy(_zoomStart, _zoomEnd);
+                Vec2.copy(_focusStart, _focusEnd);
             }
         }
 
@@ -275,19 +275,19 @@ namespace TrackballControls {
             if (lastUpdated === t) return;
             if (p.spin) spin(t - lastUpdated);
 
-            Vec3.sub(_eye, camera.position, camera.target)
+            Vec3.sub(_eye, camera.position, camera.target);
 
-            rotateCamera()
-            zRotateCamera()
-            zoomCamera()
-            focusCamera()
-            panCamera()
+            rotateCamera();
+            zRotateCamera();
+            zoomCamera();
+            focusCamera();
+            panCamera();
 
-            Vec3.add(camera.position, camera.target, _eye)
-            checkDistances()
+            Vec3.add(camera.position, camera.target, _eye);
+            checkDistances();
 
             if (Vec3.squaredDistance(lastPosition, camera.position) > EPSILON) {
-                Vec3.copy(lastPosition, camera.position)
+                Vec3.copy(lastPosition, camera.position);
             }
 
             lastUpdated = t;
@@ -295,12 +295,12 @@ namespace TrackballControls {
 
         /** Reset object's vectors and the target vector to their initial values */
         function reset() {
-            Vec3.copy(camera.target, target0)
-            Vec3.copy(camera.position, position0)
-            Vec3.copy(camera.up, up0)
+            Vec3.copy(camera.target, target0);
+            Vec3.copy(camera.position, position0);
+            Vec3.copy(camera.up, up0);
 
-            Vec3.sub(_eye, camera.position, camera.target)
-            Vec3.copy(lastPosition, camera.position)
+            Vec3.sub(_eye, camera.position, camera.target);
+            Vec3.copy(lastPosition, camera.position);
         }
 
         // listeners
@@ -308,48 +308,48 @@ namespace TrackballControls {
         function onDrag({ pageX, pageY, buttons, modifiers, isStart }: DragInput) {
             _isInteracting = true;
 
-            const dragRotate = Binding.match(p.bindings.dragRotate, buttons, modifiers)
-            const dragRotateZ = Binding.match(p.bindings.dragRotateZ, buttons, modifiers)
-            const dragPan = Binding.match(p.bindings.dragPan, buttons, modifiers)
-            const dragZoom = Binding.match(p.bindings.dragZoom, buttons, modifiers)
-            const dragFocus = Binding.match(p.bindings.dragFocus, buttons, modifiers)
-            const dragFocusZoom = Binding.match(p.bindings.dragFocusZoom, buttons, modifiers)
+            const dragRotate = Binding.match(p.bindings.dragRotate, buttons, modifiers);
+            const dragRotateZ = Binding.match(p.bindings.dragRotateZ, buttons, modifiers);
+            const dragPan = Binding.match(p.bindings.dragPan, buttons, modifiers);
+            const dragZoom = Binding.match(p.bindings.dragZoom, buttons, modifiers);
+            const dragFocus = Binding.match(p.bindings.dragFocus, buttons, modifiers);
+            const dragFocusZoom = Binding.match(p.bindings.dragFocusZoom, buttons, modifiers);
 
-            getMouseOnCircle(pageX, pageY)
-            getMouseOnScreen(pageX, pageY)
+            getMouseOnCircle(pageX, pageY);
+            getMouseOnScreen(pageX, pageY);
 
             if (isStart) {
                 if (dragRotate) {
-                    Vec2.copy(_rotCurr, mouseOnCircleVec2)
-                    Vec2.copy(_rotPrev, _rotCurr)
+                    Vec2.copy(_rotCurr, mouseOnCircleVec2);
+                    Vec2.copy(_rotPrev, _rotCurr);
                 }
                 if (dragRotateZ) {
-                    Vec2.copy(_zRotCurr, mouseOnCircleVec2)
-                    Vec2.copy(_zRotPrev, _zRotCurr)
+                    Vec2.copy(_zRotCurr, mouseOnCircleVec2);
+                    Vec2.copy(_zRotPrev, _zRotCurr);
                 }
                 if (dragZoom || dragFocusZoom) {
-                    Vec2.copy(_zoomStart, mouseOnScreenVec2)
-                    Vec2.copy(_zoomEnd, _zoomStart)
+                    Vec2.copy(_zoomStart, mouseOnScreenVec2);
+                    Vec2.copy(_zoomEnd, _zoomStart);
                 }
                 if (dragFocus) {
-                    Vec2.copy(_focusStart, mouseOnScreenVec2)
-                    Vec2.copy(_focusEnd, _focusStart)
+                    Vec2.copy(_focusStart, mouseOnScreenVec2);
+                    Vec2.copy(_focusEnd, _focusStart);
                 }
                 if (dragPan) {
-                    Vec2.copy(_panStart, mouseOnScreenVec2)
-                    Vec2.copy(_panEnd, _panStart)
+                    Vec2.copy(_panStart, mouseOnScreenVec2);
+                    Vec2.copy(_panEnd, _panStart);
                 }
             }
 
-            if (dragRotate) Vec2.copy(_rotCurr, mouseOnCircleVec2)
-            if (dragRotateZ) Vec2.copy(_zRotCurr, mouseOnCircleVec2)
-            if (dragZoom || dragFocusZoom) Vec2.copy(_zoomEnd, mouseOnScreenVec2)
-            if (dragFocus) Vec2.copy(_focusEnd, mouseOnScreenVec2)
+            if (dragRotate) Vec2.copy(_rotCurr, mouseOnCircleVec2);
+            if (dragRotateZ) Vec2.copy(_zRotCurr, mouseOnCircleVec2);
+            if (dragZoom || dragFocusZoom) Vec2.copy(_zoomEnd, mouseOnScreenVec2);
+            if (dragFocus) Vec2.copy(_focusEnd, mouseOnScreenVec2);
             if (dragFocusZoom) {
                 const dist = Vec3.distance(camera.state.position, camera.state.target);
-                camera.setState({ radius: dist / 5 })
+                camera.setState({ radius: dist / 5 });
             }
-            if (dragPan) Vec2.copy(_panEnd, mouseOnScreenVec2)
+            if (dragPan) Vec2.copy(_panEnd, mouseOnScreenVec2);
         }
 
         function onInteractionEnd() {
@@ -357,30 +357,30 @@ namespace TrackballControls {
         }
 
         function onWheel({ dx, dy, dz, buttons, modifiers }: WheelInput) {
-            const delta = absMax(dx, dy, dz)
+            const delta = absMax(dx, dy, dz);
             if (Binding.match(p.bindings.scrollZoom, buttons, modifiers)) {
-                _zoomEnd[1] += delta * 0.0001
+                _zoomEnd[1] += delta * 0.0001;
             }
             if (Binding.match(p.bindings.scrollFocus, buttons, modifiers)) {
-                _focusEnd[1] += delta * 0.0001
+                _focusEnd[1] += delta * 0.0001;
             }
         }
 
         function onPinch({ fraction, buttons, modifiers }: PinchInput) {
             if (Binding.match(p.bindings.scrollZoom, buttons, modifiers)) {
                 _isInteracting = true;
-                _zoomEnd[1] += (fraction - 1) * 0.1
+                _zoomEnd[1] += (fraction - 1) * 0.1;
             }
         }
 
         function dispose() {
-            if (disposed) return
-            disposed = true
+            if (disposed) return;
+            disposed = true;
 
-            dragSub.unsubscribe()
-            wheelSub.unsubscribe()
-            pinchSub.unsubscribe()
-            interactionEndSub.unsubscribe()
+            dragSub.unsubscribe();
+            wheelSub.unsubscribe();
+            pinchSub.unsubscribe();
+            interactionEndSub.unsubscribe();
         }
 
         const _spinSpeed = Vec2.create(0.005, 0);
@@ -396,14 +396,14 @@ namespace TrackballControls {
         return {
             viewport,
 
-            get props() { return p as Readonly<TrackballControlsProps> },
+            get props() { return p as Readonly<TrackballControlsProps>; },
             setProps: (props: Partial<TrackballControlsProps>) => {
-                Object.assign(p, props)
+                Object.assign(p, props);
             },
 
             update,
             reset,
             dispose
-        }
+        };
     }
 }

src/mol-canvas3d/helper/bounding-sphere-helper.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { createRenderObject, GraphicsRenderObject, getNextMaterialId } from '../../mol-gl/render-object'
+import { createRenderObject, GraphicsRenderObject, getNextMaterialId } from '../../mol-gl/render-object';
 import { MeshBuilder } from '../../mol-geo/geometry/mesh/mesh-builder';
 import { addSphere } from '../../mol-geo/geometry/mesh/builder/sphere';
 import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
@@ -24,7 +24,7 @@ export const DebugHelperParams = {
     visibleSceneBoundingSpheres: PD.Boolean(false, { description: 'Show visible scene bounding spheres.' }),
     objectBoundingSpheres: PD.Boolean(false, { description: 'Show bounding spheres of visible render objects.' }),
     instanceBoundingSpheres: PD.Boolean(false, { description: 'Show bounding spheres of visible instances.' }),
-}
+};
 export type DebugHelperParams = typeof DebugHelperParams
 export type DebugHelperProps = PD.Values<DebugHelperParams>
 
@@ -41,24 +41,24 @@ export class BoundingSphereHelper {
     private visibleSceneData: BoundingSphereData | undefined
 
     constructor(ctx: WebGLContext, parent: Scene, props: Partial<DebugHelperProps>) {
-        this.scene = Scene.create(ctx)
-        this.parent = parent
-        this._props = { ...PD.getDefaultValues(DebugHelperParams), ...props }
+        this.scene = Scene.create(ctx);
+        this.parent = parent;
+        this._props = { ...PD.getDefaultValues(DebugHelperParams), ...props };
     }
 
     update() {
-        const newSceneData = updateBoundingSphereData(this.scene, this.parent.boundingSphere, this.sceneData, ColorNames.lightgrey, sceneMaterialId)
-        if (newSceneData) this.sceneData = newSceneData
+        const newSceneData = updateBoundingSphereData(this.scene, this.parent.boundingSphere, this.sceneData, ColorNames.lightgrey, sceneMaterialId);
+        if (newSceneData) this.sceneData = newSceneData;
 
-        const newVisibleSceneData = updateBoundingSphereData(this.scene, this.parent.boundingSphereVisible, this.visibleSceneData, ColorNames.black, visibleSceneMaterialId)
-        if (newVisibleSceneData) this.visibleSceneData = newVisibleSceneData
+        const newVisibleSceneData = updateBoundingSphereData(this.scene, this.parent.boundingSphereVisible, this.visibleSceneData, ColorNames.black, visibleSceneMaterialId);
+        if (newVisibleSceneData) this.visibleSceneData = newVisibleSceneData;
 
         this.parent.forEach((r, ro) => {
-            const objectData = this.objectsData.get(ro)
-            const newObjectData = updateBoundingSphereData(this.scene, r.values.boundingSphere.ref.value, objectData, ColorNames.tomato, objectMaterialId)
-            if (newObjectData) this.objectsData.set(ro, newObjectData)
+            const objectData = this.objectsData.get(ro);
+            const newObjectData = updateBoundingSphereData(this.scene, r.values.boundingSphere.ref.value, objectData, ColorNames.tomato, objectMaterialId);
+            if (newObjectData) this.objectsData.set(ro, newObjectData);
 
-            const instanceData = this.instancesData.get(ro)
+            const instanceData = this.instancesData.get(ro);
             const newInstanceData = updateBoundingSphereData(this.scene, r.values.invariantBoundingSphere.ref.value, instanceData, ColorNames.skyblue, instanceMaterialId, {
                 aTransform: ro.values.aTransform,
                 matrix: ro.values.matrix,
@@ -67,97 +67,97 @@ export class BoundingSphereHelper {
                 uInstanceCount: ro.values.uInstanceCount,
                 instanceCount: ro.values.instanceCount,
                 aInstance: ro.values.aInstance,
-            })
-            if (newInstanceData) this.instancesData.set(ro, newInstanceData)
-        })
+            });
+            if (newInstanceData) this.instancesData.set(ro, newInstanceData);
+        });
 
         this.objectsData.forEach((objectData, ro) => {
             if (!this.parent.has(ro)) {
-                this.scene.remove(objectData.renderObject)
-                this.objectsData.delete(ro)
+                this.scene.remove(objectData.renderObject);
+                this.objectsData.delete(ro);
             }
-        })
+        });
         this.instancesData.forEach((instanceData, ro) => {
             if (!this.parent.has(ro)) {
-                this.scene.remove(instanceData.renderObject)
-                this.instancesData.delete(ro)
+                this.scene.remove(instanceData.renderObject);
+                this.instancesData.delete(ro);
             }
-        })
+        });
 
-        this.scene.update(void 0, false)
-        this.scene.commit()
+        this.scene.update(void 0, false);
+        this.scene.commit();
     }
 
     syncVisibility() {
         if (this.sceneData) {
-            this.sceneData.renderObject.state.visible = this._props.sceneBoundingSpheres
+            this.sceneData.renderObject.state.visible = this._props.sceneBoundingSpheres;
         }
 
         if (this.visibleSceneData) {
-            this.visibleSceneData.renderObject.state.visible = this._props.visibleSceneBoundingSpheres
+            this.visibleSceneData.renderObject.state.visible = this._props.visibleSceneBoundingSpheres;
         }
 
         this.parent.forEach((_, ro) => {
-            const objectData = this.objectsData.get(ro)
-            if (objectData) objectData.renderObject.state.visible = ro.state.visible && this._props.objectBoundingSpheres
+            const objectData = this.objectsData.get(ro);
+            if (objectData) objectData.renderObject.state.visible = ro.state.visible && this._props.objectBoundingSpheres;
 
-            const instanceData = this.instancesData.get(ro)
-            if (instanceData) instanceData.renderObject.state.visible = ro.state.visible && this._props.instanceBoundingSpheres
-        })
+            const instanceData = this.instancesData.get(ro);
+            if (instanceData) instanceData.renderObject.state.visible = ro.state.visible && this._props.instanceBoundingSpheres;
+        });
     }
 
     clear() {
-        this.sceneData = undefined
-        this.objectsData.clear()
-        this.scene.clear()
+        this.sceneData = undefined;
+        this.objectsData.clear();
+        this.scene.clear();
     }
 
     get isEnabled() {
         return (
             this._props.sceneBoundingSpheres || this._props.visibleSceneBoundingSpheres ||
             this._props.objectBoundingSpheres || this._props.instanceBoundingSpheres
-        )
+        );
     }
-    get props() { return this._props as Readonly<DebugHelperProps> }
+    get props() { return this._props as Readonly<DebugHelperProps>; }
 
     setProps (props: Partial<DebugHelperProps>) {
-        Object.assign(this._props, props)
-        if (this.isEnabled) this.update()
+        Object.assign(this._props, props);
+        if (this.isEnabled) this.update();
     }
 }
 
 function updateBoundingSphereData(scene: Scene, boundingSphere: Sphere3D, data: BoundingSphereData | undefined, color: Color, materialId: number, transform?: TransformData) {
     if (!data || !Sphere3D.equals(data.boundingSphere, boundingSphere)) {
-        const mesh = createBoundingSphereMesh(boundingSphere, data && data.mesh)
-        const renderObject = data ? data.renderObject : createBoundingSphereRenderObject(mesh, color, materialId, transform)
+        const mesh = createBoundingSphereMesh(boundingSphere, data && data.mesh);
+        const renderObject = data ? data.renderObject : createBoundingSphereRenderObject(mesh, color, materialId, transform);
         if (data) {
-            ValueCell.update(renderObject.values.drawCount, Geometry.getDrawCount(mesh))
+            ValueCell.update(renderObject.values.drawCount, Geometry.getDrawCount(mesh));
         } else {
-            scene.add(renderObject)
+            scene.add(renderObject);
         }
-        return { boundingSphere: Sphere3D.clone(boundingSphere), renderObject, mesh }
+        return { boundingSphere: Sphere3D.clone(boundingSphere), renderObject, mesh };
     }
 }
 
 function createBoundingSphereMesh(boundingSphere: Sphere3D, mesh?: Mesh) {
-    const detail = 2
-    const vertexCount = sphereVertexCount(detail)
-    const builderState = MeshBuilder.createState(vertexCount, vertexCount / 2, mesh)
+    const detail = 2;
+    const vertexCount = sphereVertexCount(detail);
+    const builderState = MeshBuilder.createState(vertexCount, vertexCount / 2, mesh);
     if (boundingSphere.radius) {
-        addSphere(builderState, boundingSphere.center, boundingSphere.radius, detail)
+        addSphere(builderState, boundingSphere.center, boundingSphere.radius, detail);
         if (Sphere3D.hasExtrema(boundingSphere)) {
-            for (const e of boundingSphere.extrema) addSphere(builderState, e, 1.0, 0)
+            for (const e of boundingSphere.extrema) addSphere(builderState, e, 1.0, 0);
         }
     }
-    return MeshBuilder.getMesh(builderState)
+    return MeshBuilder.getMesh(builderState);
 }
 
-const sceneMaterialId = getNextMaterialId()
-const visibleSceneMaterialId = getNextMaterialId()
-const objectMaterialId = getNextMaterialId()
-const instanceMaterialId = getNextMaterialId()
+const sceneMaterialId = getNextMaterialId();
+const visibleSceneMaterialId = getNextMaterialId();
+const objectMaterialId = getNextMaterialId();
+const instanceMaterialId = getNextMaterialId();
 
 function createBoundingSphereRenderObject(mesh: Mesh, color: Color, materialId: number, transform?: TransformData) {
-    const values = Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform)
-    return createRenderObject('mesh', values, { visible: true, alphaFactor: 1, pickable: false, opaque: false }, materialId)
+    const values = Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform);
+    return createRenderObject('mesh', values, { visible: true, alphaFactor: 1, pickable: false, opaque: false }, materialId);
 }

src/mol-canvas3d/helper/camera-helper.ts

@@ -31,7 +31,7 @@ const AxesParams = {
     colorY: PD.Color(ColorNames.green, { isEssential: true }),
     colorZ: PD.Color(ColorNames.blue, { isEssential: true }),
     scale: PD.Numeric(0.33, { min: 0.1, max: 2, step: 0.1 }, { isEssential: true }),
-}
+};
 type AxesParams = typeof AxesParams
 type AxesProps = PD.Values<AxesParams>
 
@@ -40,7 +40,7 @@ export const CameraHelperParams = {
         on: PD.Group(AxesParams),
         off: PD.Group({})
     }, { cycle: true, description: 'Show camera orientation axes' }),
-}
+};
 export type CameraHelperParams = typeof CameraHelperParams
 export type CameraHelperProps = PD.Values<CameraHelperParams>
 
@@ -54,122 +54,122 @@ export class CameraHelper {
     private renderObject: GraphicsRenderObject | undefined
 
     constructor(private webgl: WebGLContext, props: Partial<CameraHelperProps> = {}) {
-        this.scene = Scene.create(webgl)
+        this.scene = Scene.create(webgl);
 
-        this.camera = new Camera()
-        Vec3.set(this.camera.up, 0, 1, 0)
-        Vec3.set(this.camera.target, 0, 0, 0)
+        this.camera = new Camera();
+        Vec3.set(this.camera.up, 0, 1, 0);
+        Vec3.set(this.camera.target, 0, 0, 0);
 
-        this.setProps(props)
+        this.setProps(props);
     }
 
     setProps(props: Partial<CameraHelperProps>) {
         this.props = produce(this.props, p => {
             if (props.axes !== undefined) {
-                p.axes.name = props.axes.name
+                p.axes.name = props.axes.name;
                 if (props.axes.name === 'on') {
-                    this.scene.clear()
-                    const params = { ...props.axes.params, scale: props.axes.params.scale * this.webgl.pixelRatio }
-                    this.renderObject = createAxesRenderObject(params)
-                    this.scene.add(this.renderObject)
-                    this.scene.commit()
+                    this.scene.clear();
+                    const params = { ...props.axes.params, scale: props.axes.params.scale * this.webgl.pixelRatio };
+                    this.renderObject = createAxesRenderObject(params);
+                    this.scene.add(this.renderObject);
+                    this.scene.commit();
 
-                    Vec3.set(this.camera.position, 0, 0, params.scale * 200)
-                    Mat4.lookAt(this.camera.view, this.camera.position, this.camera.target, this.camera.up)
+                    Vec3.set(this.camera.position, 0, 0, params.scale * 200);
+                    Mat4.lookAt(this.camera.view, this.camera.position, this.camera.target, this.camera.up);
 
-                    p.axes.params = { ...props.axes.params }
+                    p.axes.params = { ...props.axes.params };
                 }
             }
-        })
+        });
     }
 
     get isEnabled() {
-        return this.props.axes.name === 'on'
+        return this.props.axes.name === 'on';
     }
 
     update(camera: Camera) {
-        if (!this.renderObject) return
+        if (!this.renderObject) return;
 
-        updateCamera(this.camera, camera.viewport)
+        updateCamera(this.camera, camera.viewport);
 
-        const m = this.renderObject.values.aTransform.ref.value as unknown as Mat4
-        Mat4.extractRotation(m, camera.view)
+        const m = this.renderObject.values.aTransform.ref.value as unknown as Mat4;
+        Mat4.extractRotation(m, camera.view);
 
-        const r = this.renderObject.values.boundingSphere.ref.value.radius
+        const r = this.renderObject.values.boundingSphere.ref.value.radius;
         Mat4.setTranslation(m, Vec3.create(
             -camera.viewport.width / 2 + r,
             -camera.viewport.height / 2 + r,
             0
-        ))
+        ));
 
-        ValueCell.update(this.renderObject.values.aTransform, this.renderObject.values.aTransform.ref.value)
-        this.scene.update([this.renderObject], true)
+        ValueCell.update(this.renderObject.values.aTransform, this.renderObject.values.aTransform.ref.value);
+        this.scene.update([this.renderObject], true);
     }
 }
 
 function updateCamera(camera: Camera, viewport: Viewport) {
-    const { near, far } = camera
+    const { near, far } = camera;
 
-    const fullLeft = -(viewport.width - viewport.x) / 2
-    const fullRight = (viewport.width - viewport.x) / 2
-    const fullTop = (viewport.height - viewport.y) / 2
-    const fullBottom = -(viewport.height - viewport.y) / 2
+    const fullLeft = -(viewport.width - viewport.x) / 2;
+    const fullRight = (viewport.width - viewport.x) / 2;
+    const fullTop = (viewport.height - viewport.y) / 2;
+    const fullBottom = -(viewport.height - viewport.y) / 2;
 
-    const dx = (fullRight - fullLeft) / 2
-    const dy = (fullTop - fullBottom) / 2
-    const cx = (fullRight + fullLeft) / 2
-    const cy = (fullTop + fullBottom) / 2
+    const dx = (fullRight - fullLeft) / 2;
+    const dy = (fullTop - fullBottom) / 2;
+    const cx = (fullRight + fullLeft) / 2;
+    const cy = (fullTop + fullBottom) / 2;
 
-    const left = cx - dx
-    const right = cx + dx
-    const top = cy + dy
-    const bottom = cy - dy
+    const left = cx - dx;
+    const right = cx + dx;
+    const top = cy + dy;
+    const bottom = cy - dy;
 
-    Mat4.ortho(camera.projection, left, right, top, bottom, near, far)
+    Mat4.ortho(camera.projection, left, right, top, bottom, near, far);
 }
 
 function createAxesMesh(scale: number, mesh?: Mesh) {
-    const state = MeshBuilder.createState(512, 256, mesh)
-    const radius = 0.05 * scale
-    const x = Vec3.scale(Vec3(), Vec3.unitX, scale)
-    const y = Vec3.scale(Vec3(), Vec3.unitY, scale)
-    const z = Vec3.scale(Vec3(), Vec3.unitZ, scale)
-    const cylinderProps = { radiusTop: radius, radiusBottom: radius, radialSegments: 32 }
+    const state = MeshBuilder.createState(512, 256, mesh);
+    const radius = 0.05 * scale;
+    const x = Vec3.scale(Vec3(), Vec3.unitX, scale);
+    const y = Vec3.scale(Vec3(), Vec3.unitY, scale);
+    const z = Vec3.scale(Vec3(), Vec3.unitZ, scale);
+    const cylinderProps = { radiusTop: radius, radiusBottom: radius, radialSegments: 32 };
 
-    state.currentGroup = 0
-    addSphere(state, Vec3.origin, radius, 2)
+    state.currentGroup = 0;
+    addSphere(state, Vec3.origin, radius, 2);
 
-    state.currentGroup = 1
-    addSphere(state, x, radius, 2)
-    addCylinder(state, Vec3.origin, x, 1, cylinderProps)
+    state.currentGroup = 1;
+    addSphere(state, x, radius, 2);
+    addCylinder(state, Vec3.origin, x, 1, cylinderProps);
 
-    state.currentGroup = 2
-    addSphere(state, y, radius, 2)
-    addCylinder(state, Vec3.origin, y, 1, cylinderProps)
+    state.currentGroup = 2;
+    addSphere(state, y, radius, 2);
+    addCylinder(state, Vec3.origin, y, 1, cylinderProps);
 
-    state.currentGroup = 3
-    addSphere(state, z, radius, 2)
-    addCylinder(state, Vec3.origin, z, 1, cylinderProps)
+    state.currentGroup = 3;
+    addSphere(state, z, radius, 2);
+    addCylinder(state, Vec3.origin, z, 1, cylinderProps);
 
-    return MeshBuilder.getMesh(state)
+    return MeshBuilder.getMesh(state);
 }
 
 function getAxesShape(props: AxesProps, shape?: Shape<Mesh>) {
-    const scale = 100 * props.scale
-    const mesh = createAxesMesh(scale, shape?.geometry)
-    mesh.setBoundingSphere(Sphere3D.create(Vec3.create(scale / 2, scale / 2, scale / 2), scale + scale / 4))
+    const scale = 100 * props.scale;
+    const mesh = createAxesMesh(scale, shape?.geometry);
+    mesh.setBoundingSphere(Sphere3D.create(Vec3.create(scale / 2, scale / 2, scale / 2), scale + scale / 4));
     const getColor = (groupId: number) => {
         switch (groupId) {
-            case 1: return props.colorX
-            case 2: return props.colorY
-            case 3: return props.colorZ
-            default: return ColorNames.grey
+            case 1: return props.colorX;
+            case 2: return props.colorY;
+            case 3: return props.colorZ;
+            default: return ColorNames.grey;
         }
-    }
-    return Shape.create('axes', {}, mesh, getColor, () => 1, () => '')
+    };
+    return Shape.create('axes', {}, mesh, getColor, () => 1, () => '');
 }
 
 function createAxesRenderObject(props: AxesProps) {
-    const shape = getAxesShape(props)
-    return Shape.createRenderObject(shape, props)
+    const shape = getAxesShape(props);
+    return Shape.createRenderObject(shape, props);
 }

src/mol-canvas3d/passes/draw.ts

@@ -16,7 +16,7 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition';
 
 export const DrawPassParams = {
     cameraHelper: PD.Group(CameraHelperParams)
-}
+};
 export const DefaultDrawPassProps = PD.getDefaultValues(DrawPassParams);
 export type DrawPassProps = PD.Values<typeof DrawPassParams>
 
@@ -30,74 +30,74 @@ export class DrawPass {
     private depthTarget: RenderTarget | null
 
     constructor(private webgl: WebGLContext, private renderer: Renderer, private scene: Scene, private camera: Camera, private debugHelper: BoundingSphereHelper, props: Partial<DrawPassProps> = {}) {
-        const { gl, extensions, resources } = webgl
-        const width = gl.drawingBufferWidth
-        const height = gl.drawingBufferHeight
-        this.colorTarget = webgl.createRenderTarget(width, height)
-        this.packedDepth = !extensions.depthTexture
-        this.depthTarget = this.packedDepth ? webgl.createRenderTarget(width, height) : null
-        this.depthTexture = this.depthTarget ? this.depthTarget.texture : resources.texture('image-depth', 'depth', 'ushort', 'nearest')
+        const { gl, extensions, resources } = webgl;
+        const width = gl.drawingBufferWidth;
+        const height = gl.drawingBufferHeight;
+        this.colorTarget = webgl.createRenderTarget(width, height);
+        this.packedDepth = !extensions.depthTexture;
+        this.depthTarget = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
+        this.depthTexture = this.depthTarget ? this.depthTarget.texture : resources.texture('image-depth', 'depth', 'ushort', 'nearest');
         if (!this.packedDepth) {
-            this.depthTexture.define(width, height)
-            this.depthTexture.attachFramebuffer(this.colorTarget.framebuffer, 'depth')
+            this.depthTexture.define(width, height);
+            this.depthTexture.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
         }
 
-        const p = { ...DefaultDrawPassProps, ...props }
+        const p = { ...DefaultDrawPassProps, ...props };
         this.cameraHelper = new CameraHelper(webgl, p.cameraHelper);
     }
 
     setSize(width: number, height: number) {
-        this.colorTarget.setSize(width, height)
+        this.colorTarget.setSize(width, height);
         if (this.depthTarget) {
-            this.depthTarget.setSize(width, height)
+            this.depthTarget.setSize(width, height);
         } else {
-            this.depthTexture.define(width, height)
+            this.depthTexture.define(width, height);
         }
     }
 
     setProps(props: Partial<DrawPassProps>) {
-        if (props.cameraHelper) this.cameraHelper.setProps(props.cameraHelper)
+        if (props.cameraHelper) this.cameraHelper.setProps(props.cameraHelper);
     }
 
     get props(): DrawPassProps {
         return {
             cameraHelper: { ...this.cameraHelper.props }
-        }
+        };
     }
 
     render(toDrawingBuffer: boolean, transparentBackground: boolean) {
-        const { webgl, renderer, colorTarget, depthTarget } = this
+        const { webgl, renderer, colorTarget, depthTarget } = this;
         if (toDrawingBuffer) {
-            webgl.unbindFramebuffer()
+            webgl.unbindFramebuffer();
         } else {
-            colorTarget.bind()
+            colorTarget.bind();
             if (!this.packedDepth) {
                 // TODO unlcear why it is not enough to call `attachFramebuffer` in `Texture.reset`
-                this.depthTexture.attachFramebuffer(this.colorTarget.framebuffer, 'depth')
+                this.depthTexture.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
             }
         }
 
-        renderer.setViewport(0, 0, colorTarget.getWidth(), colorTarget.getHeight())
-        this.renderInternal('color', transparentBackground)
+        renderer.setViewport(0, 0, colorTarget.getWidth(), colorTarget.getHeight());
+        this.renderInternal('color', transparentBackground);
 
         // do a depth pass if not rendering to drawing buffer and
         // extensions.depthTexture is unsupported (i.e. depthTarget is set)
         if (!toDrawingBuffer && depthTarget) {
-            depthTarget.bind()
-            this.renderInternal('depth', transparentBackground)
+            depthTarget.bind();
+            this.renderInternal('depth', transparentBackground);
         }
     }
 
     private renderInternal(variant: 'color' | 'depth', transparentBackground: boolean) {
-        const { renderer, scene, camera, debugHelper, cameraHelper } = this
-        renderer.render(scene, camera, variant, true, transparentBackground)
+        const { renderer, scene, camera, debugHelper, cameraHelper } = this;
+        renderer.render(scene, camera, variant, true, transparentBackground);
         if (debugHelper.isEnabled) {
-            debugHelper.syncVisibility()
-            renderer.render(debugHelper.scene, camera, variant, false, transparentBackground)
+            debugHelper.syncVisibility();
+            renderer.render(debugHelper.scene, camera, variant, false, transparentBackground);
         }
         if (cameraHelper.isEnabled) {
-            cameraHelper.update(camera)
-            renderer.render(cameraHelper.scene, cameraHelper.camera, variant, false, transparentBackground)
+            cameraHelper.update(camera);
+            renderer.render(cameraHelper.scene, cameraHelper.camera, variant, false, transparentBackground);
         }
     }
 }

src/mol-canvas3d/passes/image.ts

@@ -10,9 +10,9 @@ import Renderer from '../../mol-gl/renderer';
 import Scene from '../../mol-gl/scene';
 import { BoundingSphereHelper } from '../helper/bounding-sphere-helper';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
-import { DrawPass, DrawPassParams } from './draw'
-import { PostprocessingPass, PostprocessingParams } from './postprocessing'
-import { MultiSamplePass, MultiSampleParams } from './multi-sample'
+import { DrawPass, DrawPassParams } from './draw';
+import { PostprocessingPass, PostprocessingParams } from './postprocessing';
+import { MultiSamplePass, MultiSampleParams } from './multi-sample';
 import { Camera } from '../camera';
 import { Viewport } from '../camera/util';
 
@@ -21,7 +21,7 @@ export const ImageParams = {
     multiSample: PD.Group(MultiSampleParams),
     postprocessing: PD.Group(PostprocessingParams),
     drawPass: PD.Group(DrawPassParams),
-}
+};
 export type ImageProps = PD.Values<typeof ImageParams>
 
 export class ImagePass {
@@ -31,43 +31,43 @@ export class ImagePass {
     private _transparentBackground = false
 
     private _colorTarget: RenderTarget
-    get colorTarget() { return this._colorTarget }
+    get colorTarget() { return this._colorTarget; }
 
     readonly drawPass: DrawPass
     private readonly postprocessing: PostprocessingPass
     private readonly multiSample: MultiSamplePass
 
-    get width() { return this._width }
-    get height() { return this._height }
+    get width() { return this._width; }
+    get height() { return this._height; }
 
     constructor(webgl: WebGLContext, private renderer: Renderer, scene: Scene, private camera: Camera, debugHelper: BoundingSphereHelper, props: Partial<ImageProps>) {
-        const p = { ...PD.getDefaultValues(ImageParams), ...props }
+        const p = { ...PD.getDefaultValues(ImageParams), ...props };
 
-        this._transparentBackground = p.transparentBackground
+        this._transparentBackground = p.transparentBackground;
 
-        this.drawPass = new DrawPass(webgl, renderer, scene, this._camera, debugHelper, p.drawPass)
-        this.postprocessing = new PostprocessingPass(webgl, this._camera, this.drawPass, p.postprocessing)
-        this.multiSample = new MultiSamplePass(webgl, this._camera, this.drawPass, this.postprocessing, p.multiSample)
+        this.drawPass = new DrawPass(webgl, renderer, scene, this._camera, debugHelper, p.drawPass);
+        this.postprocessing = new PostprocessingPass(webgl, this._camera, this.drawPass, p.postprocessing);
+        this.multiSample = new MultiSamplePass(webgl, this._camera, this.drawPass, this.postprocessing, p.multiSample);
 
-        this.setSize(this._width, this._height)
+        this.setSize(this._width, this._height);
     }
 
     setSize(width: number, height: number) {
-        if (width === this._width && height === this._height) return
+        if (width === this._width && height === this._height) return;
 
-        this._width = width
-        this._height = height
+        this._width = width;
+        this._height = height;
 
-        this.drawPass.setSize(width, height)
-        this.postprocessing.setSize(width, height)
-        this.multiSample.setSize(width, height)
+        this.drawPass.setSize(width, height);
+        this.postprocessing.setSize(width, height);
+        this.multiSample.setSize(width, height);
     }
 
     setProps(props: Partial<ImageProps> = {}) {
-        if (props.transparentBackground !== undefined) this._transparentBackground = props.transparentBackground
-        if (props.postprocessing) this.postprocessing.setProps(props.postprocessing)
-        if (props.multiSample) this.multiSample.setProps(props.multiSample)
-        if (props.drawPass) this.drawPass.setProps(props.drawPass)
+        if (props.transparentBackground !== undefined) this._transparentBackground = props.transparentBackground;
+        if (props.postprocessing) this.postprocessing.setProps(props.postprocessing);
+        if (props.multiSample) this.multiSample.setProps(props.multiSample);
+        if (props.drawPass) this.drawPass.setProps(props.drawPass);
     }
 
     get props(): ImageProps {
@@ -76,34 +76,34 @@ export class ImagePass {
             postprocessing: this.postprocessing.props,
             multiSample: this.multiSample.props,
             drawPass: this.drawPass.props
-        }
+        };
     }
 
     render() {
-        Camera.copySnapshot(this._camera.state, this.camera.state)
-        Viewport.set(this._camera.viewport, 0, 0, this._width, this._height)
-        this._camera.update()
+        Camera.copySnapshot(this._camera.state, this.camera.state);
+        Viewport.set(this._camera.viewport, 0, 0, this._width, this._height);
+        this._camera.update();
 
         this.renderer.setViewport(0, 0, this._width, this._height);
 
         if (this.multiSample.enabled) {
-            this.multiSample.render(false, this._transparentBackground)
-            this._colorTarget = this.multiSample.colorTarget
+            this.multiSample.render(false, this._transparentBackground);
+            this._colorTarget = this.multiSample.colorTarget;
         } else {
-            this.drawPass.render(false, this._transparentBackground)
+            this.drawPass.render(false, this._transparentBackground);
             if (this.postprocessing.enabled) {
-                this.postprocessing.render(false)
-                this._colorTarget = this.postprocessing.target
+                this.postprocessing.render(false);
+                this._colorTarget = this.postprocessing.target;
             } else {
-                this._colorTarget = this.drawPass.colorTarget
+                this._colorTarget = this.drawPass.colorTarget;
             }
         }
     }
 
     getImageData(width: number, height: number) {
-        this.setSize(width, height)
-        this.render()
-        const pd = this.colorTarget.getPixelData()
-        return new ImageData(new Uint8ClampedArray(pd.array), pd.width, pd.height)
+        this.setSize(width, height);
+        this.render();
+        const pd = this.colorTarget.getPixelData();
+        return new ImageData(new Uint8ClampedArray(pd.array), pd.width, pd.height);
     }
 }

src/mol-canvas3d/passes/multi-sample.ts

@@ -19,15 +19,15 @@ import { Camera } from '../../mol-canvas3d/camera';
 import { PostprocessingPass } from './postprocessing';
 import { DrawPass } from './draw';
 
-import quad_vert from '../../mol-gl/shader/quad.vert'
-import compose_frag from '../../mol-gl/shader/compose.frag'
+import quad_vert from '../../mol-gl/shader/quad.vert';
+import compose_frag from '../../mol-gl/shader/compose.frag';
 
 const ComposeSchema = {
     ...QuadSchema,
     tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
     uTexSize: UniformSpec('v2'),
     uWeight: UniformSpec('f'),
-}
+};
 
 type ComposeRenderable = ComputeRenderable<Values<typeof ComposeSchema>>
 
@@ -37,19 +37,19 @@ function getComposeRenderable(ctx: WebGLContext, colorTexture: Texture): Compose
         tColor: ValueCell.create(colorTexture),
         uTexSize: ValueCell.create(Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())),
         uWeight: ValueCell.create(1.0),
-    }
+    };
 
-    const schema = { ...ComposeSchema }
-    const shaderCode = ShaderCode('compose', quad_vert, compose_frag)
-    const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
+    const schema = { ...ComposeSchema };
+    const shaderCode = ShaderCode('compose', quad_vert, compose_frag);
+    const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
 
-    return createComputeRenderable(renderItem, values)
+    return createComputeRenderable(renderItem, values);
 }
 
 export const MultiSampleParams = {
     mode: PD.Select('off', [['off', 'Off'], ['on', 'On'], ['temporal', 'Temporal']]),
     sampleLevel: PD.Numeric(2, { min: 0, max: 5, step: 1 }),
-}
+};
 export type MultiSampleProps = PD.Values<typeof MultiSampleParams>
 
 export class MultiSamplePass {
@@ -65,229 +65,229 @@ export class MultiSamplePass {
     private lastRenderTime = 0
 
     constructor(private webgl: WebGLContext, private camera: Camera, private drawPass: DrawPass, private postprocessing: PostprocessingPass, props: Partial<MultiSampleProps>) {
-        const { gl } = webgl
-        this.colorTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight)
-        this.composeTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight)
-        this.holdTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight)
-        this.compose = getComposeRenderable(webgl, drawPass.colorTarget.texture)
-        this.props = { ...PD.getDefaultValues(MultiSampleParams), ...props }
+        const { gl } = webgl;
+        this.colorTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight);
+        this.composeTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight);
+        this.holdTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight);
+        this.compose = getComposeRenderable(webgl, drawPass.colorTarget.texture);
+        this.props = { ...PD.getDefaultValues(MultiSampleParams), ...props };
     }
 
     get enabled() {
         if (this.props.mode === 'temporal') {
             if (this.currentTime - this.lastRenderTime > 200) {
-                return this.sampleIndex !== -1
+                return this.sampleIndex !== -1;
             } else {
-                this.sampleIndex = 0
-                return false
+                this.sampleIndex = 0;
+                return false;
             }
         } else if (this.props.mode === 'on') {
-            return true
+            return true;
         } else {
-            return false
+            return false;
         }
     }
 
     update(changed: boolean, currentTime: number) {
-        if (changed) this.lastRenderTime = currentTime
-        this.currentTime = currentTime
+        if (changed) this.lastRenderTime = currentTime;
+        this.currentTime = currentTime;
     }
 
     setSize(width: number, height: number) {
-        this.colorTarget.setSize(width, height)
-        this.composeTarget.setSize(width, height)
-        this.holdTarget.setSize(width, height)
-        ValueCell.update(this.compose.values.uTexSize, Vec2.set(this.compose.values.uTexSize.ref.value, width, height))
+        this.colorTarget.setSize(width, height);
+        this.composeTarget.setSize(width, height);
+        this.holdTarget.setSize(width, height);
+        ValueCell.update(this.compose.values.uTexSize, Vec2.set(this.compose.values.uTexSize.ref.value, width, height));
     }
 
     setProps(props: Partial<MultiSampleProps>) {
-        if (props.mode !== undefined) this.props.mode = props.mode
-        if (props.sampleLevel !== undefined) this.props.sampleLevel = props.sampleLevel
+        if (props.mode !== undefined) this.props.mode = props.mode;
+        if (props.sampleLevel !== undefined) this.props.sampleLevel = props.sampleLevel;
     }
 
     render(toDrawingBuffer: boolean, transparentBackground: boolean) {
         if (this.props.mode === 'temporal') {
-            this.renderTemporalMultiSample(toDrawingBuffer, transparentBackground)
+            this.renderTemporalMultiSample(toDrawingBuffer, transparentBackground);
         } else {
-            this.renderMultiSample(toDrawingBuffer, transparentBackground)
+            this.renderMultiSample(toDrawingBuffer, transparentBackground);
         }
     }
 
     private renderMultiSample(toDrawingBuffer: boolean, transparentBackground: boolean) {
-        const { camera, compose, composeTarget, drawPass, postprocessing, webgl } = this
-        const { gl, state } = webgl
+        const { camera, compose, composeTarget, drawPass, postprocessing, webgl } = this;
+        const { gl, state } = webgl;
 
         // based on the Multisample Anti-Aliasing Render Pass
         // contributed to three.js by bhouston / http://clara.io/
         //
         // This manual approach to MSAA re-renders the scene once for
         // each sample with camera jitter and accumulates the results.
-        const offsetList = JitterVectors[ Math.max(0, Math.min(this.props.sampleLevel, 5)) ]
+        const offsetList = JitterVectors[ Math.max(0, Math.min(this.props.sampleLevel, 5)) ];
 
-        const baseSampleWeight = 1.0 / offsetList.length
-        const roundingRange = 1 / 32
+        const baseSampleWeight = 1.0 / offsetList.length;
+        const roundingRange = 1 / 32;
 
-        camera.viewOffset.enabled = true
-        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture)
-        compose.update()
+        camera.viewOffset.enabled = true;
+        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
+        compose.update();
 
-        const width = drawPass.colorTarget.getWidth()
-        const height = drawPass.colorTarget.getHeight()
+        const width = drawPass.colorTarget.getWidth();
+        const height = drawPass.colorTarget.getHeight();
 
         // render the scene multiple times, each slightly jitter offset
         // from the last and accumulate the results.
         for (let i = 0; i < offsetList.length; ++i) {
-            const offset = offsetList[i]
-            Camera.setViewOffset(camera.viewOffset, width, height, offset[0], offset[1], width, height)
-            camera.update()
+            const offset = offsetList[i];
+            Camera.setViewOffset(camera.viewOffset, width, height, offset[0], offset[1], width, height);
+            camera.update();
 
             // the theory is that equal weights for each sample lead to an accumulation of rounding
             // errors. The following equation varies the sampleWeight per sample so that it is uniformly
             // distributed across a range of values whose rounding errors cancel each other out.
-            const uniformCenteredDistribution = -0.5 + (i + 0.5) / offsetList.length
-            const sampleWeight = baseSampleWeight + roundingRange * uniformCenteredDistribution
-            ValueCell.update(compose.values.uWeight, sampleWeight)
+            const uniformCenteredDistribution = -0.5 + (i + 0.5) / offsetList.length;
+            const sampleWeight = baseSampleWeight + roundingRange * uniformCenteredDistribution;
+            ValueCell.update(compose.values.uWeight, sampleWeight);
 
             // render scene and optionally postprocess
-            drawPass.render(false, transparentBackground)
-            if (postprocessing.enabled) postprocessing.render(false)
+            drawPass.render(false, transparentBackground);
+            if (postprocessing.enabled) postprocessing.render(false);
 
             // compose rendered scene with compose target
-            composeTarget.bind()
-            gl.viewport(0, 0, width, height)
-            state.enable(gl.BLEND)
-            state.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD)
-            state.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE)
-            state.disable(gl.DEPTH_TEST)
-            state.disable(gl.SCISSOR_TEST)
-            state.depthMask(false)
+            composeTarget.bind();
+            gl.viewport(0, 0, width, height);
+            state.enable(gl.BLEND);
+            state.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+            state.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+            state.disable(gl.DEPTH_TEST);
+            state.disable(gl.SCISSOR_TEST);
+            state.depthMask(false);
             if (i === 0) {
-                state.clearColor(0, 0, 0, 0)
-                gl.clear(gl.COLOR_BUFFER_BIT)
+                state.clearColor(0, 0, 0, 0);
+                gl.clear(gl.COLOR_BUFFER_BIT);
             }
-            compose.render()
+            compose.render();
         }
 
-        ValueCell.update(compose.values.uWeight, 1.0)
-        ValueCell.update(compose.values.tColor, composeTarget.texture)
-        compose.update()
+        ValueCell.update(compose.values.uWeight, 1.0);
+        ValueCell.update(compose.values.tColor, composeTarget.texture);
+        compose.update();
 
         if (toDrawingBuffer) {
-            webgl.unbindFramebuffer()
+            webgl.unbindFramebuffer();
         } else {
-            this.colorTarget.bind()
+            this.colorTarget.bind();
         }
-        gl.viewport(0, 0, width, height)
-        state.disable(gl.BLEND)
-        compose.render()
+        gl.viewport(0, 0, width, height);
+        state.disable(gl.BLEND);
+        compose.render();
 
-        camera.viewOffset.enabled = false
-        camera.update()
+        camera.viewOffset.enabled = false;
+        camera.update();
     }
 
     private renderTemporalMultiSample(toDrawingBuffer: boolean, transparentBackground: boolean) {
-        const { camera, compose, composeTarget, holdTarget, postprocessing, drawPass, webgl } = this
-        const { gl, state } = webgl
+        const { camera, compose, composeTarget, holdTarget, postprocessing, drawPass, webgl } = this;
+        const { gl, state } = webgl;
 
         // based on the Multisample Anti-Aliasing Render Pass
         // contributed to three.js by bhouston / http://clara.io/
         //
         // This manual approach to MSAA re-renders the scene once for
         // each sample with camera jitter and accumulates the results.
-        const offsetList = JitterVectors[ Math.max(0, Math.min(this.props.sampleLevel, 5)) ]
+        const offsetList = JitterVectors[ Math.max(0, Math.min(this.props.sampleLevel, 5)) ];
 
-        if (this.sampleIndex === -1) return
+        if (this.sampleIndex === -1) return;
         if (this.sampleIndex >= offsetList.length) {
-            this.sampleIndex = -1
-            return
+            this.sampleIndex = -1;
+            return;
         }
 
-        const i = this.sampleIndex
+        const i = this.sampleIndex;
 
         if (i === 0) {
-            drawPass.render(false, transparentBackground)
-            if (postprocessing.enabled) postprocessing.render(false)
-            ValueCell.update(compose.values.uWeight, 1.0)
-            ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture)
-            compose.update()
-
-            holdTarget.bind()
-            state.disable(gl.BLEND)
-            compose.render()
+            drawPass.render(false, transparentBackground);
+            if (postprocessing.enabled) postprocessing.render(false);
+            ValueCell.update(compose.values.uWeight, 1.0);
+            ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
+            compose.update();
+
+            holdTarget.bind();
+            state.disable(gl.BLEND);
+            compose.render();
         }
 
-        const sampleWeight = 1.0 / offsetList.length
+        const sampleWeight = 1.0 / offsetList.length;
 
-        camera.viewOffset.enabled = true
-        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture)
-        ValueCell.update(compose.values.uWeight, sampleWeight)
-        compose.update()
+        camera.viewOffset.enabled = true;
+        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
+        ValueCell.update(compose.values.uWeight, sampleWeight);
+        compose.update();
 
-        const width = drawPass.colorTarget.getWidth()
-        const height = drawPass.colorTarget.getHeight()
+        const width = drawPass.colorTarget.getWidth();
+        const height = drawPass.colorTarget.getHeight();
 
         // render the scene multiple times, each slightly jitter offset
         // from the last and accumulate the results.
-        const numSamplesPerFrame = Math.pow(2, this.props.sampleLevel)
+        const numSamplesPerFrame = Math.pow(2, this.props.sampleLevel);
         for (let i = 0; i < numSamplesPerFrame; ++i) {
-            const offset = offsetList[this.sampleIndex]
-            Camera.setViewOffset(camera.viewOffset, width, height, offset[0], offset[1], width, height)
-            camera.update()
+            const offset = offsetList[this.sampleIndex];
+            Camera.setViewOffset(camera.viewOffset, width, height, offset[0], offset[1], width, height);
+            camera.update();
 
             // render scene and optionally postprocess
-            drawPass.render(false, transparentBackground)
-            if (postprocessing.enabled) postprocessing.render(false)
+            drawPass.render(false, transparentBackground);
+            if (postprocessing.enabled) postprocessing.render(false);
 
             // compose rendered scene with compose target
-            composeTarget.bind()
-            state.enable(gl.BLEND)
-            state.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD)
-            state.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE)
-            state.disable(gl.DEPTH_TEST)
-            state.disable(gl.SCISSOR_TEST)
-            state.depthMask(false)
+            composeTarget.bind();
+            state.enable(gl.BLEND);
+            state.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+            state.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+            state.disable(gl.DEPTH_TEST);
+            state.disable(gl.SCISSOR_TEST);
+            state.depthMask(false);
             if (this.sampleIndex === 0) {
-                state.clearColor(0, 0, 0, 0)
-                gl.clear(gl.COLOR_BUFFER_BIT)
+                state.clearColor(0, 0, 0, 0);
+                gl.clear(gl.COLOR_BUFFER_BIT);
             }
-            compose.render()
+            compose.render();
 
-            this.sampleIndex += 1
-            if (this.sampleIndex >= offsetList.length ) break
+            this.sampleIndex += 1;
+            if (this.sampleIndex >= offsetList.length ) break;
         }
 
-        const accumulationWeight = this.sampleIndex * sampleWeight
+        const accumulationWeight = this.sampleIndex * sampleWeight;
         if (accumulationWeight > 0) {
-            ValueCell.update(compose.values.uWeight, 1.0)
-            ValueCell.update(compose.values.tColor, composeTarget.texture)
-            compose.update()
+            ValueCell.update(compose.values.uWeight, 1.0);
+            ValueCell.update(compose.values.tColor, composeTarget.texture);
+            compose.update();
             if (toDrawingBuffer) {
-                webgl.unbindFramebuffer()
+                webgl.unbindFramebuffer();
             } else {
-                this.colorTarget.bind()
+                this.colorTarget.bind();
             }
-            gl.viewport(0, 0, width, height)
-            state.disable(gl.BLEND)
-            compose.render()
+            gl.viewport(0, 0, width, height);
+            state.disable(gl.BLEND);
+            compose.render();
         }
         if (accumulationWeight < 1.0) {
-            ValueCell.update(compose.values.uWeight, 1.0 - accumulationWeight)
-            ValueCell.update(compose.values.tColor, holdTarget.texture)
-            compose.update()
+            ValueCell.update(compose.values.uWeight, 1.0 - accumulationWeight);
+            ValueCell.update(compose.values.tColor, holdTarget.texture);
+            compose.update();
             if (toDrawingBuffer) {
-                webgl.unbindFramebuffer()
+                webgl.unbindFramebuffer();
             } else {
-                this.colorTarget.bind()
+                this.colorTarget.bind();
             }
-            gl.viewport(0, 0, width, height)
-            if (accumulationWeight === 0) state.disable(gl.BLEND)
-            else state.enable(gl.BLEND)
-            compose.render()
+            gl.viewport(0, 0, width, height);
+            if (accumulationWeight === 0) state.disable(gl.BLEND);
+            else state.enable(gl.BLEND);
+            compose.render();
         }
 
-        camera.viewOffset.enabled = false
-        camera.update()
-        if (this.sampleIndex >= offsetList.length) this.sampleIndex = -1
+        camera.viewOffset.enabled = false;
+        camera.update();
+        if (this.sampleIndex >= offsetList.length) this.sampleIndex = -1;
     }
 }
 
@@ -321,12 +321,12 @@ const JitterVectors = [
         [ 2, 1 ], [ 6, 2 ], [ 0, 4 ], [ 4, 4 ],
         [ 2, 5 ], [ 7, 5 ], [ 5, 6 ], [ 3, 7 ]
     ]
-]
+];
 
 JitterVectors.forEach(offsetList => {
     offsetList.forEach(offset => {
         // 0.0625 = 1 / 16
-        offset[0] *= 0.0625
-        offset[1] *= 0.0625
-    })
-})
+        offset[0] *= 0.0625;
+        offset[1] *= 0.0625;
+    });
+});

src/mol-canvas3d/passes/pick.ts

@@ -28,44 +28,44 @@ export class PickPass {
     private pickHeight: number
 
     constructor(private webgl: WebGLContext, private renderer: Renderer, private scene: Scene, private camera: Camera, private pickBaseScale: number) {
-        const { gl } = webgl
-        const width = gl.drawingBufferWidth
-        const height = gl.drawingBufferHeight
+        const { gl } = webgl;
+        const width = gl.drawingBufferWidth;
+        const height = gl.drawingBufferHeight;
 
-        this.pickScale = pickBaseScale / webgl.pixelRatio
-        this.pickWidth = Math.round(width * this.pickScale)
-        this.pickHeight = Math.round(height * this.pickScale)
+        this.pickScale = pickBaseScale / webgl.pixelRatio;
+        this.pickWidth = Math.round(width * this.pickScale);
+        this.pickHeight = Math.round(height * this.pickScale);
 
-        this.objectPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight)
-        this.instancePickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight)
-        this.groupPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight)
+        this.objectPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+        this.instancePickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+        this.groupPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
 
-        this.setupBuffers()
+        this.setupBuffers();
     }
 
     private setupBuffers() {
-        const bufferSize = this.pickWidth * this.pickHeight * 4
+        const bufferSize = this.pickWidth * this.pickHeight * 4;
         if (!this.objectBuffer || this.objectBuffer.length !== bufferSize) {
-            this.objectBuffer = new Uint8Array(bufferSize)
-            this.instanceBuffer = new Uint8Array(bufferSize)
-            this.groupBuffer = new Uint8Array(bufferSize)
+            this.objectBuffer = new Uint8Array(bufferSize);
+            this.instanceBuffer = new Uint8Array(bufferSize);
+            this.groupBuffer = new Uint8Array(bufferSize);
         }
     }
 
     setSize(width: number, height: number) {
-        this.pickScale = this.pickBaseScale / this.webgl.pixelRatio
-        this.pickWidth = Math.round(width * this.pickScale)
-        this.pickHeight = Math.round(height * this.pickScale)
+        this.pickScale = this.pickBaseScale / this.webgl.pixelRatio;
+        this.pickWidth = Math.round(width * this.pickScale);
+        this.pickHeight = Math.round(height * this.pickScale);
 
-        this.objectPickTarget.setSize(this.pickWidth, this.pickHeight)
-        this.instancePickTarget.setSize(this.pickWidth, this.pickHeight)
-        this.groupPickTarget.setSize(this.pickWidth, this.pickHeight)
+        this.objectPickTarget.setSize(this.pickWidth, this.pickHeight);
+        this.instancePickTarget.setSize(this.pickWidth, this.pickHeight);
+        this.groupPickTarget.setSize(this.pickWidth, this.pickHeight);
 
-        this.setupBuffers()
+        this.setupBuffers();
     }
 
     render() {
-        const { renderer, scene, camera } = this
+        const { renderer, scene, camera } = this;
         renderer.setViewport(0, 0, this.pickWidth, this.pickHeight);
         this.objectPickTarget.bind();
         renderer.render(scene, camera, 'pickObject', true, false);
@@ -74,53 +74,53 @@ export class PickPass {
         this.groupPickTarget.bind();
         renderer.render(scene, camera, 'pickGroup', true, false);
 
-        this.pickDirty = false
+        this.pickDirty = false;
     }
 
     private syncBuffers() {
-        const { webgl } = this
+        const { webgl } = this;
 
-        this.objectPickTarget.bind()
-        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.objectBuffer)
+        this.objectPickTarget.bind();
+        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.objectBuffer);
 
-        this.instancePickTarget.bind()
-        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.instanceBuffer)
+        this.instancePickTarget.bind();
+        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.instanceBuffer);
 
-        this.groupPickTarget.bind()
-        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.groupBuffer)
+        this.groupPickTarget.bind();
+        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.groupBuffer);
     }
 
     private getId(x: number, y: number, buffer: Uint8Array) {
-        const idx = (y * this.pickWidth + x) * 4
-        return decodeFloatRGB(buffer[idx], buffer[idx + 1], buffer[idx + 2])
+        const idx = (y * this.pickWidth + x) * 4;
+        return decodeFloatRGB(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
     }
 
     identify(x: number, y: number): PickingId | undefined {
-        const { webgl, pickScale } = this
-        if (webgl.isContextLost) return
+        const { webgl, pickScale } = this;
+        if (webgl.isContextLost) return;
 
-        const { gl } = webgl
+        const { gl } = webgl;
         if (this.pickDirty) {
-            this.render()
-            this.syncBuffers()
+            this.render();
+            this.syncBuffers();
         }
 
-        x *= webgl.pixelRatio
-        y *= webgl.pixelRatio
-        y = gl.drawingBufferHeight - y // flip y
+        x *= webgl.pixelRatio;
+        y *= webgl.pixelRatio;
+        y = gl.drawingBufferHeight - y; // flip y
 
-        const xp = Math.round(x * pickScale)
-        const yp = Math.round(y * pickScale)
+        const xp = Math.round(x * pickScale);
+        const yp = Math.round(y * pickScale);
 
-        const objectId = this.getId(xp, yp, this.objectBuffer)
-        if (objectId === -1) return
+        const objectId = this.getId(xp, yp, this.objectBuffer);
+        if (objectId === -1) return;
 
-        const instanceId = this.getId(xp, yp, this.instanceBuffer)
-        if (instanceId === -1) return
+        const instanceId = this.getId(xp, yp, this.instanceBuffer);
+        if (instanceId === -1) return;
 
-        const groupId = this.getId(xp, yp, this.groupBuffer)
-        if (groupId === -1) return
+        const groupId = this.getId(xp, yp, this.groupBuffer);
+        if (groupId === -1) return;
 
-        return { objectId, instanceId, groupId }
+        return { objectId, instanceId, groupId };
     }
 }

src/mol-canvas3d/passes/postprocessing.ts

@@ -19,8 +19,8 @@ import { DrawPass } from './draw';
 import { Camera } from '../../mol-canvas3d/camera';
 import { produce } from 'immer';
 
-import quad_vert from '../../mol-gl/shader/quad.vert'
-import postprocessing_frag from '../../mol-gl/shader/postprocessing.frag'
+import quad_vert from '../../mol-gl/shader/quad.vert';
+import postprocessing_frag from '../../mol-gl/shader/postprocessing.frag';
 
 const PostprocessingSchema = {
     ...QuadSchema,
@@ -45,7 +45,7 @@ const PostprocessingSchema = {
     uOutlineThreshold: UniformSpec('f'),
 
     dPackedDepth: DefineSpec('boolean'),
-}
+};
 
 export const PostprocessingParams = {
     occlusion: PD.MappedStatic('off', {
@@ -63,13 +63,13 @@ export const PostprocessingParams = {
         }),
         off: PD.Group({})
     }, { cycle: true, description: 'Draw outline around 3D objects' })
-}
+};
 export type PostprocessingProps = PD.Values<typeof PostprocessingParams>
 
 type PostprocessingRenderable = ComputeRenderable<Values<typeof PostprocessingSchema>>
 
 function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture, packedDepth: boolean, props: Partial<PostprocessingProps>): PostprocessingRenderable {
-    const p = { ...PD.getDefaultValues(PostprocessingParams), ...props }
+    const p = { ...PD.getDefaultValues(PostprocessingParams), ...props };
     const values: Values<typeof PostprocessingSchema> = {
         ...QuadValues,
         tColor: ValueCell.create(colorTexture),
@@ -93,13 +93,13 @@ function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, d
         uOutlineThreshold: ValueCell.create(p.outline.name === 'on' ? p.outline.params.threshold : 0.8),
 
         dPackedDepth: ValueCell.create(packedDepth),
-    }
+    };
 
-    const schema = { ...PostprocessingSchema }
-    const shaderCode = ShaderCode('postprocessing', quad_vert, postprocessing_frag)
-    const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
+    const schema = { ...PostprocessingSchema };
+    const shaderCode = ShaderCode('postprocessing', quad_vert, postprocessing_frag);
+    const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
 
-    return createComputeRenderable(renderItem, values)
+    return createComputeRenderable(renderItem, values);
 }
 
 export class PostprocessingPass {
@@ -108,67 +108,67 @@ export class PostprocessingPass {
     renderable: PostprocessingRenderable
 
     constructor(private webgl: WebGLContext, private camera: Camera, drawPass: DrawPass, props: Partial<PostprocessingProps>) {
-        const { gl } = webgl
-        this.target = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight)
-        this.props = { ...PD.getDefaultValues(PostprocessingParams), ...props }
-        const { colorTarget, depthTexture, packedDepth } = drawPass
-        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTexture, packedDepth, this.props)
+        const { gl } = webgl;
+        this.target = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight);
+        this.props = { ...PD.getDefaultValues(PostprocessingParams), ...props };
+        const { colorTarget, depthTexture, packedDepth } = drawPass;
+        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTexture, packedDepth, this.props);
     }
 
     get enabled() {
-        return this.props.occlusion.name === 'on' || this.props.outline.name === 'on'
+        return this.props.occlusion.name === 'on' || this.props.outline.name === 'on';
     }
 
     setSize(width: number, height: number) {
-        this.target.setSize(width, height)
-        ValueCell.update(this.renderable.values.uTexSize, Vec2.set(this.renderable.values.uTexSize.ref.value, width, height))
+        this.target.setSize(width, height);
+        ValueCell.update(this.renderable.values.uTexSize, Vec2.set(this.renderable.values.uTexSize.ref.value, width, height));
     }
 
     setProps(props: Partial<PostprocessingProps>) {
         this.props = produce(this.props, p => {
             if (props.occlusion !== undefined) {
-                p.occlusion.name = props.occlusion.name
-                ValueCell.updateIfChanged(this.renderable.values.dOcclusionEnable, props.occlusion.name === 'on')
+                p.occlusion.name = props.occlusion.name;
+                ValueCell.updateIfChanged(this.renderable.values.dOcclusionEnable, props.occlusion.name === 'on');
                 if (props.occlusion.name === 'on') {
-                    p.occlusion.params = { ...props.occlusion.params }
-                    ValueCell.updateIfChanged(this.renderable.values.dOcclusionKernelSize, props.occlusion.params.kernelSize)
-                    ValueCell.updateIfChanged(this.renderable.values.uOcclusionBias, props.occlusion.params.bias)
-                    ValueCell.updateIfChanged(this.renderable.values.uOcclusionRadius, props.occlusion.params.radius)
+                    p.occlusion.params = { ...props.occlusion.params };
+                    ValueCell.updateIfChanged(this.renderable.values.dOcclusionKernelSize, props.occlusion.params.kernelSize);
+                    ValueCell.updateIfChanged(this.renderable.values.uOcclusionBias, props.occlusion.params.bias);
+                    ValueCell.updateIfChanged(this.renderable.values.uOcclusionRadius, props.occlusion.params.radius);
                 }
             }
 
             if (props.outline !== undefined) {
-                p.outline.name = props.outline.name
-                ValueCell.updateIfChanged(this.renderable.values.dOutlineEnable, props.outline.name === 'on')
+                p.outline.name = props.outline.name;
+                ValueCell.updateIfChanged(this.renderable.values.dOutlineEnable, props.outline.name === 'on');
                 if (props.outline.name === 'on') {
-                    p.outline.params = { ...props.outline.params }
-                    ValueCell.updateIfChanged(this.renderable.values.uOutlineScale, props.outline.params.scale)
-                    ValueCell.updateIfChanged(this.renderable.values.uOutlineThreshold, props.outline.params.threshold)
+                    p.outline.params = { ...props.outline.params };
+                    ValueCell.updateIfChanged(this.renderable.values.uOutlineScale, props.outline.params.scale);
+                    ValueCell.updateIfChanged(this.renderable.values.uOutlineThreshold, props.outline.params.threshold);
                 }
             }
-        })
+        });
 
-        this.renderable.update()
+        this.renderable.update();
     }
 
     render(toDrawingBuffer: boolean) {
-        ValueCell.update(this.renderable.values.uFar, this.camera.far)
-        ValueCell.update(this.renderable.values.uNear, this.camera.near)
-        ValueCell.update(this.renderable.values.uFogFar, this.camera.fogFar)
-        ValueCell.update(this.renderable.values.uFogNear, this.camera.fogNear)
-        ValueCell.update(this.renderable.values.dOrthographic, this.camera.state.mode === 'orthographic' ? 1 : 0)
+        ValueCell.update(this.renderable.values.uFar, this.camera.far);
+        ValueCell.update(this.renderable.values.uNear, this.camera.near);
+        ValueCell.update(this.renderable.values.uFogFar, this.camera.fogFar);
+        ValueCell.update(this.renderable.values.uFogNear, this.camera.fogNear);
+        ValueCell.update(this.renderable.values.dOrthographic, this.camera.state.mode === 'orthographic' ? 1 : 0);
 
-        const { gl, state } = this.webgl
+        const { gl, state } = this.webgl;
         if (toDrawingBuffer) {
-            this.webgl.unbindFramebuffer()
-            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
+            this.webgl.unbindFramebuffer();
+            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
         } else {
-            this.target.bind()
+            this.target.bind();
         }
-        state.disable(gl.SCISSOR_TEST)
-        state.disable(gl.BLEND)
-        state.disable(gl.DEPTH_TEST)
-        state.depthMask(false)
-        this.renderable.render()
+        state.disable(gl.SCISSOR_TEST);
+        state.disable(gl.BLEND);
+        state.disable(gl.DEPTH_TEST);
+        state.depthMask(false);
+        this.renderable.render();
     }
 }

src/mol-canvas3d/util.ts

@@ -6,40 +6,40 @@
 
 /** Set canvas size taking `devicePixelRatio` into account */
 export function setCanvasSize(canvas: HTMLCanvasElement, width: number, height: number) {
-    canvas.width = Math.round(window.devicePixelRatio * width)
-    canvas.height = Math.round(window.devicePixelRatio * height)
-    Object.assign(canvas.style, { width: `${width}px`, height: `${height}px` })
+    canvas.width = Math.round(window.devicePixelRatio * width);
+    canvas.height = Math.round(window.devicePixelRatio * height);
+    Object.assign(canvas.style, { width: `${width}px`, height: `${height}px` });
 }
 
 /** Resize canvas to container element taking `devicePixelRatio` into account */
 export function resizeCanvas (canvas: HTMLCanvasElement, container: Element) {
-    let width = window.innerWidth
-    let height = window.innerHeight
+    let width = window.innerWidth;
+    let height = window.innerHeight;
     if (container !== document.body) {
-        let bounds = container.getBoundingClientRect()
-        width = bounds.right - bounds.left
-        height = bounds.bottom - bounds.top
+        let bounds = container.getBoundingClientRect();
+        width = bounds.right - bounds.left;
+        height = bounds.bottom - bounds.top;
     }
-    setCanvasSize(canvas, width, height)
+    setCanvasSize(canvas, width, height);
 }
 
 function _canvasToBlob(canvas: HTMLCanvasElement, callback: BlobCallback, type?: string, quality?: any) {
-    const bin = atob(canvas.toDataURL(type, quality).split(',')[1])
-    const len = bin.length
-    const len32 = len >> 2
-    const a8 = new Uint8Array(len)
-    const a32 = new Uint32Array(a8.buffer, 0, len32)
+    const bin = atob(canvas.toDataURL(type, quality).split(',')[1]);
+    const len = bin.length;
+    const len32 = len >> 2;
+    const a8 = new Uint8Array(len);
+    const a32 = new Uint32Array(a8.buffer, 0, len32);
 
-    let j = 0
+    let j = 0;
     for (let i = 0; i < len32; ++i) {
         a32[i] = bin.charCodeAt(j++) |
             bin.charCodeAt(j++) << 8 |
             bin.charCodeAt(j++) << 16 |
-            bin.charCodeAt(j++) << 24
+            bin.charCodeAt(j++) << 24;
     }
 
     let tailLength = len & 3;
-    while (tailLength--) a8[j] = bin.charCodeAt(j++)
+    while (tailLength--) a8[j] = bin.charCodeAt(j++);
 
     callback(new Blob([a8], { type: type || 'image/png' }));
 }
@@ -47,14 +47,14 @@ function _canvasToBlob(canvas: HTMLCanvasElement, callback: BlobCallback, type?:
 export async function canvasToBlob(canvas: HTMLCanvasElement, type?: string, quality?: any): Promise<Blob> {
     return new Promise((resolve, reject) => {
         const callback = (blob: Blob | null) => {
-            if (blob) resolve(blob)
-            else reject('no blob returned')
-        }
+            if (blob) resolve(blob);
+            else reject('no blob returned');
+        };
 
         if (!HTMLCanvasElement.prototype.toBlob) {
-            _canvasToBlob(canvas, callback, type, quality)
+            _canvasToBlob(canvas, callback, type, quality);
         } else {
-            canvas.toBlob(callback, type, quality)
+            canvas.toBlob(callback, type, quality);
         }
-    })
+    });
 }

src/mol-data/_spec/equiv-index.spec.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { EquivalenceClasses } from '../util'
+import { EquivalenceClasses } from '../util';
 
 describe('equiv-classes', () => {
     it('integer mod classes', () => {

src/mol-data/_spec/iterators.spec.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Iterator from '../iterator'
+import Iterator from '../iterator';
 
 function iteratorToArray<T>(it: Iterator<T>): T[] {
     const ret = [];

src/mol-data/_spec/sort.spec.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as Sort from '../util/sort'
+import * as Sort from '../util/sort';
 
 function shuffle<T>(data: T, len: number, clone: (s: T) => T, swap: Sort.Swapper = Sort.arraySwap) {
     const a = clone(data);
@@ -40,7 +40,7 @@ describe('qsort-array asc', () => {
     test('uniq shuffle', data0, true);
     test('rep', data1, false);
     test('rep shuffle', data1, true);
-})
+});
 
 describe('qsort-array generic', () => {
     const data0 = new Array(50);
@@ -63,15 +63,15 @@ describe('qsort-array generic', () => {
     test('uniq shuffle', data0, true);
     test('rep', data1, false);
     test('rep shuffle', data1, true);
-})
+});
 
 describe('qsort-dual array', () => {
     const len = 3;
     const data = { xs: [0, 1, 2], ys: ['x', 'y', 'z'] };
 
     const cmp: Sort.Comparer<typeof data> = (data, i, j) => data.xs[i] - data.xs[j];
-    const swap: Sort.Swapper<typeof data> = (data, i, j) => { Sort.arraySwap(data.xs, i, j); Sort.arraySwap(data.ys, i, j); }
-    const clone = (d: typeof data) => ({ xs: [...d.xs], ys: [...d.ys] })
+    const swap: Sort.Swapper<typeof data> = (data, i, j) => { Sort.arraySwap(data.xs, i, j); Sort.arraySwap(data.ys, i, j); };
+    const clone = (d: typeof data) => ({ xs: [...d.xs], ys: [...d.ys] });
 
     function test(name: string, src: typeof data, randomize: boolean) {
         it(name, () => {
@@ -87,4 +87,4 @@ describe('qsort-dual array', () => {
     }
     test('sorted', data, false);
     test('shuffled', data, true);
-})
+});

src/mol-data/db.ts

@@ -5,11 +5,11 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import Database from './db/database'
-import Table from './db/table'
-import Column from './db/column'
-import * as ColumnHelpers from './db/column-helpers'
+import Database from './db/database';
+import Table from './db/table';
+import Column from './db/column';
+import * as ColumnHelpers from './db/column-helpers';
 
 type DatabaseCollection<T extends Database.Schema> = { [name: string]: Database<T> }
 
-export { DatabaseCollection, Database, Table, Column, ColumnHelpers }
+export { DatabaseCollection, Database, Table, Column, ColumnHelpers };

src/mol-data/db/_spec/table.spec.ts

@@ -5,9 +5,9 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import * as ColumnHelpers from '../column-helpers'
-import Column from '../column'
-import Table from '../table'
+import * as ColumnHelpers from '../column-helpers';
+import Column from '../column';
+import Table from '../table';
 
 describe('column', () => {
     const cc = Column.ofConst(10, 2, Column.Schema.int);
@@ -59,7 +59,7 @@ describe('column', () => {
     it('map to array', () => {
         expect(Column.mapToArray(arrWindow, x => x + 1)).toEqual([3, 4]);
     });
-})
+});
 
 describe('table', () => {
     const schema = {
@@ -125,7 +125,7 @@ describe('table', () => {
             n: Column.ofArray({ array: ['row1', 'row2'], schema: Column.Schema.str }),
         });
         const { x } = t;
-        const sorted = Table.sort(t, (i, j) => x.value(i) - x.value(j))
+        const sorted = Table.sort(t, (i, j) => x.value(i) - x.value(j));
         expect(sorted.x.toArray()).toEqual([-1, 10]);
         expect(sorted.n.toArray()).toEqual(['row2', 'row1']);
     });

src/mol-data/db/column-helpers.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Column from './column'
+import Column from './column';
 
 export function getArrayBounds(rowCount: number, params?: Column.ToArrayParams<any>) {
     const start = params && typeof params.start !== 'undefined' ? Math.max(Math.min(params.start, rowCount - 1), 0) : 0;

src/mol-data/db/column.ts

@@ -5,8 +5,8 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import * as ColumnHelpers from './column-helpers'
-import { Tensor as Tensors } from '../../mol-math/linear-algebra'
+import * as ColumnHelpers from './column-helpers';
+import { Tensor as Tensors } from '../../mol-math/linear-algebra';
 import { Tokens } from '../../mol-io/reader/common/text/tokenizer';
 import { parseInt as fastParseInt, parseFloat as fastParseFloat } from '../../mol-io/reader/common/text/number-parser';
 
@@ -45,9 +45,9 @@ namespace Column {
         export const coord: Coordinate = { '@type': 'coord', T: 0, valueType: 'float' };
         export const float: Float = { '@type': 'float', T: 0, valueType: 'float' };
 
-        export function Str(defaultValue = ''): Str { return { '@type': 'str', T: defaultValue, valueType: 'str' } };
-        export function Int(defaultValue = 0): Int { return { '@type': 'int', T: defaultValue, valueType: 'int' } };
-        export function Float(defaultValue = 0): Float { return { '@type': 'float', T: defaultValue, valueType: 'float' } };
+        export function Str(defaultValue = ''): Str { return { '@type': 'str', T: defaultValue, valueType: 'str' }; };
+        export function Int(defaultValue = 0): Int { return { '@type': 'int', T: defaultValue, valueType: 'int' }; };
+        export function Float(defaultValue = 0): Float { return { '@type': 'float', T: defaultValue, valueType: 'float' }; };
         export function Tensor(space: Tensors.Space, baseType: Int | Float = float): Tensor { return { '@type': 'tensor', T: space.create(), space, valueType: 'tensor', baseType }; }
         export function Vector(dim: number, baseType: Int | Float = float): Tensor { return Tensor(Tensors.Vector(dim, baseType['@type'] === 'int' ? Int32Array : Float64Array), baseType); }
         export function Matrix(rows: number, cols: number, baseType: Int | Float = float): Tensor { return Tensor(Tensors.ColumnMajorMatrix(rows, cols, baseType['@type'] === 'int' ? Int32Array : Float64Array), baseType); }
@@ -57,7 +57,7 @@ namespace Column {
             return t as any as Aliased<T>;
         }
         export function List<T extends number|string>(separator: string, itemParse: (x: string) => T, defaultValue: T[] = []): List<T> {
-            return { '@type': 'list', T: defaultValue, separator, itemParse, valueType: 'list' }
+            return { '@type': 'list', T: defaultValue, separator, itemParse, valueType: 'list' };
         }
     }
 
@@ -146,7 +146,7 @@ namespace Column {
     }
 
     export function ofIntTokens(tokens: Tokens) {
-        const { count, data, indices } = tokens
+        const { count, data, indices } = tokens;
         return lambdaColumn({
             value: (row: number) => fastParseInt(data, indices[2 * row], indices[2 * row + 1]) || 0,
             rowCount: count,
@@ -155,7 +155,7 @@ namespace Column {
     }
 
     export function ofFloatTokens(tokens: Tokens) {
-        const { count, data, indices } = tokens
+        const { count, data, indices } = tokens;
         return lambdaColumn({
             value: (row: number) => fastParseFloat(data, indices[2 * row], indices[2 * row + 1]) || 0,
             rowCount: count,
@@ -164,7 +164,7 @@ namespace Column {
     }
 
     export function ofStringTokens(tokens: Tokens) {
-        const { count, data, indices } = tokens
+        const { count, data, indices } = tokens;
         return lambdaColumn({
             value: (row: number) => {
                 const ret = data.substring(indices[2 * row], indices[2 * row + 1]);
@@ -214,7 +214,7 @@ namespace Column {
 
     export function copyToArray<T extends number>(c: Column<T>, array: { [k: number]: T, length: number }, offset = 0) {
         if (!c.isDefined) return;
-        const cArray = c.__array
+        const cArray = c.__array;
         if (cArray) {
             for (let i = 0, _i = cArray.length; i < _i; i++) array[offset + i] = cArray[i];
         } else {
@@ -259,7 +259,7 @@ function constColumn<T extends Column.Schema>(v: T['T'], rowCount: number, schem
             return array;
         },
         areValuesEqual: (rowA, rowB) => true
-    }
+    };
 }
 
 function lambdaColumn<T extends Column.Schema>({ value, valueKind, areValuesEqual, rowCount, schema }: Column.LambdaSpec<T>): Column<T['T']> {
@@ -276,7 +276,7 @@ function lambdaColumn<T extends Column.Schema>({ value, valueKind, areValuesEqua
             return array;
         },
         areValuesEqual: areValuesEqual ? areValuesEqual : (rowA, rowB) => value(rowA) === value(rowB)
-    }
+    };
 }
 
 function arrayColumn<T extends Column.Schema>({ array, schema, valueKind }: Column.ArraySpec<T>): Column<T['T']> {
@@ -313,7 +313,7 @@ function arrayColumn<T extends Column.Schema>({ array, schema, valueKind }: Colu
                     return ret;
                 },
         areValuesEqual: (rowA, rowB) => array[rowA] === array[rowB]
-    }
+    };
 }
 
 function windowColumn<T>(column: Column<T>, start: number, end: number): Column<T> {

src/mol-data/db/database.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Table from './table'
+import Table from './table';
 
 /** A collection of tables */
 type Database<Schema extends Database.Schema> = {
@@ -41,4 +41,4 @@ namespace Database {
     }
 }
 
-export default Database
+export default Database;

src/mol-data/db/table.ts

@@ -4,8 +4,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Column from './column'
-import { sortArray } from '../util/sort'
+import Column from './column';
+import { sortArray } from '../util/sort';
 import { StringBuilder } from '../../mol-util';
 
 /** A collection of columns */
@@ -55,8 +55,8 @@ namespace Table {
         ret._columns = columns;
         ret._schema = schema;
         for (const k of columns) {
-            if (k in partialColumns) ret[k] = partialColumns[k]
-            else ret[k] = Column.Undefined(rowCount, schema[k])
+            if (k in partialColumns) ret[k] = partialColumns[k];
+            else ret[k] = Column.Undefined(rowCount, schema[k]);
         }
         return ret;
     }
@@ -68,7 +68,7 @@ namespace Table {
         ret._columns = columns;
         ret._schema = schema;
         for (const k of columns) {
-            ret[k] = Column.Undefined(rowCount, schema[k])
+            ret[k] = Column.Undefined(rowCount, schema[k]);
         }
         return ret;
     }
@@ -86,7 +86,7 @@ namespace Table {
                 schema: schema[k],
                 value: r => rows[r][k],
                 valueKind: r => typeof rows[r][k] === 'undefined' ? Column.ValueKind.NotPresent : Column.ValueKind.Present
-            })
+            });
         }
         return ret as R;
     }
@@ -121,11 +121,11 @@ namespace Table {
     }
 
     export function pick<S extends R, R extends Schema>(table: Table<S>, schema: R, test: (i: number) => boolean) {
-        const _view: number[] = []
+        const _view: number[] = [];
         for (let i = 0, il = table._rowCount; i < il; ++i) {
-            if (test(i)) _view.push(i)
+            if (test(i)) _view.push(i);
         }
-        return view(table, schema, _view)
+        return view(table, schema, _view);
     }
 
     export function window<S extends R, R extends Schema>(table: Table<S>, schema: R, start: number, end: number) {
@@ -144,25 +144,25 @@ namespace Table {
     export function concat<S extends R, R extends Schema>(tables: Table<S>[], schema: R) {
         const ret = Object.create(null);
         const columns = Object.keys(schema);
-        ret._rowCount = 0
+        ret._rowCount = 0;
         for (const table of tables) {
-            ret._rowCount += table._rowCount
+            ret._rowCount += table._rowCount;
         }
-        const arrays: any = {}
+        const arrays: any = {};
         for (const column of columns) {
-            arrays[column] = new Array(ret._rowCount)
+            arrays[column] = new Array(ret._rowCount);
         }
         ret._columns = columns;
         ret._schema = schema;
-        let offset = 0
+        let offset = 0;
         for (const table of tables) {
             for (const k of columns) {
-                Column.copyToArray(table[k], arrays[k], offset)
+                Column.copyToArray(table[k], arrays[k], offset);
             }
-            offset += table._rowCount
+            offset += table._rowCount;
         }
         for (const k of columns) {
-            ret[k] = Column.ofArray({ array: arrays[k], schema: schema[k] })
+            ret[k] = Column.ofArray({ array: arrays[k], schema: schema[k] });
         }
         return ret as Table<R>;
     }
@@ -224,7 +224,7 @@ namespace Table {
     /** Pick the first row for which `test` evaluates to true */
     export function pickRow<S extends Schema>(table: Table<S>, test: (i: number) => boolean) {
         for (let i = 0, il = table._rowCount; i < il; ++i) {
-            if (test(i)) return getRow(table, i)
+            if (test(i)) return getRow(table, i);
         }
     }
 
@@ -238,13 +238,13 @@ namespace Table {
     }
 
     export function toArrays<S extends Schema>(table: Table<S>) {
-        const arrays: { [k: string]: ArrayLike<any> } = {}
+        const arrays: { [k: string]: ArrayLike<any> } = {};
         const { _columns } = table;
         for (let i = 0; i < _columns.length; i++) {
-            const c = _columns[i]
+            const c = _columns[i];
             arrays[c] = table[c].toArray();
         }
-        return arrays as { [k in keyof S]: ArrayLike<S[k]['T']> }
+        return arrays as { [k in keyof S]: ArrayLike<S[k]['T']> };
     }
 
     export function formatToString<S extends Schema>(table: Table<S>) {
@@ -280,4 +280,4 @@ namespace Table {
     }
 }
 
-export default Table
+export default Table;

src/mol-data/generic.ts

@@ -4,6 +4,6 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-export * from './generic/hash-set'
-export * from './generic/linked-list'
-export * from './generic/unique-array'
+export * from './generic/hash-set';
+export * from './generic/linked-list';
+export * from './generic/unique-array';

src/mol-data/generic/_spec/linked-list.spec.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { LinkedList } from '../linked-list'
+import { LinkedList } from '../linked-list';
 
 describe('linked list', () => {
 
@@ -59,5 +59,5 @@ describe('linked list', () => {
         expect(list.last).toBe(null);
         expect(list.count).toBe(0);
         expect(toArray(list)).toEqual([]);
-    })
+    });
 });

src/mol-data/generic/linked-list.ts

@@ -114,4 +114,4 @@ class LinkedListImpl<T> implements LinkedList<T> {
     }
 }
 
-export { LinkedList }
+export { LinkedList };

src/mol-data/generic/unique-array.ts

@@ -26,4 +26,4 @@ namespace UniqueArray {
     }
 }
 
-export { UniqueArray }
+export { UniqueArray };

src/mol-data/index.ts

@@ -4,10 +4,10 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as DB from './db'
-import * as Int from './int'
-import Iterator from './iterator'
-import * as Util from './util'
-import * as Generic from './generic'
+import * as DB from './db';
+import * as Int from './int';
+import Iterator from './iterator';
+import * as Util from './util';
+import * as Generic from './generic';
 
-export { DB, Int, Iterator, Util, Generic }
+export { DB, Int, Iterator, Util, Generic };

src/mol-data/int.ts

@@ -4,13 +4,13 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Interval from './int/interval'
-import OrderedSet from './int/ordered-set'
-import Segmentation from './int/segmentation'
-import SortedArray from './int/sorted-array'
-import Tuple from './int/tuple'
-import LinkedIndex from './int/linked-index'
-import IntMap from './int/map'
-import Iterator from './iterator'
+import Interval from './int/interval';
+import OrderedSet from './int/ordered-set';
+import Segmentation from './int/segmentation';
+import SortedArray from './int/sorted-array';
+import Tuple from './int/tuple';
+import LinkedIndex from './int/linked-index';
+import IntMap from './int/map';
+import Iterator from './iterator';
 
-export { Interval, OrderedSet, Segmentation, SortedArray, Tuple, LinkedIndex, IntMap, Iterator }
+export { Interval, OrderedSet, Segmentation, SortedArray, Tuple, LinkedIndex, IntMap, Iterator };

src/mol-data/int/_spec/interval.spec.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Interval from '../interval'
+import Interval from '../interval';
 
 describe('interval', () => {
     function testI(name: string, a: Interval, b: Interval) {

src/mol-data/int/_spec/linked-index.spec.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import LinkedIndex from '../linked-index'
+import LinkedIndex from '../linked-index';
 
 describe('linked-index', () => {
     it('initial state', () => {

src/mol-data/int/_spec/ordered-set.spec.ts

@@ -4,8 +4,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import OrderedSet from '../ordered-set'
-import Interval from '../interval'
+import OrderedSet from '../ordered-set';
+import Interval from '../interval';
 import SortedArray from '../sorted-array';
 
 describe('ordered set', () => {
@@ -122,14 +122,14 @@ describe('ordered set', () => {
         expect(OrderedSet.findRange(arr136, 0, 4)).toEqual(iB(0, 2));
         expect(OrderedSet.findRange(arr136, 2, 4)).toEqual(iB(1, 2));
         expect(OrderedSet.findRange(arr136, 2, 7)).toEqual(iB(1, 3));
-    })
+    });
 
     it('intersectionSize', () => {
         expect(OrderedSet.intersectionSize(arr136, range1_4)).toEqual(2);
         expect(OrderedSet.intersectionSize(arr12369, range1_4)).toEqual(3);
         expect(OrderedSet.intersectionSize(OrderedSet.ofSortedArray([12, 13, 16]), range1_4)).toEqual(0);
         expect(OrderedSet.intersectionSize(OrderedSet.ofSortedArray([1, 2, 4]), range1_4)).toEqual(3);
-    })
+    });
 
     testEq('union ES', OrderedSet.union(empty, singleton10), [10]);
     testEq('union ER', OrderedSet.union(empty, range1_4), [1, 2, 3, 4]);
@@ -201,5 +201,5 @@ describe('ordered set', () => {
         const int = OrderedSet.ofBounds(1, 3), set = OrderedSet.ofSortedArray([2, 3, 4]);
         expect(OrderedSet.forEach(int, (v, i, ctx) => ctx[i] = v, [] as number[])).toEqual([1, 2]);
         expect(OrderedSet.forEach(set, (v, i, ctx) => ctx[i] = v, [] as number[])).toEqual([2, 3, 4]);
-    })
+    });
 });

src/mol-data/int/_spec/segmentation.spec.ts

@@ -4,9 +4,9 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import OrderedSet from '../ordered-set'
-import Interval from '../interval'
-import Segmentation from '../segmentation'
+import OrderedSet from '../ordered-set';
+import Interval from '../interval';
+import Segmentation from '../segmentation';
 
 describe('segments', () => {
     const data = OrderedSet.ofSortedArray([4, 9, 10, 11, 14, 15, 16]);
@@ -16,12 +16,12 @@ describe('segments', () => {
 
     it('project', () => {
         const p = Segmentation.projectValue(segs, data, 4);
-        expect(p).toBe(Interval.ofBounds(0, 2))
+        expect(p).toBe(Interval.ofBounds(0, 2));
     });
 
     it('ofOffsetts', () => {
         const p = Segmentation.ofOffsets([10, 12], Interval.ofBounds(10, 14));
-        expect(p.offsets).toEqual(new Int32Array([0, 2, 4]))
+        expect(p.offsets).toEqual(new Int32Array([0, 2, 4]));
     });
 
     it('map', () => {

src/mol-data/int/_spec/sorted-array.spec.ts

@@ -4,8 +4,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Interval from '../interval'
-import SortedArray from '../sorted-array'
+import Interval from '../interval';
+import SortedArray from '../sorted-array';
 
 describe('sortedArray', () => {
     function testI(name: string, a: Interval, b: Interval) {
@@ -61,7 +61,7 @@ describe('sortedArray', () => {
 
     it('indicesOf', () => {
         compareArrays(SortedArray.indicesOf(SortedArray.ofSortedArray([10, 11, 12]), SortedArray.ofSortedArray([10, 12, 14])), [0, 2]);
-    })
+    });
 
     it('indicesOf 2', () => {
         compareArrays(
@@ -71,7 +71,7 @@ describe('sortedArray', () => {
             ),
             [1, 3, 4, 6, 7]
         );
-    })
+    });
 
     test('intersectionSize', SortedArray.intersectionSize(a1234, a2468), 2);
 
@@ -82,8 +82,8 @@ describe('sortedArray', () => {
                 SortedArray.ofSortedArray([835])
             ),
             SortedArray.ofSortedArray([830, 831, 832, 833, 834, 835, 836, 837, 838, 839, 840, 841, 842, 843])
-        )
-    })
+        );
+    });
 
     it('union2', () => {
         compareArrays(
@@ -92,8 +92,8 @@ describe('sortedArray', () => {
                 SortedArray.ofSortedArray([831])
             ),
             SortedArray.ofSortedArray([830, 831, 832, 833])
-        )
-    })
+        );
+    });
 
     it('union3ab', () => {
         compareArrays(
@@ -102,8 +102,8 @@ describe('sortedArray', () => {
                 SortedArray.ofSortedArray([836, 837, 838, 839, 840, 841, 842, 843])
             ),
             SortedArray.ofSortedArray([830, 831, 832, 833, 834, 835, 836, 837, 838, 839, 840, 841, 842, 843])
-        )
-    })
+        );
+    });
 
     it('union3ba', () => {
         compareArrays(
@@ -112,8 +112,8 @@ describe('sortedArray', () => {
                 SortedArray.ofSortedArray([830, 831, 832, 833, 834, 835])
             ),
             SortedArray.ofSortedArray([830, 831, 832, 833, 834, 835, 836, 837, 838, 839, 840, 841, 842, 843])
-        )
-    })
+        );
+    });
 
     it('union4', () => {
         compareArrays(
@@ -122,8 +122,8 @@ describe('sortedArray', () => {
                 SortedArray.ofSortedArray([2, 4, 6, 8])
             ),
             SortedArray.ofSortedArray([1, 2, 3, 4, 5, 6, 7, 8, 9])
-        )
-    })
+        );
+    });
 
     it('union5', () => {
         compareArrays(
@@ -132,8 +132,8 @@ describe('sortedArray', () => {
                 SortedArray.ofSortedArray([10, 11, 12])
             ),
             SortedArray.ofSortedArray([2, 3, 4, 10, 11, 12, 20, 21, 22])
-        )
-    })
+        );
+    });
 
     it('union6', () => {
         compareArrays(
@@ -142,8 +142,8 @@ describe('sortedArray', () => {
                 SortedArray.ofSortedArray([1751, 1752, 1753, 1754, 1755, 1756, 1757, 1758])
             ),
             SortedArray.ofSortedArray([768, 769, 770, 771, 772, 773, 774, 775, 776, 819, 820, 821, 822, 823, 824, 825, 826, 827, 828, 829, 1751, 1752, 1753, 1754, 1755, 1756, 1757, 1758, 1811, 1812, 1813, 1814, 1815, 1816, 1817, 1818, 1819])
-        )
-    })
+        );
+    });
 
     it('union7', () => {
         compareArrays(
@@ -152,13 +152,13 @@ describe('sortedArray', () => {
                 SortedArray.ofSortedArray([3769, 3790, 3794])
             ),
             SortedArray.ofSortedArray([3766, 3767, 3768, 3769, 3770, 3773, 3780, 3783, 3787, 3790, 3794, 3797])
-        )
-    })
+        );
+    });
 
     it('isSubset', () => {
         expect(SortedArray.isSubset(
             SortedArray.ofSortedArray([1271, 1272, 1273, 1274, 1275, 1276, 1277, 1278, 1279, 1280, 1281, 1282, 1283, 1284, 1285, 1286, 1287, 1288, 1289, 1290, 1291, 1292, 1293, 1294, 1295]),
             SortedArray.ofSortedArray([1271, 1272, 1274, 1275, 1276, 1278, 1280, 1282, 1284, 1286, 1288, 1290, 1292, 1294])
         )).toBe(true);
-    })
+    });
 });

src/mol-data/int/_spec/sorted-ranges.spec.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import SortedRanges from '../sorted-ranges'
+import SortedRanges from '../sorted-ranges';
 import OrderedSet from '../ordered-set';
 import SortedArray from '../sorted-array';
 
@@ -15,19 +15,19 @@ describe('rangesArray', () => {
 
     function testIterator(name: string, ranges: SortedRanges, set: OrderedSet, expectedValues: { index: number[], start: number[], end: number[]}) {
         it(`iterator, ${name}`, () => {
-            const rangesIt = SortedRanges.transientSegments(ranges, set)
-            const { index, start, end } = expectedValues
+            const rangesIt = SortedRanges.transientSegments(ranges, set);
+            const { index, start, end } = expectedValues;
 
-            let i = 0
+            let i = 0;
             while (rangesIt.hasNext) {
-                const segment = rangesIt.move()
-                expect(segment.index).toBe(index[i])
-                expect(segment.start).toBe(start[i])
-                expect(segment.end).toBe(end[i])
-                ++i
+                const segment = rangesIt.move();
+                expect(segment.index).toBe(index[i]);
+                expect(segment.start).toBe(start[i]);
+                expect(segment.end).toBe(end[i]);
+                ++i;
             }
-            expect(i).toBe(index.length)
-        })
+            expect(i).toBe(index.length);
+        });
     }
 
     const a1234 = SortedRanges.ofSortedRanges([1, 2, 3, 4]);
@@ -43,30 +43,30 @@ describe('rangesArray', () => {
         SortedRanges.ofSortedRanges([1, 2, 3, 4]),
         OrderedSet.ofBounds(1, 5),
         { index: [0, 1], start: [0, 2], end: [2, 4] }
-    )
+    );
     testIterator('first range',
         SortedRanges.ofSortedRanges([1, 2, 3, 4]),
         SortedArray.ofSortedArray([2]),
         { index: [0], start: [0], end: [1] }
-    )
+    );
     testIterator('second range',
         SortedRanges.ofSortedRanges([1, 2, 3, 4]),
         SortedArray.ofSortedArray([4]),
         { index: [1], start: [0], end: [1] }
-    )
+    );
     testIterator('set not in ranges',
         SortedRanges.ofSortedRanges([1, 2, 3, 4]),
         SortedArray.ofSortedArray([10]),
         { index: [], start: [], end: [] }
-    )
+    );
     testIterator('set in second range and beyond',
         SortedRanges.ofSortedRanges([1, 2, 3, 4]),
         SortedArray.ofSortedArray([3, 10]),
         { index: [1], start: [0], end: [1] }
-    )
+    );
     testIterator('length 1 range',
         SortedRanges.ofSortedRanges([1, 1, 3, 4]),
         SortedArray.ofSortedArray([0, 1, 10]),
         { index: [0], start: [1], end: [2] }
-    )
+    );
 });

src/mol-data/int/_spec/tuple.spec.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import IntTuple from '../tuple'
+import IntTuple from '../tuple';
 
 describe('int pair', () => {
     it('works', () => {
@@ -15,5 +15,5 @@ describe('int pair', () => {
                 expect(IntTuple.snd(t)).toBe(j);
             }
         }
-    })
-})
+    });
+});

src/mol-data/int/impl/interval.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Tuple from '../tuple'
+import Tuple from '../tuple';
 
 export const Empty = Tuple.Zero;
 export function ofRange(min: number, max: number) { return max < min ? Tuple.create(min, min) : Tuple.create(min, max + 1); }
@@ -64,5 +64,5 @@ export function intersect(a: Tuple, b: Tuple) {
 }
 
 export function intersectionSize(a: Tuple, b: Tuple) {
-    return size(findRange(a, min(b), max(b)))
+    return size(findRange(a, min(b), max(b)));
 }

src/mol-data/int/impl/ordered-set.ts

@@ -4,17 +4,17 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import S from '../sorted-array'
-import I from '../interval'
+import S from '../sorted-array';
+import I from '../interval';
 
 type OrderedSetImpl = I | S
 type Nums = ArrayLike<number>
 
 export const Empty: OrderedSetImpl = I.Empty;
 
-export const ofSingleton = I.ofSingleton
-export const ofRange = I.ofRange
-export const ofBounds = I.ofBounds
+export const ofSingleton = I.ofSingleton;
+export const ofRange = I.ofRange;
+export const ofBounds = I.ofBounds;
 
 export function ofSortedArray(xs: Nums): OrderedSetImpl {
     if (!xs.length) return Empty;

src/mol-data/int/impl/segmentation.ts

@@ -4,11 +4,11 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Iterator from '../../iterator'
-import OrderedSet from '../ordered-set'
-import Interval from '../interval'
-import SortedArray from '../sorted-array'
-import Segs from '../segmentation'
+import Iterator from '../../iterator';
+import OrderedSet from '../ordered-set';
+import Interval from '../interval';
+import SortedArray from '../sorted-array';
+import Segs from '../segmentation';
 
 interface Segmentation {
     /** Segments stored as a sorted array */

src/mol-data/int/impl/sorted-array.ts

@@ -4,13 +4,13 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { sortArray, hash3, hash4, createRangeArray } from '../../util'
-import Interval from '../interval'
+import { sortArray, hash3, hash4, createRangeArray } from '../../util';
+import Interval from '../interval';
 
 type Nums = ArrayLike<number>
 
 
-export const Empty: Nums = []
+export const Empty: Nums = [];
 
 export function ofSingleton(v: number) { return [v]; }
 export function ofSortedArray(xs: Nums) { return xs; }
@@ -47,7 +47,7 @@ export function indexOf(xs: Nums, v: number) {
     return l === 0 ? -1 : xs[0] <= v && v <= xs[l - 1] ? binarySearchRange(xs, v, 0, l) : -1;
 }
 export function indexOfInInterval(xs: Nums, v: number, bounds: Interval) {
-    return indexOfInRange(xs, v, Interval.start(bounds), Interval.end(bounds))
+    return indexOfInRange(xs, v, Interval.start(bounds), Interval.end(bounds));
 }
 export function indexOfInRange(xs: Nums, v: number, s: number, e: number) {
     const l = xs.length;

src/mol-data/int/interval.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as Impl from './impl/interval'
+import * as Impl from './impl/interval';
 
 namespace Interval {
     export const Empty: Interval = Impl.Empty as any;
@@ -60,4 +60,4 @@ namespace Interval {
 /** Interval describing a range [min, max] of values */
 interface Interval<T extends number = number> { '@type': 'int-interval' }
 
-export default Interval
+export default Interval;

src/mol-data/int/map.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { iterableToArray } from '../util'
+import { iterableToArray } from '../util';
 
 // TODO: rename to "linear map" and just do key value mapping from index?
 

src/mol-data/int/ordered-set.ts

@@ -4,8 +4,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as Base from './impl/ordered-set'
-import Interval from './interval'
+import * as Base from './impl/ordered-set';
+import Interval from './interval';
 import SortedArray from './sorted-array';
 
 namespace OrderedSet {
@@ -70,16 +70,16 @@ namespace OrderedSet {
     }
 
     export function toArray<T extends number = number>(set: OrderedSet<T>): T[] {
-        const array: T[] = []
-        OrderedSet.forEach(set, v => array.push(v))
-        return array
+        const array: T[] = [];
+        OrderedSet.forEach(set, v => array.push(v));
+        return array;
     }
 
     export function toString<T extends number = number>(set: OrderedSet<T>): string {
-        return Base.toString(set)
+        return Base.toString(set);
     }
 }
 
 type OrderedSet<T extends number = number> = SortedArray<T> | Interval<T>
 
-export default OrderedSet
+export default OrderedSet;

src/mol-data/int/segmentation.ts

@@ -4,9 +4,9 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import Interval from './interval'
-import OrderedSet from './ordered-set'
-import * as Impl from './impl/segmentation'
+import Interval from './interval';
+import OrderedSet from './ordered-set';
+import * as Impl from './impl/segmentation';
 
 namespace Segmentation {
     export interface Segment<I extends number = number> { index: I, start: number, end: number }
@@ -33,4 +33,4 @@ interface Segmentation<T extends number = number, I extends number = number> {
     readonly count: number
 }
 
-export default Segmentation
+export default Segmentation;

src/mol-data/int/sorted-array.ts

@@ -4,8 +4,8 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as Impl from './impl/sorted-array'
-import Interval from './interval'
+import * as Impl from './impl/sorted-array';
+import Interval from './interval';
 
 namespace SortedArray {
     export const Empty: SortedArray = Impl.Empty as any;
@@ -54,4 +54,4 @@ namespace SortedArray {
 
 interface SortedArray<T extends number = number> extends ArrayLike<T> { '@type': 'int-sorted-array' }
 
-export default SortedArray
+export default SortedArray;

src/mol-data/int/sorted-ranges.ts

@@ -11,79 +11,79 @@ import _Iterator from '../iterator';
 type SortedRanges<T extends number = number> = SortedArray<T>
 
 namespace SortedRanges {
-    export function ofSortedRanges<T extends number = number>(array: ArrayLike<T>) { return SortedArray.ofSortedArray<T>(array) }
-    export function start<T extends number = number>(ranges: SortedRanges<T>) { return ranges[0] }
-    export function end<T extends number = number>(ranges: SortedRanges<T>) { return ranges[ranges.length - 1] + 1 }
-    export function min<T extends number = number>(ranges: SortedRanges<T>) { return ranges[0] }
-    export function max<T extends number = number>(ranges: SortedRanges<T>) { return ranges[ranges.length - 1] }
+    export function ofSortedRanges<T extends number = number>(array: ArrayLike<T>) { return SortedArray.ofSortedArray<T>(array); }
+    export function start<T extends number = number>(ranges: SortedRanges<T>) { return ranges[0]; }
+    export function end<T extends number = number>(ranges: SortedRanges<T>) { return ranges[ranges.length - 1] + 1; }
+    export function min<T extends number = number>(ranges: SortedRanges<T>) { return ranges[0]; }
+    export function max<T extends number = number>(ranges: SortedRanges<T>) { return ranges[ranges.length - 1]; }
     export function size<T extends number = number>(ranges: SortedRanges<T>) {
-        let size = 0
+        let size = 0;
         for (let i = 0, il = ranges.length; i < il; i += 2) {
-            size += ranges[i + 1] - ranges[i] + 1
+            size += ranges[i + 1] - ranges[i] + 1;
         }
-        return size
+        return size;
     }
-    export function count<T extends number = number>(ranges: SortedRanges<T>) { return ranges.length / 2 }
+    export function count<T extends number = number>(ranges: SortedRanges<T>) { return ranges.length / 2; }
 
     export function startAt<T extends number = number>(ranges: SortedRanges<T>, index: number) {
-        return ranges[index * 2]
+        return ranges[index * 2];
     }
     export function endAt<T extends number = number>(ranges: SortedRanges<T>, index: number) {
-        return ranges[index * 2 + 1] + 1
+        return ranges[index * 2 + 1] + 1;
     }
 
     export function minAt<T extends number = number>(ranges: SortedRanges<T>, index: number) {
-        return ranges[index * 2]
+        return ranges[index * 2];
     }
     export function maxAt<T extends number = number>(ranges: SortedRanges<T>, index: number) {
-        return ranges[index * 2 + 1]
+        return ranges[index * 2 + 1];
     }
 
     export function areEqual<T extends number = number>(a: SortedRanges<T>, b: SortedRanges<T>) {
-        if (a.length !== b.length) return false
+        if (a.length !== b.length) return false;
         for (let i = 0, il = a.length; i < il; ++i) {
-            if (a[i] !== b[i]) return false
+            if (a[i] !== b[i]) return false;
         }
-        return true
+        return true;
     }
 
     export function forEach<T extends number = number>(ranges: SortedRanges<T>, f: (value: T, i: number) => void) {
-        let k = 0
+        let k = 0;
         for (let i = 0, il = ranges.length; i < il; i += 2) {
             for (let j = ranges[i], jl = ranges[i + 1]; j <= jl; ++j) {
                 f(j, k);
-                ++k
+                ++k;
             }
         }
     }
 
     /** Returns if a value of `set` is included in `ranges` */
     export function has<T extends number = number>(ranges: SortedRanges<T>, set: OrderedSet<T>) {
-        return firstIntersectionIndex(ranges, set) !== -1
+        return firstIntersectionIndex(ranges, set) !== -1;
     }
 
     /** Returns if a value of `set` is included in `ranges` from given index */
     export function hasFrom<T extends number = number>(ranges: SortedRanges<T>, set: OrderedSet<T>, from: number) {
-        return firstIntersectionIndexFrom(ranges, set, from) !== -1
+        return firstIntersectionIndexFrom(ranges, set, from) !== -1;
     }
 
     export function firstIntersectionIndex<T extends number = number>(ranges: SortedRanges<T>, set: OrderedSet<T>): number {
-        return firstIntersectionIndexFrom(ranges, set, 0)
+        return firstIntersectionIndexFrom(ranges, set, 0);
     }
 
     export function firstIntersectionIndexFrom<T extends number = number>(ranges: SortedRanges<T>, set: OrderedSet<T>, from: number): number {
-        if (minAt(ranges, from) > OrderedSet.max(set) || max(ranges) < OrderedSet.min(set)) return -1
+        if (minAt(ranges, from) > OrderedSet.max(set) || max(ranges) < OrderedSet.min(set)) return -1;
 
         for (let i = from, il = count(ranges); i < il; ++i) {
-            const interval = Interval.ofRange(minAt(ranges, i), maxAt(ranges, i))
-            if (OrderedSet.areIntersecting(interval, set)) return i
+            const interval = Interval.ofRange(minAt(ranges, i), maxAt(ranges, i));
+            if (OrderedSet.areIntersecting(interval, set)) return i;
         }
 
-        return -1
+        return -1;
     }
 
     export function transientSegments<T extends number = number, I extends number = number>(ranges: SortedRanges<T>, set: OrderedSet<T>) {
-        return new Iterator<T, I>(ranges, set)
+        return new Iterator<T, I>(ranges, set);
     }
 
     export class Iterator<T extends number = number, I extends number = number> implements _Iterator<Segmentation.Segment<I>> {
@@ -94,25 +94,25 @@ namespace SortedRanges {
         hasNext: boolean = false;
 
         private updateValue() {
-            this.value.index = this.curIndex as I
-            this.value.start = OrderedSet.findPredecessorIndex(this.set, startAt(this.ranges, this.curIndex))
-            this.value.end = OrderedSet.findPredecessorIndex(this.set, endAt(this.ranges, this.curIndex))
+            this.value.index = this.curIndex as I;
+            this.value.start = OrderedSet.findPredecessorIndex(this.set, startAt(this.ranges, this.curIndex));
+            this.value.end = OrderedSet.findPredecessorIndex(this.set, endAt(this.ranges, this.curIndex));
         }
 
         move() {
             if (this.hasNext) {
-                this.updateValue()
-                this.curIndex = firstIntersectionIndexFrom(this.ranges, this.set, this.curIndex + 1)
-                this.hasNext = this.curIndex !== -1
+                this.updateValue();
+                this.curIndex = firstIntersectionIndexFrom(this.ranges, this.set, this.curIndex + 1);
+                this.hasNext = this.curIndex !== -1;
             }
             return this.value;
         }
 
         constructor(private ranges: SortedRanges<T>, private set: OrderedSet<T>) {
-            this.curIndex = firstIntersectionIndex(ranges, set)
-            this.hasNext = this.curIndex !== -1
+            this.curIndex = firstIntersectionIndex(ranges, set);
+            this.hasNext = this.curIndex !== -1;
         }
     }
 }
 
-export default SortedRanges
+export default SortedRanges;

src/mol-data/int/tuple.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { hash2 } from '../util'
+import { hash2 } from '../util';
 
 /**
  * Represents a pair of two integers as a double,
@@ -80,4 +80,4 @@ namespace IntTuple {
     }
 }
 
-export default IntTuple
+export default IntTuple;

src/mol-data/iterator.ts

@@ -117,4 +117,4 @@ namespace Iterator {
     }
 }
 
-export default Iterator
+export default Iterator;

src/mol-data/util.ts

@@ -4,10 +4,10 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-export * from './util/chunked-array'
-export * from './util/buckets'
-export * from './util/equivalence-classes'
-export * from './util/hash-functions'
-export * from './util/sort'
-export * from './util/grouping'
-export * from './util/array'
+export * from './util/chunked-array';
+export * from './util/buckets';
+export * from './util/equivalence-classes';
+export * from './util/hash-functions';
+export * from './util/sort';
+export * from './util/grouping';
+export * from './util/array';

src/mol-data/util/_spec/buckets.spec.ts

@@ -39,5 +39,5 @@ describe('buckets', () => {
 
         expect(reorder(range, xs)).toEqual([2, 1, 1, 2, 2, 3, 1]);
         expect(Array.from(bs)).toEqual([1, 3, 5]);
-    })
-})
+    });
+});

src/mol-data/util/_spec/chunked-array.spec.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { ChunkedArray } from '../chunked-array'
+import { ChunkedArray } from '../chunked-array';
 
 describe('Chunked Array', () => {
     it('creation', () => {
@@ -45,7 +45,7 @@ describe('Chunked Array', () => {
         ChunkedArray.add2(arr, 5, 6);
         ChunkedArray.add2(arr, 7, 8);
         ChunkedArray.add2(arr, 9, 10);
-        expect(arr.elementCount).toBe(5)
+        expect(arr.elementCount).toBe(5);
         expect(ChunkedArray.compact(arr)).toEqual(new Int32Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]));
     });
 });

src/mol-data/util/_spec/combination.spec.ts

@@ -4,26 +4,26 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { combinations } from '../combination'
+import { combinations } from '../combination';
 
 describe('Combination', () => {
     it('test123-2', () => {
-        const c = combinations([1, 2, 3], 2)
+        const c = combinations([1, 2, 3], 2);
         expect(c).toEqual([[1, 2], [1, 3], [2, 3]]);
     });
 
     it('test1234-2', () => {
-        const c = combinations([1, 2, 3, 4], 2)
+        const c = combinations([1, 2, 3, 4], 2);
         expect(c).toEqual([[1, 2], [1, 3], [2, 3], [1, 4], [2, 4], [3, 4]]);
     });
 
     it('test1234-1', () => {
-        const c = combinations([1, 2, 3, 4], 1)
+        const c = combinations([1, 2, 3, 4], 1);
         expect(c).toEqual([[1], [2], [3], [4]]);
     });
 
     it('test1234-4', () => {
-        const c = combinations([1, 2, 3, 4], 4)
+        const c = combinations([1, 2, 3, 4], 4);
         expect(c).toEqual([[1, 2, 3, 4]]);
     });
 });

src/mol-data/util/_spec/interval-iterator.spec.ts

@@ -10,24 +10,24 @@ import { IntervalIterator } from '../interval-iterator';
 describe('interval', () => {
     function testIterator(name: string, interval: Interval, set: OrderedSet, expectedValues: { index: number[], start: number[], end: number[]}) {
         it(`iterator, ${name}`, () => {
-            const intervalIt = new IntervalIterator(interval, set)
-            const { index, start, end } = expectedValues
+            const intervalIt = new IntervalIterator(interval, set);
+            const { index, start, end } = expectedValues;
 
-            let i = 0
+            let i = 0;
             while (intervalIt.hasNext) {
-                const segment = intervalIt.move()
-                expect(segment.index).toBe(index[i])
-                expect(segment.start).toBe(start[i])
-                expect(segment.end).toBe(end[i])
-                ++i
+                const segment = intervalIt.move();
+                expect(segment.index).toBe(index[i]);
+                expect(segment.start).toBe(start[i]);
+                expect(segment.end).toBe(end[i]);
+                ++i;
             }
-            expect(i).toBe(index.length)
-        })
+            expect(i).toBe(index.length);
+        });
     }
 
     testIterator('basic',
         Interval.ofRange(0, 5),
         SortedArray.ofSortedArray([1, 3, 7, 8]),
         { index: [1, 3], start: [0, 1], end: [1, 2] }
-    )
+    );
 });

src/mol-data/util/chunked-array.ts

@@ -185,4 +185,4 @@ namespace ChunkedArray {
     }
 }
 
-export { ChunkedArray }
+export { ChunkedArray };

src/mol-data/util/combination.ts

@@ -6,25 +6,25 @@
 
 // adpated from https://github.com/dankogai/js-combinatorics, MIT 2013-2016 Dan Kogai
 
-import Iterator from '../iterator'
+import Iterator from '../iterator';
 
 function P(m: number, n: number) {
-    let p = 1
-    while (n--) p *= m--
-    return p
+    let p = 1;
+    while (n--) p *= m--;
+    return p;
 }
 
 function C(m: number, n: number) {
-    if (n > m) return 0
-    return P(m, n) / P(n, n)
+    if (n > m) return 0;
+    return P(m, n) / P(n, n);
 }
 
 function nextIndex(n: number) {
-    const smallest = n & -n
-    const ripple = n + smallest
-    const newSmallest = ripple & -ripple
-    const ones = ((newSmallest / smallest) >> 1) - 1
-    return ripple | ones
+    const smallest = n & -n;
+    const ripple = n + smallest;
+    const newSmallest = ripple & -ripple;
+    const ones = ((newSmallest / smallest) >> 1) - 1;
+    return ripple | ones;
 };
 
 export class CombinationIterator<T> implements Iterator<ReadonlyArray<T>> {
@@ -37,29 +37,29 @@ export class CombinationIterator<T> implements Iterator<ReadonlyArray<T>> {
 
     move() {
         if (this.hasNext) {
-            let i = 0, j = 0, n = this.index
+            let i = 0, j = 0, n = this.index;
             for (; n; n >>>= 1, i++) {
-                if (n & 1) this.value[j++] = this.array[i]
+                if (n & 1) this.value[j++] = this.array[i];
             }
-            this.index = nextIndex(this.index)
-            this.hasNext = this.index < this.maxIndex
+            this.index = nextIndex(this.index);
+            this.hasNext = this.index < this.maxIndex;
         }
         return this.value;
     }
 
     constructor(private array: T[], count: number) {
-        this.index = (1 << count) - 1
-        this.size = C(array.length, count)
+        this.index = (1 << count) - 1;
+        this.size = C(array.length, count);
         this.maxIndex = 1 << array.length,
 
-        this.value = new Array(count)
-        this.hasNext = count > 0 && count <= array.length
+        this.value = new Array(count);
+        this.hasNext = count > 0 && count <= array.length;
     }
 }
 
 export function combinations<T>(array: T[], count: number): T[][] {
-    const out: T[][] = []
-    const combinationIt = new CombinationIterator(array, count)
-    while (combinationIt.hasNext) out.push(combinationIt.move().slice())
-    return out
+    const out: T[][] = [];
+    const combinationIt = new CombinationIterator(array, count);
+    while (combinationIt.hasNext) out.push(combinationIt.move().slice());
+    return out;
 }

src/mol-data/util/grouping.ts

@@ -4,7 +4,7 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Column } from '../db'
+import { Column } from '../db';
 
 export interface Grouping<V, K> {
     map: Map<K, V[]>,

src/mol-data/util/hash-functions.ts

@@ -17,7 +17,7 @@ export function hash2(i: number, j: number) {
     let a = 23;
     a = (31 * a + i) | 0;
     a = (31 * a + j) | 0;
-    a = a ^ (a >> 4)
+    a = a ^ (a >> 4);
     a = (a ^ 0xdeadbeef) + (a << 5);
     a = a ^ (a >> 11);
     return a;
@@ -28,7 +28,7 @@ export function hash3(i: number, j: number, k: number) {
     a = (31 * a + i) | 0;
     a = (31 * a + j) | 0;
     a = (31 * a + k) | 0;
-    a = a ^ (a >> 4)
+    a = a ^ (a >> 4);
     a = (a ^ 0xdeadbeef) + (a << 5);
     a = a ^ (a >> 11);
     return a;
@@ -40,7 +40,7 @@ export function hash4(i: number, j: number, k: number, l: number) {
     a = (31 * a + j) | 0;
     a = (31 * a + k) | 0;
     a = (31 * a + l) | 0;
-    a = a ^ (a >> 4)
+    a = a ^ (a >> 4);
     a = (a ^ 0xdeadbeef) + (a << 5);
     a = a ^ (a >> 11);
     return a;

src/mol-data/util/interval-iterator.ts

@@ -4,7 +4,7 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import Iterator from '../iterator'
+import Iterator from '../iterator';
 import { OrderedSet, Interval, Segmentation } from '../int';
 
 /** Emits a segment of length one for each element in the interval that is also in the set */
@@ -17,29 +17,29 @@ export class IntervalIterator<I extends number = number> implements Iterator<Seg
     hasNext: boolean = false;
 
     updateValue() {
-        this.value.index = this.curIndex as I
-        this.value.start = OrderedSet.findPredecessorIndex(this.set, Interval.getAt(this.interval, this.curIndex))
-        this.value.end = this.value.start + 1
+        this.value.index = this.curIndex as I;
+        this.value.start = OrderedSet.findPredecessorIndex(this.set, Interval.getAt(this.interval, this.curIndex));
+        this.value.end = this.value.start + 1;
     }
 
     move() {
         if (this.hasNext) {
-            this.updateValue()
+            this.updateValue();
             while (this.curIndex <= this.maxIndex) {
-                ++this.curIndex
-                if (OrderedSet.has(this.set, this.curIndex)) break
+                ++this.curIndex;
+                if (OrderedSet.has(this.set, this.curIndex)) break;
             }
-            this.hasNext = this.curIndex <= this.maxIndex
+            this.hasNext = this.curIndex <= this.maxIndex;
         }
         return this.value;
     }
 
     constructor(private interval: Interval<I>, private set: OrderedSet<I>) {
         if (Interval.size(interval)) {
-            this.curIndex = Interval.findPredecessorIndex(interval, OrderedSet.min(set))
-            this.maxIndex = Interval.findPredecessorIndex(interval, OrderedSet.max(set))
+            this.curIndex = Interval.findPredecessorIndex(interval, OrderedSet.min(set));
+            this.maxIndex = Interval.findPredecessorIndex(interval, OrderedSet.max(set));
         }
 
-        this.hasNext = OrderedSet.areIntersecting(this.interval, this.set)
+        this.hasNext = OrderedSet.areIntersecting(this.interval, this.set);
     }
 }

src/mol-geo/geometry/base.ts

@@ -8,7 +8,7 @@ import { RenderableState } from '../../mol-gl/renderable';
 import { ValueCell } from '../../mol-util';
 import { BaseValues } from '../../mol-gl/renderable/schema';
 import { LocationIterator } from '../util/location-iterator';
-import { ParamDefinition as PD } from '../../mol-util/param-definition'
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { TransformData, createIdentityTransform } from './transform-data';
 import { Theme } from '../../mol-theme/theme';
 import { ColorNames } from '../../mol-util/color/names';
@@ -26,10 +26,10 @@ export const VisualQualityInfo = {
     'low': {},
     'lower': {},
     'lowest': {},
-}
+};
 export type VisualQuality = keyof typeof VisualQualityInfo
-export const VisualQualityNames = Object.keys(VisualQualityInfo) as VisualQuality[]
-export const VisualQualityOptions = PD.arrayToOptions(VisualQualityNames)
+export const VisualQualityNames = Object.keys(VisualQualityInfo) as VisualQuality[];
+export const VisualQualityOptions = PD.arrayToOptions(VisualQualityNames);
 
 //
 
@@ -37,7 +37,7 @@ export namespace BaseGeometry {
     export const Params = {
         alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }, { label: 'Opacity', isEssential: true, description: 'How opaque/transparent the representation is rendered.' }),
         quality: PD.Select<VisualQuality>('auto', VisualQualityOptions, { isEssential: true, description: 'Visual/rendering quality of the representation.' }),
-    }
+    };
     export type Params = typeof Params
 
     export const ShadingCategory: PD.Info = { category: 'Shading' };
@@ -49,13 +49,13 @@ export namespace BaseGeometry {
     export type Counts = { drawCount: number, groupCount: number, instanceCount: number }
 
     export function createSimple(colorValue = ColorNames.grey, sizeValue = 1, transform?: TransformData) {
-        if (!transform) transform = createIdentityTransform()
-        const locationIterator = LocationIterator(1, transform.instanceCount.ref.value, () => NullLocation, false, () => false)
+        if (!transform) transform = createIdentityTransform();
+        const locationIterator = LocationIterator(1, transform.instanceCount.ref.value, () => NullLocation, false, () => false);
         const theme: Theme = {
             color: UniformColorTheme({}, { value: colorValue}),
             size: UniformSizeTheme({}, { value: sizeValue})
-        }
-        return { transform, locationIterator, theme }
+        };
+        return { transform, locationIterator, theme };
     }
 
     export function createValues(props: PD.Values<Params>, counts: Counts) {
@@ -64,11 +64,11 @@ export namespace BaseGeometry {
             uAlpha: ValueCell.create(props.alpha),
             uGroupCount: ValueCell.create(counts.groupCount),
             drawCount: ValueCell.create(counts.drawCount),
-        }
+        };
     }
 
     export function updateValues(values: BaseValues, props: PD.Values<Params>) {
-        ValueCell.updateIfChanged(values.alpha, props.alpha) // `uAlpha` is set in renderable.render
+        ValueCell.updateIfChanged(values.alpha, props.alpha); // `uAlpha` is set in renderable.render
     }
 
     export function createRenderableState(props: Partial<PD.Values<Params>> = {}): RenderableState {
@@ -77,10 +77,10 @@ export namespace BaseGeometry {
             alphaFactor: 1,
             pickable: true,
             opaque: props.alpha === undefined ? true : props.alpha === 1
-        }
+        };
     }
 
     export function updateRenderableState(state: RenderableState, props: PD.Values<Params>) {
-        state.opaque = props.alpha * state.alphaFactor >= 1
+        state.opaque = props.alpha * state.alphaFactor >= 1;
     }
 }

src/mol-geo/geometry/color-data.ts

@@ -24,87 +24,87 @@ export type ColorData = {
 
 export function createColors(locationIt: LocationIterator, colorTheme: ColorTheme<any>, colorData?: ColorData): ColorData {
     switch (Geometry.getGranularity(locationIt, colorTheme.granularity)) {
-        case 'uniform': return createUniformColor(locationIt, colorTheme.color, colorData)
-        case 'group': return createGroupColor(locationIt, colorTheme.color, colorData)
-        case 'groupInstance': return createGroupInstanceColor(locationIt, colorTheme.color, colorData)
-        case 'instance': return createInstanceColor(locationIt, colorTheme.color, colorData)
+        case 'uniform': return createUniformColor(locationIt, colorTheme.color, colorData);
+        case 'group': return createGroupColor(locationIt, colorTheme.color, colorData);
+        case 'groupInstance': return createGroupInstanceColor(locationIt, colorTheme.color, colorData);
+        case 'instance': return createInstanceColor(locationIt, colorTheme.color, colorData);
     }
 }
 
 export function createValueColor(value: Color, colorData?: ColorData): ColorData {
     if (colorData) {
-        ValueCell.update(colorData.uColor, Color.toVec3Normalized(colorData.uColor.ref.value, value))
+        ValueCell.update(colorData.uColor, Color.toVec3Normalized(colorData.uColor.ref.value, value));
         if (colorData.dColorType.ref.value !== 'uniform') {
-            ValueCell.update(colorData.dColorType, 'uniform')
+            ValueCell.update(colorData.dColorType, 'uniform');
         }
-        return colorData
+        return colorData;
     } else {
         return {
             uColor: ValueCell.create(Color.toVec3Normalized(Vec3(), value)),
             tColor: ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
             uColorTexDim: ValueCell.create(Vec2.create(1, 1)),
             dColorType: ValueCell.create('uniform'),
-        }
+        };
     }
 }
 
 /** Creates color uniform */
 export function createUniformColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
-    return createValueColor(color(NullLocation, false), colorData)
+    return createValueColor(color(NullLocation, false), colorData);
 }
 
 export function createTextureColor(colors: TextureImage<Uint8Array>, type: ColorType, colorData?: ColorData): ColorData {
     if (colorData) {
-        ValueCell.update(colorData.tColor, colors)
-        ValueCell.update(colorData.uColorTexDim, Vec2.create(colors.width, colors.height))
+        ValueCell.update(colorData.tColor, colors);
+        ValueCell.update(colorData.uColorTexDim, Vec2.create(colors.width, colors.height));
         if (colorData.dColorType.ref.value !== type) {
-            ValueCell.update(colorData.dColorType, type)
+            ValueCell.update(colorData.dColorType, type);
         }
-        return colorData
+        return colorData;
     } else {
         return {
             uColor: ValueCell.create(Vec3.zero()),
             tColor: ValueCell.create(colors),
             uColorTexDim: ValueCell.create(Vec2.create(colors.width, colors.height)),
             dColorType: ValueCell.create(type),
-        }
+        };
     }
 }
 
 /** Creates color texture with color for each instance/unit */
 export function createInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
-    const { instanceCount } = locationIt
-    const colors = createTextureImage(Math.max(1, instanceCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array)
-    locationIt.reset()
+    const { instanceCount } = locationIt;
+    const colors = createTextureImage(Math.max(1, instanceCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array);
+    locationIt.reset();
     while (locationIt.hasNext) {
-        const { location, isSecondary, instanceIndex } = locationIt.move()
-        Color.toArray(color(location, isSecondary), colors.array, instanceIndex * 3)
-        locationIt.skipInstance()
+        const { location, isSecondary, instanceIndex } = locationIt.move();
+        Color.toArray(color(location, isSecondary), colors.array, instanceIndex * 3);
+        locationIt.skipInstance();
     }
-    return createTextureColor(colors, 'instance', colorData)
+    return createTextureColor(colors, 'instance', colorData);
 }
 
 /** Creates color texture with color for each group (i.e. shared across instances/units) */
 export function createGroupColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
-    const { groupCount } = locationIt
-    const colors = createTextureImage(Math.max(1, groupCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array)
-    locationIt.reset()
+    const { groupCount } = locationIt;
+    const colors = createTextureImage(Math.max(1, groupCount), 3, Uint8Array, colorData && colorData.tColor.ref.value.array);
+    locationIt.reset();
     while (locationIt.hasNext && !locationIt.isNextNewInstance) {
-        const { location, isSecondary, groupIndex } = locationIt.move()
-        Color.toArray(color(location, isSecondary), colors.array, groupIndex * 3)
+        const { location, isSecondary, groupIndex } = locationIt.move();
+        Color.toArray(color(location, isSecondary), colors.array, groupIndex * 3);
     }
-    return createTextureColor(colors, 'group', colorData)
+    return createTextureColor(colors, 'group', colorData);
 }
 
 /** Creates color texture with color for each group in each instance (i.e. for each unit) */
 export function createGroupInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
-    const { groupCount, instanceCount } = locationIt
-    const count = instanceCount * groupCount
-    const colors = createTextureImage(Math.max(1, count), 3, Uint8Array, colorData && colorData.tColor.ref.value.array)
-    locationIt.reset()
+    const { groupCount, instanceCount } = locationIt;
+    const count = instanceCount * groupCount;
+    const colors = createTextureImage(Math.max(1, count), 3, Uint8Array, colorData && colorData.tColor.ref.value.array);
+    locationIt.reset();
     while (locationIt.hasNext) {
-        const { location, isSecondary, index } = locationIt.move()
-        Color.toArray(color(location, isSecondary), colors.array, index * 3)
+        const { location, isSecondary, index } = locationIt.move();
+        Color.toArray(color(location, isSecondary), colors.array, index * 3);
     }
-    return createTextureColor(colors, 'groupInstance', colorData)
+    return createTextureColor(colors, 'groupInstance', colorData);
 }

src/mol-geo/geometry/direct-volume/direct-volume.ts

@@ -27,8 +27,8 @@ import { TransformData } from '../transform-data';
 import { createEmptyTransparency } from '../transparency-data';
 import { createTransferFunctionTexture, getControlPointsFromVec2Array } from './transfer-function';
 
-const VolumeBox = Box()
-const RenderModeOptions = [['isosurface', 'Isosurface'], ['volume', 'Volume']] as [string, string][]
+const VolumeBox = Box();
+const RenderModeOptions = [['isosurface', 'Isosurface'], ['volume', 'Volume']] as [string, string][];
 
 export interface DirectVolume {
     readonly kind: 'direct-volume',
@@ -49,23 +49,23 @@ export namespace DirectVolume {
     export function create(bbox: Box3D, gridDimension: Vec3, transform: Mat4, texture: Texture, directVolume?: DirectVolume): DirectVolume {
         return directVolume ?
             update(bbox, gridDimension, transform, texture, directVolume) :
-            fromData(bbox, gridDimension, transform, texture)
+            fromData(bbox, gridDimension, transform, texture);
     }
 
     function hashCode(directVolume: DirectVolume) {
         return hashFnv32a([
             directVolume.bboxSize.ref.version, directVolume.gridDimension.ref.version,
             directVolume.gridTexture.ref.version, directVolume.transform.ref.version,
-        ])
+        ]);
     }
 
     function fromData(bbox: Box3D, gridDimension: Vec3, transform: Mat4, texture: Texture): DirectVolume {
-        const boundingSphere = Sphere3D()
-        let currentHash = -1
+        const boundingSphere = Sphere3D();
+        let currentHash = -1;
 
-        const width = texture.getWidth()
-        const height = texture.getHeight()
-        const depth = texture.getDepth()
+        const width = texture.getWidth();
+        const height = texture.getHeight();
+        const depth = texture.getDepth();
 
         const directVolume = {
             kind: 'direct-volume' as const,
@@ -77,35 +77,35 @@ export namespace DirectVolume {
             bboxSize: ValueCell.create(Vec3.sub(Vec3.zero(), bbox.max, bbox.min)),
             transform: ValueCell.create(transform),
             get boundingSphere() {
-                const newHash = hashCode(directVolume)
+                const newHash = hashCode(directVolume);
                 if (newHash !== currentHash) {
-                    const b = getBoundingSphere(directVolume.gridDimension.ref.value, directVolume.transform.ref.value)
-                    Sphere3D.copy(boundingSphere, b)
-                    currentHash = newHash
+                    const b = getBoundingSphere(directVolume.gridDimension.ref.value, directVolume.transform.ref.value);
+                    Sphere3D.copy(boundingSphere, b);
+                    currentHash = newHash;
                 }
-                return boundingSphere
+                return boundingSphere;
             },
-        }
-        return directVolume
+        };
+        return directVolume;
     }
 
     function update(bbox: Box3D, gridDimension: Vec3, transform: Mat4, texture: Texture, directVolume: DirectVolume): DirectVolume {
-        const width = texture.getWidth()
-        const height = texture.getHeight()
-        const depth = texture.getDepth()
-
-        ValueCell.update(directVolume.gridDimension, gridDimension)
-        ValueCell.update(directVolume.gridTexture, texture)
-        ValueCell.update(directVolume.gridTextureDim, Vec3.set(directVolume.gridTextureDim.ref.value, width, height, depth))
-        ValueCell.update(directVolume.bboxMin, bbox.min)
-        ValueCell.update(directVolume.bboxMax, bbox.max)
-        ValueCell.update(directVolume.bboxSize, Vec3.sub(directVolume.bboxSize.ref.value, bbox.max, bbox.min))
-        ValueCell.update(directVolume.transform, transform)
-        return directVolume
+        const width = texture.getWidth();
+        const height = texture.getHeight();
+        const depth = texture.getDepth();
+
+        ValueCell.update(directVolume.gridDimension, gridDimension);
+        ValueCell.update(directVolume.gridTexture, texture);
+        ValueCell.update(directVolume.gridTextureDim, Vec3.set(directVolume.gridTextureDim.ref.value, width, height, depth));
+        ValueCell.update(directVolume.bboxMin, bbox.min);
+        ValueCell.update(directVolume.bboxMax, bbox.max);
+        ValueCell.update(directVolume.bboxSize, Vec3.sub(directVolume.bboxSize.ref.value, bbox.max, bbox.min));
+        ValueCell.update(directVolume.transform, transform);
+        return directVolume;
     }
 
     export function createEmpty(directVolume?: DirectVolume): DirectVolume {
-        return {} as DirectVolume // TODO
+        return {} as DirectVolume; // TODO
     }
 
     export const Params = {
@@ -117,7 +117,7 @@ export namespace DirectVolume {
             Vec2.create(0.79, 0.0), Vec2.create(0.8, 0.05), Vec2.create(0.85, 0.05), Vec2.create(0.86, 0.0),
         ]),
         list: PD.ColorList('red-yellow-blue'),
-    }
+    };
     export type Params = typeof Params
 
     export const Utils: GeometryUtils<DirectVolume, Params> = {
@@ -129,27 +129,27 @@ export namespace DirectVolume {
         updateBoundingSphere,
         createRenderableState,
         updateRenderableState
-    }
+    };
 
     function createValues(directVolume: DirectVolume, transform: TransformData, locationIt: LocationIterator, theme: Theme, props: PD.Values<Params>): DirectVolumeValues {
-        const { gridTexture, gridTextureDim } = directVolume
-        const { bboxSize, bboxMin, bboxMax, gridDimension, transform: gridTransform } = directVolume
+        const { gridTexture, gridTextureDim } = directVolume;
+        const { bboxSize, bboxMin, bboxMax, gridDimension, transform: gridTransform } = directVolume;
 
-        const { instanceCount, groupCount } = locationIt
-        const color = createColors(locationIt, theme.color)
-        const marker = createMarkers(instanceCount * groupCount)
-        const overpaint = createEmptyOverpaint()
-        const transparency = createEmptyTransparency()
+        const { instanceCount, groupCount } = locationIt;
+        const color = createColors(locationIt, theme.color);
+        const marker = createMarkers(instanceCount * groupCount);
+        const overpaint = createEmptyOverpaint();
+        const transparency = createEmptyTransparency();
 
-        const counts = { drawCount: VolumeBox.indices.length, groupCount, instanceCount }
+        const counts = { drawCount: VolumeBox.indices.length, groupCount, instanceCount };
 
-        const invariantBoundingSphere = Sphere3D.clone(directVolume.boundingSphere)
-        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount)
+        const invariantBoundingSphere = Sphere3D.clone(directVolume.boundingSphere);
+        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
-        const controlPoints = getControlPointsFromVec2Array(props.controlPoints)
-        const transferTex = createTransferFunctionTexture(controlPoints, props.list.colors)
+        const controlPoints = getControlPointsFromVec2Array(props.controlPoints);
+        const transferTex = createTransferFunctionTexture(controlPoints, props.list.colors);
 
-        const maxSteps = Math.ceil(Vec3.magnitude(gridDimension.ref.value)) * 2 * 5
+        const maxSteps = Math.ceil(Vec3.magnitude(gridDimension.ref.value)) * 2 * 5;
 
         return {
             ...color,
@@ -177,60 +177,60 @@ export namespace DirectVolume {
             dGridTexType: ValueCell.create(gridTexture.ref.value.getDepth() > 0 ? '3d' : '2d'),
             uGridTexDim: gridTextureDim,
             tGridTex: gridTexture,
-        }
+        };
     }
 
     function createValuesSimple(directVolume: DirectVolume, props: Partial<PD.Values<Params>>, colorValue: Color, sizeValue: number, transform?: TransformData) {
-        const s = BaseGeometry.createSimple(colorValue, sizeValue, transform)
-        const p = { ...PD.getDefaultValues(Params), ...props }
-        return createValues(directVolume, s.transform, s.locationIterator, s.theme, p)
+        const s = BaseGeometry.createSimple(colorValue, sizeValue, transform);
+        const p = { ...PD.getDefaultValues(Params), ...props };
+        return createValues(directVolume, s.transform, s.locationIterator, s.theme, p);
     }
 
     function updateValues(values: DirectVolumeValues, props: PD.Values<Params>) {
-        ValueCell.updateIfChanged(values.uIsoValue, props.isoValueNorm)
-        ValueCell.updateIfChanged(values.uAlpha, props.alpha)
-        ValueCell.updateIfChanged(values.dRenderMode, props.renderMode)
+        ValueCell.updateIfChanged(values.uIsoValue, props.isoValueNorm);
+        ValueCell.updateIfChanged(values.uAlpha, props.alpha);
+        ValueCell.updateIfChanged(values.dRenderMode, props.renderMode);
 
-        const controlPoints = getControlPointsFromVec2Array(props.controlPoints)
-        createTransferFunctionTexture(controlPoints, props.list.colors, values.tTransferTex)
+        const controlPoints = getControlPointsFromVec2Array(props.controlPoints);
+        createTransferFunctionTexture(controlPoints, props.list.colors, values.tTransferTex);
     }
 
     function updateBoundingSphere(values: DirectVolumeValues, directVolume: DirectVolume) {
-        const invariantBoundingSphere = Sphere3D.clone(directVolume.boundingSphere)
-        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, values.aTransform.ref.value, values.instanceCount.ref.value)
+        const invariantBoundingSphere = Sphere3D.clone(directVolume.boundingSphere);
+        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, values.aTransform.ref.value, values.instanceCount.ref.value);
 
         if (!Sphere3D.equals(boundingSphere, values.boundingSphere.ref.value)) {
-            ValueCell.update(values.boundingSphere, boundingSphere)
+            ValueCell.update(values.boundingSphere, boundingSphere);
         }
         if (!Sphere3D.equals(invariantBoundingSphere, values.invariantBoundingSphere.ref.value)) {
-            ValueCell.update(values.invariantBoundingSphere, invariantBoundingSphere)
+            ValueCell.update(values.invariantBoundingSphere, invariantBoundingSphere);
         }
     }
 
     function createRenderableState(props: PD.Values<Params>): RenderableState {
-        const state = BaseGeometry.createRenderableState(props)
-        state.opaque = false
-        return state
+        const state = BaseGeometry.createRenderableState(props);
+        state.opaque = false;
+        return state;
     }
 
     function updateRenderableState(state: RenderableState, props: PD.Values<Params>) {
-        BaseGeometry.updateRenderableState(state, props)
-        state.opaque = false
+        BaseGeometry.updateRenderableState(state, props);
+        state.opaque = false;
     }
 }
 
 //
 
-const mTmp = Mat4.identity()
-const mTmp2 = Mat4.identity()
-const vHalfUnit = Vec3.create(0.5, 0.5, 0.5)
-const tmpVertices = new Float32Array(VolumeBox.vertices.length)
+const mTmp = Mat4.identity();
+const mTmp2 = Mat4.identity();
+const vHalfUnit = Vec3.create(0.5, 0.5, 0.5);
+const tmpVertices = new Float32Array(VolumeBox.vertices.length);
 function getBoundingSphere(gridDimension: Vec3, gridTransform: Mat4) {
-    tmpVertices.set(VolumeBox.vertices)
-    Mat4.fromTranslation(mTmp, vHalfUnit)
-    Mat4.mul(mTmp, Mat4.fromScaling(mTmp2, gridDimension), mTmp)
-    Mat4.mul(mTmp, gridTransform, mTmp)
-    transformPositionArray(mTmp, tmpVertices, 0, tmpVertices.length / 3)
-    return calculateInvariantBoundingSphere(tmpVertices, tmpVertices.length / 3, 1)
+    tmpVertices.set(VolumeBox.vertices);
+    Mat4.fromTranslation(mTmp, vHalfUnit);
+    Mat4.mul(mTmp, Mat4.fromScaling(mTmp2, gridDimension), mTmp);
+    Mat4.mul(mTmp, gridTransform, mTmp);
+    transformPositionArray(mTmp, tmpVertices, 0, tmpVertices.length / 3);
+    return calculateInvariantBoundingSphere(tmpVertices, tmpVertices.length / 3, 1);
     // return calculateBoundingSphere(tmpVertices, tmpVertices.length / 3, transform, transformCount)
 }

src/mol-geo/geometry/direct-volume/transfer-function.ts

@@ -15,13 +15,13 @@ export interface ControlPoint { x: number, alpha: number }
 
 export function getControlPointsFromString(s: string): ControlPoint[] {
     return s.split(/\s*,\s*/).map(p => {
-        const ps = p.split(/\s*:\s*/)
-        return { x: parseFloat(ps[0]), alpha: parseFloat(ps[1]) }
-    })
+        const ps = p.split(/\s*:\s*/);
+        return { x: parseFloat(ps[0]), alpha: parseFloat(ps[1]) };
+    });
 }
 
 export function getControlPointsFromVec2Array(array: Vec2[]): ControlPoint[] {
-    return array.map(v => ({ x: v[0], alpha: v[1] }))
+    return array.map(v => ({ x: v[0], alpha: v[1] }));
 }
 
 export function createTransferFunctionTexture(controlPoints: ControlPoint[], listOrName: Color[] | ColorListName, texture?: ValueCell<TextureImage<Uint8Array>>): ValueCell<TextureImage<Uint8Array>> {
@@ -31,40 +31,40 @@ export function createTransferFunctionTexture(controlPoints: ControlPoint[], lis
         ...controlPoints,
         { x: 1, alpha: 0 },
         { x: 1, alpha: 0 },
-    ]
-    const scale = ColorScale.create({ domain: [0, 1], listOrName })
+    ];
+    const scale = ColorScale.create({ domain: [0, 1], listOrName });
 
-    const n = 256
-    const array = texture ? texture.ref.value.array : new Uint8Array(n * 4)
+    const n = 256;
+    const array = texture ? texture.ref.value.array : new Uint8Array(n * 4);
 
-    let k = 0
-    let x1: number, x2: number
-    let a0: number, a1: number, a2: number, a3: number
+    let k = 0;
+    let x1: number, x2: number;
+    let a0: number, a1: number, a2: number, a3: number;
 
-    const il = controlPoints.length + 1
+    const il = controlPoints.length + 1;
     for (let i = 0; i < il; ++i) {
-        x1 = cp[i + 1].x
-        x2 = cp[i + 2].x
+        x1 = cp[i + 1].x;
+        x2 = cp[i + 2].x;
 
-        a0 = cp[i].alpha
-        a1 = cp[i + 1].alpha
-        a2 = cp[i + 2].alpha
-        a3 = cp[i + 3].alpha
+        a0 = cp[i].alpha;
+        a1 = cp[i + 1].alpha;
+        a2 = cp[i + 2].alpha;
+        a3 = cp[i + 3].alpha;
 
-        const jl = Math.round((x2 - x1) * n)
+        const jl = Math.round((x2 - x1) * n);
         for (let j = 0; j < jl; ++j) {
-            const t = j / jl
-            array[k * 4 + 3] = Math.max(0, spline(a0, a1, a2, a3, t, 0.5) * 255)
-            scale.colorToArray(k / 255, array, k * 4)
-            ++k
+            const t = j / jl;
+            array[k * 4 + 3] = Math.max(0, spline(a0, a1, a2, a3, t, 0.5) * 255);
+            scale.colorToArray(k / 255, array, k * 4);
+            ++k;
         }
     }
 
-    const textureImage = { array, width: 256, height: 1 }
+    const textureImage = { array, width: 256, height: 1 };
     if (texture) {
-        ValueCell.update(texture, textureImage)
-        return texture
+        ValueCell.update(texture, textureImage);
+        return texture;
     } else {
-        return ValueCell.create(textureImage)
+        return ValueCell.create(textureImage);
     }
 }

src/mol-geo/geometry/geometry.ts

@@ -12,7 +12,7 @@ import { LocationIterator } from '../util/location-iterator';
 import { ColorType } from './color-data';
 import { SizeType } from './size-data';
 import { Lines } from './lines/lines';
-import { ParamDefinition as PD } from '../../mol-util/param-definition'
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { DirectVolume } from './direct-volume/direct-volume';
 import { Color } from '../../mol-util/color';
 import { Spheres } from './spheres/spheres';
@@ -58,13 +58,13 @@ export namespace Geometry {
 
     export function getDrawCount(geometry: Geometry): number {
         switch (geometry.kind) {
-            case 'mesh': return geometry.triangleCount * 3
-            case 'points': return geometry.pointCount
-            case 'spheres': return geometry.sphereCount * 2 * 3
-            case 'text': return geometry.charCount * 2 * 3
-            case 'lines': return geometry.lineCount * 2 * 3
-            case 'direct-volume': return 12 * 3
-            case 'texture-mesh': return geometry.vertexCount
+            case 'mesh': return geometry.triangleCount * 3;
+            case 'points': return geometry.pointCount;
+            case 'spheres': return geometry.sphereCount * 2 * 3;
+            case 'text': return geometry.charCount * 2 * 3;
+            case 'lines': return geometry.lineCount * 2 * 3;
+            case 'direct-volume': return 12 * 3;
+            case 'texture-mesh': return geometry.vertexCount;
         }
     }
 
@@ -75,30 +75,30 @@ export namespace Geometry {
             case 'spheres':
             case 'text':
             case 'lines':
-                return getDrawCount(geometry) === 0 ? 0 : (arrayMax(geometry.groupBuffer.ref.value) + 1)
+                return getDrawCount(geometry) === 0 ? 0 : (arrayMax(geometry.groupBuffer.ref.value) + 1);
             case 'direct-volume':
-                return 1
+                return 1;
             case 'texture-mesh':
-                return geometry.groupCount
+                return geometry.groupCount;
         }
     }
 
     export function getUtils<G extends Geometry>(geometry: G): GeometryUtils<G> {
         // TODO avoid casting
         switch (geometry.kind) {
-            case 'mesh': return Mesh.Utils as any
-            case 'points': return Points.Utils as any
-            case 'spheres': return Spheres.Utils as any
-            case 'text': return Text.Utils as any
-            case 'lines': return Lines.Utils as any
-            case 'direct-volume': return DirectVolume.Utils as any
-            case 'texture-mesh': return TextureMesh.Utils as any
+            case 'mesh': return Mesh.Utils as any;
+            case 'points': return Points.Utils as any;
+            case 'spheres': return Spheres.Utils as any;
+            case 'text': return Text.Utils as any;
+            case 'lines': return Lines.Utils as any;
+            case 'direct-volume': return DirectVolume.Utils as any;
+            case 'texture-mesh': return TextureMesh.Utils as any;
         }
     }
 
     export function getGranularity(locationIt: LocationIterator, granularity: ColorType | SizeType) {
         // Always use 'group' granularity for 'complex' location iterators,
         // i.e. for which an instance may include multiple units
-        return granularity === 'instance' && locationIt.isComplex ? 'group' : granularity
+        return granularity === 'instance' && locationIt.isComplex ? 'group' : granularity;
     }
 }

src/mol-geo/geometry/lines/lines-builder.ts

@@ -17,9 +17,9 @@ export interface LinesBuilder {
     getLines(): Lines
 }
 
-const tmpVecA = Vec3()
-const tmpVecB = Vec3()
-const tmpDir = Vec3()
+const tmpVecA = Vec3();
+const tmpVecB = Vec3();
+const tmpDir = Vec3();
 
 export namespace LinesBuilder {
     export function create(initialCount = 2048, chunkSize = 1024, lines?: Lines): LinesBuilder {
@@ -30,7 +30,7 @@ export namespace LinesBuilder {
         const ends = ChunkedArray.create(Float32Array, 3, chunkSize, lines ? lines.endBuffer.ref.value : initialCount);
 
         const add = (startX: number, startY: number, startZ: number, endX: number, endY: number, endZ: number, group: number) => {
-            const offset = mappings.elementCount
+            const offset = mappings.elementCount;
             for (let i = 0; i < 4; ++i) {
                 ChunkedArray.add3(starts, startX, startY, startZ);
                 ChunkedArray.add3(ends, endX, endY, endZ);
@@ -42,49 +42,49 @@ export namespace LinesBuilder {
             ChunkedArray.add2(mappings, 1, -1);
             ChunkedArray.add3(indices, offset, offset + 1, offset + 2);
             ChunkedArray.add3(indices, offset + 1, offset + 3, offset + 2);
-        }
+        };
 
         const addFixedCountDashes = (start: Vec3, end: Vec3, segmentCount: number, group: number) => {
-            const d = Vec3.distance(start, end)
-            const s = Math.floor(segmentCount / 2)
-            const step = 1 / segmentCount
+            const d = Vec3.distance(start, end);
+            const s = Math.floor(segmentCount / 2);
+            const step = 1 / segmentCount;
 
-            Vec3.sub(tmpDir, end, start)
+            Vec3.sub(tmpDir, end, start);
             for (let j = 0; j < s; ++j) {
-                const f = step * (j * 2 + 1)
-                Vec3.setMagnitude(tmpDir, tmpDir, d * f)
-                Vec3.add(tmpVecA, start, tmpDir)
-                Vec3.setMagnitude(tmpDir, tmpDir, d * step * ((j + 1) * 2))
-                Vec3.add(tmpVecB, start, tmpDir)
-                add(tmpVecA[0], tmpVecA[1], tmpVecA[2], tmpVecB[0], tmpVecB[1], tmpVecB[2], group)
+                const f = step * (j * 2 + 1);
+                Vec3.setMagnitude(tmpDir, tmpDir, d * f);
+                Vec3.add(tmpVecA, start, tmpDir);
+                Vec3.setMagnitude(tmpDir, tmpDir, d * step * ((j + 1) * 2));
+                Vec3.add(tmpVecB, start, tmpDir);
+                add(tmpVecA[0], tmpVecA[1], tmpVecA[2], tmpVecB[0], tmpVecB[1], tmpVecB[2], group);
             }
-        }
+        };
 
         return {
             add,
             addFixedCountDashes,
             addFixedLengthDashes: (start: Vec3, end: Vec3, segmentLength: number, group: number) => {
-                const d = Vec3.distance(start, end)
-                addFixedCountDashes(start, end, d / segmentLength, group)
+                const d = Vec3.distance(start, end);
+                addFixedCountDashes(start, end, d / segmentLength, group);
             },
             addCage: (t: Mat4, cage: Cage, group: number) => {
-                const { vertices, edges } = cage
+                const { vertices, edges } = cage;
                 for (let i = 0, il = edges.length; i < il; i += 2) {
-                    Vec3.fromArray(tmpVecA, vertices, edges[i] * 3)
-                    Vec3.fromArray(tmpVecB, vertices, edges[i + 1] * 3)
-                    Vec3.transformMat4(tmpVecA, tmpVecA, t)
-                    Vec3.transformMat4(tmpVecB, tmpVecB, t)
-                    add(tmpVecA[0], tmpVecA[1], tmpVecA[2], tmpVecB[0], tmpVecB[1], tmpVecB[2], group)
+                    Vec3.fromArray(tmpVecA, vertices, edges[i] * 3);
+                    Vec3.fromArray(tmpVecB, vertices, edges[i + 1] * 3);
+                    Vec3.transformMat4(tmpVecA, tmpVecA, t);
+                    Vec3.transformMat4(tmpVecB, tmpVecB, t);
+                    add(tmpVecA[0], tmpVecA[1], tmpVecA[2], tmpVecB[0], tmpVecB[1], tmpVecB[2], group);
                 }
             },
             getLines: () => {
-                const mb = ChunkedArray.compact(mappings, true) as Float32Array
-                const ib = ChunkedArray.compact(indices, true) as Uint32Array
-                const gb = ChunkedArray.compact(groups, true) as Float32Array
-                const sb = ChunkedArray.compact(starts, true) as Float32Array
-                const eb = ChunkedArray.compact(ends, true) as Float32Array
-                return Lines.create(mb, ib, gb, sb, eb, indices.elementCount / 2)
+                const mb = ChunkedArray.compact(mappings, true) as Float32Array;
+                const ib = ChunkedArray.compact(indices, true) as Uint32Array;
+                const gb = ChunkedArray.compact(groups, true) as Float32Array;
+                const sb = ChunkedArray.compact(starts, true) as Float32Array;
+                const eb = ChunkedArray.compact(ends, true) as Float32Array;
+                return Lines.create(mb, ib, gb, sb, eb, indices.elementCount / 2);
             }
-        }
+        };
     }
 }

src/mol-geo/geometry/lines/lines.ts

@@ -4,8 +4,8 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { ValueCell } from '../../../mol-util'
-import { Mat4 } from '../../../mol-math/linear-algebra'
+import { ValueCell } from '../../../mol-util';
+import { Mat4 } from '../../../mol-math/linear-algebra';
 import { transformPositionArray, GroupMapping, createGroupMapping} from '../../util';
 import { GeometryUtils } from '../geometry';
 import { createColors } from '../color-data';
@@ -56,24 +56,24 @@ export namespace Lines {
     export function create(mappings: Float32Array, indices: Uint32Array, groups: Float32Array, starts: Float32Array, ends: Float32Array, lineCount: number, lines?: Lines): Lines {
         return lines ?
             update(mappings, indices, groups, starts, ends, lineCount, lines) :
-            fromArrays(mappings, indices, groups, starts, ends, lineCount)
+            fromArrays(mappings, indices, groups, starts, ends, lineCount);
     }
 
     export function createEmpty(lines?: Lines): Lines {
-        const mb = lines ? lines.mappingBuffer.ref.value : new Float32Array(0)
-        const ib = lines ? lines.indexBuffer.ref.value : new Uint32Array(0)
-        const gb = lines ? lines.groupBuffer.ref.value : new Float32Array(0)
-        const sb = lines ? lines.startBuffer.ref.value : new Float32Array(0)
-        const eb = lines ? lines.endBuffer.ref.value : new Float32Array(0)
-        return create(mb, ib, gb, sb, eb, 0, lines)
+        const mb = lines ? lines.mappingBuffer.ref.value : new Float32Array(0);
+        const ib = lines ? lines.indexBuffer.ref.value : new Uint32Array(0);
+        const gb = lines ? lines.groupBuffer.ref.value : new Float32Array(0);
+        const sb = lines ? lines.startBuffer.ref.value : new Float32Array(0);
+        const eb = lines ? lines.endBuffer.ref.value : new Float32Array(0);
+        return create(mb, ib, gb, sb, eb, 0, lines);
     }
 
     export function fromMesh(mesh: Mesh, lines?: Lines) {
-        const vb = mesh.vertexBuffer.ref.value
-        const ib = mesh.indexBuffer.ref.value
-        const gb = mesh.groupBuffer.ref.value
+        const vb = mesh.vertexBuffer.ref.value;
+        const ib = mesh.indexBuffer.ref.value;
+        const gb = mesh.groupBuffer.ref.value;
 
-        const builder = LinesBuilder.create(mesh.triangleCount * 3, mesh.triangleCount / 10, lines)
+        const builder = LinesBuilder.create(mesh.triangleCount * 3, mesh.triangleCount / 10, lines);
 
         // TODO avoid duplicate lines
         for (let i = 0, il = mesh.triangleCount * 3; i < il; i += 3) {
@@ -81,9 +81,9 @@ export namespace Lines {
             const x0 = vb[i0 * 3], y0 = vb[i0 * 3 + 1], z0 = vb[i0 * 3 + 2];
             const x1 = vb[i1 * 3], y1 = vb[i1 * 3 + 1], z1 = vb[i1 * 3 + 2];
             const x2 = vb[i2 * 3], y2 = vb[i2 * 3 + 1], z2 = vb[i2 * 3 + 2];
-            builder.add(x0, y0, z0, x1, y1, z1, gb[i0])
-            builder.add(x0, y0, z0, x2, y2, z2, gb[i0])
-            builder.add(x1, y1, z1, x2, y2, z2, gb[i1])
+            builder.add(x0, y0, z0, x1, y1, z1, gb[i0]);
+            builder.add(x0, y0, z0, x2, y2, z2, gb[i0]);
+            builder.add(x1, y1, z1, x2, y2, z2, gb[i1]);
         }
 
         return builder.getLines();
@@ -93,16 +93,16 @@ export namespace Lines {
         return hashFnv32a([
             lines.lineCount, lines.mappingBuffer.ref.version, lines.indexBuffer.ref.version,
             lines.groupBuffer.ref.version, lines.startBuffer.ref.version, lines.startBuffer.ref.version
-        ])
+        ]);
     }
 
     function fromArrays(mappings: Float32Array, indices: Uint32Array, groups: Float32Array, starts: Float32Array, ends: Float32Array, lineCount: number): Lines {
 
-        const boundingSphere = Sphere3D()
-        let groupMapping: GroupMapping
+        const boundingSphere = Sphere3D();
+        let groupMapping: GroupMapping;
 
-        let currentHash = -1
-        let currentGroup = -1
+        let currentHash = -1;
+        let currentGroup = -1;
 
         const lines = {
             kind: 'lines' as const,
@@ -113,47 +113,47 @@ export namespace Lines {
             startBuffer: ValueCell.create(starts),
             endBuffer: ValueCell.create(ends),
             get boundingSphere() {
-                const newHash = hashCode(lines)
+                const newHash = hashCode(lines);
                 if (newHash !== currentHash) {
-                    const s = calculateInvariantBoundingSphere(lines.startBuffer.ref.value, lines.lineCount * 4, 4)
-                    const e = calculateInvariantBoundingSphere(lines.endBuffer.ref.value, lines.lineCount * 4, 4)
+                    const s = calculateInvariantBoundingSphere(lines.startBuffer.ref.value, lines.lineCount * 4, 4);
+                    const e = calculateInvariantBoundingSphere(lines.endBuffer.ref.value, lines.lineCount * 4, 4);
 
-                    Sphere3D.expandBySphere(boundingSphere, s, e)
-                    currentHash = newHash
+                    Sphere3D.expandBySphere(boundingSphere, s, e);
+                    currentHash = newHash;
                 }
-                return boundingSphere
+                return boundingSphere;
             },
             get groupMapping() {
                 if (lines.groupBuffer.ref.version !== currentGroup) {
-                    groupMapping = createGroupMapping(lines.groupBuffer.ref.value, lines.lineCount, 4)
-                    currentGroup = lines.groupBuffer.ref.version
+                    groupMapping = createGroupMapping(lines.groupBuffer.ref.value, lines.lineCount, 4);
+                    currentGroup = lines.groupBuffer.ref.version;
                 }
-                return groupMapping
+                return groupMapping;
             },
             setBoundingSphere(sphere: Sphere3D) {
-                Sphere3D.copy(boundingSphere, sphere)
-                currentHash = hashCode(lines)
+                Sphere3D.copy(boundingSphere, sphere);
+                currentHash = hashCode(lines);
             }
-        }
-        return lines
+        };
+        return lines;
     }
 
     function update(mappings: Float32Array, indices: Uint32Array, groups: Float32Array, starts: Float32Array, ends: Float32Array, lineCount: number, lines: Lines) {
-        lines.lineCount = lineCount
-        ValueCell.update(lines.mappingBuffer, mappings)
-        ValueCell.update(lines.indexBuffer, indices)
-        ValueCell.update(lines.groupBuffer, groups)
-        ValueCell.update(lines.startBuffer, starts)
-        ValueCell.update(lines.endBuffer, ends)
-        return lines
+        lines.lineCount = lineCount;
+        ValueCell.update(lines.mappingBuffer, mappings);
+        ValueCell.update(lines.indexBuffer, indices);
+        ValueCell.update(lines.groupBuffer, groups);
+        ValueCell.update(lines.startBuffer, starts);
+        ValueCell.update(lines.endBuffer, ends);
+        return lines;
     }
 
     export function transform(lines: Lines, t: Mat4) {
-        const start = lines.startBuffer.ref.value
-        transformPositionArray(t, start, 0, lines.lineCount * 4)
+        const start = lines.startBuffer.ref.value;
+        transformPositionArray(t, start, 0, lines.lineCount * 4);
         ValueCell.update(lines.startBuffer, start);
-        const end = lines.endBuffer.ref.value
-        transformPositionArray(t, end, 0, lines.lineCount * 4)
+        const end = lines.endBuffer.ref.value;
+        transformPositionArray(t, end, 0, lines.lineCount * 4);
         ValueCell.update(lines.endBuffer, end);
     }
 
@@ -163,7 +163,7 @@ export namespace Lines {
         ...BaseGeometry.Params,
         sizeFactor: PD.Numeric(1, { min: 0, max: 10, step: 0.1 }),
         lineSizeAttenuation: PD.Boolean(false),
-    }
+    };
     export type Params = typeof Params
 
     export const Utils: GeometryUtils<Lines, Params> = {
@@ -175,20 +175,20 @@ export namespace Lines {
         updateBoundingSphere,
         createRenderableState: BaseGeometry.createRenderableState,
         updateRenderableState: BaseGeometry.updateRenderableState
-    }
+    };
 
     function createValues(lines: Lines, transform: TransformData, locationIt: LocationIterator, theme: Theme, props: PD.Values<Params>): LinesValues {
-        const { instanceCount, groupCount } = locationIt
-        const color = createColors(locationIt, theme.color)
-        const size = createSizes(locationIt, theme.size)
-        const marker = createMarkers(instanceCount * groupCount)
-        const overpaint = createEmptyOverpaint()
-        const transparency = createEmptyTransparency()
+        const { instanceCount, groupCount } = locationIt;
+        const color = createColors(locationIt, theme.color);
+        const size = createSizes(locationIt, theme.size);
+        const marker = createMarkers(instanceCount * groupCount);
+        const overpaint = createEmptyOverpaint();
+        const transparency = createEmptyTransparency();
 
-        const counts = { drawCount: lines.lineCount * 2 * 3, groupCount, instanceCount }
+        const counts = { drawCount: lines.lineCount * 2 * 3, groupCount, instanceCount };
 
-        const invariantBoundingSphere = Sphere3D.clone(lines.boundingSphere)
-        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount)
+        const invariantBoundingSphere = Sphere3D.clone(lines.boundingSphere);
+        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
 
         return {
             aMapping: lines.mappingBuffer,
@@ -210,30 +210,30 @@ export namespace Lines {
             dLineSizeAttenuation: ValueCell.create(props.lineSizeAttenuation),
             dDoubleSided: ValueCell.create(true),
             dFlipSided: ValueCell.create(false),
-        }
+        };
     }
 
     function createValuesSimple(lines: Lines, props: Partial<PD.Values<Params>>, colorValue: Color, sizeValue: number, transform?: TransformData) {
-        const s = BaseGeometry.createSimple(colorValue, sizeValue, transform)
-        const p = { ...PD.getDefaultValues(Params), ...props }
-        return createValues(lines, s.transform, s.locationIterator, s.theme, p)
+        const s = BaseGeometry.createSimple(colorValue, sizeValue, transform);
+        const p = { ...PD.getDefaultValues(Params), ...props };
+        return createValues(lines, s.transform, s.locationIterator, s.theme, p);
     }
 
     function updateValues(values: LinesValues, props: PD.Values<Params>) {
-        BaseGeometry.updateValues(values, props)
-        ValueCell.updateIfChanged(values.uSizeFactor, props.sizeFactor)
-        ValueCell.updateIfChanged(values.dLineSizeAttenuation, props.lineSizeAttenuation)
+        BaseGeometry.updateValues(values, props);
+        ValueCell.updateIfChanged(values.uSizeFactor, props.sizeFactor);
+        ValueCell.updateIfChanged(values.dLineSizeAttenuation, props.lineSizeAttenuation);
     }
 
     function updateBoundingSphere(values: LinesValues, lines: Lines) {
-        const invariantBoundingSphere = Sphere3D.clone(lines.boundingSphere)
-        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, values.aTransform.ref.value, values.instanceCount.ref.value)
+        const invariantBoundingSphere = Sphere3D.clone(lines.boundingSphere);
+        const boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, values.aTransform.ref.value, values.instanceCount.ref.value);
 
         if (!Sphere3D.equals(boundingSphere, values.boundingSphere.ref.value)) {
-            ValueCell.update(values.boundingSphere, boundingSphere)
+            ValueCell.update(values.boundingSphere, boundingSphere);
         }
         if (!Sphere3D.equals(invariantBoundingSphere, values.invariantBoundingSphere.ref.value)) {
-            ValueCell.update(values.invariantBoundingSphere, invariantBoundingSphere)
+            ValueCell.update(values.invariantBoundingSphere, invariantBoundingSphere);
         }
     }
 }

src/mol-geo/geometry/marker-data.ts

@@ -4,8 +4,8 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { ValueCell } from '../../mol-util/value-cell'
-import { Vec2 } from '../../mol-math/linear-algebra'
+import { ValueCell } from '../../mol-util/value-cell';
+import { Vec2 } from '../../mol-math/linear-algebra';
 import { TextureImage, createTextureImage } from '../../mol-gl/renderable/util';
 
 export type MarkerData = {
@@ -14,29 +14,29 @@ export type MarkerData = {
 }
 
 export function createMarkers(count: number, markerData?: MarkerData): MarkerData {
-    const markers = createTextureImage(Math.max(1, count), 1, Uint8Array, markerData && markerData.tMarker.ref.value.array)
+    const markers = createTextureImage(Math.max(1, count), 1, Uint8Array, markerData && markerData.tMarker.ref.value.array);
     if (markerData) {
-        ValueCell.update(markerData.tMarker, markers)
-        ValueCell.update(markerData.uMarkerTexDim, Vec2.create(markers.width, markers.height))
-        return markerData
+        ValueCell.update(markerData.tMarker, markers);
+        ValueCell.update(markerData.uMarkerTexDim, Vec2.create(markers.width, markers.height));
+        return markerData;
     } else {
         return {
             tMarker: ValueCell.create(markers),
             uMarkerTexDim: ValueCell.create(Vec2.create(markers.width, markers.height)),
-        }
+        };
     }
 }
 
-const emptyMarkerTexture = { array: new Uint8Array(1), width: 1, height: 1 }
+const emptyMarkerTexture = { array: new Uint8Array(1), width: 1, height: 1 };
 export function createEmptyMarkers(markerData?: MarkerData): MarkerData {
     if (markerData) {
-        ValueCell.update(markerData.tMarker, emptyMarkerTexture)
-        ValueCell.update(markerData.uMarkerTexDim, Vec2.create(1, 1))
-        return markerData
+        ValueCell.update(markerData.tMarker, emptyMarkerTexture);
+        ValueCell.update(markerData.uMarkerTexDim, Vec2.create(1, 1));
+        return markerData;
     } else {
         return {
             tMarker: ValueCell.create(emptyMarkerTexture),
             uMarkerTexDim: ValueCell.create(Vec2.create(1, 1)),
-        }
+        };
     }
 }

src/mol-geo/geometry/mesh/builder/axes.ts

@@ -9,26 +9,26 @@ import { MeshBuilder } from '../mesh-builder';
 import { Axes3D } from '../../../../mol-math/geometry';
 import { createCage } from '../../../primitive/cage';
 
-const tmpVec = Vec3()
-const tmpMatrix = Mat4.identity()
+const tmpVec = Vec3();
+const tmpMatrix = Mat4.identity();
 
-const tmpVertices = new Float32Array(6 * 3)
-const tmpEdges = new Uint8Array([0, 1, 2, 3, 4, 5])
+const tmpVertices = new Float32Array(6 * 3);
+const tmpEdges = new Uint8Array([0, 1, 2, 3, 4, 5]);
 
 export function addAxes(state: MeshBuilder.State, axes: Axes3D, radiusScale: number, detail: number, radialSegments: number) {
-    const { origin, dirA, dirB, dirC } = axes
+    const { origin, dirA, dirB, dirC } = axes;
 
-    Vec3.add(tmpVec, origin, dirA)
-    Vec3.toArray(Vec3.add(tmpVec, origin, dirA), tmpVertices, 0)
-    Vec3.toArray(Vec3.sub(tmpVec, origin, dirA), tmpVertices, 3)
-    Vec3.toArray(Vec3.add(tmpVec, origin, dirB), tmpVertices, 6)
-    Vec3.toArray(Vec3.sub(tmpVec, origin, dirB), tmpVertices, 9)
-    Vec3.toArray(Vec3.add(tmpVec, origin, dirC), tmpVertices, 12)
-    Vec3.toArray(Vec3.sub(tmpVec, origin, dirC), tmpVertices, 15)
+    Vec3.add(tmpVec, origin, dirA);
+    Vec3.toArray(Vec3.add(tmpVec, origin, dirA), tmpVertices, 0);
+    Vec3.toArray(Vec3.sub(tmpVec, origin, dirA), tmpVertices, 3);
+    Vec3.toArray(Vec3.add(tmpVec, origin, dirB), tmpVertices, 6);
+    Vec3.toArray(Vec3.sub(tmpVec, origin, dirB), tmpVertices, 9);
+    Vec3.toArray(Vec3.add(tmpVec, origin, dirC), tmpVertices, 12);
+    Vec3.toArray(Vec3.sub(tmpVec, origin, dirC), tmpVertices, 15);
 
-    const cage = createCage(tmpVertices, tmpEdges)
-    const volume = Axes3D.volume(axes)
-    const radius = (Math.cbrt(volume) / 300) * radiusScale
+    const cage = createCage(tmpVertices, tmpEdges);
+    const volume = Axes3D.volume(axes);
+    const radius = (Math.cbrt(volume) / 300) * radiusScale;
 
-    MeshBuilder.addCage(state, tmpMatrix, cage, radius, detail, radialSegments)
+    MeshBuilder.addCage(state, tmpMatrix, cage, radius, detail, radialSegments);
 }