separate build for servers

- because of problems with ES6 modules (might revert later)
+ css tweaks

docs/model-server/readme.md

@@ -54,12 +54,12 @@ Sometimes nodejs might run into problems with memory. This is usually resolved b
 
 ## Preprocessor
 
-The preprocessor application allows to add custom data to CIF files and/or convert CIF to BinaryCIF. ``node lib/servers/model/preprocess`` or ``model-server-preprocess`` binary from the NPM package.
+The preprocessor application allows to add custom data to CIF files and/or convert CIF to BinaryCIF. ``node lib/servers/servers/model/preprocess`` or ``model-server-preprocess`` binary from the NPM package.
 
 
 ## Local Mode
 
-The server can be run in local/file based mode using ``node lib/servers/model/query`` (``model-server-query`` binary from the NPM package).
+The server can be run in local/file based mode using ``node lib/servers/servers/model/query`` (``model-server-query`` binary from the NPM package).
 
 Custom Properties
 =================

docs/volume-server/README.md

@@ -28,7 +28,7 @@ npm run build-tsc
 and run the server by 
 
 ```
-node lib/servers/volume/server
+node lib/servers/servers/volume/server
 ```
 
 ## From NPM
@@ -60,11 +60,11 @@ Sometimes nodejs might run into problems with memory. This is usually resolved b
 ## Preparing the Data
 
 For the server to work, CCP4/MAP (models 0, 1, 2 are supported) input data need to be converted into a custom block format. 
-To achieve this, use the ``pack`` application (``node lib/servers/volume/pack`` or ``volume-server-pack`` binary from the NPM package).
+To achieve this, use the ``pack`` application (``node lib/servers/servers/volume/pack`` or ``volume-server-pack`` binary from the NPM package).
 
 ## Local Mode
 
-The program  ``lib/servers/volume/pack`` (``volume-server-query`` in NPM package) can be used to query the data without running a http server.
+The program  ``lib/servers/servers/volume/pack`` (``volume-server-query`` in NPM package) can be used to query the data without running a http server.
 
 ## Navigating the Source Code
 

package.json

@@ -15,22 +15,23 @@
     "lint-fix": "eslint ./**/*.{ts,tsx} --fix",
     "test": "npm run lint && jest",
     "build": "npm run build-tsc && npm run build-extra && npm run build-webpack",
-    "build-tsc": "tsc --incremental",
+    "build-tsc": "tsc --incremental && tsc --build src/servers --incremental",
     "build-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html,ico}\" lib/",
     "build-webpack": "webpack --mode production",
-    "watch": "concurrently -c \"green,gray,gray\" --names \"tsc,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack\"",
+    "watch": "concurrently -c \"green,green,gray,gray\" --names \"tsc,srv,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-servers\" \"npm:watch-extra\" \"npm:watch-webpack\"",
     "watch-viewer": "concurrently -c \"green,gray,gray\" --names \"tsc,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack-viewer\"",
     "watch-viewer-debug": "concurrently -c \"green,gray,gray\" --names \"tsc,ext,wpc\" --kill-others \"npm:watch-tsc\" \"npm:watch-extra\" \"npm:watch-webpack-viewer-debug\"",
     "watch-tsc": "tsc --watch --incremental",
+    "watch-servers": "tsc --build src/servers --watch --incremental",
     "watch-extra": "cpx \"src/**/*.{scss,woff,woff2,ttf,otf,eot,svg,html,ico}\" lib/ --watch",
     "watch-webpack": "webpack -w --mode development --display minimal",
     "watch-webpack-viewer": "webpack -w --mode development --display errors-only --info-verbosity verbose --config ./webpack.config.viewer.js",
     "watch-webpack-viewer-debug": "webpack -w --mode development --display errors-only --info-verbosity verbose --config ./webpack.config.viewer.debug.js",
     "serve": "http-server -p 1338",
