Added Ligands, added instructions to DTI lab, need inference fix

src/server/api_handlers/drug_target.py

@@ -83,7 +83,25 @@ def predict_binding_pocket(self, request):
                                                 )
 
         return pocket
+
+
+    def add_ligand(self, request):
+        ligand_file = request.files['ligandFileInput']
+        experiment_name = request.form['experimentName']
+        experiment_id = request.form['experimentId']
+
+        self.experiments_loader.save_experiment_metadata(experiment_id, experiment_name=experiment_name)
+        self.experiments_loader.store_ligand(experiment_id, ligand_file)
+
+        return {'id': experiment_id, 'name': experiment_name}
+
+    def load_ligands(self, request):
+        experiment_name = request.args.get('name')
+        experiment_id = request.args.get('id')
+
+        ligands = self.experiments_loader.load_ligands(experiment_id)
 
+        return {'id': experiment_id, 'name': experiment_name, 'ligands': ligands}
 
 
     def get_experiments(self):

src/server/drug_target_blueprint.py

@@ -29,6 +29,14 @@ def get_binding_pocket():
     @drug_target_bp.route('/predict-binding-pocket', methods=['GET'])
     def predict_binding_pocket():
         return api_handler.predict_binding_pocket(request)
+
+    @drug_target_bp.route('/add-ligand', methods=['POST'])
+    def add_ligand():
+        return api_handler.add_ligand(request)
+
+    @drug_target_bp.route('/load-ligands', methods=['GET'])
+    def load_ligands():
+        return api_handler.load_ligands(request)
 
     @drug_target_bp.route('/experiments')
     def get_experiments():

src/server/experiments/drug_discovery/25befab3-cb27-4f04-a454-b966ebedbc0c/ligands/bdf14e62-c831-4871-864d-42c96156a9c7/ChEBI_3176.sdf

@@ -0,0 +1,119 @@
+
+Marvin  11220711552D          
+
+ 23 24  0  0  0  0            999 V2000
+    9.6698   -9.5097    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   11.0988   -8.6847    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   11.0988   -9.5097    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   11.8834   -9.7646    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   11.8834   -8.4297    0.0000 S   0  0  0  0  0  0  0  0  0  0  0  0
+   12.3683   -9.0972    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   14.0183   -9.0972    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
+   10.3843   -9.9222    0.0000 C   0  0  1  0  0  0  0  0  0  0  0  0
+    9.6698   -8.6847    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
+    8.9554   -8.2722    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    8.2409   -8.6847    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    7.5264   -8.2722    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    6.8120   -8.6847    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
+    6.0975   -8.2722    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+    9.8009   -7.6888    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
+   10.3843   -8.2722    0.0000 S   0  0  3  0  0  0  0  0  0  0  0  0
+   10.9677   -7.6888    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
+   13.1933   -8.2722    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
+   13.1933   -9.0972    0.0000 S   0  0  3  0  0  0  0  0  0  0  0  0
+   13.1933   -9.9222    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
+   10.3843  -10.7472    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0
+   11.0988  -11.1597    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+   11.0988  -11.9847    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
+ 16  9  1  0  0  0  0
+ 16  2  1  0  0  0  0
+  9  1  1  0  0  0  0
+  1  8  1  0  0  0  0
+  8  3  1  0  0  0  0
+  5  2  1  0  0  0  0
+  2  3  2  0  0  0  0
+  3  4  1  0  0  0  0
+  5  6  1  0  0  0  0
+  4  6  2  0  0  0  0
+  6 19  1  0  0  0  0
+ 19  7  1  0  0  0  0
+  8 21  1  1  0  0  0
+  9 10  1  0  0  0  0
+ 10 11  1  0  0  0  0
+ 11 12  1  0  0  0  0
+ 12 13  1  0  0  0  0
+ 13 14  1  0  0  0  0
+ 16 15  2  0  0  0  0
+ 16 17  2  0  0  0  0
+ 19 18  2  0  0  0  0
+ 19 20  2  0  0  0  0
+ 21 22  1  0  0  0  0
+ 22 23  1  0  0  0  0
+M  END
+> <ID>
+CHEBI:3176
+
+> <NAME>
+brinzolamide
+
+> <STAR>
+3
+
+> <SECONDARY_ID>
+CHEBI:499968
+
+> <SYNONYM>
+Brinzolamide; Azopt
+
+> <IUPAC_NAME>
+(4R)-4-(ethylamino)-2-(3-methoxypropyl)-3,4-dihydro-2H-thieno[3,2-e][1,2]thiazine-6-sulfonamide 1,1-dioxide
+
+> <FORMULA>
+C12H21N3O5S3
+
+> <MASS>
+383.50700
+
+> <MONOISOTOPIC_MASS>
+383.06433
+
+> <CHARGE>
+0
+
+> <SMILES>
+CCN[C@H]1CN(CCCOC)S(=O)(=O)c2sc(cc12)S(N)(=O)=O
+
+> <INCHI>
+InChI=1S/C12H21N3O5S3/c1-3-14-10-8-15(5-4-6-20-2)23(18,19)12-9(10)7-11(21-12)22(13,16)17/h7,10,14H,3-6,8H2,1-2H3,(H2,13,16,17)/t10-/m0/s1
+
+> <INCHIKEY>
+HCRKCZRJWPKOAR-JTQLQIEISA-N
+
+> <BEILSTEIN_REGISTRY_NUMBER>
+9651552
+
+> <CAS_REGISTRY_NUMBER>
+138890-62-7
+
+> <CHEMIDPLUS>
+138890-62-7
+
+> <DRUGBANK_ACCESSION>
+DB01194
+
+> <KEGG_COMPOUND_ACCESSION>
+C07760
+
+> <KEGG_DRUG_ACCESSION>
+D00652
+
+> <LINCS_ACCESSION>
+LSM-3677
+
+> <PDBECHEM_ACCESSION>
+BZ1
+
+> <WIKIPEDIA_ACCESSION>
+Brinzolamide
+
+$$$$

