Skip to content

Commit

Permalink
Merge pull request #13740 from ahmedhamidawan/Highlight_i_o_#13632
Browse files Browse the repository at this point in the history
Highlight Inputs for a given dataset/collection in the history
  • Loading branch information
dannon authored Jun 9, 2022
2 parents 7b3b40f + fbc5731 commit 1ccfe2a
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 2 deletions.
35 changes: 34 additions & 1 deletion client/src/components/History/Content/ContentItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,23 @@
:icon="['far', 'square']"
@click.stop="$emit('update:selected', true)" />
</span>
<span v-if="highlight == 'input'" v-b-tooltip.hover title="Input" @click.stop="toggleHighlights">
<font-awesome-icon class="text-info" icon="arrow-circle-up" />
</span>
<span
v-else-if="highlight == 'noInputs'"
v-b-tooltip.hover
title="No Inputs for this item"
@click.stop="toggleHighlights">
<font-awesome-icon icon="minus-circle" />
</span>
<span
v-else-if="highlight == 'output'"
v-b-tooltip.hover
title="Inputs highlighted for this item"
@click.stop="toggleHighlights">
<font-awesome-icon icon="check-circle" />
</span>
<span v-if="hasStateIcon">
<icon fixed-width :icon="contentState.icon" :spin="contentState.spin" />
</span>
Expand Down Expand Up @@ -60,7 +77,12 @@
@input="onTags" />
<!-- collections are not expandable, so we only need the DatasetDetails component here -->
<div class="detail-animation-wrapper" :class="expandDataset ? '' : 'collapsed'">
<DatasetDetails v-if="expandDataset" :dataset="item" @edit="onEdit" />
<DatasetDetails
v-if="expandDataset"
:dataset="item"
:show-highlight="isHistoryItem && isHistPanel"
@edit="onEdit"
@toggleHighlights="toggleHighlights" />
</div>
</div>
</template>
Expand All @@ -74,19 +96,27 @@ import ContentOptions from "./ContentOptions";
import DatasetDetails from "./Dataset/DatasetDetails";
import { updateContentFields } from "components/History/model/queries";
import { JobStateSummary } from "./Collection/JobStateSummary";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faArrowCircleUp, faMinusCircle, faCheckCircle } from "@fortawesome/free-solid-svg-icons";
library.add(faArrowCircleUp, faMinusCircle, faCheckCircle);
export default {
components: {
CollectionDescription,
ContentOptions,
DatasetDetails,
StatelessTags,
FontAwesomeIcon,
},
props: {
expandDataset: { type: Boolean, required: true },
highlight: { type: String, default: null },
id: { type: Number, required: true },
isDataset: { type: Boolean, default: true },
isHistoryItem: { type: Boolean, default: true },
isHistPanel: { type: Boolean, default: false },
item: { type: Object, required: true },
name: { type: String, required: true },
selected: { type: Boolean, default: false },
Expand Down Expand Up @@ -168,6 +198,9 @@ export default {
onTagClick(tag) {
this.$emit("tag-click", tag.label);
},
toggleHighlights() {
this.$emit("toggleHighlights", this.item);
},
},
};
</script>
Expand Down
13 changes: 13 additions & 0 deletions client/src/components/History/Content/Dataset/DatasetActions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,15 @@
@click.stop="onVisualize">
<span class="fa fa-bar-chart-o" />
</b-button>
<b-button
v-if="showHighlight"
class="px-1"
title="Show Inputs for this item"
size="sm"
variant="link"
@click.stop="onHighlight">
<span class="fa fa-sitemap" />
</b-button>
<b-button v-if="showRerun" class="px-1" title="Help" size="sm" variant="link" @click.stop="onRerun">
<span class="fa fa-question" />
</b-button>
Expand All @@ -68,6 +77,7 @@ export default {
mixins: [legacyNavigationMixin],
props: {
item: { type: Object, required: true },
showHighlight: { type: Boolean, default: false },
},
computed: {
downloadUrl() {
Expand Down Expand Up @@ -125,6 +135,9 @@ export default {
this.backboneRoute(path);
}
},
onHighlight() {
this.$emit("toggleHighlights");
},
},
};
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<span class="value">{{ result.misc_info }}</span>
</div>
</div>
<DatasetActions :item="result" />
<DatasetActions :item="result" :show-highlight="showHighlight" @toggleHighlights="toggleHighlights" />
<pre v-if="result.peek" class="dataset-peek p-1" v-html="result.peek" />
</div>
</div>
Expand All @@ -40,11 +40,17 @@ export default {
},
props: {
dataset: { type: Object, required: true },
showHighlight: { type: Boolean, default: false },
},
computed: {
stateText() {
return STATES[this.dataset.state] && STATES[this.dataset.state].text;
},
},
methods: {
toggleHighlights() {
this.$emit("toggleHighlights");
},
},
};
</script>
67 changes: 67 additions & 0 deletions client/src/components/History/Content/model/highlights.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* Specifies highlighted items in the history listing. The `highlight` property is passed to
* the content item component and can be used to modify its appearance.
* TO DO: Consider case where parameter history is different and hence inputs cannot be seen
* in the current panel.
*/
import axios from "axios";
import { prependPath } from "utils/redirect";
import { deepeach } from "utils/utils";
import { LastQueue } from "utils/promise-queue";

