Show apps not supported in search

ui/src/components/app.vue

@@ -1,8 +1,19 @@
 <template>
-<div v-if="app_" class="appcard" :class="{'compact': compact, 'clickable': clickable, 'deprecated': app_.deprecated_by}" @click="click">
+<div v-if="app_" class="appcard" :class="cardClasses"  @click="handleClick">
+    <!-- <div v-if="isIncompatible" class="incompatible-message">
+        <h5>Check app inputs</h5>
+    </div> -->
+
+    <div v-if="isIncompatible">
+        <!-- in case if we want to show error-->
+        <!-- <p class="incompatible-error">Check input type</p>  --> 
+        <div class="incompatible-label">Incompatible</div>
+    </div>
+    <div v-if="app_.deprecated_by" class="deprecated-label">Deprecated</div>
+
     <div v-if="compact">
         <appavatar :app="app_" style="position: absolute; right: 0;" :width="80" :height="80"/>
-        <span v-if="app_.deprecated_by" class="deprecated-label" style="top: inherit; bottom: 0;">Deprecated</span>
+        <!-- <span v-if="app_.deprecated_by" class="deprecated-label" style="top: inherit; bottom: 0;">Deprecated</span> -->
         <div style="max-height: 85px; margin-left: 10px; margin-right: 90px; overflow: hidden;">
             <h4 class="name">
                 <icon v-if="app_.projects && app_.projects.length > 0" scale="0.9" name="lock" title="not working.." class="text-secondary"/>
@@ -15,7 +26,7 @@
         <slot/>
     </div>
     <div v-else style="overflow: hidden; position: relative;" :style="{ height }">
-        <span v-if="app_.deprecated_by" class="deprecated-label">Deprecated</span>
+        <!-- <span v-if="app_.deprecated_by" class="deprecated-label">Deprecated</span> -->
         <appavatar :app="app_" style="float: right; margin-left: 10px;" :width="80" :height="80"/>
         <div class="header">
             <h4 class="name">
@@ -133,6 +144,23 @@ export default {
         if(this.app) this.app_ = this.app;
     },
 
+    computed: {
+        isIncompatible() {
+            return this.app_.compatible === false;
+        },
+
+        cardClasses() {
+            return {
+                'clickable': this.clickable && !this.isIncompatible ,
+                'incompatible': this.isIncompatible,
+                'deprecated': this.app_.deprecated_by,
+                'compact': this.compact,
+            }
+            // :class="{'compact': compact, 'clickable': clickable, 'deprecated': app_.deprecated_by}"
+        }
+
+    },
+
     methods: {
         load_app() {
             this.appcache(this.appid, (err, app)=>{
@@ -147,6 +175,12 @@ export default {
             }
         },
 
+        handleClick() {
+            if(!this.isIncompatible && this.clickable) {
+                this.click();
+            }
+        }
+
     },
 }
 </script>
@@ -256,7 +290,7 @@ line-height: 100%;
 .deprecated h4 {
 opacity: 0.7;
 }
-.deprecated-label {
+/* .deprecated-label {
 position: absolute; 
 right: 0; 
 top: 0;
@@ -267,5 +301,51 @@ opacity: 0.9;
 text-transform: uppercase;
 font-size: 80%;
 font-weight: bold;
+} */
+
+.incompatible-label,
+.deprecated-label {
+    position: absolute; 
+    right: 0;
+    background-color: #666;
+    color: white; 
+    padding: 2px 4px;
+    opacity: 0.9;
+    text-transform: uppercase;
+    font-size: 80%;
+    font-weight: bold;
+    z-index: 1;
+}
+
+.incompatible-error {
+    margin-left: 10px;
+    color: #d9534f;
+}
+
+.deprecated-label {
+    top: 0;
+}
+
+.incompatible-label {
+    top: 0px;
 }
-</style>
+
+.appcard.incompatible,
+.appcard.deprecated {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.appcard.incompatible.name,
+.appcard.deprecated.name,
+.appcard.incompatible.github,
+.appcard.deprecated.github {
+    color: #838383;
+}
+
+.incompatible-label {
+    font-size: 70%; 
+    /* //smaller to fit with icon of app */
+}
+
+</style>

ui/src/modals/newtask.vue

@@ -249,7 +249,7 @@ export default {
             this.loading = true;
 
             //create list of all datatypes that user has staged / generated
-            var datatype_ids = [];
+            let datatype_ids = [];
             this.datasets.forEach(dataset=>{
                 if(!~datatype_ids.indexOf(dataset.datatype)) datatype_ids.push(dataset.datatype);
             });
@@ -266,7 +266,7 @@ export default {
             //now find apps that user can submit
             this.$http.get('app', {params: {
                 find: JSON.stringify({
-                    "inputs.datatype": {$in: datatype_ids},
+                    // "inputs.datatype": {$in: datatype_ids},
                     removed: false,
                 }),
                 sort: 'name', 
@@ -276,13 +276,21 @@ export default {
             .then(res=>{
                 //now, pick apps that we have *all* input datasets that matches the input datatype/tags
                 res.data.apps.forEach(app=>{
-                    var match = true;
+                    let match = true;
                     app.inputs.forEach(input=>{
                         if(input.optional) return; //optional 
-                        var matching_dataset = this.datasets.find(dataset=>{
+                        let matching_dataset = this.datasets.find(dataset=>{
                             if(!input.datatype) return false; //only happens on dev?
                             if(dataset.datatype != input.datatype._id) return false;
-                            var match_tag = true;
+
+                            let datatype_id = input.datatype._id;
+                            // Now check if the current input datatype is in the provided datatype_ids
+                            if(datatype_ids.indexOf(datatype_id) === -1) {
+                                // If not, the app is incompatible
+                                match = false;
+                            }
+
+                            let match_tag = true;
                             if(dataset.datatype_tags) input.datatype_tags.forEach(tag=>{
                                 //make sure tag matches
                                 if(tag[0] == "!" && ~dataset.datatype_tags.indexOf(tag.substring(1))) match_tag = false;
@@ -292,7 +300,8 @@ export default {
                         }); 
                         if(!matching_dataset) match = false;
                     });
-                    if(match) this.apps.all.push(app);
+                    app.compatible = match;
+                    this.apps.all.push(app);
                 });
                 this.update_lists();
                 this.loading = false;
@@ -327,7 +336,7 @@ export default {
     },
 
     methods: {
-        update_lists() {
+        async update_lists() {
             //apply filter
             if(!this.filter) this.apps.filtered = this.apps.all.sort((a,b)=>a.name - b.name);
             let l_filter = this.filter.toLowerCase();
@@ -358,10 +367,13 @@ export default {
                 return match;
             });
 
-            let popular_ordered = this.apps.filtered.map(a=>{
-                if(!a.stats) a.stats = {users: 0};
+            let popular_ordered = this.apps.filtered
+            .filter(a => a.compatible) // Only include compatible apps
+            .map(a => {
+                if (!a.stats) a.stats = { users: 0 };
                 return a;
-            }).sort((a,b)=>b.stats.users-a.stats.users)
+            })
+            .sort((a, b) => b.stats.users - a.stats.users);
 
             this.apps.popular = popular_ordered.slice(0, 9);
             this.apps.not_popular = popular_ordered.slice(9);