src/server/experiments/drug_discovery/25befab3-cb27-4f04-a454-b966ebedbc0c/ligands/bdf14e62-c831-4871-864d-42c96156a9c7/metadata.json

@@ -0,0 +1,5 @@
+{
+    "id": "bdf14e62-c831-4871-864d-42c96156a9c7",
+    "name": "ChEBI_3176",
+    "date": "2023-12-27T01:11:08.600094"
+}

src/server/experiments/drug_discovery/25befab3-cb27-4f04-a454-b966ebedbc0c/metadata.json

@@ -1,5 +1,5 @@
 {
     "id": "25befab3-cb27-4f04-a454-b966ebedbc0c",
     "name": "brinzolamide - CARBONIC ANHYDRASE",
-    "date": "2023-12-26T21:00:48.870574"
+    "date": "2023-12-27T01:11:08.597464"
 }

src/server/frontend/src/components/AminoAcidLab/LigandList.vue

@@ -0,0 +1,94 @@
+<script>
+import LigandViewer from './LigandViewer.vue' // Assuming you have a similar viewer for ligands
+
+export default {
+    props: ['experiment', 'api'],
+    components: {
+        LigandViewer
+    },
+    data() {
+        return {
+            isLoadingExperimentData: false,
+            ligands: {},
+            isModalOpen: false,
+            selectedLigand: null
+        };
+    },
+    methods: {
+        loadLigands() {
+            this.api.loadLigands(this.experiment)
+                .then(() => {
+                    this.ligands = this.experiment.ligands;
+                });
+        },
+        dragOverHandler(event) {
+            event.dataTransfer.dropEffect = 'copy';
+        },
+        dropHandler(event) {
+            this.handleFileUpload(event);
+        },
+        handleFileUpload(event) {
+            const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+            if (files && files.length > 0) {
+                Array.from(files).forEach(file => {
+                    if (file.name.endsWith('.sdf')) {
+                        this.uploadLigandFile(file);
+                    } else {
+                        console.error('Invalid file type:', file.name);
+                    }
+                });
+            }
+        },
+        uploadLigandFile(file) {
+            this.api.addLigand(this.experiment, file)
+                .then(() => {
+                    this.ligands.push(file.name);
+                })
+                .catch(error => {
+                    console.error('Error uploading file:', error);
+                });
+        },
+        openModal(ligand) {
+            this.selectedLigand = ligand;
+            this.isModalOpen = true;
+        },
+        closeModal() {
+            this.isModalOpen = false;
+        }
+    },
+    mounted() {
+        this.loadLigands();
+    }
+}
+</script>
+
+<template>
+    <div>
+        <!-- Loading Indicator -->
+        <div v-if="isLoadingExperimentData" class="loading-overlay">
+            <div class="spinner-grow" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+            <p>Loading experiment data...</p>
+        </div>
+
+        <div class="file-upload-area" @dragover.prevent="dragOverHandler" @drop.prevent="dropHandler">
+            <p>Drag and drop your .sdf files here, or click to select files</p>
+            <input type="file" id="fileInput" multiple @change="handleFileUpload" accept=".sdf" style="display: none;" />
+            <label for="fileInput" class="file-upload-button">Select Files</label>
+        </div>
+
+        <!-- Display Uploaded Ligands -->
+        <div class="container-fluid" v-if="Object.keys(ligands).length > 0">
+            <h4>Uploaded ligands: </h4>
+            <div v-for="(ligand, id) in ligands" :key="id" class="ligand-button">
+                <button class="max-auto btn btn-primary" @click="openModal(ligand)">{{ ligand.metadata.name }}</button>
+            </div>
+        </div>
+
+        <!-- Ligand Viewer Modal -->
+        <div v-if="isModalOpen" class="modal">
+            <LigandViewer :api="this.api" :experiment="this.experiment" :ligand="selectedLigand" @close="closeModal" />
+        </div>
+    </div>
+</template>

