Usability and GUI presentation improvements (431)

doc/adminGuides/install_and_configure.md

@@ -139,4 +139,15 @@ docker tag $image $baseName:latest
 docker image inspect $image | jq '.[] | .RepoTags'
 ```
 
+Push the built image to dockerhub
+```
+app=pretzel
+baseName=plantinformaticscollaboration/$app
+# $PRETZEL_VERSION as defined above
+echo PRETZEL_VERSION=$PRETZEL_VERSION
+for tag in $PRETZEL_VERSION latest; do docker push $baseName:$tag; done
+```
+
+
+
 ---

frontend/app/components/draw/style-editor.js

@@ -4,7 +4,7 @@ import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
 import SpectrumColorPickerComponent from 'ember-spectrum-color-picker/components/spectrum-color-picker';
-import { storageFor } from '@facilecomm/ember-local-storage';
+import { storageFor } from 'ember-local-storage';
 
 
 /* global d3 */

frontend/app/components/form/select-server.hbs

@@ -1,5 +1,5 @@
   <select onchange={{action (action this.selectedServerChangedName) value="target.value" }}>
-    {{#each-in servers as |apiServerName apiServer| }}
+    {{#each-in this.servers as |apiServerName apiServer| }}
       <option value={{apiServer.tabId}} selected={{eq @selectedValue apiServer}}>{{apiServer.tabId}}</option>
 
     {{/each-in}}

frontend/app/components/panel/genotype-search.hbs

@@ -1,5 +1,7 @@
 {{did-insert this.didInsertElement_}}
 
+<div  class="panel-section">
+
 {{#elem/panel-container state="primary" as |panelContainer|}}
   {{#elem/panel-heading icon="search" panelContainer=panelContainer}}
     VCF Genotype Search
@@ -78,5 +80,6 @@
 {{/elem/panel-container}}
 
 
+</div>
 
 

frontend/app/components/panel/left-panel.js

@@ -14,6 +14,12 @@ export default Component.extend({
   attributeBindings: ['style:style'],
   view: 'mapview',
 
+  /** Determine if the 'Selected Server' <Panel::SelectedServer> should be displayed.
+   * There is no need to display it if the number of api servers is 1, i.e. only
+   * connected to the primary pretzel server.
+   */
+  multipleServers : alias('apiServers.multipleServersCP'),
+
   /** Return a list of datasets, with their included blocks, for the currently-selected
    * API server tab
    *

frontend/app/components/panel/manage-explorer.js

@@ -1957,6 +1957,22 @@ export default ManageBase.extend({
           console.log('didRender', id, c[0], t[0], a[0]);
     }
   },
+  /** After panel-container is closed and re-opened, a new BsTab is
+   * instantiated, and it defaults to the first tab.pane,
+   * i.e. tab-explorer-Trait, instead of using @activeId; this may improve in a
+   * later version of ember-bootstrap, for now : select 'All Datasets'.
+   * See : ember-bootstrap/addon/components/bs-tab.js
+   */
+  initialSelected(argA) {
+    const fnName = 'initialSelected';
+    const tab = argA[0];
+    this.bsTab = tab;
+    const initialSelectedSet = () => {
+      dLog(fnName, tab && [tab.activeId, tab.selectedId, tab.args]);
+      tab.select('tab-explorer-datasets');
+    };    
+    later(initialSelectedSet, 2.5 * 1000);
+  },
   /*
   willDestroyElement() {
     console.log('willDestroyElement', this);

frontend/app/components/record/entry-blocks-array.js

@@ -1,6 +1,8 @@
 import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 
+import { alphanum } from '@cablanchard/koelle-sort';
+
 import EntryBlocks from './entry-blocks';
 
 
@@ -17,6 +19,17 @@ export default EntryBlocks.extend({
     if (o.historyBlocks && (o.historyView !== 'Normal')) {
       data = data.filter((b) => this.get('viewHistory').blockViewed(b));
     }
+    /** As noted in entry-level.js : valuesFiltered() re. blocksFilterSortViewed(),
+     * it may be preferred to sort blocks by view / recent / favourites.
+     */
+    /** Current crops have single-digit chromosome numbers, so this would suffice :
+     *   .sortBy('name');
+     * but for a natural sort of multi-digit numbers in chromosome
+     * names, alphanum is used.
+     */
+    data = data
+      .sort((a,b) => alphanum(a.get('name'), b.get('name')) );
+
     return data;
   }),
 

frontend/app/components/service/api-server.js

@@ -285,8 +285,8 @@ const ApiServerAttributes = {
     // (allInitially ? '' : 'Summary')
     let getBlocksTask = blockService.get('getBlocksLimits');
 
-    /** Task Instance.  param blockIds is [] */
-    let getBlocksTI = getBlocksTask.apply(blockService, [[]]);
+    /** Task Instance.  param blockIds is undefined, i.e. default to all blocks */
+    let getBlocksTI = getBlocksTask.apply(blockService, []);
 
     return getBlocksTI;
   }),

frontend/app/models/block-adj.js

@@ -511,7 +511,7 @@ export default Model.extend(Evented, {
         if (! didCancel(error)) {
           dLog('call_taskGetPaths taskInstance.catch', blockAdjId, error);
           throw error; }
-        let lastResult = task.lastSuccessful.value;
+        let lastResult = task.lastSuccessful?.value;
         dLog('call_taskGetPaths', 'using lastSuccessful.value', lastResult, 
              task.state, task.numRunning, task.numQueued
             );

frontend/app/services/api-servers.js

@@ -53,6 +53,7 @@ export default Service.extend(Evented, {
 
   /** Map of servers, indexed by server .name */
   servers : EmberObject.create(),
+  // @tracked
   serversLength : 0,
   /** Map from block and dataset ids to their server.
    * Block and dataset ids could be mapped separately, but it is unlikely those
@@ -117,6 +118,18 @@ export default Service.extend(Evented, {
   get multipleServers() {
     return this.serversLength > 1;
   },
+  /** Identical to .multipleServers() which works OK in templates/group{,s}.hbs
+   * (perhaps because that is a route), but it doesn't update in panel/left-panel.hbs;
+   * this updates OK.  Possibly this won't be needed after the service and Component
+   * are converted from classic Ember Components to native classes.
+   *
+   * Copied from components/draw/axis-menu.js, which was based on an extract
+   * from axisTitleBlocksServers_tspan.js
+   */
+  multipleServersCP : computed('serversLength', function () {
+    return this.get('serversLength') > 1;
+  }),
+
 
   /** Add a new ApiServer.
    * Store it in this.servers, indexed by .name = .host_safe()

frontend/app/services/data/view.js

@@ -2,7 +2,7 @@ import Service, { inject as service } from '@ember/service';
 import { later } from '@ember/runloop';
 import { alias } from '@ember/object/computed';
 
-import { storageFor } from '@facilecomm/ember-local-storage';
+import { storageFor } from 'ember-local-storage';
 
 
 /*----------------------------------------------------------------------------*/

frontend/app/storages/block-view-history.js

@@ -1,4 +1,4 @@
-import StorageObject from '@facilecomm/ember-local-storage/local/object';
+import StorageObject from 'ember-local-storage/local/object';
 
 const Storage = StorageObject.extend();
 

frontend/app/storages/user-conf-data.js

@@ -1,4 +1,4 @@
-import StorageObject from '@facilecomm/ember-local-storage/local/object';
+import StorageObject from 'ember-local-storage/local/object';
 
 const Storage = StorageObject.extend();
 

frontend/app/templates/components/panel/left-panel.hbs

@@ -20,7 +20,11 @@
                 updateFeaturesInBlocks=this.updateFeaturesInBlocks
             }}
 
-            <Panel::SelectedServer/>
+            {{!-- There is no need to display SelectedServer if the number of
+                  api servers is 1, i.e. only connected to the primary pretzel server. --}}
+            {{#if this.multipleServers}}
+              <Panel::SelectedServer/>
+            {{/if}}
 
             {{panel/sequence-search
                 datasets=this.serverSelected_datasetsBlocks

frontend/app/templates/components/panel/manage-explorer.hbs

@@ -1,5 +1,7 @@
-{{form/api-servers
-  addNewDatasource=(action 'addNewDatasource')}}
+{{#if this.urlOptions.dataSources}}
+  {{form/api-servers
+    addNewDatasource=(action 'addNewDatasource')}}
+{{/if}}
 
 {{#elem/panel-container state="primary" as |panelContainer|}}
   {{#elem/panel-heading icon="folder-open" panelContainer=panelContainer}}
@@ -145,13 +147,15 @@
 
   <div> {{!-- start of tabs and tree  --}}
 
+  {{#if this.apiServers.multipleServersCP}}
   <BsTab @customTabs={{true}} @fade={{false}} as |tab|>
     <BsNav class="api-server-tabs"  @type="tabs" as |nav|>
       {{#each-in this.servers as |apiServerName apiServer| }}
         {{panel/api-server-tab tab=tab nav=nav apiServerName=apiServerName apiServer=apiServer serverTabSelected=(action "serverTabSelected")}}
       {{/each-in}}
     </BsNav>
   </BsTab>
+  {{/if}}
 
 
   <BsTab @customTabs={{true}} @fade={{false}} @onChange={{action this.onChangeTab}} @activeId={{this.activeId}} as |tab|>
@@ -379,6 +383,8 @@
 
     </div>      {{!-- end of class="tab-content" --}}
 
+    {{did-insert (action this.initialSelected) tab }}
+
   </BsTab>
   </div>         {{!-- end of tabs and tree  --}}
 

frontend/app/utils/draw/path-data.js

@@ -168,25 +168,27 @@ function PathDataUtils(oa) {
    * The purpose is to give the x positions which paths between the 2 axes
    * should terminate at, hence the name 'inside' - it is concerned with the
    * inside edges of the axes from the perspective of the space between them.
-   * @param ak1, ak2  axis IDs  (i.e. oa.axes[ak1] is Stacked, not Block)
+   * @param ax1, ax2  axis-1d of the axes to lookup
    * @param cached  true means use the "old" / cached positions o[ak], otherwise use the current scale x(ak).
    * @return 2 x-positions, in an array, in the given order (ak1, ak2).
    */
-  function inside(ak1, ak2, cached)
+  function inside(ax1, ax2, cached)
   {
     const
+    ak1 = ax1.axisName,
+    ak2 = ax2.axisName,
     o = oa.o,
     x = stacks.x;
     let xi = cached
       ? [o[ak1], o[ak2]]
-      : [x(ak1), x(ak2)],
-    /** true if ak1 is left of ak2 */
+      : [x(ax1), x(ax2)],
+    /** true if ax1 is left of ax2 */
     order = xi[0] < xi[1],
     /** If the rightmost axis is split it does not affect the endpoint, since its left side is the axis position.
      * This is the index of the left axis. */
     left = order ? 0 : 1,
-    akL = order ? ak1 : ak2,
-    aL = oa.axisApi.stacksView.axesByBlockId[akL].axis1d;    // draw_orig : oa.axes[akL];
+    aL = order ? ax1 : ax2,
+    akL = aL.axisName;
     if (aL.extended)
     {
       // console.log("inside", ak1, ak2, cached, xi, order, left, akL);
@@ -221,7 +223,7 @@ function PathDataUtils(oa) {
     axis1 = Stacked.getAxis(ak1),
     axis2 = Stacked.getAxis(ak2),
     /** x endpoints of the line;  if either axis is split then the side closer the other axis is used.  */
-    xi = inside(axis1.axisName, axis2.axisName, true);
+    xi = inside(axis1, axis2, true);
     let l;
     if (axis1.perpendicular && axis2.perpendicular)
     { /* maybe a circos plot :-) */ }
@@ -256,7 +258,7 @@ function PathDataUtils(oa) {
     vc = oa.vc,
     axis1 = Stacked.getAxis(ak1),
     axis2 = Stacked.getAxis(ak2),
-    xi = inside(axis1.axisName, axis2.axisName, false),
+    xi = inside(axis1, axis2, false),
     oak = xi, // o[ak1], o[ak2]],
     my = syntenyBlock_2Feature ?
         [featureY2(ak1, d[0]), featureY2(ak2, d[2])] :
@@ -724,13 +726,11 @@ function PathDataUtils(oa) {
   function featureY2(axisID, feature)
   {
     let
-    // axisID = feature.get('blockId'),
-    /** or .view.axisName */
-    parentName = Block.axisName_parent(axisID),
-    ysa = oa.ys[parentName],
+    axis1d = feature.get('blockId.axis'),
+    ysa = axis1d.get('ys'),
     v = feature.value,
     aky = v.map((location) => ysa(location)),
-    axisY = oa.stacks.blocks[axisID].yOffset();
+    axisY = axis1d.yOffset();
 
     return aky.map((y) => y + axisY);
   }