From 80766a30de6e20d3ce8f1e26f73a54096085b3dc Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Thu, 15 Jul 2021 08:01:58 -0700 Subject: [PATCH 01/62] remove console logging --- kbase-extension/static/kbase/js/widgets/vis/kbaseLinechart.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/kbase-extension/static/kbase/js/widgets/vis/kbaseLinechart.js b/kbase-extension/static/kbase/js/widgets/vis/kbaseLinechart.js index 3ad82a39ad..b73dd627d4 100644 --- a/kbase-extension/static/kbase/js/widgets/vis/kbaseLinechart.js +++ b/kbase-extension/static/kbase/js/widgets/vis/kbaseLinechart.js @@ -239,7 +239,6 @@ define([ const delta = Math.max(this.options.xInset * ret[0], this.options.xInset * ret[1]); ret[0] -= delta; ret[1] += delta; - console.log('DXD', ret); return ret; }, @@ -268,7 +267,6 @@ define([ const delta = Math.max(this.options.yInset * ret[0], this.options.yInset * ret[1]); ret[0] -= delta; ret[1] += delta; - console.log('DYD', ret); return ret; }, @@ -279,7 +277,6 @@ define([ const bounds = this.chartBounds(); const $line = this; - console.log('BOUNDS ', bounds); const lineMaker = d3.svg .line() .x((d) => { From fe61c0a2aaeae4c3c15620d0b9a121b7615f5941 Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Thu, 15 Jul 2021 08:02:34 -0700 Subject: [PATCH 02/62] minor code cleanup --- .../static/kbase/js/widgets/vis/kbaseHeatmap.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/kbase-extension/static/kbase/js/widgets/vis/kbaseHeatmap.js b/kbase-extension/static/kbase/js/widgets/vis/kbaseHeatmap.js index c9f61e706c..ede2d94edb 100644 --- a/kbase-extension/static/kbase/js/widgets/vis/kbaseHeatmap.js +++ b/kbase-extension/static/kbase/js/widgets/vis/kbaseHeatmap.js @@ -470,8 +470,7 @@ define([ xId = $hm.xIDMap()[xId]; } - const scaled = xIdScale(xId) + 1; - return scaled; //$hm.xScale()(xId) + 1 + return xIdScale(xId) + 1; }) .attr('y', (d) => { let yId = d.y; @@ -479,22 +478,13 @@ define([ yId = $hm.yIDMap()[yId]; } - const scaled = yIdScale(yId) + 1; - return scaled; //$hm.yScale()(yId) + 1 + return yIdScale(yId) + 1; }) - //.attr('y', function (d) { return $hm.yScale()(d.y) }) - //.attr('opacity', function (d) { return d.value }) .attr('width', $hm.xScale().rangeBand() - $hm.options.cellPadding * 2) .attr('height', $hm.cellHeight()) .attr('rx', $hm.options.rx) .attr('ry', $hm.options.ry) .attr('fill', (d) => { - /*var colorScale = d3.scale.linear() - .domain([0,1]) - .range(['white', d.color]); - - return colorScale(d.value);*/ - return d.color; }); return this; From d91670da9e976dd4dfb53f1cdf4bce1e84aaba07 Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Thu, 15 Jul 2021 08:03:34 -0700 Subject: [PATCH 03/62] fix tab removal behavior; remove commented out code --- .../static/kbase/js/widgets/kbaseTabs.js | 92 +++++++++---------- 1 file changed, 43 insertions(+), 49 deletions(-) diff --git a/kbase-extension/static/kbase/js/widgets/kbaseTabs.js b/kbase-extension/static/kbase/js/widgets/kbaseTabs.js index 85b4f2740a..8243b9aac8 100644 --- a/kbase-extension/static/kbase/js/widgets/kbaseTabs.js +++ b/kbase-extension/static/kbase/js/widgets/kbaseTabs.js @@ -59,6 +59,8 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( this.appendUI($(this.$elem)); + this.tabHistory = []; + return this; }, @@ -74,22 +76,6 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( .css('height', this.tabsHeight()); const $nav = $('
    ').addClass('nav nav-tabs').attr('id', 'tabs-nav'); $block.append($nav).append($tabs); - /*if (this.options.tabPosition == 'top') { - $block.addClass('tabs-above'); - $block.append($nav).append($tabs); - } - else if (this.options.tabPosition == 'bottom') { - $block.addClass('tabs-below'); - $block.append($tabs).append($nav); - } - else if (this.options.tabPosition == 'left') { - $block.addClass('tabs-left'); - $block.append($nav).append($tabs); - } - else if (this.options.tabPosition == 'right') { - $block.addClass('tabs-right'); - $block.append($tabs).append($nav); - }*/ this._rewireIds($block, this); @@ -124,7 +110,7 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( $tab.css('padding', '3px'); } - const $that = this; //thanks bootstrap! You suck! + const $that = this; const $nav = $('
  • ') .css('white-space', 'nowrap') @@ -137,33 +123,36 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( e.preventDefault(); e.stopPropagation(); + // NB this function mimics bootstrap tab's "show" method. + const previous = $that.data('tabs-nav').find('.active:last a')[0]; - //we can't just call 'show' directly, since it requires an href or data-target attribute - //on the link which MUST be an idref to something else in the dom. We don't have those, - //so we just do what show does and call activate directly. - // - //oh, but we can't just say $(this).tab('activate',...) because bootstrap is specifically - //wired up not to pass along any arguments to methods invoked in this manner. - // - //Because bootstrap -sucks-. + // Danger: this calls the internal api for bootstrap tabs; that is + // where the mysterious "activate" lives. + + + // Deactivates the currently active tab $.fn.tab.Constructor.prototype.activate.call( $(this), $(this).parent('li'), $that.data('tabs-nav') ); + // Activate this tab, and emit events. $.fn.tab.Constructor.prototype.activate.call( $(this), $tab, $tab.parent(), function () { - $(this).trigger({ + $that.tabHistory.push(tab); + $tab.trigger({ type: 'shown', relatedTarget: previous, }); } ); + + // This is our stuff. if (!$tab.hasContent) { if (tab.showContentCallback) { $tab.append(tab.showContentCallback($tab)); @@ -176,7 +165,6 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( .append( $('') .addClass('btn btn-default btn-xs') - //.append($('').addClass(this.closeIcon())) .append($('').append('✖')) .css('padding', '0px') .css('width', '12px') @@ -185,14 +173,12 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( .css('font-size', '10px') .css('margin-bottom', '3px') .css('border', '0') - //.attr('title', this.deleteTabToolTip(tab.tab)) .tooltip() .bind( 'click', $.proxy(function (e) { e.preventDefault(); e.stopPropagation(); - if (tab.deleteCallback != undefined) { tab.deleteCallback(tab.tab); } else { @@ -202,6 +188,8 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( ) ) ); + + // TODO: only add the button in the first place if the tab can be deleted. if (!tab.canDelete) { $nav.find('button').remove(); } @@ -221,10 +209,6 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( } }, - closeIcon: function () { - return 'icon-remove'; - }, - deleteTabToolTip: function (tabName) { return 'Remove ' + tabName; }, @@ -234,32 +218,42 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( }, showTab: function (tab) { - if (this.shouldShowTab(tab)) { - this.data('nav')[tab].find('a').trigger('click'); - } + // TODO: cap history at N items. + this.data('nav')[tab].find('a').trigger('click'); }, removeTab: function (tabName) { const $tab = this.data('tabs')[tabName]; const $nav = this.data('nav')[tabName]; + // Remove this tab from all of history. + this.tabHistory = this.tabHistory.filter((tab) => { + return tab.tab !== tabName; + }) + + const deleteTab = () => { + $tab.remove(); + $nav.remove(); + + delete this.data('tabs')[tabName]; + delete this.data('nav')[tabName]; + } + if ($nav.hasClass('active')) { - if ($nav.next('li').length) { - $nav.next().find('a').trigger('click'); + if (this.tabHistory.length > 0) { + const nextTab = this.tabHistory.pop(); + const $nextNav = this.data('nav')[nextTab.tab]; + const $nextTab = this.data('tabs')[nextTab.tab]; + $nextTab.one('shown', () => { + deleteTab(); + }); + $nextNav.find('a').trigger('click'); } else { - $nav.prev('li').find('a').trigger('click'); + deleteTab(); } + } else { + deleteTab(); } - - $tab.remove(); - $nav.remove(); - - this.data('tabs')[tabName] = undefined; - this.data('nav')[tabName] = undefined; - }, - - shouldShowTab: function (tab) { - return 1; }, deletePrompt: function (tabName) { From 98394daeb47ea8b1c4633e403794e7c7b243ea88 Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Thu, 15 Jul 2021 08:19:02 -0700 Subject: [PATCH 04/62] disable focus outline for close button; it just looks weird given its size and the butchering of bootstrap styling. --- kbase-extension/static/kbase/js/widgets/kbaseTabs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kbase-extension/static/kbase/js/widgets/kbaseTabs.js b/kbase-extension/static/kbase/js/widgets/kbaseTabs.js index 8243b9aac8..466117d59a 100644 --- a/kbase-extension/static/kbase/js/widgets/kbaseTabs.js +++ b/kbase-extension/static/kbase/js/widgets/kbaseTabs.js @@ -172,8 +172,8 @@ define(['kbwidget', 'bootstrap', 'jquery', 'kbaseDeletePrompt'], ( .css('margin-left', '10px') .css('font-size', '10px') .css('margin-bottom', '3px') + .css('outline', 'none') .css('border', '0') - .tooltip() .bind( 'click', $.proxy(function (e) { From d1a9a56aa5cdbfd6adb0a443d826bb2c541f86d2 Mon Sep 17 00:00:00 2001 From: Erik Pearson Date: Thu, 15 Jul 2021 08:20:47 -0700 Subject: [PATCH 05/62] improve layout; use "-" for missing name or function (rather than emptiness), --- .../kbaseExpressionGenesetBaseWidget.js | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/kbase-extension/static/kbase/js/widgets/function_output/kbaseExpressionGenesetBaseWidget.js b/kbase-extension/static/kbase/js/widgets/function_output/kbaseExpressionGenesetBaseWidget.js index 03cbeb76fa..107bfe6fea 100644 --- a/kbase-extension/static/kbase/js/widgets/function_output/kbaseExpressionGenesetBaseWidget.js +++ b/kbase-extension/static/kbase/js/widgets/function_output/kbaseExpressionGenesetBaseWidget.js @@ -117,7 +117,7 @@ define([ ); return; } - self.featureValues + return self.featureValues .callFunc('get_submatrix_stat', [smParams]) .spread((data) => { self.submatrixStat = data; @@ -131,7 +131,7 @@ define([ // if a feature set is defined, use it. if (self.options.featureset) { - self.ws + return self.ws .callFunc('get_objects', [ [ { @@ -163,7 +163,7 @@ define([ self.clientError(error); }); } else { - getSubmatrixStatsAndRender(); + return getSubmatrixStatsAndRender(); } }, render: function () { @@ -182,11 +182,13 @@ define([ const self = this; const pref = this.pref; - const $overviewSwitch = $('').html('[Show/Hide Selected Features]'); + const $overviewSwitch = $('') + .html('[Show/Hide Selected Features]') + .css('cursor', 'pointer'); $containerDiv.append($overviewSwitch); - const $overvewContainer = $('