Merge pull request #278 from yochannah/tool-api-2018

Tool API version 1.0

.gitignore

@@ -5,8 +5,10 @@
 /resources/public/js/min
 /resources/public/vendor
 /resources/public/css
-/resources/public/tools
+/resources/public/tools/*
+/tools/bluegenes**
 config/**/*.edn
+!config/defaults/config.edn
 .lein-failures
 out
 .idea
@@ -16,4 +18,4 @@ node_modules
 .nrepl-port
 .DS_Store
 pom.xml
-package-lock.json
+package-lock.json

config/defaults/config.edn

@@ -0,0 +1,4 @@
+{
+ ;;where tools are installed. Make sure this is an absolute path.
+ :bluegenes-tool-path "/intermine/tools/node_modules"
+ }

docs/README.md

@@ -8,5 +8,7 @@ Documentation is generally distributed to live in-folder with the code in the fo
 - [Getting Started - developers](getting-started.md) - how to run bluegenes locally so you can make changes
 - [Building BlueGenes for production](production-builds.md) - how to launch it to servers, for production use.
 - [Troubleshooting BlueGenes issues](troubleshooting.md) - steps for when the computer says 'no'.
-- [Configuring BlueGenes](configuring-bluegenes.md) - includes how to configure Analytics and which mines are shown. 
-    - [Server-side config](https://github.com/intermine/bluegenes/blob/dev/config/dev/README.md) - such as port number, default intermine url. 
+- [Configuring BlueGenes](configuring-bluegenes.md) - includes how to configure Analytics and which mines are shown.
+    - [Server-side config](https://github.com/intermine/bluegenes/blob/dev/config/dev/README.md) - such as port number, default intermine url.
+
+- [Tool API](https://github.com/intermine/bluegenes/blob/dev/src/clj/bluegenes/ws/tools.md) - configuring and installing tools

docs/getting-started.md

@@ -1,11 +1,10 @@
-You can run bluegenes locally for development purposes. Here's what the local setup should look like. 
+You can run bluegenes locally for development purposes. Here's what the local setup should look like.
 
 ## System Requirements
 * Java 1.6+
 * [Leiningen 2.5+](https://leiningen.org/)
-* [node 7+][nodejs]  (you can check your version using `node -v`)
-* [npm][npm]
-* **Required:** The InterMine you point BlueGenes at *must* be running InterMine 1.8 or later; ideally 2.0. 
+* [node 7+][nodejs]  (you can check your version using `node -v`). We recommend installing node using [nvm](https://github.com/creationix/nvm)
+* **Required:** The InterMine you point BlueGenes at *must* be running InterMine 1.8 or later; ideally 2.0.
 
 ### Download dependencies.
 
@@ -28,7 +27,7 @@ _Or_, if you'll be making lots of style edits and don't want to type `lein less
 lein less auto
 ```
 
-Note that you won't see a prompt telling you when it's complete if you use `lein less auto` - but the browser page will automatically refresh so you'll know when it's done. 
+Note that you won't see a prompt telling you when it's complete if you use `lein less auto` - but the browser page will automatically refresh so you'll know when it's done.
 
 ### Start the process to reload code changes in the browser:
 
@@ -56,11 +55,9 @@ The above command assumes that you have [phantomjs](https://www.npmjs.com/packag
 
 ## What next?
 
-Once you're happy with any edits you've made, you probably want to check that it all works the same in a minified prod build. See [production builds](production-builds.md) for info on deploying and testing a minified build. 
+Once you're happy with any edits you've made, you probably want to check that it all works the same in a minified prod build. See [production builds](production-builds.md) for info on deploying and testing a minified build.
 
 
 [lein]: https://github.com/technomancy/leiningen
 [npm]: https://www.npmjs.com/
 [nodejs]: https://nodejs.org/
-
-

less/developer.less

@@ -1,17 +1,19 @@
+@import "variables";
+
 .developer {
   .icon-size {
-    margin: 1em 0;
+    margin: 1*@spacer 0;
   }
 
   .icon-sizing-example {
     display: flex;
     background-color: #eee;
     border-radius: 2px;
     border: solid 1px #ddd;
-    margin: 0 0.5em;
+    margin: 0 0.5*@spacer;
 
     .demo {
-      margin: 0 0.5em;
+      margin: 0 0.5*@spacer;
       display: flex;
       flex-direction: column-reverse;
       justify-content: flex-start;
@@ -22,7 +24,7 @@
     border-collapse: collapse;
 
     .icon {
-      font-size: 2em;
+      font-size: 2*@spacer;
 
       &.icon-venn-combine {
         fill: rgba(0,0,0,0);
@@ -38,7 +40,7 @@
       background: #eee;
       border-radius: 2px;
       border: solid 1px rgba(0, 0, 0, 0.2);
-      font-family: mono;
+      font-family: courier, mono;
     }
 
     td {
@@ -49,4 +51,186 @@
       background: rgba(0, 0, 0, 0.1);
     }
   }
+
+  .dev-navigation {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+
+    li {
+      list-style-type: none;
+      padding: @spacer 2*@spacer;
+      background-color: @highlight-color;
+      color: @highlight-color-text;
+      border-radius: 2px;
+      margin: @spacer;
+
+      a {
+        display: flex;
+        align-items: center;
+        color: #fff;
+
+        .icon {
+          fill: #fff;
+          width: 1.5*@spacer;
+          height: 1.5*@spacer;
+        }
+      }
+    }
+  }
+
+  .tool-store {
+    padding: @spacer 0;
+
+    .info {
+      .border-radius;
+      .box-shadow;
+      border: solid 1px @light-contrast;
+      display: flex;
+      align-items: center;
+      padding: @spacer 0;
+      background-color: @content-color-background;
+
+      p {
+        margin: 0;
+      }
+
+      .icon-info {
+        width: 3*@spacer;
+        height: 3*@spacer;
+        padding: 0.5*@spacer 0.5*@spacer 0.5*@spacer 0;
+        fill: @highlight-color;
+      }
+    }
+
+    .tool-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-around;
+
+      .tool-size {
+        min-width: 220px;
+        max-width: 350px;
+      }
+
+      .tool {
+        .tool-size;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: @spacer 0.5*@spacer *@spacer;
+        padding: 0;
+        .border-radius;
+        .box-shadow;
+        background-color: #fff;
+
+        h2,
+        h3 {
+          font-size: 1.1 *@spacer;
+          display: inline-block;
+          margin: @spacer/5;
+        }
+
+        > h2 {
+          background-color: @navbar-color;
+          color: @navbar-color-text;
+          border-top-left-radius: 2px;
+          border-top-right-radius: 2px;
+          padding: 1em;
+          display: flex;
+          align-self: stretch;
+          margin: 0;
+        }
+
+        .description {
+          border-bottom: solid 1px #ccc;
+          padding-bottom: @spacer;
+
+          .icon-info {
+            margin-top: 2px;
+          }
+        }
+
+        .tool-preview {
+          .tool-size;
+
+          img {
+            object-fit: cover;
+          }
+          border-bottom: solid 1px @body-foreground-color;
+          overflow: hidden;
+        }
+
+        .tool-no-preview {
+          border-bottom: solid 1px @body-foreground-color;
+          background-color: @light-contrast;
+          display: flex;
+          flex-grow: 1;
+          max-height: 220px;
+          max-width: none;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          font-size: 1.3*@spacer;
+        }
+
+        .details {
+          display: flex;
+          flex-direction: column;
+          font-weight: normal;
+          align-items: center;
+          padding: @spacer;
+
+          h2 {
+            font-weight: bold;
+          }
+        }
+
+        .tool-type h3 {
+          font-weight: bold;
+        }
+
+        .tool-class {
+          ul {
+            display: flex;
+            flex-direction: column;
+            padding: 0;
+          }
+
+          li {
+            display: flex;
+            background-color: transparent;
+            color: @body-foreground-color;
+            border-width: 0 0 0 3px;
+            padding: 0 0.5 * @spacer;
+            margin: @spacer/6;
+          }
+        }
+      }
+    }
+  }
+
+  .mine-choice {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+    grid-auto-rows: minmax(2em, auto);
+
+    label {
+      padding: 2px 4px 0 2px;
+      color: @body-foreground-color;
+
+      input {
+        margin-right: 2px;
+      }
+
+      &.checked {
+        border-bottom: solid 3px @highlight-color;
+        border-radius: 2px;
+        background: rgba(0, 0, 0, 0.07);
+        color: @body-foreground-color;
+      }
+    }
+  }
 }