bs tab fade=false. link-to route. etc

button-base.js and button-tab.js : call onClick() directly instead of via sendAction().

groups.js : services() : use .model.server.apiServers instead of .target which is expected to be undefined in Ember4.

mapview.js : init() : window.PretzelFrontend is now undefined, set it to {}; could limit this to config/environment.js : (environment === development), (controller .base may be related).

left-panel.hbs : add class=nav-link to <a> in <nav.item > as per doc comments in ember-bootstrap/addon/components/bs-nav.js : Bootstrap 3/4 Notes, not tested; if correct this will be applied more broadly.

left-panel.hbs :
manage-genotype.hbs
manage-explorer.hbs :
manage-view.hbs :
sequence-search.hbs :
add @fade={{false}} to uses of <BsTab >;  ember-bootstrap/addon/components/bs-tab.js: get fade() defaults fade to true, and currently this causes even the active element to be invisible.

group.hbs groups.hbs and verified.hbs : use route= to name the param to link-to (e.g. groups or login).
groups.hbs : use model= to name the group.id param to link-to.

mapview.hbs : onClick : wrap action name (i.e. setTab and setVisibility) in (action ).

add d3-tip.js, copied from d3-tip/d3-tip.js, require-d by d3-initialise-global.js (in previous commit )

authenticated-route-mixin.js : model() : result is not required atm, so return [], and not findAll(post ) which was from example code; inject service store for .findAll, but at this stage it is not required.
ember-cli-build.js : bootstrapJs : move import of dropdown.js after util.js which it depends on.
import @lix/d3-tip/index.js, but this was not effective so the utils/draw/d3-tip.js copy is used.

frontend/app/components/elem/button-base.js

@@ -5,7 +5,7 @@ export default Component.extend({
   tagName: 'button',
   // attributes
   click: function() {
-    this.sendAction('onClick');
+    this.onClick();
   },
   attributeBindings: ['disabled'],
   // classes

frontend/app/components/elem/button-tab.js

@@ -15,7 +15,7 @@ export default Component.extend({
   // actions
   actions: {
     onClick() {
-      this.sendAction('onClick', this.side, this.key);
+      this.onClick(this.side, this.key);
     }
   }
 });

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

@@ -21,7 +21,7 @@
     {{!-- ----------------------------------------------------------------- --}}
     {{!-- tabTypeName is the text displayed on the tab for user identification of the contents, aka tabName.  --}}
 
-    <BsTab @customTabs={{true}} @onChange={{action this.onChangeTab}} @activeId={{this.activeId}} as |tab|>
+    <BsTab @customTabs={{true}} @fade={{false}} @onChange={{action this.onChangeTab}} @activeId={{this.activeId}} as |tab|>
       <BsNav @type="tabs" as |nav|>
         <ul class="nav nav-tabs li-active-extra counts">
 
@@ -77,7 +77,7 @@
 
               {{!-- --------------------------------------------------------- --}}
 
-              <BsTab @customTabs={{true}} @onChange={{action this.selectDataset}} @activeId={{this.activeIdDatasets}} as |tab|>
+              <BsTab @customTabs={{true}} @fade={{false}} @onChange={{action this.selectDataset}} @activeId={{this.activeIdDatasets}} as |tab|>
                 <BsNav @type="tabs" as |nav|>
                   <ul class="nav nav-tabs li-active-extra counts">
 
@@ -467,7 +467,7 @@
                   setSelected=this.setSelectedSampleFilter
                   as |tn|}}
 
-                  <BsTab @customTabs={{true}} @onChange={{action tn.onChangeTab}} @activeId={{tn.activeId}} as |tab|>
+                  <BsTab @customTabs={{true}} @fade={{false}} @onChange={{action tn.onChangeTab}} @activeId={{tn.activeId}} as |tab|>
                     <BsNav @type="tabs" as |nav|>
                       <ul class="nav nav-tabs li-active-extra counts">
 

frontend/app/controllers/groups.js

