ReDNATCO plugin stage 8

src/apps/rednatco/color-picker.tsx

@@ -12,6 +12,8 @@ import ReactDOM from 'react-dom';
 import { Colors } from './colors';
 import { PushButton, SpinBox } from './controls';
 import { parseInt as parseIntMS } from '../../mol-io/reader/common/text/number-parser';
+import './assets/imgs/triangle-down.svg';
+import './assets/imgs/triangle-up.svg';
 
 const PALETTE_CURSOR_HALFSIZE = 10;
 const VALUE_CURSOR_THICKNESS = 3;

src/apps/rednatco/controls.tsx

 import React from 'react';
 
+export class CollapsibleVertical extends React.Component<CollapsibleVertical.Props, { collapsed: boolean }> {
+    constructor(props: CollapsibleVertical.Props) {
+        super(props);
+
+        this.state = {
+            collapsed: true,
+        };
+    }
+
+    render() {
+        return (
+            <div className='rmsp-collapsible-vertical'>
+                <div
+                    className='rmsp-collapsible-vertical-caption'
+                    onClick={() => this.setState({ ...this.state, collapsed: !this.state.collapsed })}
+                >
+                    {this.props.caption}
+                </div>
+                {this.state.collapsed ? undefined : this.props.children}
+            </div>
+        );
+    }
+}
+export namespace CollapsibleVertical {
+    export interface Props {
+        caption: string;
+    }
+}
+
 export class PushButton extends React.Component<{ text: string, enabled: boolean, onClick: () => void }> {
     render() {
         return (
@@ -77,18 +106,17 @@ export class SpinBox extends React.Component<SpinBox.Props> {
                 <div className='rmsp-spinbox-buttons'>
                     <img
                         className='rmsp-spinbox-button'
-                        src={`./${this.props.pathPrefix}assets/imgs/triangle-up.svg`} onClick={() => this.increase()}
+                        src={`./${this.props.pathPrefix}imgs/triangle-up.svg`} onClick={() => this.increase()}
                     />
                     <img
                         className='rmsp-spinbox-button'
-                        src={`./${this.props.pathPrefix}assets/imgs/triangle-down.svg`} onClick={() => this.decrease()}
+                        src={`./${this.props.pathPrefix}imgs/triangle-down.svg`} onClick={() => this.decrease()}
                     />
                 </div>
             </div>
         );
     }
 }
-
 export namespace SpinBox {
     export interface Formatter {
         (v: number|null): string;

src/apps/rednatco/index.html

@@ -9,7 +9,7 @@
         <script type="text/javascript" src="./molstar.js"></script>
         <script>
             async function loadStructure() {
-                const resp = await fetch('./1hmh_v41C35A23.cif');
+                const resp = await fetch('./1dk1_v41C35A23.cif');
                 const data = await resp.text();
 
                 molstar.ReDNATCOMspApi.loadStructure(data);

src/apps/rednatco/rednatco-molstar.css

@@ -36,12 +36,22 @@
     line-height: 1.5;
 }
 
-.rmsp-color-box {
-    display: flex;
+.rmsp-collapsible-vertical-caption {
+    background-color: var(--color-f);
+    color: var(--color-c);
+    padding: calc(0.5 * var(--x-gap));
+    transition: background-color var(--anim-speed);
+}
+.rmsp-collapsible-vertical-caption:hover {
+    background-color: var(--color-c);
+    color: black;
 }
 
-.rmsp-color-box-color {
-    flex: 1;
+.rmsp-color-box {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
 }
 
 .rmsp-color-picker-nest {
@@ -51,10 +61,12 @@
 }
 
 .rmsp-controls {
+    align-items: center;
     display: grid;
     grid-template-columns: auto 1fr;
     grid-column-gap: var(--h-gap);
-    overflow: scroll;
+    overflow: auto;
+    padding: calc(0.5 * var(--x-gap));
 }
 
 .rmsp-control-item-group {
@@ -96,7 +108,7 @@
 }
 
 .rmsp-togglebutton-switched-on {
-    background-color: green;
+    background-color: #26e326;
 }
 
 .rmsp-pushbutton-text {

src/apps/rednatco/util.ts

-import { OrderedSet } from '../../mol-data/int/ordered-set';
-import { ElementIndex, StructureElement, Unit } from '../../mol-model/structure';
+import { Color } from '../../mol-util/color';
 
-export function lociElements(loci: StructureElement.Loci) {
-    const es = loci.elements[0]; // Ignore anything but the first chuck
-
-    if (!Unit.isAtomic(es.unit))
-        return [];
-
-    const elems = new Array<ElementIndex>();
-    OrderedSet.forEach(es.indices, uI => elems.push(es.unit.elements[uI]));
-    return elems;
+/* https://alienryderflex.com/hsp.html */
+export function luminance(color: Color) {
+    let [r, g, b] = Color.toRgb(color);
+    r /= 255.0;
+    g /= 255.0;
+    b /= 255.0;
+    return Math.sqrt(0.299 * r * r + 0.587 * g * g + 0.114 * b * b);
 }

webpack.config.common.js

@@ -23,6 +23,16 @@ const sharedConfig = {
                     options: { name: '[name].[ext]' }
                 }]
             },
+            {
+                test: /\.svg$/,
+                use: [{
+                    loader: 'file-loader',
+                    options: {
+                        outputPath: 'assets/imgs',
+                        name: '[name].[ext]'
+                    }
+                }]
+            },
             {
                 test: /\.(s*)css$/,
                 use: [