adds visual changes-> marks missing datatype to red, refactor the api…

… to remove params

api/controllers/app.js

@@ -108,13 +108,14 @@ router.get('/query', common.jwt({credentialsRequired: false}), (req, res, next)=
             ]
         };
         if(req.query.find) findQuery = {$and: [findQuery, JSON.parse(req.query.find)]};
-        if(req.query.listIncompatible) 
-        {
-            delete findQuery.$and
-        };
+        if(req.query.incompatible === 'true') {
+            // When incompatible flag is true, remove the datatype filter
+            if(findQuery.$and) {
+                findQuery.$and = findQuery.$and.filter(query => !query["inputs.datatype"]);
+            }
+        }
+
 
-        console.log("findQuery", JSON.stringify(findQuery));
-
         const apps = await db.Apps.find(findQuery)
         .select('-config -stats.gitinfo -contributors') //cut things we don't need
         //we want to search into datatype name/desc (desc might be too much?)
@@ -163,9 +164,6 @@ router.get('/query', common.jwt({credentialsRequired: false}), (req, res, next)=
         //remove _tokens from the apps to reduce returning weight a bit
         filtered.forEach(app=>{ delete app._tokens; });
 
-        // seprate results of {"inputs.datatype":{"$in":["58c33bcee13a50849b25879a"]} 
-        // and ones which don't have it (so we can sort them separately) as incompatibleList
-
         res.json(filtered);
     });
 });

ui/src/components/app.vue

@@ -37,9 +37,14 @@
             </h4>
             <h5 class="github">{{app_.github}} <b-badge>{{branch||app_.github_branch}}</b-badge></h5>
             <div class="datatypes">
+
+                <b-badge v-if="app_.missingInputIDs && app_.missingInputIDs.length > 0" pill variant="danger">Missing inputs <br/></b-badge> <br/>
+
                 In
                 <div class="datatype" v-for="input in app_.inputs" :key="'input.'+input.id" :class="[input.optional?'input-optional':'']">
-                    <datatypetag :datatype="input.datatype" :tags="input.datatype_tags" :clickable="false"/>
+
+                    <datatypetag :datatype="input.datatype" :tags="input.datatype_tags" :clickable="false" :missing="app_.missingInputIDs && app_.missingInputIDs.includes(input._id)"/>
+
                     <b v-if="input.multi">multi</b>
                     <b v-if="input.optional">opt</b>
                 </div>
@@ -94,7 +99,10 @@
             </span>
             <span v-if="showDoi && app_.doi">{{app_.doi}}</span>
         </div>
+
+
     </div>
+
 </div>
 </template>
 

ui/src/components/datatypetag.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-if="ready" class="dt" :class="{'dt-clickable': clickable}" @click="click">
+<div v-if="ready" class="dt" :class="{'dt-clickable': clickable, 'dt-missing': missing}" @click="click">
     <icon v-if="_datatype && _datatype.groupAnalysis" name="dot-circle" :style="{color}" scale="1" class="dot"/>
     <icon v-else name="circle" :style="{color}" scale="1" class="dot"/>
     {{name}}
@@ -22,6 +22,7 @@ export default {
         tags: { type: Array, }, 
         trimname: { type: Boolean, default: true, },
         clickable: { type: Boolean, default: true, },
+        missing: { type: Boolean, default: false },
     },
     
     data() {
@@ -122,4 +123,7 @@ export default {
 .tags:not(:last-child) {
     border-right: 1px solid #0001;
 }
+.dt-missing {
+    color: red;
+}
 </style>

ui/src/modals/newtask.vue

@@ -41,7 +41,6 @@
                 <!--show everything together if there are less than 9-->
                 <div v-else>
                     <div v-for="app in apps.filtered" :key="app._id">
-                        <h3>in Filtered {{ app.stats.users }}</h3>
                         <div class="app" @click="selectapp(app)">
                             <app :app="app" :clickable="false" class="clickable" height="230px"/>
                         </div>
@@ -266,21 +265,20 @@ export default {
 
             //now find apps that user can submit
             this.$http.get('/app/query', {params: {
-                find: JSON.stringify({
-                    // "inputs.datatype": {$in: datatype_ids},
-                    removed: false,
-                }),
                 sort: 'name', 
                 populate: 'inputs.datatype outputs.datatype',
                 limit: 500, //TODO - this is not sustailable
                 incompatible: true
             }})
             .then(res=>{
-                console.log(res.data);
                 //now, pick apps that we have *all* input datasets that matches the input datatype/tags
                 res.data.forEach(app=>{
                     let match = true;
+                    let missingInputIDs = []; // Store missing inputs here
+
                     app.inputs.forEach(input=>{
+                        //In this context, return is used to skip the current iteration and move on to the next one, 
+                        //not to return a value from a function.
                         if(input.optional) return; //optional 
                         let matching_dataset = this.datasets.find(dataset=>{
                             if(!input.datatype) return false; //only happens on dev?
@@ -301,9 +299,18 @@ export default {
                             });
                             return match_tag;
                         }); 
-                        if(!matching_dataset) match = false;
+                        if(!matching_dataset){
+                            missingInputIDs.push(input._id); // Add the missing input to the list
+                            match = false;
+                        }
                     });
                     app.compatible = match;
+
+                    //should I just push the array of missing inputs?
+                    if (!match) {
+                        app.missingInputIDs = missingInputIDs;
+                    }
+
                     this.apps.all.push(app);
                 });
                 this.update_lists();