@@ -31,10 +31,14 @@ export default class GroupsController extends Controller {
 
   /** lookup owner and services when required. */
   @computed() get services () {
-    let owner = getOwner(this.target);
-    let
-    apiServers = owner.lookup('service:apiServers'),
-
+    let apiServers;
+    if (this.target) {
+      let owner = getOwner(this.target);
+      apiServers = owner.lookup('service:apiServers');
+    } else if (this.model.server) {
+      apiServers = this.model.server.apiServers;
+    }
+    const
     services = {
       apiServers
     };

frontend/app/controllers/mapview.js

@@ -475,6 +475,9 @@ export default Controller.extend(Evented, componentQueryParams.Mixin, {
 
     this.queryParamsService.queryParamsHost = this;
     stacks.oa = this.oa;
+    if (! window.PretzelFrontend) {
+      window.PretzelFrontend = {};
+    }
 
     this._super.apply(this, arguments);
   },

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

@@ -1,11 +1,11 @@
 <div id="left-panel" class="left-panel-shown" style="height:100%; border-right:1px solid #ddd; display: flex; flex-direction: column">
 
-  <BsTab @customTabs={{true}} @activeId="left-panel-explorer" as |tab|>
+  <BsTab @customTabs={{true}} @fade={{false}} @activeId="left-panel-explorer" as |tab|>
     <BsNav @type="tabs" class="nav-pills" style="margin-left:10px" as |nav|>
-      <nav.item @active={{bs-eq tab.activeId "left-panel-explorer"}}><a href="#left-panel-explorer" role="tab" onclick={{action tab.select "left-panel-explorer"}}>{{elem/icon-base name="folder-open"}} Explorer</a></nav.item>
-      <nav.item @active={{bs-eq tab.activeId "left-panel-view"}}><a href="#left-panel-view" role="tab" onclick={{action tab.select "left-panel-view"}}>{{elem/icon-base name="picture"}} View</a></nav.item>
-      <nav.item @active={{bs-eq tab.activeId "left-panel-feature-search"}}><a href="#left-panel-feature-search" role="tab" onclick={{action tab.select "left-panel-feature-search"}}>{{elem/icon-base name="search"}}Search</a></nav.item>
-      <nav.item @active={{bs-eq tab.activeId "left-panel-upload"}}><a href="#left-panel-upload" role="tab" onclick={{action tab.select "left-panel-upload"}}>{{elem/icon-base name="cloud-upload"}} Upload</a></nav.item>
+      <nav.item active={{bs-eq tab.activeId "left-panel-explorer"}}><a href="#left-panel-explorer" role="tab" class="nav-link" onclick={{action tab.select "left-panel-explorer"}}>{{elem/icon-base name="folder-open"}} Explorer</a></nav.item>
+      <nav.item @active={{bs-eq tab.activeId "left-panel-view"}}><a href="#left-panel-view" role="tab" class="nav-link" onclick={{action tab.select "left-panel-view"}}>{{elem/icon-base name="picture"}} View</a></nav.item>
+      <nav.item @active={{bs-eq tab.activeId "left-panel-feature-search"}}><a href="#left-panel-feature-search" role="tab" class="nav-link" onclick={{action tab.select "left-panel-feature-search"}}>{{elem/icon-base name="search"}}Search</a></nav.item>
+      <nav.item @active={{bs-eq tab.activeId "left-panel-upload"}}><a href="#left-panel-upload" role="tab" class="nav-link" onclick={{action tab.select "left-panel-upload"}}>{{elem/icon-base name="cloud-upload"}} Upload</a></nav.item>
     </BsNav>
     <div class="tab-content">
       <tab.pane @id="left-panel-feature-search" @title="Search">

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

@@ -145,7 +145,7 @@
 
   <div> {{!-- start of tabs and tree  --}}
 
-  <BsTab @customTabs={{true}} as |tab|>
+  <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")}}
@@ -154,7 +154,7 @@
   </BsTab>
 
 
-  <BsTab @customTabs={{true}} @onChange={{action this.onChangeTab}} @activeId={{this.activeId}} as |tab|>
+  <BsTab @customTabs={{true}} @fade={{false}} @onChange={{action this.onChangeTab}} @activeId={{this.activeId}} as |tab|>
     <BsNav @type="tabs"  class="li-active-extra counts" as |nav|>
 
       {{#if this.blockFeatureTraits.length}}

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

@@ -4,7 +4,7 @@
     {{/elem/panel-heading}}
     {{#if panelContainer.showComponent}}
 
-  <BsTab @customTabs={{true}} @onChange={{action this.onChangeTab}} @activeId={{this.activeId}} as |tab|>
+  <BsTab @customTabs={{true}} @fade={{false}} @onChange={{action this.onChangeTab}} @activeId={{this.activeId}} as |tab|>
     <BsNav @type="tabs" as |nav|>
     <ul class="nav nav-tabs li-active-extra counts">
 

frontend/app/templates/components/panel/sequence-search.hbs

@@ -8,7 +8,7 @@
   {{#if panelContainer.showComponent}}
 
   <div>
-    <BsTab @customTabs={{true}} @activeId="sequence-search-input" as |tab|>
+    <BsTab @customTabs={{true}} @fade={{false}} @activeId="sequence-search-input" as |tab|>
 
       <BsNav @type="tabs" as |nav|>
         <nav.item @active={{bs-eq tab.activeId "sequence-search-input"}}><a href="#sequence-search-input" role="tab" onclick={{action tab.select "sequence-search-input"}}>{{elem/icon-base name="edit"}} Sequence Input</a></nav.item>

frontend/app/templates/group.hbs

@@ -1,7 +1,7 @@
 <div class="group-outer">
 
   {{!-- when server is added to groups query-params, lookup from group.store.name --}}
-  {{#link-to 'groups' classNames='btn btn-info btn-xs' tagName='button'}}
+  {{#link-to route='groups' classNames='btn btn-info btn-xs' tagName='button'}}
   <i class="glyphicon glyphicon-arrow-left"></i>
   {{/link-to}}
 

frontend/app/templates/groups.hbs

@@ -11,7 +11,7 @@
 {{#each this.model.groupsOwn as |group|}}
   <div class="margin-1em">
     {{!-- model=group --}}
-    {{#link-to 'group.edit' group.id  classNames='btn btn-info btn-xs' tagName='button'}}
+    {{#link-to route='group.edit' model=group.id  classNames='btn btn-info btn-xs' tagName='button'}}
       <i class="glyphicon glyphicon-pencil"></i>
     {{/link-to}}
 
@@ -22,7 +22,7 @@
 {{/each}}
 
 
-{{#link-to 'groups.add' classNames='btn btn-info' tagName='button'}}
+{{#link-to route='groups.add' classNames='btn btn-info' tagName='button'}}
 Add Group
 {{/link-to}}
 

frontend/app/templates/mapview.hbs

@@ -94,36 +94,36 @@
           {{#elem/button-tab
              side="right"
              key="block"
-             state=this.layout.right.tab onClick="setTab"}}
+             state=this.layout.right.tab onClick=(action "setTab") }}
             {{elem/icon-base name="globe"}}  Block
           {{/elem/button-tab}}
         {{/if}}
 
         {{#elem/button-tab
            side="right"
            key="dataset"
-           state=this.layout.right.tab onClick="setTab"}}
+           state=this.layout.right.tab onClick=(action "setTab") }}
           {{elem/icon-base name="globe"}}  Dataset
         {{/elem/button-tab}}
 
         {{#elem/button-tab
            side="right"
            key="selection"
-           state=this.layout.right.tab onClick="setTab"}}
+           state=this.layout.right.tab onClick=(action "setTab") }}
           {{elem/icon-base name="asterisk"}}&nbsp; Features <span class="badge">{{this.selectedFeatures.length}}</span>
         {{/elem/button-tab}}
 
         {{#elem/button-tab
            side="right"
            key="paths"
-           state=this.layout.right.tab onClick="setTab"}}
+           state=this.layout.right.tab onClick=(action "setTab") }}
           {{elem/icon-base name="globe"}}&nbsp; Paths <span class="badge">{{this.pathsTableSummary.count}}</span>
         {{/elem/button-tab}}
 
         {{#elem/button-tab
            side="right"
            key="genotype"
-           state=this.layout.right.tab onClick="setTab"}}
+           state=this.layout.right.tab onClick=(action "setTab") }}
           {{elem/icon-base name="barcode"}}&nbsp; Genotypes <span class="badge"></span>
 
           {{#if this.enableGenotypeControlsDialog}}
@@ -142,14 +142,14 @@
           {{#elem/button-tab
              side="right"
              key="settings"
-             state=this.layout.right.tab onClick="setTab"}}
+             state=this.layout.right.tab onClick=(action "setTab") }}
             {{elem/icon-base name="cog"}}&nbsp; Adv.
           {{/elem/button-tab}}
         {{/if}}
         {{#elem/button-tab
            class="pull-right"
            side="right"
-           onClick="setVisibility"}}
+           onClick=(action "setVisibility")}}
           {{elem/icon-base name="remove"}}
         {{/elem/button-tab}}
         {{#elem/button-tab

frontend/app/templates/verified.hbs

@@ -3,7 +3,7 @@
   Thank you for confirming your email. You can now log in.
   <br>
 
-  {{#link-to 'login' classNames='btn btn-info pull-right' tagName='button'}}
+  {{#link-to route='login' classNames='btn btn-info pull-right' tagName='button'}}
     Log In
   {{/link-to}}
 

frontend/app/utils/draw/d3-initialise-global.js

@@ -146,4 +146,4 @@ if (! d3.divgrid && window.d3_divgrid) {
   console.log('d3_divgrid', window.d3_divgrid);
 }
 
-require('./d3-tip')
+require('./d3-tip');