Consider edge cases for I/O highlighting, use FA icons

galaxyproject · Jun 9, 2022 · fbc5731 · fbc5731
1 parent 3e5213d
commit fbc5731
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
@@ -24,21 +24,21 @@
                             @click.stop="$emit('update:selected', true)" />
                     </span>
                     <span v-if="highlight == 'input'" v-b-tooltip.hover title="Input" @click.stop="toggleHighlights">
-                        <span class="text-info fa fa-arrow-circle-up fa-fw" />
+                        <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">
-                        <span class="text-info fa fa-minus-circle fa-fw" />
+                        <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">
-                        <span class="fa fa-check-circle fa-fw" />
+                        <font-awesome-icon icon="check-circle" />
                     </span>
                     <span v-if="hasStateIcon">
                         <icon fixed-width :icon="contentState.icon" :spin="contentState.spin" />
@@ -96,13 +96,19 @@ 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 },

diff --git a/client/src/components/History/Content/model/highlights.js b/client/src/components/History/Content/model/highlights.js
@@ -1,6 +1,8 @@
 /**
  * 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";
@@ -35,7 +37,7 @@ function getKey(details) {
 }
 
 /** Returns highlighting details */
-export async function getHighlights(item) {
+export async function getHighlights(item, itemKey) {
     const highlights = {};
     const { outputs, parameters } = await getDatasetParameters(item.id, item.job_source_id);
     deepeach(parameters, (details) => {
@@ -47,8 +49,19 @@ export async function getHighlights(item) {
     deepeach(outputs, (details) => {
         const key = getKey(details);
         if (key) {
-            highlights[key] = "output";
+            // 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;
 }
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -212,26 +212,7 @@ export default {
     },
     methods: {
         getHighlight(item) {
-            const key = this.getItemKey(item);
-            // the current item has one item in its parameters (i.e.: outputs)
-            if (Object.keys(this.highlights).length == 1) {
-                // parameters has itself as an output (i.e.: no inputs)
-                if (key == this.highlightsKey && this.highlights[key] == "output") {
-                    return "noInputs";
-                }
-                // parameters has another item as output but not current one
-                // (i.e.: the current one is an output)
-                else if (key == this.highlightsKey) {
-                    return "output";
-                }
-                // parameters has another item as output but not current one
-                // (i.e.: must be the item that created it/it was copied from)
-                else if (this.highlights[key] == "output") {
-                    return "input";
-                }
-            } else {
-                return this.highlights[key];
-            }
+            return this.highlights[this.getItemKey(item)];
         },
         getItemKey(item) {
             return `${item.id}-${item.history_content_type}`;
@@ -283,7 +264,7 @@ export default {
             const key = this.getItemKey(item);
             if (this.highlightsKey != key) {
                 this.highlightsKey = key;
-                this.highlights = await getHighlights(item);
+                this.highlights = await getHighlights(item, key);
             } else {
                 this.resetHighlights();
             }