diff --git a/frontend/app/components/elem/icon-toggle.js b/frontend/app/components/elem/icon-toggle.js index 0291127f..48377e5d 100644 --- a/frontend/app/components/elem/icon-toggle.js +++ b/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. diff --git a/frontend/app/components/elem/input-range-text.hbs b/frontend/app/components/elem/input-range-text.hbs index 81596c8d..4ba8353f 100644 --- a/frontend/app/components/elem/input-range-text.hbs +++ b/frontend/app/components/elem/input-range-text.hbs @@ -5,11 +5,11 @@ {{yield}} {{#unless @disabled}} - {{input + {{/unless}} diff --git a/frontend/app/components/elem/input-range-text.js b/frontend/app/components/elem/input-range-text.js index ac9ae999..6e48c17a 100644 --- a/frontend/app/components/elem/input-range-text.js +++ b/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 */ diff --git a/frontend/app/components/matrix-view.js b/frontend/app/components/matrix-view.js index d177b861..865af530 100644 --- a/frontend/app/components/matrix-view.js +++ b/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. diff --git a/frontend/app/components/panel/dataset-intersection-dialog.hbs b/frontend/app/components/panel/dataset-intersection-dialog.hbs index 5e9f614f..522b34e2 100644 --- a/frontend/app/components/panel/dataset-intersection-dialog.hbs +++ b/frontend/app/components/panel/dataset-intersection-dialog.hbs @@ -30,11 +30,11 @@
{{#if (and @dataset.positionFilter (gt @gtDatasetsLength 1))}} - {{input + Overlapping datasets {{/if}}
diff --git a/frontend/app/components/panel/dataset-vcf-status.hbs b/frontend/app/components/panel/dataset-vcf-status.hbs index d6ac39aa..7aecb8c3 100644 --- a/frontend/app/components/panel/dataset-vcf-status.hbs +++ b/frontend/app/components/panel/dataset-vcf-status.hbs @@ -6,7 +6,7 @@
- {{#data-table data=this.rowsCombined as |t| }} + {{!-- #data-table data=this.rowsCombined as |t| }} {{#t.column propertyName='Name' name='Chr' defaultHeader=true as |col|}} {{col.row.Name}} @@ -43,7 +43,7 @@ {{/t.column}} - {{/data-table}} + {{/data-table --}}
diff --git a/frontend/app/components/panel/manage-genotype.hbs b/frontend/app/components/panel/manage-genotype.hbs index bc7b3ed4..1a159991 100644 --- a/frontend/app/components/panel/manage-genotype.hbs +++ b/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 @@ zoomCounter - {{#each axisBrush.brushedAxes as |block| }} + {{#each this.axisBrush.brushedAxes as |block| }} @@ -126,7 +126,7 @@
{{block.axis.axis1d.referenceBlock.datasetId.id}}
{{block.block.scope}} - {{brushedDomainRounded}} + {{this.brushedDomainRounded}} {{blockId}} {{zoomCounter}} @@ -139,7 +139,7 @@ -
{{referenceDatasetName}}
+
{{this.referenceDatasetName}}
- {{input id="sampleNameFilter" type="search" value=sampleNameFilter - input=(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 --}} @@ -214,7 +214,7 @@
- {{ensureSamplesForDatasetTabEffect}} + {{this.ensureSamplesForDatasetTabEffect}}
diff --git a/frontend/app/templates/components/goto-feature-list.hbs b/frontend/app/templates/components/goto-feature-list.hbs index 195c8c08..3b74b73a 100644 --- a/frontend/app/templates/components/goto-feature-list.hbs +++ b/frontend/app/templates/components/goto-feature-list.hbs @@ -37,13 +37,13 @@ {{/if}} - {{input + diff --git a/frontend/app/templates/components/panel/manage-explorer.hbs b/frontend/app/templates/components/panel/manage-explorer.hbs index 36b89217..a722d333 100644 --- a/frontend/app/templates/components/panel/manage-explorer.hbs +++ b/frontend/app/templates/components/panel/manage-explorer.hbs @@ -48,13 +48,13 @@ {{/radio-button}} - {{input + @@ -94,14 +94,14 @@
{{!-- there is no suitable autocomplete, so may change to =off --}} - {{input +
@@ -245,13 +245,13 @@ selectExpander=(action this.selectOntologyNode) }} - {{input + diff --git a/frontend/app/templates/components/panel/ontologies.hbs b/frontend/app/templates/components/panel/ontologies.hbs index e37bb8b0..bef1f293 100644 --- a/frontend/app/templates/components/panel/ontologies.hbs +++ b/frontend/app/templates/components/panel/ontologies.hbs @@ -24,9 +24,9 @@ - {{input type="checkbox" name="this.allVisible" checked=this.allVisible - input=(action this.allVisibleChanged value='target.checked' preventDefault=false) - id="checkbox-allVisible" }} + @@ -36,11 +36,11 @@ {{#if this.ontologiesTree.isFulfilled}} - {{input type="checkbox" + diff --git a/frontend/app/templates/components/panel/paths-table.hbs b/frontend/app/templates/components/panel/paths-table.hbs index 4347b8a3..ab51ff95 100644 --- a/frontend/app/templates/components/panel/paths-table.hbs +++ b/frontend/app/templates/components/panel/paths-table.hbs @@ -12,7 +12,7 @@ {{!-- based on elem/button-submit.hbs, could be factored --}}
- +

@@ -35,6 +35,7 @@ {{/if}}
+{{log this.useHandsOnTable 'this.useHandsOnTable'}} {{#if this.useHandsOnTable}}
diff --git a/frontend/app/templates/components/panel/trait-qtl.hbs b/frontend/app/templates/components/panel/trait-qtl.hbs index 2aea0f26..13b8f14d 100644 --- a/frontend/app/templates/components/panel/trait-qtl.hbs +++ b/frontend/app/templates/components/panel/trait-qtl.hbs @@ -4,13 +4,13 @@ {{!-- use min-height because currently only elements are
  • are float. --}}
  • - {{input +
    • diff --git a/frontend/app/templates/components/panel/upload/blast-results-view.hbs b/frontend/app/templates/components/panel/upload/blast-results-view.hbs index 8c84e7eb..6bd2aa80 100644 --- a/frontend/app/templates/components/panel/upload/blast-results-view.hbs +++ b/frontend/app/templates/components/panel/upload/blast-results-view.hbs @@ -17,23 +17,23 @@ {{#if 0}}
    - {{input +
    {{/if}}
    - {{input +
    diff --git a/frontend/app/templates/components/panel/view-controls.hbs b/frontend/app/templates/components/panel/view-controls.hbs index 4ca6cd27..590d5d7d 100644 --- a/frontend/app/templates/components/panel/view-controls.hbs +++ b/frontend/app/templates/components/panel/view-controls.hbs @@ -188,21 +188,21 @@
  • - {{input + - {{input + diff --git a/frontend/app/templates/mapview.hbs b/frontend/app/templates/mapview.hbs index d7ecf451..dc44e7ce 100644 --- a/frontend/app/templates/mapview.hbs +++ b/frontend/app/templates/mapview.hbs @@ -86,7 +86,6 @@
    -
    layout.right{{this.layout.right.visible}},{{this.layout.right.tab}}
    {{#if this.layout.right.visible}}
    diff --git a/frontend/app/utils/data/vcf-feature.js b/frontend/app/utils/data/vcf-feature.js index 945b6c34..a4c01822 100644 --- a/frontend/app/utils/data/vcf-feature.js +++ b/frontend/app/utils/data/vcf-feature.js @@ -490,14 +490,14 @@ function addFeaturesJson(block, requestFormat, replaceResults, selectedService, // .id is used by axisFeatureCircles_eltId(). // ._name may be also added to other blocks. feature.id = block.id + '_' + feature._name; - let existingFeature = store.peekRecord('Feature', feature.id); + let existingFeature = store.peekRecord('feature', feature.id); if (existingFeature) { mergeFeatureValues(existingFeature, feature); feature = existingFeature; // this is included in createdFeatures, since it is a result from the current request. } else { // Replace Ember.Object() with models/feature. - feature = store.createRecord('Feature', feature); + feature = store.createRecord('feature', feature); /** fb is a Proxy */ let fb = feature.get('blockId'); if (fb.then) { @@ -638,7 +638,7 @@ function addFeaturesGerminate(block, requestFormat, replaceResults, selectedServ feature._name = markerName; feature.id = block.id + '_' + datasetID + '_' + markerName; - let existingFeature = store.peekRecord('Feature', feature.id); + let existingFeature = store.peekRecord('feature', feature.id); if (existingFeature) { mergeFeatureValues(existingFeature, feature); feature = existingFeature; @@ -648,7 +648,7 @@ function addFeaturesGerminate(block, requestFormat, replaceResults, selectedServ // addFeaturesJson() uses feature.blockId - not sure if that is applicable feature.blockId = block; // Replace Ember.Object() with models/feature. - feature = store.createRecord('Feature', feature); + feature = store.createRecord('feature', feature); } return feature; diff --git a/frontend/app/utils/domElements.js b/frontend/app/utils/domElements.js index f336f332..31b5d312 100644 --- a/frontend/app/utils/domElements.js +++ b/frontend/app/utils/domElements.js @@ -52,20 +52,20 @@ let let startX; let dragResize = d3.drag() // d3 v3: was .behavior - .on('drag', function(d, i, g) { + .on('drag', function(event, d) { if (trace_dom) - logElementDimensions(g[0], 'on drag'); + logElementDimensions(this, 'on drag'); // as for .resize() below, // .on() seems to apply a reasonable debounce, but if not, use Ember.run.debounce() // Determine resizer position relative to resizable (parent) + // relativeParent was passed to d3.mouse(), not required by d3.pointer(). let relativeParent = (this.parentNode.parentNode.parentNode.tagName === 'foreignObject') ? this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode : this.parentNode; const - mousePosition = d3.mouse(relativeParent), + mousePosition = d3.pointer(event), /** means y if vertical */ x_ = mousePosition[+vertical], - event = d3.event, /** means dy if vertical */ dx = event[vertical ? 'dy' : 'dx'], // dLog("eltWidthResizable drag x=", x, dx); diff --git a/frontend/app/utils/draw/axisBrush.js b/frontend/app/utils/draw/axisBrush.js index 895c7ced..404d6a09 100644 --- a/frontend/app/utils/draw/axisBrush.js +++ b/frontend/app/utils/draw/axisBrush.js @@ -911,20 +911,24 @@ function AxisBrushZoom(oa) { let targetIdCount = 0; - function handleFeatureCircleMouseOver(d, i) + function handleFeatureCircleMouseOver(event, axis1d) { let - /** d is the axis chromosome id */ - chrName = d, featureName = this.classList[0], hoverFeatures = featureName ? [featureName] : []; if (oa.drawOptions.showCircleHover) { /** related @see axisFeatureCircles_selectAll() */ let - selector = "g.axis-outer#" + eltId(chrName) + " > circle." + CSS.escape(featureName), + axisS = selectAxisOuter(axis1d), + // selector = "g.axis-outer#" + eltId(chrName) + " > circle." + CSS.escape(featureName), + /** this is axisFeatureCircles_eltId(feature) */ + featureEltId = this.id, + // featureId = featureEltId.replace('fc_',''), + // based on : axisFeatureCircles_selectOneInAxis(axisS, feature); + selector = "g > circle#" + featureEltId, targetId = "MC_" + ++targetIdCount; - console.log("handleFeatureCircleMouseOver", d, featureName, selector, targetId); + console.log("handleFeatureCircleMouseOver", axis1d.axis?.brushName, featureName, featureEltId, selector, targetId); if (false) { d3.select(selector) @@ -935,7 +939,7 @@ function AxisBrushZoom(oa) { const pathInfo = PathInfo(oa); const toolTip = pathInfo.toolTip; toolTip.html('AxisCircleHoverTarget'); - toolTip.show(d, i); + toolTip.show(this); targetId = "devel-visible"; } } @@ -945,7 +949,7 @@ function AxisBrushZoom(oa) { // me.set("axisFeatureCircleHover", true); }); } - function handleFeatureCircleMouseOut(d, i) + function handleFeatureCircleMouseOut(event, i) { if (false) { debounce( @@ -958,6 +962,7 @@ function AxisBrushZoom(oa) { { function hidePathHoverToolTip() { const + d = event.target.__data__, axis1d = d, oa = axis1d.drawMap.oa, pathInfo = PathInfo(oa); @@ -990,9 +995,13 @@ function AxisBrushZoom(oa) { function zoom(event, that, i, g, brushedDomainClick) { const fnName = 'zoom'; const trace_zoom = 0; + const thisZoom = this; const selectedAxes = oa.selectedAxes; - /** can be undefined in some cases. it is defined for WheelEvent - mousewheel zoom. */ - let e = event; // was d3.event.sourceEvent; + /** can be undefined in some cases. it is defined for WheelEvent - mousewheel zoom. + * If event is a d3 wrapper event (event.type === 'zoom') then use event.sourceEvent + * as in wheelNewDomain() : let e = (event.type === 'zoom') ? event.sourceEvent : event, + */ + let e = event.sourceEvent || event; // was d3.event.sourceEvent; let isWheelEvent = e instanceof WheelEvent; let timeStamp = e && e.timeStamp; me.set('axisZoom.zoomPan', {isWheelEvent, timeStamp}); @@ -1007,7 +1016,7 @@ function AxisBrushZoom(oa) { axis1d = that; } else if (isWheelEvent) { - axisElt = event.target; + axisElt = e.target; /** i.e. d3.select(axisElt).data()[0] */ axis1d = axisElt.__data__; // expect that brushedDomainClick === undefined; @@ -1021,7 +1030,7 @@ function AxisBrushZoom(oa) { */ if (trace_zoom > 1) { dLog( - 'WheelEvent', e, event.target.transform, + 'WheelEvent', e, e.target.transform, '\nclient', w.clientX, w.clientY, 'deltaY', w.deltaY, 'layer', w.layerX, w.layerY, @@ -1059,10 +1068,10 @@ function AxisBrushZoom(oa) { let domainChanged = false; /* this uses .map() to find i such that selectedAxes[i] == axisName, - * and i is used to lookup the parallel array brushExtents[]. + * and i was used to lookup the parallel array brushExtents[], + * now replaced by axis1d.brushedRegion. * #afterRelease, selectedAxes / brushExtents / brushedRegions can be * better integrated, simplifying this calc and others. - */ const selectedAxes_i = selectedAxes.reduce(function(result, p, i) { @@ -1073,7 +1082,8 @@ function AxisBrushZoom(oa) { }, []); selectedAxes_i.forEach(function(p_i) { let [p, i] = p_i; - const axis1d = p; + */ + { let y = axis1d.y, svgContainer = oa.svgContainer; let @@ -1090,7 +1100,8 @@ function AxisBrushZoom(oa) { if (brushExtent) brushedDomain = axisRange2Domain(axis1d, brushExtent); - domain = wheelNewDomain(event, axis1d, oa.axisApi, false); + // wheelNewDomain can handle d3 ZoomEvent, but uses the .sourceEvent + domain = wheelNewDomain(e, axis1d, oa.axisApi, false); } else if (axis1d.brushedRegion) { brushedDomain = axis1d.brushedRegion.map(function(ypx) { return yp.invert(ypx /* *axis1d.portion*/); }); // brushedDomain = [yp.invert(brushExtents[i][0]), yp.invert(brushExtents[i][1])]; @@ -1139,7 +1150,7 @@ function AxisBrushZoom(oa) { else if (brushExtent) { let /** */ - target = (this.tagName === 'text') ? that : event.target, + target = (thisZoom.tagName === 'text') ? that : e.target, /** */ gBrush = that.__brush ? that : target.parentElement; let newBrushExtent = brushedDomain.map(function (r) { return yp(r);}); @@ -1153,7 +1164,7 @@ function AxisBrushZoom(oa) { } } } - }); + }; debounce( @@ -1241,7 +1252,7 @@ function AxisBrushZoom(oa) { { console.log(oa.selectedAxes); selectedAxes.forEach(function(axis1d, i) { - // p is selectedAxes[i], including brushedMap === selectedAxes[0] + // axis1d is selectedAxes[i], including brushedMap === selectedAxes[0] limits = axis1d.brushedDomain; console.log('flipRegion', axis1d.axisName, i, brushedMap, limits, axis1d.brushedRegion); /* Generally for axis1d in selectedAxes[], axis1d.brushedRegion is diff --git a/frontend/app/utils/draw/d3-tip.js b/frontend/app/utils/draw/d3-tip.js index 2c3c9284..26aea3bb 100644 --- a/frontend/app/utils/draw/d3-tip.js +++ b/frontend/app/utils/draw/d3-tip.js @@ -282,7 +282,7 @@ d3.tip = function() { // // Returns an Object {n, s, e, w, nw, sw, ne, se} function getScreenBBox() { - var targetel = target || d3.event.target; + var targetel = target || svg; while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) { targetel = targetel.parentNode; diff --git a/frontend/app/utils/draw/zoomPanCalcs.js b/frontend/app/utils/draw/zoomPanCalcs.js index f5453e8c..7defbfc8 100644 --- a/frontend/app/utils/draw/zoomPanCalcs.js +++ b/frontend/app/utils/draw/zoomPanCalcs.js @@ -162,6 +162,7 @@ function intervalDirection(interval, direction) { * zoom & pan : if one (either) end of newDomain is outside axisReferenceDomain, set it to that limit * * @param event WheelEvent + * If event is a d3 wrapper event (event.type === 'zoom') then use event.sourceEvent * @param axis axis1d (was Stacked) * @param axisApi for axisRange2Domain() * @param inFilter true when called from zoomFilter() (d3.zoom().filter()), diff --git a/frontend/app/utils/paths-api.js b/frontend/app/utils/paths-api.js index 42aca997..82bce79d 100644 --- a/frontend/app/utils/paths-api.js +++ b/frontend/app/utils/paths-api.js @@ -1,5 +1,7 @@ +/* lookup path-data on owner, so that it has owner, instead of : import PathData from '../components/draw/path-data'; +*/ import { featureNameClass } from './draw/stacksAxes'; /*----------------------------------------------------------------------------*/ @@ -83,7 +85,7 @@ function pathsOfFeature(store, pathsResultType, owner) { blocksFeatures[0].reduce(function (result, f0) { let result1 = blocksFeatures[1].reduce(function (result, f1) { let pair = - pathCreate(store, f0, f1, blocks[0], blocks[1]); + pathCreate(owner, store, f0, f1, blocks[0], blocks[1]); result.push(pair); return result; }, result); @@ -95,7 +97,8 @@ function pathsOfFeature(store, pathsResultType, owner) { const trace_pc = 1; -function pathCreate(store, feature0, feature1, block0, block1) { +function pathCreate(owner, store, feature0, feature1, block0, block1) { + const PathData = owner.factoryFor('component:draw/path-data'); let /** not used - same as feature{0,1}.blockId. */ block0r = store.peekRecord('block', block0), diff --git a/frontend/app/utils/string.js b/frontend/app/utils/string.js index 3a293aab..3f4acf6c 100644 --- a/frontend/app/utils/string.js +++ b/frontend/app/utils/string.js @@ -25,7 +25,11 @@ function stringCountString(string, stringSearch) { * * Replaces equivalent capitalize() (components/panel/paths-table.js) added in b3150c70, also : * extract from : https://stackoverflow.com/a/7225450/18307804, ZenMaster - * (there are Ember utility functions for this also ...) + * + * Can now be replaced by : Ember utility functions : + * https://deprecations.emberjs.com/v3.x/#toc_ember-string-prototype_extensions + * import { capitalize } from "@ember/string"; + * which handles multiple words */ function toTitleCase(text) { const result = text.charAt(0).toUpperCase() + text.slice(1); diff --git a/frontend/config/environment.js b/frontend/config/environment.js index 7ae50a82..a1f26f74 100644 --- a/frontend/config/environment.js +++ b/frontend/config/environment.js @@ -94,6 +94,7 @@ module.exports = function (environment) { * https://handsontable.com/docs/7.4.2/tutorial-license-key.html */ ENV.handsOnTableLicenseKey = process.env.handsOnTableLicenseKey; + console.log('config/environment', 'ENV.handsOnTableLicenseKey', process.env.handsOnTableLicenseKey); return ENV; diff --git a/frontend/ember-cli-build.js b/frontend/ember-cli-build.js index a7429610..6bc932ba 100644 --- a/frontend/ember-cli-build.js +++ b/frontend/ember-cli-build.js @@ -71,7 +71,15 @@ module.exports = function (defaults) { app.import('node_modules/numeric/lib/numeric.latest.js'); app.import('node_modules/@lix/d3-tip/index.js'); // src/ app.import('node_modules/dompurify/dist/purify.js'); - app.import('node_modules/handsontable/dist/handsontable.js'); + + /* Either import handsontable here, or + * via and