// add promise queue
const lastQueue = new LastQueue(300);

/** Local cache for parameter requests */
const paramStash = new Map();

/** Performs request to obtain dataset parameters */
async function getDatasetParameters(datasetId, jobId) {
if (!paramStash.has(datasetId)) {
const url = jobId
? `api/jobs/${jobId}/parameters_display`
: `api/datasets/${datasetId}/parameters_display?hda_ldda=hda`;
const { data } = await lastQueue.enqueue(axios.get, prependPath(url));
paramStash.set(datasetId, data);
}
return paramStash.get(datasetId);
}

/** Returns item key */
function getKey(details) {
if (details.id && details.src) {
const historyContentType = details.src == "hda" ? "dataset" : "dataset_collection";
return `${details.id}-${historyContentType}`;
}
return null;
}

/** Returns highlighting details */
export async function getHighlights(item, itemKey) {
const highlights = {};
const { outputs, parameters } = await getDatasetParameters(item.id, item.job_source_id);
deepeach(parameters, (details) => {
const key = getKey(details);
if (key) {
highlights[key] = "input";
}
});
deepeach(outputs, (details) => {
const key = getKey(details);
if (key) {
// some other item created this item (e.g.: inheritance)
if (key != itemKey) {
highlights[itemKey] = "output";
highlights[key] = "input";
} else {
highlights[key] = "output";
}
}
});
// highlights only has item itself as an output (i.e.: no inputs)
if (highlights[itemKey] === "output" && Object.keys(highlights).length == 1) {
highlights[itemKey] = "noInputs";
}
// TO DO: Consider case where a job created multiple items (all highlights are outputs)
return highlights;
}
27 changes: 27 additions & 0 deletions client/src/components/History/CurrentHistory/HistoryPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,13 @@
:name="item.name"
:expand-dataset="isExpanded(item)"
:is-dataset="isDataset(item)"
is-hist-panel
:highlight="getHighlight(item)"
:selected="isSelected(item)"
:selectable="showSelection"
@tag-click="onTagClick"
@tag-change="onTagChange"
@toggleHighlights="toggleHighlights"
@update:expand-dataset="setExpanded(item, $event)"
@update:selected="setSelected(item, $event)"
@view-collection="$emit('view-collection', item)"
Expand All @@ -122,6 +125,7 @@ import { HistoryItemsProvider } from "components/providers/storeProviders";
import LoadingSpan from "components/LoadingSpan";
import ContentItem from "components/History/Content/ContentItem";
import { deleteContent, updateContentFields } from "components/History/model/queries";
import { getHighlights } from "components/History/Content/model/highlights";
import ExpandedItems from "components/History/Content/ExpandedItems";
import SelectedItems from "components/History/Content/SelectedItems";
import Listing from "components/History/Layout/Listing";
Expand Down Expand Up @@ -161,6 +165,8 @@ export default {
data() {
return {
filterText: "",
highlights: {},
highlightsKey: null,
invisible: {},
offset: 0,
showAdvanced: false,
Expand Down Expand Up @@ -195,14 +201,22 @@ export default {
queryKey() {
this.invisible = {};
this.offset = 0;
this.resetHighlights();
},
historyId(newVal, oldVal) {
if (newVal !== oldVal) {
this.operationRunning = null;
this.resetHighlights();
}
},
},
methods: {
getHighlight(item) {
return this.highlights[this.getItemKey(item)];
},
getItemKey(item) {
return `${item.id}-${item.history_content_type}`;
},
hasMatches(items) {
return !!items && items.length > 0;
},
Expand Down Expand Up @@ -246,6 +260,19 @@ export default {
console.debug("OPERATION ERROR", error);
this.operationError = error;
},
async toggleHighlights(item) {
const key = this.getItemKey(item);
if (this.highlightsKey != key) {
this.highlightsKey = key;
this.highlights = await getHighlights(item, key);
} else {
this.resetHighlights();
}
},
resetHighlights() {
this.highlights = {};
this.highlightsKey = null;
},
},
};
</script>

0 comments on commit 1ccfe2a

Please sign in to comment.