use native input in place of classic component

change {{input input= to <input oninput= in : input-range-text.hbs dataset-intersection-dialog.hbs dataset-vcf-status.hbs manage-genotype.hbs flow-controls.hbs goto-feature-list.hbs manage-explorer.hbs ontologies.hbs trait-qtl.hbs blast-results-view.hbs view-controls.hbs

icon-toggle.js : click() : changed : replace sendAction() with closure actions and direct function call.

icon-toggle.js : call .changed action as a function instead of via sendAction()
wrap action value param target.value with quotes in : input-range-text.hbs and dataset-intersection-dialog.hbs

matrix-view.js : afterScrollVertically_tablePosition() : use ._wt._wot for .wtScroll

app/index.html : include handsontable css; comment that css and js can be included from cdn instead of importing them in ember-cli-build.js; likely to use the former to reduce build size; latter enables un-minimised version for development.

models/block.js : revert async : datasetId: belongsTo -> true, features: hasMany -> false; this is consistent with current use, may change these later.

manage-genotype.hbs : prefix attributes with this.
paths-table.js : createHoTable() : handle undefined tableDiv
serializers/application.js : use decamelize imported from @ember/string in place of Ember.String.decamelize
access attributes of ember-concurrency tasks directly instead of via .get() in : block-adj.js 2 x mapview.js paths-progressive.js
for the following 2 a current alternative will be found :
comment out use of data-table in dataset-vcf-status.hbs and axis-table.hbs
comment out use of ember-csv@file-anchor in manage-genotype.hbs paths-table.hbs
domElements.js : .on(drag ) : add param event, change d3.mouse( ) to d3.pointer(event).
axisBrush.js : handleFeatureCircleMouse{Over,Out}() : add param event; handleFeatureCircleMouseOver() :  use this.id instead of .classList[0] for selector
zoom() : use .sourceEvent if event is d3 wrapper, for .target and wheelNewDomain(); drop use of selectedAxes{,_i} for axis1d to update.

d3-tip.js : getScreenBBox() : targetel : use svg if target is not passed to show().

paths-api.js : PathData : use param owner added to pathCreate(), passed in from pathsOfFeature(), to lookup path-data instead of importing it, so that it has an owner.

table-brushed.js : extraColumnsHeaders() : use capitalize imported from @ember/string in place of .capitalize, which is sunsetted.

vcf-feature.js :  addFeaturesJson() and addFeaturesGerminate() : lower-case the model name Feature -> feature for createRecord() and .peekRecord().

package.json : drop ember-contextual-table and ember-csv because of old ember-cli-babel dependencies which disrupt the build; will find current alternatives for these.

frontend/app/components/elem/icon-toggle.js

@@ -15,13 +15,23 @@ import IconBase from './icon-base';
 * e.g. {{#elem/icon-toggle state=userSettings.genotype.hideControls }}
 * @param iconTrue name of icon to show when value is true
 * @param iconFalse   name of icon to show when value is false
+* @param changed optional. action to signal when state changes.
+* Called as changed(state).
+* example usage : entry-tab.hbs : {{#elem/icon-toggle ... changed=(action this.allActiveChanged)
 */
 export default IconBase.extend({
 
   click(event) {
     // console.log('click', event, this.get('state'));
     this.toggleProperty('state');
-    this.sendAction('changed', this.get('state'));
+    /** optional action to signal change of state
+     * The param will be in .attrs until this is changed to a Glimmer
+     * component, then it will be in .args
+     */
+    const changed = this.attrs?.changed || this.args?.changed;
+    if (changed) {
+      changed(this.get('state'));
+    }
   },
 
   /** name is used by icon-base to construct the icon name.

frontend/app/components/elem/input-range-text.hbs

@@ -5,11 +5,11 @@
     {{yield}}
     <span class="sub-label filter-group-col">
       {{#unless @disabled}}
-        {{input
+        <input
           type="text"
-          value=this.valueText
-          input=(action this.valueTextChanged value=target.value)
-        }}
+          value={{this.valueText}}
+          oninput={{action this.valueTextChanged value="target.value"}}
+        />
       {{/unless}}
     </span>
   </div>

frontend/app/components/elem/input-range-text.js

@@ -94,7 +94,7 @@ export default class ElemInputRangeTextComponent extends Component {
   @action
   valueTextChanged(value) {
     /* {{input value=valueText ... }} sets
-     * this.valueText, and (action ...  value=target.value)
+     * this.valueText, and (action ...  value="target.value")
      * passes the same value to this function.
      * this.valueText is already set by value=this.valueText in hbs
      */

frontend/app/components/matrix-view.js

@@ -631,8 +631,10 @@ export default Component.extend({
     const
     fnName = 'afterScrollVertically_tablePosition',
     table = this.table,
-    /** refn : https://github.com/handsontable/handsontable/issues/2429#issuecomment-406616217 */
-    wtScroll = table.view.wt.wtScroll,
+    /** refn : https://github.com/handsontable/handsontable/issues/2429#issuecomment-406616217
+     * This was table.view.wt.wtScroll in earlier version.  not a public API.
+     */
+    wtScroll = table.view._wt._wot.wtScroll,
     /** When called from event afterScrollVertically,
      * .get{First,Last}VisibleRow() are defined; they may be -1 otherwise, e.g.
      * table is empty / not initialised or no scroll yet.

frontend/app/components/panel/dataset-intersection-dialog.hbs

@@ -30,11 +30,11 @@
     <div></div>
     <div>
       {{#if (and @dataset.positionFilter (gt @gtDatasetsLength 1))}}
-        {{input
+        <input
           type="text"
-          value=this.chooseK
-          input=(action this.chooseKChanged value=target.value)
-        }}
+          value={{this.chooseK}}
+          oninput={{action this.chooseKChanged value="target.value"}}
+        />
         Overlapping datasets
       {{/if}}
     </div>

frontend/app/components/panel/dataset-vcf-status.hbs

@@ -6,7 +6,7 @@
     <button type="button" onclick={{this.getDatasetFeaturesCounts}} class="btn btn-info btn-xs margin-1em">Prepare Dataset Histograms</button>
 
     <div class="margin-top status-icon">
-      {{#data-table data=this.rowsCombined as |t| }}
+      {{!-- #data-table data=this.rowsCombined as |t| }}
 
         {{#t.column propertyName='Name' name='Chr' defaultHeader=true as |col|}}
           <span class={{call (fn this.chrNotInDataset col.row.Name ) }}>{{col.row.Name}}</span>
@@ -43,7 +43,7 @@
           </span>
         {{/t.column}}
 
-      {{/data-table}}
+      {{/data-table --}}
     </div>
 
     <span class="filter-group-col">

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

@@ -99,7 +99,7 @@
 
                   {{!-- --------------------------------------------------------- --}}
 
-                  {{log 'axisBrush' axisBrush}}
+                  {{log 'axisBrush' this.axisBrush}}
 
                   Server : 
                   {{this.apiServerSelectedOrPrimary.name}}
@@ -117,7 +117,7 @@
                           <th class="devel-visible">zoomCounter</th>
                         </tr>
 
-                      {{#each axisBrush.brushedAxes as |block| }}
+                      {{#each this.axisBrush.brushedAxes as |block| }}
 
                         <tr>
                           <td>
@@ -126,7 +126,7 @@
                             <div>{{block.axis.axis1d.referenceBlock.datasetId.id}}</div>
                           </td>
                           <td>{{block.block.scope}}</td>
-                          <td>{{brushedDomainRounded}}</td>
+                          <td>{{this.brushedDomainRounded}}</td>
                           <!-- ----------------------------- -->
                           <td class="devel-visible">{{blockId}}</td>
                           <td class="devel-visible">{{zoomCounter}}</td>
@@ -139,7 +139,7 @@
 
                     </div>
 
-                    <div>{{referenceDatasetName}}</div>
+                    <div>{{this.referenceDatasetName}}</div>
 
                     <div>
                       <label style="display:inline">Request Samples :
@@ -190,9 +190,9 @@
                           <i class="glyphicon glyphicon-filter"></i>
                           Search / Filter
                         </label>
-                        {{input id="sampleNameFilter" type="search" value=sampleNameFilter
-                          input=(action this.nameFilterChanged value="target.value")
-                          placeholder="Filter available samples by name" }}
+                        <input id="sampleNameFilter" type="search" value={{this.sampleNameFilter}}
+                          oninput={{action this.nameFilterChanged value="target.value"}}
+                          placeholder="Filter available samples by name" />
                           {{!-- maybe autocomplete="sample-name", but samples names are mostly numeric so it may be more of an impediment than a benefit for the user --}}
 
                         <span>
@@ -214,7 +214,7 @@
 
                       </div>
 
-                      {{ensureSamplesForDatasetTabEffect}}
+                      {{this.ensureSamplesForDatasetTabEffect}}
                       <div class="genotype-controls">
 
                         <select style="height:100px" class="form-control" multiple onchange={{action this.selectSample}}>
@@ -229,7 +229,7 @@
                     <div>
                       <label>Selected samples to be requested in VCF Lookup</label>
                       {{#if this.selectedCount}}
-                        <span class="sample-count">( {{selectedCount}} )</span>
+                        <span class="sample-count">( {{this.selectedCount}} )</span>
                       {{/if}}
 
                       <div>
@@ -282,13 +282,13 @@
                           Format for request and display
                         {{/ember-tooltip}}
                         </label>
-                        {{radio-button value='CATG' groupValue=requestFormat
-                          changed=(action requestFormatChanged preventDefault=false)
+                        {{radio-button value='CATG' groupValue=this.requestFormat
+                          changed=(action this.requestFormatChanged preventDefault=false)
                         }}
                         ACGT &nbsp;&nbsp;
                         <span>
-                        {{radio-button value='Numerical' groupValue=requestFormat
-                          changed=(action requestFormatChanged preventDefault=false)
+                        {{radio-button value='Numerical' groupValue=this.requestFormat
+                          changed=(action this.requestFormatChanged preventDefault=false)
                         }}
                         012 &nbsp;&nbsp;
                         {{#ember-tooltip side="right" delay=500}}
@@ -400,16 +400,16 @@
 
               {{!-- --------------------------------------------------------------- --}}
 
-              {{#if lookupMessage}}
-                {{elem/panel-message warningMessage=lookupMessage}}
+              {{#if this.lookupMessage}}
+                {{elem/panel-message warningMessage=this.lookupMessage}}
               {{/if}}
 
               {{!-- --------------------------------------------------------------- --}}
 
               <div class="genotype">
                 {{#if this.vcfExportText.length}}
                   <button type="button" class="btn btn-info btn-xs">
-                    {{#component "ember-csv@file-anchor" data=this.vcfExportText fileName=this.vcfExportFileName}} VCF Download{{/component}}
+                    {{!-- #component "ember-csv@file-anchor" data=this.vcfExportText fileName=this.vcfExportFileName}} VCF Download{{/component --}}
                   </button>
                 {{/if}}
               </div>

frontend/app/components/panel/paths-table.js

@@ -700,7 +700,7 @@ export default Component.extend({
     };
 
     dLog("tableDiv", tableDiv);
-    var table = new Handsontable(tableDiv, {
+    var table = tableDiv && new Handsontable(tableDiv, {
       data: data || [['', '', '']],
       minRows: 1,
       rowHeaders: true,

frontend/app/components/panel/view-controls.js

@@ -266,7 +266,7 @@ export default Component.extend({
   sbSizeThresholdText : "" + sbSizeThresholdInitial,
   sbSizeThresholdTextChanged(value) {
     /* {{input value=sbSizeThresholdText ... }} sets
-     * this.sbSizeThresholdText, and (action ...  value=target.value)
+     * this.sbSizeThresholdText, and (action ...  value="target.value")
      * passes the same value to this function.  */
     if (this.sbSizeThresholdText !== value) {
       dLog('sbSizeThresholdTextChanged', this.sbSizeThresholdText, value);
@@ -326,7 +326,7 @@ export default Component.extend({
   axisLayerModulusText : "" + axisLayerModulusInitial,
   axisLayerModulusTextChanged(value) {
     /* {{input value=axisLayerModulusText ... }} sets
-     * this.axisLayerModulusText, and (action ...  value=target.value)
+     * this.axisLayerModulusText, and (action ...  value="target.value")
      * passes the same value to this function.  */
     if (this.axisLayerModulusText !== value) {
       dLog('axisLayerModulusTextChanged', this.axisLayerModulusText, value);

frontend/app/components/record/entry-values.js

@@ -72,7 +72,7 @@ export default EntryBase.extend({
     /** RFC #176 (Javascript Modules API) changes Ember.isArray to isArray,
      * so append _ to variable name to distinguish it. */
     isArray_ = isArray(values);
-    if (trace_entryValues)
+    if (trace_entryValues > 1)
       console.log('valueIsArray', isArray_, length, this.get('name'), values);
     return isArray_;
   }),
@@ -103,7 +103,7 @@ export default EntryBase.extend({
       levelMeta = this.get('levelMeta'),
     values = this.get('values'),  // values.then ...
     dataTypeName = values && (valueGetType(levelMeta, values) || this.get('valuesModelName'));
-    if (trace_entryValues)
+    if (trace_entryValues > 1)
       console.log('dataTypeName', dataTypeName, values);
     return dataTypeName;
   }),
@@ -239,7 +239,9 @@ export default EntryBase.extend({
       array = Object.keys(values)
         .sort(alphanum)
         .map((key) => ({key, value : values[key]}));
-      dLog('keyValuesSorted', values, array);
+      if (trace_entryValues > 1)  {
+        dLog('keyValuesSorted', values, array);
+      }
     }
     return array;
   }),

frontend/app/components/table-brushed.js

@@ -5,6 +5,7 @@ import EmberObject, { observer } from '@ember/object';
 import { computed } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { later, bind } from '@ember/runloop';
+import { capitalize } from '@ember/string';
 
 
 import { featureEdit } from '../components/form/feature-edit';
@@ -394,7 +395,7 @@ export default Component.extend({
   }),
 
   extraColumnsHeaders : computed('extraColumnsNames.[]', function () {
-    return this.get('extraColumnsNames').map((name) => name.capitalize());
+    return this.get('extraColumnsNames').map(capitalize);
   }),
   extraColumnsWidths : computed('extraColumnsNames.[]', function () {
     /** ref, alt are configured in featureValuesWidths; default value

frontend/app/controllers/mapview.js

@@ -337,7 +337,7 @@ export default Controller.extend(Evented, componentQueryParams.Mixin, {
       /** If this is called as refreshDatasets from data-csv then we want to get
        * blockFeatureLimits for the added block.
        * Perhaps can pass (undefined, {server : serverTabSelected}), and also
-       * check if blocksLimitsTask.get('isRunning') (factor out of
+       * check if blocksLimitsTask.isRunning (factor out of
        * mapview:model() )
        */
       newTaskInstance.then((datasets) => {

frontend/app/index.html

@@ -6,6 +6,11 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!-- Either include handsontable JS and CSS here, or import them in ember-cli-build.js :
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js" charset="utf-8"></script>
+    -->
+
     {{content-for "head"}}
 
     <link rel="stylesheet" href="/assets/vendor.css">

frontend/app/models/block-adj.js

@@ -487,11 +487,11 @@ export default Model.extend(Evented, {
     task = this.get('taskGetPaths');
 
     // expected .drop() to handle this, but get "TaskInstance 'taskGetPaths' was cancelled because it belongs to a 'drop' Task that was already running. "
-    if (false && ! task.get('isIdle')) {
+    if (false && ! task.isIdle) {
       dLog('paths taskGetPaths', task.numRunning, task.numQueued, blockAdjId);
       // result = this.get('lastResult');
       if (task.numRunning > 1) {
-        result = task.get('lastPerformed');
+        result = task.lastPerformed;
         return result;
       }
     }
@@ -511,9 +511,9 @@ export default Model.extend(Evented, {
         if (! didCancel(error)) {
           dLog('call_taskGetPaths taskInstance.catch', blockAdjId, error);
           throw error; }
-        let lastResult = task.get('lastSuccessful.value');
+        let lastResult = task.lastSuccessful.value;
         dLog('call_taskGetPaths', 'using lastSuccessful.value', lastResult, 
-             task.get('state'), task.numRunning, task.numQueued
+             task.state, task.numRunning, task.numQueued
             );
         return lastResult;
       });

frontend/app/models/block.js

@@ -79,11 +79,11 @@ export default Model.extend({
   urlOptions : alias('queryParams.urlOptions'),
 
 
-  datasetId: belongsTo('dataset', { async: false, inverse : null }),
+  datasetId: belongsTo('dataset', { async: true, inverse : null }),
   annotations: hasMany('annotation', { async: false, inverse : null }),
   intervals: hasMany('interval', { async: false, inverse : null }),
   // possibly async:true when !allInitially, if needed.
-  features: hasMany('feature', {async: true, inverse : 'blockId'}),
+  features: hasMany('feature', {async: false, inverse : 'blockId'}),
   range: attr('array'),
   scope: attr('string'),
   name: attr('string'),

frontend/app/routes/mapview.js

@@ -126,7 +126,7 @@ let config = {
     dLog('blocksLimitsTask', blocksLimitsTask);
     if (! blocksLimitsTask ||
         (! Array.isArray(blocksLimitsTask._result) &&
-         (! blocksLimitsTask.get || ! blocksLimitsTask.get('isRunning')))) {
+         ! blocksLimitsTask.isRunning)) {
       blocksLimitsTask = datasetsTask.then(() => 
         blockService.getBlocksLimits(undefined, {server: 'primary'})
           .then((limits) => dLog('getBlocksLimits', limits))

frontend/app/serializers/application.js

@@ -1,3 +1,5 @@
+import { decamelize } from "@ember/string";
+
 import RESTSerializer from '@ember-data/serializer/rest';
 
 // import PartialModelRESTSerializer from 'ember-data-partial-model/mixins/rest-serializer';
@@ -42,7 +44,7 @@ export default RESTSerializer.extend(/*PartialModelRESTSerializer,*/ {
   // },
   serializeIntoHash: function(data, type, record, options) {
     console.log("SERIALIZE INTO HASH", data, record)
-    // var root = Ember.String.decamelize(type.modelName);
+    // var root = decamelize(type.modelName);
     // data[root] = this.serialize(record, options);
     var payload = this.serialize(record, options);
     var props = Object.keys(payload)

frontend/app/services/data/paths-progressive.js

@@ -643,11 +643,11 @@ export default Service.extend({
             dLog(fnName, 'taskInstance.catch', blockId, error);
             throw error;
           } else {
-            lastResult = t.get('lastSuccessful.value');
+            lastResult = t.lastSuccessful?.value;
             // .lastRunning seems to be always null.
             dLog(
               fnName, 'using lastSuccessful.value', lastResult || t.lastSuccessful, 
-              t.get('state'), t.numRunning, t.numQueued, t.lastRunning
+              t.state, t.numRunning, t.numQueued, t.lastRunning
             );
           }
           return lastResult;

frontend/app/templates/components/axis-table.hbs

@@ -1,5 +1,5 @@
 
-{{#data-table
+{{!-- #data-table
   data=this.tableData
   selectionMode='multiple'
   selectionChanged=(action "selectionChanged")
@@ -9,4 +9,4 @@
   {{t.selectionColumn}}
   {{t.column propertyName='feature' name='Feature'}}
   {{t.column propertyName='position' name='Position'}}
-{{/data-table}}
+{{/data-table --}}

frontend/app/templates/components/draw/flow-controls.hbs

@@ -11,7 +11,7 @@
         {{ flow.visible }}
         {{ flow.enabled }}
       {{/if}}
-      {{input type="checkbox" checked=flow.visible class="toggle" input=(action "toggleVisible" name true) }}
+      <input type="checkbox" checked={{flow.visible}} class="toggle" oninput={{action "toggleVisible" name true}} />
       <label {{action "toggleVisible" name true on="click" }}>{{flow.title}}</label>
     </li>