From 52461fe5b13739d2213c7061e8933861accebbc5 Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Mon, 8 Jan 2024 18:51:43 +0000
Subject: [PATCH 01/16] changed var to let

---
 ui/src/modals/newtask.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index 61214194..22ee93ad 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -276,13 +276,13 @@ 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 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;

From 789a5db046dfd95a484951fa298433ab750a4835 Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Tue, 9 Jan 2024 00:26:30 +0000
Subject: [PATCH 02/16] wip: fetches all apps, filters for popular and not
 popular based of datatype/dataset and show other apps which are deprecated
 and/or incompatible

---
 ui/src/components/app.vue | 76 ++++++++++++++++++++++++++++++++++++---
 ui/src/modals/newtask.vue | 29 +++++++++++----
 2 files changed, 93 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index 326fccc2..b39a08ff 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -1,8 +1,15 @@
 <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" class="incompatible-label">Incompatible</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 +22,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 +140,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 +171,12 @@ export default {
             }
         },
 
+        handleClick() {
+            if(!this.isIncompatible && this.clickable) {
+                this.click();
+            }
+        }
+
     },
 }
 </script>
@@ -256,7 +286,7 @@ line-height: 100%;
 .deprecated h4 {
 opacity: 0.7;
 }
-.deprecated-label {
+/* .deprecated-label {
 position: absolute; 
 right: 0; 
 top: 0;
@@ -267,5 +297,41 @@ 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;
 }
-</style>
+
+.deprecated-label {
+    top: 0;
+}
+
+.incompatible-label {
+    top: 0px;
+}
+
+.appcard.incompatible,
+.appcard.deprecated {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.appcard.incompatible.name,
+.appcard.deprecated.name,
+.appcard.incompatible.github,
+.appcard.deprecated.github {
+    color: #838383;
+}
+
+</style>
\ No newline at end of file
diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index 22ee93ad..3e6603c6 100644
--- a/ui/src/modals/newtask.vue
+++ b/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', 
@@ -275,6 +275,7 @@ export default {
             }})
             .then(res=>{
                 //now, pick apps that we have *all* input datasets that matches the input datatype/tags
+                console.log(res.data.apps);
                 res.data.apps.forEach(app=>{
                     let match = true;
                     app.inputs.forEach(input=>{
@@ -282,6 +283,16 @@ export default {
                         let matching_dataset = this.datasets.find(dataset=>{
                             if(!input.datatype) return false; //only happens on dev?
                             if(dataset.datatype != input.datatype._id) return false;
+
+                            console.log("Checking datype_ids", input.datatype, "all datatypes in this project", datatype_ids);
+
+                            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
@@ -292,7 +303,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 +339,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 +370,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);

From 194da84abbc928f91526adc72f2feef1d5ed3c7a Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Tue, 9 Jan 2024 17:50:42 +0000
Subject: [PATCH 03/16] makes text smaller incompatible to fit with width of
 icon

---
 ui/src/components/app.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index b39a08ff..8da3e94e 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -4,7 +4,11 @@
         <h5>Check app inputs</h5>
     </div> -->
 
-    <div v-if="isIncompatible" class="incompatible-label">Incompatible</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">
@@ -313,6 +317,11 @@ font-weight: bold;
     z-index: 1;
 }
 
+.incompatible-error {
+    margin-left: 10px;
+    color: #d9534f;
+}
+
 .deprecated-label {
     top: 0;
 }
@@ -334,4 +343,9 @@ font-weight: bold;
     color: #838383;
 }
 
+.incompatible-label {
+    font-size: 70%; 
+    /* //smaller to fit with icon of app */
+}
+
 </style>
\ No newline at end of file

From 5d1d3e2f094b49dddbd4f204276ce3503279eadb Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Tue, 9 Jan 2024 17:52:24 +0000
Subject: [PATCH 04/16] removed log statements