-    "model-server": "node lib/servers/model/server.js",
-    "model-server-watch": "nodemon --watch lib lib/servers/model/server.js",
-    "volume-server-test": "node lib/servers/volume/server.js --idMap em 'test/${id}.mdb' --defaultPort 1336",
-    "plugin-state": "node lib/servers/plugin-state/index.js",
+    "model-server": "node lib/servers/servers/model/server.js",
+    "model-server-watch": "nodemon --watch lib lib/servers/servers/model/server.js",
+    "volume-server-test": "node lib/servers/servers/volume/server.js --idMap em 'test/${id}.mdb' --defaultPort 1336",
+    "plugin-state": "node lib/servers/servers/plugin-state/index.js",
     "preversion": "npm run test",
     "postversion": "git push && git push --tags",
     "prepublishOnly": "npm run test && npm run build"
@@ -41,12 +42,12 @@
   "bin": {
     "cif2bcif": "lib/apps/cif2bcif/index.js",
     "cifschema": "lib/apps/cifschema/index.js",
-    "model-server": "lib/servers/model/server.js",
-    "model-server-query": "lib/servers/model/local.js",
-    "model-server-preprocess": "lib/servers/model/preprocess.js",
-    "volume-server": "lib/servers/volume/server.js",
-    "volume-server-query": "lib/servers/volume/query.js",
-    "volume-server-pack": "lib/servers/volume/pack.js"
+    "model-server": "lib/servers/servers/model/server.js",
+    "model-server-query": "lib/servers/servers/model/local.js",
+    "model-server-preprocess": "lib/servers/servers/model/preprocess.js",
+    "volume-server": "lib/servers/servers/volume/server.js",
+    "volume-server-query": "lib/servers/servers/volume/query.js",
+    "volume-server-pack": "lib/servers/servers/volume/pack.js"
   },
   "nodemonConfig": {
     "ignoreRoot": [

src/mol-plugin-ui/controls/icons.tsx

@@ -11,10 +11,12 @@ export function Icon(props: {
     svg?: React.FC,
     // name?: IconName | undefined,
     style?: React.CSSProperties,
-    title?: string
+    title?: string,
+    /** Adds right margin to the icon */
+    inline?: boolean
 }) {
     if (!props.svg) return null;
-    return <span className='msp-icon msp-material-icon' title={props.title} style={props.style}><props.svg /></span>;
+    return <span className={`msp-icon msp-material-icon${props.inline ? ' msp-icon-inline' : ''}`} title={props.title} style={props.style}><props.svg /></span>;
 }
 
 //

src/mol-plugin-ui/controls/parameters.tsx

@@ -205,7 +205,7 @@ export class ParamHelp<L extends LegendData> extends React.PureComponent<{ legen
 
         return <div className='msp-help-text'>
             <div>
-                <div className='msp-help-description'><Icon svg={HelpOutline} />{description}</div>
+                <div className='msp-help-description'><Icon svg={HelpOutline} inline />{description}</div>
                 {Legend && <div className='msp-help-legend'><Legend legend={legend} /></div>}
             </div>
         </div>;

src/mol-plugin-ui/skin/base/base.scss

@@ -22,7 +22,6 @@
 
     @import "normalize";
 
-    @import 'icons';
     @import 'layout';
     @import 'ui';
     @import 'logo';

src/mol-plugin-ui/skin/base/components/controls-base.scss

@@ -330,4 +330,8 @@ select.msp-form-control:-moz-focusring {
         outline-offset: 0 !important;
         outline: none !important;
     }
+}
+
+.msp-icon-inline {
+    margin-right: 6px;
 }

src/mol-plugin-ui/skin/base/icons.scss

@@ -1,286 +0,0 @@
-[class^="msp-icon-"]:before, [class*=" msp-icon-"]:before {
-  font-family: "fontello";
-  font-style: normal;
-  font-weight: normal;
-
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  // line-height: 1em;
-
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
-
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.msp-svg-icon svg {
-  height: 2.25em;
-  width: 2.25em;
-}
-
-.msp-svg-icon {
-  display: inline-flex;
-  align-self: center;
-}
-
-.msp-icon-help-circle-expand {
-	width: 2.5em !important;
-}
-.msp-icon-help-circle-expand:before {
-	width: 2.5em !important;
-	content: "\e81d\0020\e885"; }
-.msp-icon-help-circle-collapse {
-	width: 2.5em !important;
-}
-.msp-icon-help-circle-collapse:before {
-	width: 2.5em !important;
-	content: "\e81d\0020\e883";
-}
-
-.msp-icon-mouse-plus:before { content: "\e8ba\e816"; }
-
-.msp-icon-expand-layout:before { content: "\e84a"; }
-.msp-icon-plus:before { content: "\e816"; }
-.msp-icon-minus:before { content: "\e819"; }
-.msp-icon-reset-scene:before { content: "\e891"; }
-.msp-icon-ok:before { content: "\e812"; }
-.msp-icon-back:before { content: "\e820"; }
-.msp-icon-block:before { content: "\e868"; }
-.msp-icon-off:before { content: "\e813"; }
-.msp-icon-expand:before { content: "\e885"; }
-.msp-icon-collapse:before { content: "\e883"; }
-.msp-icon-visual-visibility:before { content: "\e826"; }
-.msp-icon-abort:before { content: "\e814"; }
-.msp-icon-focus-on-visual:before { content: "\e8a3"; }
-.msp-icon-settings:before { content: "\e855"; }
-.msp-icon-tools:before { content: "\e856"; }
-.msp-icon-log:before { content: "\e8a5"; }
-.msp-icon-remove:before { content: "\e847"; }
-.msp-icon-help:before { content: "\e81c"; }
-.msp-icon-help-circle:before { content: "\e81d"; }
-.msp-icon-info:before { content: "\e81e"; }
-.msp-icon-left-open-big:before { content: "\e87c"; }
-.msp-icon-right-open-big:before { content: "\e87d"; }
-.msp-icon-left-open:before { content: "\e87c"; }
-.msp-icon-right-open:before { content: "\e87d"; }
-.msp-icon-screenshot:before { content: "\e80f"; }
-.msp-icon-model-prev:before { content: "\e884"; }
-.msp-icon-model-next:before { content: "\e885"; }
-.msp-icon-model-first:before { content: "\e89c"; }
-.msp-icon-down-thin:before { content: "\e88b"; }
-.msp-icon-up-thin:before { content: "\e88e"; }
-.msp-icon-left-thin:before { content: "\e88c"; }
-.msp-icon-right-thin:before { content: "\e88d"; }
-.msp-icon-switch:before { content: "\e896"; }
-.msp-icon-play:before { content: "\e897"; }
-.msp-icon-stop:before { content: "\e898"; }
-.msp-icon-pause:before { content: "\e899"; }
-.msp-icon-cw:before { content: "\e890"; }
-.msp-icon-database:before { content: "\e8d3"; }
-.msp-icon-upload:before { content: "\e82e"; }
-.msp-icon-record:before { content: "\e89a"; }
-.msp-icon-code:before { content: "\e834"; }
-.msp-icon-floppy:before { content: "\e8d0"; }
-.msp-icon-tape:before { content: "\e8c8"; }
-.msp-icon-flow-cascade:before { content: "\e8d8"; }
-.msp-icon-flow-tree:before { content: "\e8da"; }
-.msp-icon-home:before { content: "\e821"; }
-.msp-icon-address:before { content: "\e841"; }
-.msp-icon-download:before { content: "\e82d"; }
-.msp-icon-export:before { content: "\e835"; }
-.msp-icon-palette:before { content: "\e800"; }
-.msp-icon-search:before { content: "\e803"; }
-.msp-icon-flashlight:before { content: "\e804"; }
-.msp-icon-mail:before { content: "\e805"; }
-.msp-icon-heart:before { content: "\e806"; }
-.msp-icon-heart-empty:before { content: "\e807"; }
-.msp-icon-star:before { content: "\e808"; }
-.msp-icon-star-empty:before { content: "\e809"; }
-.msp-icon-user:before { content: "\e80a"; }
-.msp-icon-users:before { content: "\e80b"; }
-.msp-icon-user-add:before { content: "\e80c"; }
-.msp-icon-video:before { content: "\e80d"; }
-.msp-icon-picture:before { content: "\e80e"; }
-.msp-icon-camera:before { content: "\e80f"; }
-.msp-icon-layout:before { content: "\e810"; }
-.msp-icon-menu:before { content: "\e811"; }
-.msp-icon-check:before { content: "\e812"; }
-.msp-icon-cancel:before { content: "\e813"; }
-.msp-icon-cancel-circled:before { content: "\e814"; }
-.msp-icon-cancel-squared:before { content: "\e815"; }
-.msp-icon-plus-circled:before { content: "\e817"; }
-.msp-icon-plus-squared:before { content: "\e818"; }
-.msp-icon-minus-circled:before { content: "\e81a"; }
-.msp-icon-minus-squared:before { content: "\e81b"; }
-.msp-icon-help-circled:before { content: "\e81d"; }
-.msp-icon-info-circled:before { content: "\e81f"; }
-.msp-icon-link:before { content: "\e822"; }
-.msp-icon-attach:before { content: "\e823"; }
-.msp-icon-lock:before { content: "\e824"; }
-.msp-icon-lock-open:before { content: "\e825"; }
-.msp-icon-eye:before { content: "\e826"; }
-.msp-icon-tag:before { content: "\e827"; }
-.msp-icon-bookmark:before { content: "\e828"; }
-.msp-icon-bookmarks:before { content: "\e829"; }
-.msp-icon-flag:before { content: "\e82a"; }
-.msp-icon-thumbs-up:before { content: "\e82b"; }
-.msp-icon-thumbs-down:before { content: "\e82c"; }
-.msp-icon-upload-cloud:before { content: "\e82f"; }
-.msp-icon-reply:before { content: "\e830"; }
-.msp-icon-reply-all:before { content: "\e831"; }
-.msp-icon-forward:before { content: "\e832"; }
-.msp-icon-quote:before { content: "\e833"; }
-.msp-icon-pencil:before { content: "\e836"; }
-.msp-icon-feather:before { content: "\e837"; }
-.msp-icon-print:before { content: "\e838"; }
-.msp-icon-retweet:before { content: "\e839"; }
-.msp-icon-keyboard:before { content: "\e83a"; }
-.msp-icon-comment:before { content: "\e83b"; }
-.msp-icon-chat:before { content: "\e83c"; }
-.msp-icon-bell:before { content: "\e83d"; }
-.msp-icon-attention:before { content: "\e83e"; }
-.msp-icon-alert:before { content: "\e83f"; }
-.msp-icon-vcard:before { content: "\e840"; }
-.msp-icon-location:before { content: "\e842"; }
-.msp-icon-map:before { content: "\e843"; }
-.msp-icon-direction:before { content: "\e844"; }
-.msp-icon-compass:before { content: "\e845"; }
-.msp-icon-cup:before { content: "\e846"; }
-.msp-icon-trash:before { content: "\e847"; }
-.msp-icon-doc:before { content: "\e848"; }
-.msp-icon-docs:before { content: "\e849"; }
-.msp-icon-doc-landscape:before { content: "\e84a"; }
-.msp-icon-doc-text:before { content: "\e84b"; }
-.msp-icon-doc-text-inv:before { content: "\e84c"; }
-.msp-icon-newspaper:before { content: "\e84d"; }
-.msp-icon-book-open:before { content: "\e84e"; }
-.msp-icon-book:before { content: "\e84f"; }
-.msp-icon-folder:before { content: "\e850"; }
-.msp-icon-archive:before { content: "\e851"; }
-.msp-icon-box:before { content: "\e852"; }
-.msp-icon-rss:before { content: "\e853"; }
-.msp-icon-phone:before { content: "\e854"; }
-.msp-icon-cog:before { content: "\e855"; }
-.msp-icon-share:before { content: "\e857"; }
-.msp-icon-shareable:before { content: "\e858"; }
-.msp-icon-basket:before { content: "\e859"; }
-.msp-icon-bag:before { content: "\e85a"; }
-.msp-icon-calendar:before { content: "\e85b"; }
-.msp-icon-login:before { content: "\e85c"; }
-.msp-icon-logout:before { content: "\e85d"; }
-.msp-icon-mic:before { content: "\e85e"; }
-.msp-icon-mute:before { content: "\e85f"; }
-.msp-icon-sound:before { content: "\e860"; }
-.msp-icon-volume:before { content: "\e861"; }
-.msp-icon-clock:before { content: "\e862"; }
-.msp-icon-hourglass:before { content: "\e863"; }
-.msp-icon-lamp:before { content: "\e864"; }
-.msp-icon-light-down:before { content: "\e865"; }
-.msp-icon-light-up:before { content: "\e866"; }
-.msp-icon-adjust:before { content: "\e867"; }
-.msp-icon-resize-full:before { content: "\e869"; }
-.msp-icon-resize-small:before { content: "\e86a"; }
-.msp-icon-popup:before { content: "\e86b"; }
-.msp-icon-publish:before { content: "\e86c"; }
-.msp-icon-window:before { content: "\e86d"; }
-.msp-icon-arrow-combo:before { content: "\e86e"; }
-.msp-icon-down-circled:before { content: "\e86f"; }
-.msp-icon-left-circled:before { content: "\e870"; }
-.msp-icon-right-circled:before { content: "\e871"; }
-.msp-icon-up-circled:before { content: "\e872"; }
-.msp-icon-down-open:before { content: "\e873"; }
-.msp-icon-up-open:before { content: "\e876"; }
-.msp-icon-down-open-mini:before { content: "\e877"; }
-.msp-icon-left-open-mini:before { content: "\e878"; }
-.msp-icon-right-open-mini:before { content: "\e879"; }
-.msp-icon-up-open-mini:before { content: "\e87a"; }
-.msp-icon-down-open-big:before { content: "\e87b"; }
-.msp-icon-up-open-big:before { content: "\e87e"; }
-.msp-icon-down:before { content: "\e87f"; }
-.msp-icon-left:before { content: "\e880"; }
-.msp-icon-right:before { content: "\e881"; }
-.msp-icon-up:before { content: "\e882"; }
-.msp-icon-down-dir:before { content: "\e883"; }
-.msp-icon-left-dir:before { content: "\e884"; }
-.msp-icon-right-dir:before { content: "\e885"; }
-.msp-icon-up-dir:before { content: "\e886"; }
-.msp-icon-down-bold:before { content: "\e887"; }
-.msp-icon-left-bold:before { content: "\e888"; }
-.msp-icon-right-bold:before { content: "\e889"; }
-.msp-icon-up-bold:before { content: "\e88a"; }
-.msp-icon-ccw:before { content: "\e88f"; }
-.msp-icon-arrows-ccw:before { content: "\e891"; }
-.msp-icon-level-down:before { content: "\e892"; }
-.msp-icon-level-up:before { content: "\e893"; }
-.msp-icon-shuffle:before { content: "\e894"; }
-.msp-icon-loop:before { content: "\e895"; }
-.msp-icon-to-end:before { content: "\e89b"; }
-.msp-icon-to-start:before { content: "\e89c"; }
-.msp-icon-fast-forward:before { content: "\e89d"; }
-.msp-icon-fast-backward:before { content: "\e89e"; }
-.msp-icon-progress-0:before { content: "\e89f"; }
-.msp-icon-progress-1:before { content: "\e8a0"; }
-.msp-icon-progress-2:before { content: "\e8a1"; }
-.msp-icon-progress-3:before { content: "\e8a2"; }
-.msp-icon-target:before { content: "\e8a3"; }
-.msp-icon-list:before { content: "\e8a5"; }
-.msp-icon-list-add:before { content: "\e8a6"; }
-.msp-icon-battery:before { content: "\e8a9"; }
-.msp-icon-back-in-time:before { content: "\e8aa"; }
-.msp-icon-monitor:before { content: "\e8ab"; }
-.msp-icon-mobile:before { content: "\e8ac"; }
-.msp-icon-cd:before { content: "\e8ae"; }
-.msp-icon-inbox:before { content: "\e8af"; }
-.msp-icon-install:before { content: "\e8b0"; }
-.msp-icon-globe:before { content: "\e8b1"; }
-.msp-icon-cloud:before { content: "\e8b2"; }
-.msp-icon-cloud-thunder:before { content: "\e8b3"; }
-.msp-icon-flash:before { content: "\e8b4"; }
-.msp-icon-moon:before { content: "\e8b5"; }
-.msp-icon-flight:before { content: "\e8b6"; }
-.msp-icon-paper-plane:before { content: "\e8b7"; }
-.msp-icon-leaf:before { content: "\e8b8"; }
-.msp-icon-lifebuoy:before { content: "\e8b9"; }
-.msp-icon-mouse:before { content: "\e8ba"; }
-.msp-icon-briefcase:before { content: "\e8bb"; }
-.msp-icon-suitcase:before { content: "\e8bc"; }
-.msp-icon-dot:before { content: "\e8bd"; }
-.msp-icon-dot-2:before { content: "\e8be"; }
-.msp-icon-dot-3:before { content: "\e8bf"; }
-.msp-icon-brush:before { content: "\e8c0"; }
-.msp-icon-infinity:before { content: "\e8c2"; }
-.msp-icon-erase:before { content: "\e8c3"; }
-.msp-icon-chart-pie:before { content: "\e8c4"; }
-.msp-icon-chart-line:before { content: "\e8c5"; }
-.msp-icon-chart-bar:before { content: "\e8c6"; }
-.msp-icon-chart-area:before { content: "\e8c7"; }
-.msp-icon-graduation-cap:before { content: "\e8c9"; }
-.msp-icon-language:before { content: "\e8ca"; }
-.msp-icon-ticket:before { content: "\e8cb"; }
-.msp-icon-water:before { content: "\e8cc"; }
-.msp-icon-droplet:before { content: "\e8cd"; }
-.msp-icon-air:before { content: "\e8ce"; }
-.msp-icon-credit-card:before { content: "\e8cf"; }
-.msp-icon-clipboard:before { content: "\e8d1"; }
-.msp-icon-megaphone:before { content: "\e8d2"; }
-.msp-icon-drive:before { content: "\e8d4"; }
-.msp-icon-bucket:before { content: "\e8d5"; }
-.msp-icon-thermometer:before { content: "\e8d6"; }
-.msp-icon-key:before { content: "\e8d7"; }
-.msp-icon-flow-branch:before { content: "\e8d9"; }
-.msp-icon-flow-line:before { content: "\e8db"; }
-.msp-icon-flow-parallel:before { content: "\e8dc"; }
-.msp-icon-rocket:before { content: "\e8dd"; }
-.msp-icon-gauge:before { content: "\e8de"; }

src/mol-plugin-ui/structure/measurements.tsx

@@ -163,7 +163,7 @@ export class MeasurementControls extends PurePluginUIComponent<{}, { isBusy: boo
                 {entries}
             </div>}
             {entries.length === 0 && <div className='msp-control-offset msp-help-text'>
-                <div className='msp-help-description'><Icon svg={HelpOutline} />Add one or more selections</div>
+                <div className='msp-help-description'><Icon svg={HelpOutline} inline />Add one or more selections</div>
             </div>}
         </>;
     }

src/servers/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "declaration": true,
+        "target": "es5",
+        "alwaysStrict": true,
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "sourceMap": true,
+        "noUnusedLocals": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "module": "CommonJS",
+        "esModuleInterop": true,
+        "moduleResolution": "node",
+        "importHelpers": true,
+        "noEmitHelpers": true,
+        "jsx": "react",
+        "lib": [ "es6", "dom", "esnext.asynciterable", "es2016" ],
+        "rootDir": "../../src",
+        "outDir": "../../lib/servers"
+    },
+    "include": [ "**/*" ]
+}

tsconfig.json

@@ -19,5 +19,6 @@
         "rootDir": "src",
         "outDir": "lib"
     },
-    "include": [ "src/**/*" ]
+    "include": [ "src/**/*" ],
+    "exclude": [ "src/servers/**/*" ]
 }