opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-25 00:12:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixes state-change animations causing 'block' display appearing in

Browse Source 
various places due to collection job state fetches.  Includes some
import/export refactoring and general client cleanup.
This commit is contained in:
Dannon Baker
2018-12-17 11:38:36 -05:00
parent b22b7e5868
commit 0fdb89a1b4
10 changed files with 185 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/components/GalaxyLoader.vue
+139 -132
View File
@@ -9,147 +9,154 @@
</template>
<script>
export default {
props: {
style: {
type: String,
default: "light"
},
size: {
type: Number,
default: 100
},
center: {
type: Boolean,
default: false
}
export default {
props: {
style: {
type: String,
default: "light"
},
size: {
type: Number,
default: 100
},
center: {
type: Boolean,
default: false
}
};
}
};
</script>
<style>
.galaxy-loader.galaxy-loader_center {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
.galaxy-loader.galaxy-loader_center {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.galaxy-loader {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
position: relative;
overflow: hidden;
}
.galaxy-loader_light {
background-color: transparent;
border: 2px solid #58585a;
box-sizing: border-box;
}
.galaxy-loader_dark {
background-color: #2c3143;
border: 2px solid #2c3143;
box-sizing: border-box;
}
.galaxy-loader_eu {
background-color: transparent;
border: 2px solid #063591;
box-sizing: border-box;
}
.galaxy-loader > div {
background-color: rgba(255, 0, 0, 0.3);
display: block;
height: 18px;
position: absolute;
border-radius: 2px;
-webkit-animation: galaxy-loader_animation 1.2s infinite ease-in-out;
animation: galaxy-loader_animation 1.2s infinite ease-in-out;
}
.galaxy-loader > .galaxy-loader_strip-1 {
top: 16px;
left: 13px;
width: 59px;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.galaxy-loader > .galaxy-loader_strip-2 {
top: 39px;
left: 13px;
width: 44px;
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.galaxy-loader > .galaxy-loader_strip-3 {
top: 61px;
left: 25px;
width: 59px;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.galaxy-loader_light > .galaxy-loader_strip-1,
.galaxy-loader_light > .galaxy-loader_strip-2 {
background-color: #58585a;
}
.galaxy-loader_light > .galaxy-loader_strip-3 {
background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
}
.galaxy-loader_dark > .galaxy-loader_strip-1,
.galaxy-loader_dark > .galaxy-loader_strip-2 {
background-color: white;
}
.galaxy-loader_dark > .galaxy-loader_strip-3 {
background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
}
.galaxy-loader_eu > .galaxy-loader_strip-1,
.galaxy-loader_eu > .galaxy-loader_strip-2 {
background-color: #063591;
}
.galaxy-loader_eu > .galaxy-loader_strip-3 {
background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
}
@-webkit-keyframes galaxy-loader_animation {
0%,
60%,
100% {
-webkit-transform: scaleX(1);
}
.galaxy-loader {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50px;
position: relative;
overflow: hidden;
20% {
-webkit-transform: scaleX(0.8);
}
.galaxy-loader_light {
background-color: transparent;
border: 2px solid #58585a;
box-sizing: border-box;
40% {
-webkit-transform: scaleX(1.2);
}
}
.galaxy-loader_dark {
background-color: #2c3143;
border: 2px solid #2c3143;
box-sizing: border-box;
@keyframes galaxy-loader_animation {
0%,
60%,
100% {
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
.galaxy-loader_eu {
background-color: transparent;
border: 2px solid #063591;
box-sizing: border-box;
20% {
transform: scaleX(0.8);
-webkit-transform: scaleX(0.8);
}
.galaxy-loader > div {
background-color: rgba(255, 0, 0, 0.3);
display: block;
height: 18px;
position: absolute;
border-radius: 2px;
-webkit-animation: galaxy-loader_animation 1.2s infinite ease-in-out;
animation: galaxy-loader_animation 1.2s infinite ease-in-out;
}
.galaxy-loader > .galaxy-loader_strip-1 {
top: 16px;
left: 13px;
width: 59px;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.galaxy-loader > .galaxy-loader_strip-2 {
top: 39px;
left: 13px;
width: 44px;
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.galaxy-loader > .galaxy-loader_strip-3 {
top: 61px;
left: 25px;
width: 59px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.galaxy-loader_light > .galaxy-loader_strip-1, .galaxy-loader_light > .galaxy-loader_strip-2 {
background-color: #58585a;
}
.galaxy-loader_light > .galaxy-loader_strip-3 {
background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
}
.galaxy-loader_dark > .galaxy-loader_strip-1, .galaxy-loader_dark > .galaxy-loader_strip-2 {
background-color: white;
}
.galaxy-loader_dark > .galaxy-loader_strip-3 {
background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
}
.galaxy-loader_eu > .galaxy-loader_strip-1, .galaxy-loader_eu > .galaxy-loader_strip-2 {
background-color: #063591;
}
.galaxy-loader_eu > .galaxy-loader_strip-3 {
background: linear-gradient(to right, rgba(207, 188, 59, 1), rgba(207, 188, 59, 1) 20%, rgba(207, 188, 59, 0) 100%);
}
@-webkit-keyframes galaxy-loader_animation {
0%, 60%, 100% {
-webkit-transform: scaleX(1)
}
20% {
-webkit-transform: scaleX(0.8)
}
40% {
-webkit-transform: scaleX(1.2)
}
}
@keyframes galaxy-loader_animation {
0%, 60%, 100% {
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
20% {
transform: scaleX(0.8);
-webkit-transform: scaleX(0.8);
}
40% {
transform: scaleX(1.2);
-webkit-transform: scaleX(1.2);
}
40% {
transform: scaleX(1.2);
-webkit-transform: scaleX(1.2);
}
}
</style>
client/galaxy/scripts/mvc/collection/collection-li.js
+9 -11
View File
@@ -1,12 +1,10 @@
import LIST_ITEM from "mvc/list/list-item";
import DATASET_LI from "mvc/dataset/dataset-li";
import _ from "underscore";
import $ from "jquery";
import { ListItemView, FoldoutListItemView } from "mvc/list/list-item";
import { DatasetListItemView } from "mvc/dataset/dataset-li";
import BASE_MVC from "mvc/base-mvc";
import _l from "utils/localization";
//==============================================================================
var FoldoutListItemView = LIST_ITEM.FoldoutListItemView;
var ListItemView = LIST_ITEM.ListItemView;
/** @class Read only view for DatasetCollection.
*/
var DCListItemView = FoldoutListItemView.extend(
@@ -189,9 +187,9 @@ DCEListItemView.prototype.templates = (() => {
/** @class Read only view for a DatasetCollectionElement that is also an DatasetAssociation
* (a dataset contained in a dataset collection).
*/
var DatasetDCEListItemView = DATASET_LI.DatasetListItemView.extend(
var DatasetDCEListItemView = DatasetListItemView.extend(
/** @lends DatasetDCEListItemView.prototype */ {
className: `${DATASET_LI.DatasetListItemView.prototype.className} dataset-collection-element`,
className: `${DatasetListItemView.prototype.className} dataset-collection-element`,
/** set up */
initialize: function(attributes) {
@@ -199,7 +197,7 @@ var DatasetDCEListItemView = DATASET_LI.DatasetListItemView.extend(
this.logger = this.model.logger = attributes.logger;
}
this.log("DatasetDCEListItemView.initialize:", attributes);
DATASET_LI.DatasetListItemView.prototype.initialize.call(this, attributes);
DatasetListItemView.prototype.initialize.call(this, attributes);
},
/** In this override, only get details if in the ready state.
@@ -210,7 +208,7 @@ var DatasetDCEListItemView = DATASET_LI.DatasetListItemView.extend(
if (view.model.inReadyState() && !view.model.hasDetails()) {
return view.model.fetch({ silent: true });
}
return jQuery.when();
return $.when();
},
// ......................................................................... misc
@@ -239,7 +237,7 @@ DatasetDCEListItemView.prototype.templates = (() => {
"element"
);
return _.extend({}, DATASET_LI.DatasetListItemView.prototype.templates, {
return _.extend({}, DatasetListItemView.prototype.templates, {
titleBar: titleBarTemplate
});
})();
client/galaxy/scripts/mvc/collection/collection-view.js
-3
View File
@@ -1,9 +1,7 @@
import _ from "underscore";
import { getAppRoot } from "onload/loadConfig";
import LIST_VIEW from "mvc/list/list-view";
import DC_MODEL from "mvc/collection/collection-model";
import DC_LI from "mvc/collection/collection-li";
import BASE_MVC from "mvc/base-mvc";
import _l from "utils/localization";
var logNamespace = "collections";
@@ -56,7 +54,6 @@ var CollectionView = _super.extend(
var panel = this;
this.handleWarning($newRender);
panel.log("_queueNewRender:", $newRender, speed);
// TODO: jquery@1.12 doesn't change display when the elem has display: flex
// this causes display: block for those elems after the use of show/hide animations
// animations are removed from this view for now until fixed
client/galaxy/scripts/mvc/dataset/dataset-li.js
+1 -1
View File
@@ -20,7 +20,7 @@ var _super = LIST_ITEM.ListItemView;
/** @class Read only list view for either LDDAs, HDAs, or HDADCEs.
* Roughly, any DatasetInstance (and not a raw Dataset).
*/
var DatasetListItemView = _super.extend(
export var DatasetListItemView = _super.extend(
/** @lends DatasetListItemView.prototype */ {
_logNamespace: logNamespace,
client/galaxy/scripts/mvc/history/hdca-li.js
+3 -4
View File
@@ -1,7 +1,7 @@
import _ from "underscore";
import STATES from "mvc/dataset/states";
import DC_LI from "mvc/collection/collection-li";
import DC_VIEW from "mvc/collection/collection-view";
import BASE_MVC from "mvc/base-mvc";
import HISTORY_ITEM_LI from "mvc/history/history-item-li";
import _l from "utils/localization";
@@ -17,7 +17,8 @@ var HDCAListItemView = _super.extend(
_setUpListeners: function() {
_super.prototype._setUpListeners.call(this);
var renderListen = (model, options) => {
this.render();
// We want this to swap immediately without extra animations.
this.render(0);
};
if (this.model.jobStatesSummary) {
this.listenTo(this.model.jobStatesSummary, "change", renderListen);
@@ -64,9 +65,7 @@ var HDCAListItemView = _super.extend(
stateDescription: function() {
var collection = this.model;
var elementCount = collection.get("element_count");
var jobStateSource = collection.get("job_source_type");
var collectionType = this.model.get("collection_type");
var collectionTypeDescription = DC_VIEW.collectionTypeDescription(collection);
var simpleDescription = DC_VIEW.collectionDescription(collection);
var jobStatesSummary = collection.jobStatesSummary;
client/galaxy/scripts/mvc/history/history-item-li.js
+3 -1
View File
@@ -1,7 +1,9 @@
import Utils from "utils/utils";
function _templateNametag(tag) {
return `<span style="${Utils.generateTagStyle(tag.slice(5))}" class="badge badge-primary badge-tags">${_.escape(tag.slice(5))}</span>`;
return `<span style="${Utils.generateTagStyle(tag.slice(5))}" class="badge badge-primary badge-tags">${_.escape(
tag.slice(5)
)}</span>`;
}
function nametagTemplate(historyItem) {
client/galaxy/scripts/mvc/list/list-item.js
+6 -4
View File
@@ -1,5 +1,7 @@
import $ from "jquery";
import Backbone from "backbone";
import _ from "underscore";
import BASE_MVC from "mvc/base-mvc";
import _l from "utils/localization";
var logNamespace = "list";
//==============================================================================
@@ -142,7 +144,7 @@ var ExpandableView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
if (!this.model.hasDetails()) {
return this.model.fetch();
}
return jQuery.when();
return $.when();
},
/** Inner fn called when expand (public) has fetched the details */
@@ -182,7 +184,7 @@ var ExpandableView = Backbone.View.extend(BASE_MVC.LoggableMixin).extend({
*
* Designed as a base class for history panel contents - but usable elsewhere (I hope).
*/
var ListItemView = ExpandableView.extend(
export var ListItemView = ExpandableView.extend(
BASE_MVC.mixin(BASE_MVC.SelectableViewMixin, BASE_MVC.DraggableViewMixin, {
tagName: "div",
className: "list-item",
@@ -380,7 +382,7 @@ ListItemView.prototype.templates = (() => {
*
* _renderDetails does the work of creating this.details: a sub-view that shows the nested list
*/
var FoldoutListItemView = ListItemView.extend({
export var FoldoutListItemView = ListItemView.extend({
/** If 'foldout': show the sub-panel inside the expanded item
* If 'drilldown': only fire events and handle by pub-sub
* (allow the panel containing this item to attach it, hide itself, etc.)
client/galaxy/scripts/mvc/list/list-view.js
+3
View File
@@ -1,3 +1,6 @@
import $ from "jquery";
import Backbone from "backbone";
import _ from "underscore";
import LIST_ITEM from "mvc/list/list-item";
import LoadingIndicator from "ui/loading-indicator";
import BASE_MVC from "mvc/base-mvc";
client/galaxy/scripts/mvc/ui/ui-select-default.js
+3 -3
View File
@@ -208,9 +208,9 @@ var View = Backbone.View.extend({
${_.reduce(
filteredTags.slice(0, 5),
(memo, tag) => {
return `${memo}&nbsp;<div style="${Utils.generateTagStyle(tag.slice(5))}" class="badge badge-primary badge-tags">${_.escape(
tag
)}</div>`;
return `${memo}&nbsp;<div style="${Utils.generateTagStyle(
tag.slice(5)
)}" class="badge badge-primary badge-tags">${_.escape(tag)}</div>`;
},
""
)}
client/galaxy/scripts/utils/utils.js
+18 -20
View File
@@ -358,7 +358,8 @@ export function setWindowTitle(title) {
* @returns {integer}
*/
function hashFnv32a(str) {
var i, l,
var i,
l,
hval = 0x811c9dc5;
for (i = 0, l = str.length; i < l; i++) {
@@ -380,10 +381,8 @@ function hashFnv32a(str) {
* Assumes r, g, b are in the set [0, 1]
*/
function contrastingColor(r, g, b) {
var o = ((r * 255 * 299) +
(g * 255 * 587) +
(b * 255 * 114)) / 1000;
return (o > 125) ? 'black' : 'white';
var o = (r * 255 * 299 + g * 255 * 587 + b * 255 * 114) / 1000;
return o > 125 ? "black" : "white";
}
/**
@@ -397,26 +396,26 @@ function contrastingColor(r, g, b) {
* @param {number} l The lightness
* @return {Array} The RGB representation
*/
function hslToRgb(h, s, l){
function hslToRgb(h, s, l) {
var r, g, b;
if(s == 0){
if (s == 0) {
r = g = b = l; // achromatic
}else{
var hue2rgb = function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
} else {
var hue2rgb = function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
};
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
b = hue2rgb(p, q, h - 1 / 3);
}
return [r, g, b];
@@ -431,12 +430,11 @@ export function generateTagStyle(tag) {
var brColor = `hsl(${hue}, 100%, ${lightness - 40}%)`;
var [r, g, b] = hslToRgb(hue, 1.0, lightness / 100);
var fgColor = contrastingColor(r, g, b)
var fgColor = contrastingColor(r, g, b);
return `background-color: ${bgColor}; color: ${fgColor}; border: 1px solid ${brColor}`
return `background-color: ${bgColor}; color: ${fgColor}; border: 1px solid ${brColor}`;
}
export default {
cssLoadFile: cssLoadFile,
cssGetAttribute: cssGetAttribute,