---
 ui/src/modals/newtask.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index 3e6603c6..75cde5f8 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -275,7 +275,6 @@ export default {
             }})
             .then(res=>{
                 //now, pick apps that we have *all* input datasets that matches the input datatype/tags
-                console.log(res.data.apps);
                 res.data.apps.forEach(app=>{
                     let match = true;
                     app.inputs.forEach(input=>{
@@ -284,8 +283,6 @@ export default {
                             if(!input.datatype) return false; //only happens on dev?
                             if(dataset.datatype != input.datatype._id) return false;
 
-                            console.log("Checking datype_ids", input.datatype, "all datatypes in this project", datatype_ids);
-
                             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) {

From e5e218c0b5e51a54030db23be61efa6c7d816087 Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Tue, 16 Jan 2024 22:04:25 +0000
Subject: [PATCH 05/16] replaced to use /q to search apps and sorted
 incompatible apps

---
 api/controllers/app.js    | 22 ++++++++++++++++++----
 ui/src/modals/newtask.vue | 32 +++++++++++++++++++++++++++++---
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/api/controllers/app.js b/api/controllers/app.js
index a2796d18..ab073375 100644
--- a/api/controllers/app.js
+++ b/api/controllers/app.js
@@ -37,10 +37,11 @@ function canedit(user, rec) {
  * @apiSuccess {Object}         List of apps (maybe limited / skipped) and total count
  */
 router.get('/', common.jwt({credentialsRequired: false}), (req, res, next)=>{
-    var skip = req.query.skip||0;
+    let skip = req.query.skip||0;
     let limit = req.query.limit||100;
-    var ands = [];
+    let ands = [];
     if(req.query.find) ands.push(JSON.parse(req.query.find));
+    const listIncompatible = req.query.listIncompatible || false;
 
     common.getprojects(req.user, (err, project_ids)=>{
         if(err) return next(err);
@@ -93,7 +94,7 @@ router.get('/query', common.jwt({credentialsRequired: false}), (req, res, next)=
     //and get *all* apps (minus some heavy/unnecessary stuff)
     common.getprojects(req.user, async (err, project_ids)=>{
         if(err) return next(err);
-        const apps = await db.Apps.find({
+        let findQuery = {
             removed: false,
             $or: [
                 //if projects is set, user need to have access to it
@@ -105,7 +106,16 @@ router.get('/query', common.jwt({credentialsRequired: false}), (req, res, next)=
                 {projects: null}, //if projects is set to null, it's avalable to everyoone
                 {projects: {$exists: false}}, //if projects not set, it's availableo to everyone
             ]
-        })
+        };
+        if(req.query.find) findQuery = {$and: [findQuery, JSON.parse(req.query.find)]};
+        if(req.query.listIncompatible) 
+        {
+            delete findQuery.$and
+        };
+        
+        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?)
         .populate('inputs.datatype', 'name desc') 
@@ -113,6 +123,7 @@ router.get('/query', common.jwt({credentialsRequired: false}), (req, res, next)=
         .lean();
 
         if(!req.query.q) return res.json(apps); //if not query is set, return everything
+
         const queryTokens = req.query.q.toLowerCase().split(" ");
 
         //then construct list of tokens for each app to search by
@@ -152,6 +163,9 @@ 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);
     });
 });
diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index 75cde5f8..2a574807 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -41,6 +41,7 @@
                 <!--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>
@@ -264,7 +265,7 @@ export default {
             });
 
             //now find apps that user can submit
-            this.$http.get('app', {params: {
+            this.$http.get('/app/query', {params: {
                 find: JSON.stringify({
                     // "inputs.datatype": {$in: datatype_ids},
                     removed: false,
@@ -272,10 +273,12 @@ export default {
                 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.apps.forEach(app=>{
+                res.data.forEach(app=>{
                     let match = true;
                     app.inputs.forEach(input=>{
                         if(input.optional) return; //optional 
@@ -340,6 +343,7 @@ export default {
             //apply filter
             if(!this.filter) this.apps.filtered = this.apps.all.sort((a,b)=>a.name - b.name);
             let l_filter = this.filter.toLowerCase();
+
             this.apps.filtered = this.apps.all.filter(app=>{
                 let match = false;
                 if(app.name && app.name.toLowerCase().includes(l_filter)) match = true;
@@ -367,6 +371,10 @@ export default {
                 return match;
             });
 
+            //should i put a check for if filtered contains apps that are incompatible?
+            this.apps.filtered = this.sortByMissingDatatypes(this.apps.filtered);
+
+            
             let popular_ordered = this.apps.filtered
             .filter(a => a.compatible) // Only include compatible apps
             .map(a => {
@@ -643,7 +651,25 @@ export default {
             let inputs = this.wrap_with_label(this.filter_datasets(input));
             input.selected.push(...inputs);
             this.validate();
-        }
+        },
+        sortByMissingDatatypes(apps) {
+            // For each app, calculate the number of missing datatypes
+            apps.forEach(app => {
+                let missingDatatypesCount = 0;
+                app.inputs.forEach(input => {
+                    if (!input.optional) {
+                        const isDatatypePresent = this.datasets.some(dataset => dataset.datatype === input.datatype._id);
+                        if (!isDatatypePresent) {
+                            missingDatatypesCount++;
+                        }
+                    }
+                });
+                app.missingDatatypesCount = missingDatatypesCount;
+            });
+
+            // Sort apps by the number of missing datatypes in ascending order
+            return apps.sort((a, b) => a.missingDatatypesCount - b.missingDatatypesCount);
+        },
     },
 } 
 </script>

From 32674d957d4a578425b37c12dc17a96211ab123b Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Wed, 17 Jan 2024 21:03:57 +0000
Subject: [PATCH 06/16] adds visual changes-> marks missing datatype to red,
 refactor the api to remove params

---
 api/controllers/app.js            | 16 +++++++---------
 ui/src/components/app.vue         | 10 +++++++++-
 ui/src/components/datatypetag.vue |  6 +++++-
 ui/src/modals/newtask.vue         | 21 ++++++++++++++-------
 4 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/api/controllers/app.js b/api/controllers/app.js
index ab073375..670ff98c 100644
--- a/api/controllers/app.js
+++ b/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);
     });
 });
diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index 8da3e94e..b711d1f7 100644
--- a/ui/src/components/app.vue
+++ b/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>
 
diff --git a/ui/src/components/datatypetag.vue b/ui/src/components/datatypetag.vue
index 60942b86..49fb0927 100644
--- a/ui/src/components/datatypetag.vue
+++ b/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>
diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index 2a574807..963e4999 100644
--- a/ui/src/modals/newtask.vue
+++ b/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();

From d5e6d53e7f06dd464abb38b2cdcb6c0aa8716794 Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Wed, 17 Jan 2024 21:42:04 +0000
Subject: [PATCH 07/16] removed comment

---
 ui/config/dev.env.js.sample | 9 ---------
 ui/src/components/app.vue   | 4 ----
 2 files changed, 13 deletions(-)
 delete mode 100644 ui/config/dev.env.js.sample

diff --git a/ui/config/dev.env.js.sample b/ui/config/dev.env.js.sample
deleted file mode 100644
index 6cb43d13..00000000
--- a/ui/config/dev.env.js.sample
+++ /dev/null
@@ -1,9 +0,0 @@
-const merge = require('webpack-merge')
-const prodEnv = require('./prod.env')
-
-//if you update this, you will need to restart the dev server for it to take effect
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"',
-  HOSTNAME: '"dev2.soichi.us"' //default to window.location.hostname
-})
-
diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index 95b43ad2..2dbf9a3e 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -1,9 +1,5 @@
 <template>
 <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>  --> 

From 2f8759354bf2c02e14ae7c0ecb97dadf3953ca2e Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Wed, 17 Jan 2024 21:43:25 +0000
Subject: [PATCH 08/16] removed async

---
 ui/src/components/app.vue | 2 --
 ui/src/modals/newtask.vue | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index 2dbf9a3e..291d97ef 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -1,8 +1,6 @@
 <template>
 <div v-if="app_" class="appcard" :class="cardClasses"  @click="handleClick">
     <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>
diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index c037d955..0cb51c3b 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -346,7 +346,7 @@ export default {
     },
 
     methods: {
-        async update_lists() {
+        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();

From 44102e54dca305234f4c19a69942d9a1f5227636 Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Wed, 17 Jan 2024 21:46:51 +0000
Subject: [PATCH 09/16] uncomment deprecated in compact

---
 ui/src/components/app.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index 291d97ef..36f50e57 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -7,7 +7,7 @@
 
     <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"/>
@@ -20,7 +20,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">

From 4c3eb22b3a5845d7d7969881c8b3e378df7fac41 Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Wed, 17 Jan 2024 21:52:22 +0000
Subject: [PATCH 10/16] fixed removed file

---
 ui/config/dev.env.js.sample | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 ui/config/dev.env.js.sample

diff --git a/ui/config/dev.env.js.sample b/ui/config/dev.env.js.sample
new file mode 100644
index 00000000..6cb43d13
--- /dev/null
+++ b/ui/config/dev.env.js.sample
@@ -0,0 +1,9 @@
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+//if you update this, you will need to restart the dev server for it to take effect
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"',
+  HOSTNAME: '"dev2.soichi.us"' //default to window.location.hostname
+})
+

From 615035f14debb1f4ff27862f04b5c08eefaec940 Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Tue, 23 Jan 2024 05:16:54 +0000
Subject: [PATCH 11/16] removed comment

---
 ui/src/modals/newtask.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index 0cb51c3b..b75f410c 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -378,7 +378,6 @@ export default {
                 return match;
             });
 
-            //should i put a check for if filtered contains apps that are incompatible?
             this.apps.filtered = this.sortByMissingDatatypes(this.apps.filtered);
 
             

From dad6cb638954b02e627f30c76e1e5d1c50fee13d Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Tue, 23 Jan 2024 18:42:14 +0000
Subject: [PATCH 12/16] incompatible apps are computed on the api now

---
 api/controllers/app.js    | 138 ++++++++++++++++++++++++++------------
 ui/src/modals/newtask.vue |  93 +++++++++++++------------
 2 files changed, 145 insertions(+), 86 deletions(-)

diff --git a/api/controllers/app.js b/api/controllers/app.js
index d0435ce0..f5fa226a 100644
--- a/api/controllers/app.js
+++ b/api/controllers/app.js
@@ -11,6 +11,7 @@ const config = require('../config');
 const db = require('../models');
 const common = require('../common');
 const provenance = require('../lib/provenance');
+const e = require('express');
 
 function canedit(user, rec) {
     if(user) {
@@ -37,11 +38,10 @@ function canedit(user, rec) {
  * @apiSuccess {Object}         List of apps (maybe limited / skipped) and total count
  */
 router.get('/', common.jwt({credentialsRequired: false}), (req, res, next)=>{
-    let skip = req.query.skip||0;
-    let limit = req.query.limit||100;
-    let ands = [];
+    const skip = req.query.skip||0;
+    const limit = req.query.limit||100;
+    const ands = [];
     if(req.query.find) ands.push(JSON.parse(req.query.find));
-    const listIncompatible = req.query.listIncompatible || false;
 
     common.getprojects(req.user, (err, project_ids)=>{
         if(err) return next(err);
@@ -108,63 +108,113 @@ 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.incompatible === 'true') {
+        
+        let datatype_ids = [];
+
+        if(req.query.includeIncompatible === 'true') {
             // When incompatible flag is true, remove the datatype filter
             if(findQuery.$and) {
                 findQuery.$and = findQuery.$and.filter(query => !query["inputs.datatype"]);
             }
+            datatype_ids = JSON.parse(req.query.find)?.['inputs.datatype']?.['$in'];
         }
-    
         
-        const apps = await db.Apps.find(findQuery)
+        let 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?)
         .populate('inputs.datatype', 'name desc') 
         .populate('outputs.datatype', 'name desc')
         .lean();
 
-        if(!req.query.q) return res.json(apps); //if not query is set, return everything
-
-        const queryTokens = req.query.q.toLowerCase().split(" ");
-
-        //then construct list of tokens for each app to search by
-        apps.forEach(app=>{
-            let tokens = [
-                app.name, 
-                app.github_branch, 
-                app.github, 
-                app.desc, 
-                app.desc_override, 
-                app.doi, 
-                ...app.tags
-            ];
-            app.inputs.forEach(input=>{
-                tokens = [...tokens, ...input.datatype_tags, input.datatype.name, input.datatype.desc];
-            });
-            app.outputs.forEach(output=>{
-                tokens = [...tokens, ...output.datatype_tags, output.datatype.name, output.datatype.desc];
-            });
-            tokens = tokens.filter(token=>!!token).map(token=>token.toLowerCase());
+        console.log("found apps", apps.length, "query", findQuery);
+
+        if(!req.query.q && !req.query.includeIncompatible) {
+            return res.json(apps);
+        } //if not query is set, return everything
+
+
+        if(req.query.q && !req.query.includeIncompatible) {
+            const queryTokens = req.query.q.toLowerCase().split(" ");
+            //then construct list of tokens for each app to search by
+            apps.forEach(app=>{
+                let tokens = [
+                    app.name, 
+                    app.github_branch, 
+                    app.github, 
+                    app.desc, 
+                    app.desc_override, 
+                    app.doi, 
+                    ...app.tags
+                ];
+                app.inputs.forEach(input=>{
+                    tokens = [...tokens, ...input.datatype_tags, input.datatype.name, input.datatype.desc];
+                });
+                app.outputs.forEach(output=>{
+                    tokens = [...tokens, ...output.datatype_tags, output.datatype.name, output.datatype.desc];
+                });
+                tokens = tokens.filter(token=>!!token).map(token=>token.toLowerCase());
 
-            //let's just store it as part of the app
-            app._tokens = tokens.join(" ");
-        });
+                //let's just store it as part of the app
+                app._tokens = tokens.join(" ");
+            });
 
-        //then filter apps using _tokens
-        const filtered = apps.filter(app=>{
-            //for each query token, make sure all token matches somewhere in _tokens
-            let match = true;
-            queryTokens.forEach(token=>{
-                if(!match) return; //we already know it won't match
-                if(!app._tokens.includes(token)) match = false;
+            //then filter apps using _tokens
+            const filtered = apps.filter(app=>{
+                //for each query token, make sure all token matches somewhere in _tokens
+                let match = true;
+                queryTokens.forEach(token=>{
+                    if(!match) return; //we already know it won't match
+                    if(!app._tokens.includes(token)) match = false;
+                });
+                return match;
             });
-            return match;
-        });
 
-        //remove _tokens from the apps to reduce returning weight a bit
-        filtered.forEach(app=>{ delete app._tokens; });
+            //remove _tokens from the apps to reduce returning weight a bit
+            apps = filtered.forEach(app=>{ delete app._tokens; });
+        }
+        
+        // if includeIncompatible then include with app.compatible = false / true based on datatype_ids
+        if(req.query.includeIncompatible === 'true' && !req.query.q) {
+
+            const datasetIds = req.query.datasetIds ? JSON.parse(req.query.datasetIds) : [];
+            const datasets = await db.Datasets.find({$or: [{datatype: {$in: datatype_ids}}, {_id: {$in: datasetIds}}]}).lean();
+
+            
+            apps.forEach(app => {
+                let missingInputIDs = [];
+                let match = true;
+            
+                app.inputs.forEach(input => {
+                    if(input.optional) return; 
+            
+                    let matching_dataset = datasets.find(dataset => {
+                        if(!input.datatype) return false; 
+                        if(dataset.datatype.toString() !== input.datatype._id.toString()) return false;
+            
+                        let match_tag = true;
+                        if(dataset.datatype_tags && input.datatype_tags) {
+                            input.datatype_tags.forEach(tag => {
+                                if(tag[0] === "!" && dataset.datatype_tags.includes(tag.substring(1))) match_tag = false;
+                                if(tag[0] !== "!" && !dataset.datatype_tags.includes(tag)) match_tag = false;
+                            });
+                        }
+                        return match_tag;
+                    });
+            
+                    if(!matching_dataset) {
+                        missingInputIDs.push(input._id);
+                        match = false;
+                    }
+                });
+            
+                app.compatible = match;
+                if(!match) {
+                    app.missingInputIDs = missingInputIDs;
+                }
+            });
+        }
 
-        res.json(filtered);
+        res.json(apps);
     });
 });
 
diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index b75f410c..80a826ff 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -265,54 +265,64 @@ export default {
 
             //now find apps that user can submit
             this.$http.get('/app/query', {params: {
+                find: JSON.stringify({
+                    "inputs.datatype": {$in: datatype_ids},
+                }),
                 sort: 'name', 
                 populate: 'inputs.datatype outputs.datatype',
                 limit: 500, //TODO - this is not sustailable
-                incompatible: true
+                includeIncompatible: true,
+                dataset_ids: this.datasets.map(d=>d._id),
             }})
             .then(res=>{
-                //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?
-                            if(dataset.datatype != input.datatype._id) return false;
-
-                            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;
-                            }
+                // 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=>{
+                        
+                //         if(input.optional) return; //optional 
+
+                //         console.log("this datasets",this.datasets);
+                //         let matching_dataset = this.datasets.find(dataset=>{
+                //             if(!input.datatype) return false; //only happens on dev?
+                //             if(dataset.datatype != input.datatype._id) return false;
+
+                //             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;
-                                if(tag[0] != "!" && !~dataset.datatype_tags.indexOf(tag)) match_tag = false;
-                            });
-                            return match_tag;
-                        }); 
-                        if(!matching_dataset){
-                            missingInputIDs.push(input._id); // Add the missing input to the list
-                            match = false;
-                        }
-                    });
-                    app.compatible = match;
+                //             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;
+                //                 if(tag[0] != "!" && !~dataset.datatype_tags.indexOf(tag)) match_tag = false;
+                //             });
+                //             return match_tag;
+                //         }); 
+
+                //         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.apps.all = res.data;
+                console.log("all apps length", this.apps.all, "incompatible app length", this.apps.all.filter(app => !app.compatible).length);
 
-                    //should I just push the array of missing inputs?
-                    if (!match) {
-                        app.missingInputIDs = missingInputIDs;
-                    }
-
-                    this.apps.all.push(app);
-                });
                 this.update_lists();
                 this.loading = false;
             }).catch(console.error);
@@ -380,7 +390,6 @@ export default {
 
             this.apps.filtered = this.sortByMissingDatatypes(this.apps.filtered);
 
-            
             let popular_ordered = this.apps.filtered
             .filter(a => a.compatible) // Only include compatible apps
             .map(a => {

From 5c68b303c1e307117b69982e326a87b815956bde Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Tue, 23 Jan 2024 18:49:42 +0000
Subject: [PATCH 13/16] added PR review changes and removed redundant code

---
 ui/src/components/app.vue | 24 +++++---------------
 ui/src/modals/newtask.vue | 47 ---------------------------------------
 2 files changed, 6 insertions(+), 65 deletions(-)

diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index 36f50e57..d7a7f8d9 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="app_" class="appcard" :class="cardClasses"  @click="handleClick">
-    <div v-if="isIncompatible">
+    <div v-if="!isCompatible">
         <div class="incompatible-label">Incompatible</div>
     </div>
     <div v-if="app_.deprecated_by" class="deprecated-label">Deprecated</div>
@@ -147,14 +147,14 @@ export default {
     },
 
     computed: {
-        isIncompatible() {
-            return this.app_.compatible === false;
+        isCompatible() {
+            return this.app_.compatible === true;
         },
 
         cardClasses() {
             return {
-                'clickable': this.clickable && !this.isIncompatible ,
-                'incompatible': this.isIncompatible,
+                'clickable': this.clickable && this.isCompatible ,
+                'incompatible': this.isCompatible,
                 'deprecated': this.app_.deprecated_by,
                 'compact': this.compact,
             }
@@ -178,7 +178,7 @@ export default {
         },
 
         handleClick() {
-            if(!this.isIncompatible && this.clickable) {
+            if(this.isCompatible && this.clickable) {
                 this.click();
             }
         }
@@ -292,18 +292,6 @@ line-height: 100%;
 .deprecated h4 {
 opacity: 0.7;
 }
-/* .deprecated-label {
-position: absolute; 
-right: 0; 
-top: 0;
-background-color: #666;
-color: white; 
-padding: 2px 4px;
-opacity: 0.9;
-text-transform: uppercase;
-font-size: 80%;
-font-weight: bold;
-} */
 
 .incompatible-label,
 .deprecated-label {
diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index 80a826ff..162cdae0 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -275,54 +275,7 @@ export default {
                 dataset_ids: this.datasets.map(d=>d._id),
             }})
             .then(res=>{
-                // 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=>{
-                        
-                //         if(input.optional) return; //optional 
-
-                //         console.log("this datasets",this.datasets);
-                //         let matching_dataset = this.datasets.find(dataset=>{
-                //             if(!input.datatype) return false; //only happens on dev?
-                //             if(dataset.datatype != input.datatype._id) return false;
-
-                //             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;
-                //                 if(tag[0] != "!" && !~dataset.datatype_tags.indexOf(tag)) match_tag = false;
-                //             });
-                //             return match_tag;
-                //         }); 
-
-                //         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.apps.all = res.data;
-                console.log("all apps length", this.apps.all, "incompatible app length", this.apps.all.filter(app => !app.compatible).length);
-
                 this.update_lists();
                 this.loading = false;
             }).catch(console.error);

From 8d80c238f92d8c7b1d7a40da3518489f46022f0f Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Tue, 23 Jan 2024 18:54:59 +0000
Subject: [PATCH 14/16] added PR review changes

---
 ui/src/modals/newtask.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/modals/newtask.vue b/ui/src/modals/newtask.vue
index 162cdae0..b68ba5ba 100644
--- a/ui/src/modals/newtask.vue
+++ b/ui/src/modals/newtask.vue
@@ -249,7 +249,7 @@ export default {
             this.loading = true;
 
             //create list of all datatypes that user has staged / generated
-            let datatype_ids = [];
+            const datatype_ids = [];
             this.datasets.forEach(dataset=>{
                 if(!~datatype_ids.indexOf(dataset.datatype)) datatype_ids.push(dataset.datatype);
             });

From 63f9b3c14fafe264892d575902b4bb78d07c57df Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Mon, 18 Mar 2024 18:02:02 +0000
Subject: [PATCH 15/16] minor fix

---
 ui/src/components/app.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index d7a7f8d9..9f49671c 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="app_" class="appcard" :class="cardClasses"  @click="handleClick">
-    <div v-if="!isCompatible">
+    <div v-if="app_.compatible === false">
         <div class="incompatible-label">Incompatible</div>
     </div>
     <div v-if="app_.deprecated_by" class="deprecated-label">Deprecated</div>
@@ -147,9 +147,9 @@ export default {
     },
 
     computed: {
-        isCompatible() {
-            return this.app_.compatible === true;
-        },
+        // isCompatible() {
+        //     return this.app_.compatible === true;
+        // },
 
         cardClasses() {
             return {

From c611c8447401ea9347d8aad7cefe7f64594377c4 Mon Sep 17 00:00:00 2001
From: bhatiadheeraj <dheerajbhatia2010@gmail.com>
Date: Mon, 18 Mar 2024 18:16:30 +0000
Subject: [PATCH 16/16] removed comment

---
 ui/src/components/app.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/ui/src/components/app.vue b/ui/src/components/app.vue
index 9f49671c..777d6d98 100644
--- a/ui/src/components/app.vue
+++ b/ui/src/components/app.vue
@@ -147,9 +147,6 @@ export default {
     },
 
     computed: {
-        // isCompatible() {
-        //     return this.app_.compatible === true;
-        // },
 
         cardClasses() {
             return {