src/server/frontend/src/components/AminoAcidLab/LigandViewer.vue

@@ -0,0 +1,84 @@
+<script>
+export default {
+    props: ['api', 'experiment', 'ligand'],
+    data() {
+        const views = {
+            // Define different views suitable for ligands
+            ballsAndSticks: { key: 'ball+stick', title: 'Balls and Sticks' },
+            spacefill: { key: 'spacefill', title: 'Spacefill' },
+            // ... other views if needed ...
+        };
+        return {
+            views: views,
+            viewsItems: Object.keys(views),
+            selectedView: views.ballsAndSticks, // Default view
+            stage: null,
+            sdfComponent: null,
+            isLoading: false,
+        };
+    },
+    methods: {
+        setView(evt) {
+            const viewKey = evt.target.value;
+            this.selectedView = this.views[viewKey];
+            this.sdfComponent.removeAllRepresentations();
+            this.sdfComponent.addRepresentation(this.selectedView.key);
+        },
+        render() {
+            setTimeout(() => {
+                document.getElementById('viewport').innerHTML = '';
+                this.stage = new NGL.Stage("viewport");
+                this.stage.setParameters({ backgroundColor: 'white' });
+                const sdfContentBlob = new Blob([this.ligand.sdf], { type: 'chemical/x-mdl-sdfile' });
+                const sdfFile = new File([sdfContentBlob], 'ligand.sdf', { type: 'chemical/x-mdl-sdfile' });
+                this.stage.loadFile(sdfFile, { defaultRepresentation: true }).then((component) => {
+                    this.sdfComponent = component;
+                });
+            }, 200);
+        },
+        downloadSdfFile() {
+            const filename = this.ligand.metadata.name + '.sdf';
+            const blob = new Blob([this.ligand.sdf], { type: 'chemical/x-mdl-sdfile' });
+            if (window.navigator.msSaveOrOpenBlob) {
+                window.navigator.msSaveBlob(blob, filename);
+            } else {
+                const elem = window.document.createElement('a');
+                elem.href = window.URL.createObjectURL(blob);
+                elem.download = filename;
+                document.body.appendChild(elem);
+                elem.click();
+                document.body.removeChild(elem);
+            }
+        }
+    },
+    mounted() {
+        this.render();
+    }
+}
+</script>
+
+<template>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-lg-8">
+                <div id="viewport" style="width: 100%; height: 500px;"></div>
+            </div>
+            <div class="col-lg-4">
+                <h4>Options</h4>
+                <select class="form-select form-select-md mb-3" aria-label="Select a representation" @change="setView($event)">
+                    <option v-for="viewKey in viewsItems" :key="viewKey" :value="viewKey">
+                        {{ views[viewKey].title }}
+                    </option>
+                </select>
+                <button type="button" @click="downloadSdfFile"
+                    class="btn btn-primary padding-top-button-group">Download .sdf
+                </button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12" style="margin-top: 10px;">
+                <button class="btn btn-danger" @click="$emit('close')">Close</button>
+            </div>
+        </div>
+    </div>
+</template>

src/server/frontend/src/components/AminoAcidLab/RunDrugTarget.vue

@@ -0,0 +1,22 @@
+<script>
+
+export default {
+    props: ['experiment', 'api'],
+    components: {
+    },
+    data() {
+        return {
+        };
+    },
+    methods: {
+    },
+    mounted() {
+    }
+}
+</script>
+
+<template>
+    <div>
+        <button class="btn btn-success"> Run Experiment </button>
+    </div>
+</template>