App Domain Pathway Prediction (#47)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#47

epdb/logic.py

@@ -895,9 +895,10 @@ class SearchManager(object):
 
 class SNode(object):
 
-    def __init__(self, smiles: str, depth: int):
+    def __init__(self, smiles: str, depth: int, app_domain_assessment: dict = None):
         self.smiles = smiles
         self.depth = depth
+        self.app_domain_assessment = app_domain_assessment
 
     def __hash__(self):
         return hash(self.smiles)
@@ -1040,7 +1041,7 @@ class SPathway(object):
     def depth(self):
         return max([v.depth for v in self.smiles_to_node.values()])
 
-    def _get_nodes_for_depth(self, depth: int):
+    def _get_nodes_for_depth(self, depth: int) -> List[SNode]:
         if depth == 0:
             return self.root_nodes
 
@@ -1051,7 +1052,7 @@ class SPathway(object):
 
         return sorted(res, key=lambda x: x.smiles)
 
-    def _get_edges_for_depth(self, depth: int):
+    def _get_edges_for_depth(self, depth: int) -> List[SEdge]:
         res = []
         for e in self.edges:
             for n in e.educts:
@@ -1076,15 +1077,44 @@ class SPathway(object):
         new_tp = False
         if substrates:
             for sub in substrates:
+
+                if sub.app_domain_assessment is None:
+                    if self.prediction_setting.model:
+                        if self.prediction_setting.model.app_domain:
+                            app_domain_assessment = self.prediction_setting.model.app_domain.assess(sub.smiles)[0]
+
+                            if self.persist is not None:
+                                n = self.snode_persist_lookup[sub]
+
+                                assert n.id is not None, "Node has no id! Should have been saved already... aborting!"
+                                node_data = n.simple_json()
+                                node_data['image'] = f"{n.url}?image=svg"
+                                app_domain_assessment['assessment']['node'] = node_data
+
+                                n.kv['app_domain_assessment'] = app_domain_assessment
+                                n.save()
+
+                            sub.app_domain_assessment = app_domain_assessment
+
+
                 candidates = self.prediction_setting.expand(self, sub)
+                # candidates is a List of PredictionResult. The length of the List is equal to the number of rules
                 for cand_set in candidates:
                     if cand_set:
                         new_tp = True
+                        # cand_set is a PredictionResult object that can consist of multiple candidate reactions
                         for cand in cand_set:
                             cand_nodes = []
+                            # candidate reactions can have multiple fragments
                             for c in cand:
                                 if c not in self.smiles_to_node:
-                                    self.smiles_to_node[c] = SNode(c, sub.depth + 1)
+                                    # For new nodes do an AppDomain Assessment if an AppDomain is attached
+                                    app_domain_assessment = None
+                                    if self.prediction_setting.model:
+                                        if self.prediction_setting.model.app_domain:
+                                            app_domain_assessment = self.prediction_setting.model.app_domain.assess(c)[0]
+
+                                    self.smiles_to_node[c] = SNode(c, sub.depth + 1, app_domain_assessment)
 
                                 node = self.smiles_to_node[c]
                                 cand_nodes.append(node)
@@ -1097,18 +1127,30 @@ class SPathway(object):
         if len(substrates) == 0 or from_node is not None:
             self.done = True
 
-        # Check if we need to write back data to database
+        # Check if we need to write back data to the database
         if new_tp and self.persist:
             self._sync_to_pathway()
-            # call save to update internal modified field
+            # call save to update the internal modified field
             self.persist.save()
 
-    def _sync_to_pathway(self):
+    def _sync_to_pathway(self) -> None:
         logger.info("Updating Pathway with SPathway")
 
         for snode in self.smiles_to_node.values():
             if snode not in self.snode_persist_lookup:
                 n = Node.create(self.persist, snode.smiles, snode.depth)
+
+                if snode.app_domain_assessment is not None:
+                    app_domain_assessment = snode.app_domain_assessment
+
+                    assert n.id is not None, "Node has no id! Should have been saved already... aborting!"
+                    node_data = n.simple_json()
+                    node_data['image'] = f"{n.url}?image=svg"
+                    app_domain_assessment['assessment']['node'] = node_data
+
+                    n.kv['app_domain_assessment'] = app_domain_assessment
+                    n.save()
+
                 self.snode_persist_lookup[snode] = n
 
         for sedge in self.edges:
@@ -1130,7 +1172,6 @@ class SPathway(object):
                 self.sedge_persist_lookup[sedge] = e
 
         logger.info("Update done!")
-        pass
 
     def to_json(self):
         nodes = []

epdb/models.py

@@ -912,7 +912,8 @@ class Pathway(EnviPathModel, AliasMixin, ScenarioMixin):
                     'reaction_probability': link['reaction_probability'],
                     'scenarios': link['scenarios'],
                     'source': node_url_to_idx[link['start_node_urls'][0]],
-                    'target': pseudo_idx
+                    'target': pseudo_idx,
+                    'app_domain': link.get('app_domain', None)
                 }
                 adjusted_links.append(new_link)
 
@@ -927,7 +928,8 @@ class Pathway(EnviPathModel, AliasMixin, ScenarioMixin):
                         'reaction_probability': link['reaction_probability'],
                         'scenarios': link['scenarios'],
                         'source': pseudo_idx,
-                        'target': node_url_to_idx[target]
+                        'target': node_url_to_idx[target],
+                        'app_domain': link.get('app_domain', None)
                     }
                     adjusted_links.append(new_link)
 
@@ -1044,6 +1046,8 @@ class Node(EnviPathModel, AliasMixin, ScenarioMixin):
         return '{}/node/{}'.format(self.pathway.url, self.uuid)
 
     def d3_json(self):
+        app_domain_data = self.get_app_domain_assessment_data()
+
         return {
             "depth": self.depth,
             "url": self.url,
@@ -1053,6 +1057,10 @@ class Node(EnviPathModel, AliasMixin, ScenarioMixin):
             "name": self.default_node_label.name,
             "smiles": self.default_node_label.smiles,
             "scenarios": [{'name': s.name, 'url': s.url} for s in self.scenarios.all()],
+            "app_domain": {
+                'inside_app_domain': app_domain_data['assessment']['inside_app_domain'] if app_domain_data else None,
+                'uncovered_functional_groups': False,
+            }
         }
 
     @staticmethod
@@ -1078,6 +1086,32 @@ class Node(EnviPathModel, AliasMixin, ScenarioMixin):
     def as_svg(self):
         return IndigoUtils.mol_to_svg(self.default_node_label.smiles)
 
+    def get_app_domain_assessment_data(self):
+        data = self.kv.get('app_domain_assessment', None)
+
+        if data:
+            rule_ids = dict()
+            for e in Edge.objects.filter(start_nodes__in=[self]):
+                for r in e.edge_label.rules.all():
+                    rule_ids[str(r.uuid)] = e
+
+
+            for t in data['assessment']['transformations']:
+                if t['rule']['uuid'] in rule_ids:
+                    t['is_predicted'] = True
+                    t['edge'] = rule_ids[t['rule']['uuid']].simple_json()
+
+        return data
+
+
+    def simple_json(self, include_description=False):
+        res = super().simple_json()
+        name = res.get('name', None)
+        if name == 'no name':
+            res['name'] = self.default_node_label.name
+
+        return res
+
 
 class Edge(EnviPathModel, AliasMixin, ScenarioMixin):
     pathway = models.ForeignKey('epdb.Pathway', verbose_name='belongs to', on_delete=models.CASCADE, db_index=True)
@@ -1090,19 +1124,44 @@ class Edge(EnviPathModel, AliasMixin, ScenarioMixin):
         return '{}/edge/{}'.format(self.pathway.url, self.uuid)
 
     def d3_json(self):
-        return {
+        edge_json = {
             'name': self.name,
             'id': self.url,
             'url': self.url,
             'image': self.url + '?image=svg',
             'reaction': {'name': self.edge_label.name, 'url': self.edge_label.url } if self.edge_label else None,
             'reaction_probability': self.kv.get('probability'),
-            # TODO
             'start_node_urls': [x.url for x in self.start_nodes.all()],
             'end_node_urls': [x.url for x in self.end_nodes.all()],
             "scenarios": [{'name': s.name, 'url': s.url} for s in self.scenarios.all()],
         }
 
+        for n in self.start_nodes.all():
+            app_domain_data = n.get_app_domain_assessment_data()
+
+            if app_domain_data:
+                for t in app_domain_data['assessment']['transformations']:
+                    if 'edge' in t and t['edge']['uuid'] == str(self.uuid):
+                        passes_app_domain = (
+                                t['local_compatibility'] >= app_domain_data['ad_params']['local_compatibility_threshold']
+                        ) and (
+                            t['reliability'] >= app_domain_data['ad_params']['reliability_threshold']
+                        )
+
+                        edge_json['app_domain'] = {
+                            'passes_app_domain': passes_app_domain,
+                            'local_compatibility': t['local_compatibility'],
+                            'local_compatibility_threshold': app_domain_data['ad_params']['local_compatibility_threshold'],
+                            'reliability': t['reliability'],
+                            'reliability_threshold': app_domain_data['ad_params']['reliability_threshold'],
+                            'times_triggered': t['times_triggered'],
+                        }
+
+                        break
+
+        return edge_json
+
+
     @staticmethod
     def create(pathway, start_nodes: List[Node], end_nodes: List[Node], rule: Optional[Rule] = None, name: Optional[str] = None,
                description: Optional[str] = None):
@@ -1136,6 +1195,14 @@ class Edge(EnviPathModel, AliasMixin, ScenarioMixin):
     def as_svg(self):
         return self.edge_label.as_svg if self.edge_label else None
 
+    def simple_json(self, include_description=False):
+        res = super().simple_json()
+        name = res.get('name', None)
+        if name == 'no name':
+            res['name'] = self.edge_label.name
+
+        return res
+
 
 class EPModel(PolymorphicModel, EnviPathModel):
     package = models.ForeignKey('epdb.Package', verbose_name='Package', on_delete=models.CASCADE, db_index=True)
@@ -1463,6 +1530,7 @@ class MLRelativeReasoning(EPModel):
 
         return res
 
+
 class ApplicabilityDomain(EnviPathModel):
     model = models.ForeignKey(MLRelativeReasoning, on_delete=models.CASCADE)
 
@@ -1614,7 +1682,7 @@ class ApplicabilityDomain(EnviPathModel):
                     'model': self.model.simple_json(),
                     'num_neighbours': self.num_neighbours,
                     'reliability_threshold': self.reliability_threshold,
-                    'local_compatibilty_threshold': self.local_compatibilty_threshold,
+                    'local_compatibility_threshold': self.local_compatibilty_threshold,
                 },
                 'assessment': {
                     'smiles': smiles,

epdb/tasks.py

@@ -58,7 +58,7 @@ def predict(pw_pk: int, pred_setting_pk: int, limit: Optional[int] = None, node_
                 spw.predict_step(from_depth=level)
                 level += 1
 
-                # break in case we are in incremental model
+                # break in case we are in incremental mode
                 if limit != -1:
                     if level >= limit:
                         break

epdb/views.py

@@ -1454,6 +1454,7 @@ def package_pathway_node(request, package_uuid, pathway_uuid, node_uuid):
         ]
 
         context['node'] = current_node
+        context['app_domain_assessment_data'] = json.dumps(current_node.get_app_domain_assessment_data())
 
         return render(request, 'objects/node.html', context)
 

static/js/pps.js

@@ -638,3 +638,147 @@ function fillPRCurve(modelUri, onclick){
 
     });
 }
+
+
+function handleAssessmentResponse(depict_url, data) {
+    var inside_app_domain = "<a class='list-group-item'>This compound is " + (data["assessment"]["inside_app_domain"] ? "inside" : "outside") + " the Applicability Domain derived from the chemical (PCA) space constructed using the training data." + "</a>";
+    var functionalGroupsImgSrc = null;
+    var reactivityCentersImgSrc = null;
+
+    if (data['assessment']['node'] !== undefined) {
+        functionalGroupsImgSrc = "<img width='400' src='" + data['assessment']['node']['image'] + "'>";
+        reactivityCentersImgSrc = "<img width='400' src='" + data['assessment']['node']['image'] + "'>"
+    } else {
+        functionalGroupsImgSrc = "<img width='400' src=\"" + depict_url + "?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "\">";
+        reactivityCentersImgSrc = "<img width='400' src=\"" + depict_url + "?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "\">"
+    }
+
+    tpl = `<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+                <h4 class="panel-title">
+                    <a id="app-domain-assessment-functional-groups-link" data-toggle="collapse" data-parent="#app-domain-assessment" href="#app-domain-assessment-functional-groups">Functional Groups Covered by Model</a>
+                </h4>
+            </div>
+            <div id="app-domain-assessment-functional-groups" class="panel-collapse collapse">
+                <div class="panel-body list-group-item">
+                    ${inside_app_domain}
+                    <p></p>
+                    <div id="image-div" align="center">
+                        ${functionalGroupsImgSrc}
+                    </div>
+                </div>
+            </div>
+
+            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+                <h4 class="panel-title">
+                    <a id="app-domain-assessment-reactivity-centers-link" data-toggle="collapse" data-parent="#app-domain-assessment" href="#app-domain-assessment-reactivity-centers">Reactivity Centers</a>
+                </h4>
+            </div>
+            <div id="app-domain-assessment-reactivity-centers" class="panel-collapse collapse">
+                <div class="panel-body list-group-item">
+                    <div id="image-div" align="center">
+                        ${reactivityCentersImgSrc}
+                    </div>
+                </div>
+            </div>`
+
+    var transformations = '';
+
+    for (t in data['assessment']['transformations']) {
+        transObj = data['assessment']['transformations'][t];
+        var neighbors = '';
+        for (n in transObj['neighbors']) {
+            neighObj = transObj['neighbors'][n];
+            var neighImg = "<img width='100%' src='" + transObj['rule']['url'] + "?smiles=" + encodeURIComponent(neighObj['smiles']) + "'>";
+            var objLink = `<a class='list-group-item' href="${neighObj['url']}">${neighObj['name']}</a>`
+            var neighPredProb = "<a class='list-group-item'>Predicted probability: " + neighObj['probability'].toFixed(2) + "</a>";
+
+            var pwLinks = '';
+            for (pw in neighObj['related_pathways']) {
+                var pwObj = neighObj['related_pathways'][pw];
+                pwLinks += "<a class='list-group-item' href=" + pwObj['url'] + ">" + pwObj['name'] + "</a>";
+            }
+
+            var expPathways = `
+                    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+                        <h4 class="panel-title">
+                            <a id="transformation-${t}-neighbor-${n}-exp-pathway-link" data-toggle="collapse" data-parent="#transformation-${t}-neighbor-${n}" href="#transformation-${t}-neighbor-${n}-exp-pathway">Experimental Pathways</a>
+                        </h4>
+                    </div>
+                    <div id="transformation-${t}-neighbor-${n}-exp-pathway" class="panel-collapse collapse">
+                        <div class="panel-body list-group-item">
+                            ${pwLinks}
+                        </div>
+                    </div>
+                    `
+
+            if (pwLinks === '') {
+                expPathways = ''
+            }
+
+            neighbors += `
+                    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+                        <h4 class="panel-title">
+                            <a id="transformation-${t}-neighbor-${n}-link" data-toggle="collapse" data-parent="#transformation-${t}" href="#transformation-${t}-neighbor-${n}">Analog Transformation on ${neighObj['name']}</a>
+                        </h4>
+                    </div>
+                    <div id="transformation-${t}-neighbor-${n}" class="panel-collapse collapse">
+                        <div class="panel-body list-group-item">
+                            ${objLink}
+                            ${neighPredProb}
+                            ${expPathways}
+                            <p></p>
+                            <div id="image-div" align="center">
+                                ${neighImg}
+                            </div>
+                        </div>
+                    </div>
+                    `
+        }
+
+        var panelName = null;
+        var objLink = null;
+        if (transObj['is_predicted']) {
+            panelName = `Predicted Transformation by ${transObj['rule']['name']}`;
+            objLink = `<a class='list-group-item' href="${transObj['edge']['url']}">${transObj['edge']['name']}</a>`
+        } else {
+            panelName = `Potential Transformation by applying ${transObj['rule']['name']}`;
+            objLink = `<a class='list-group-item' href="${transObj['rule']['url']}">${transObj['rule']['name']}</a>`
+        }
+
+        var predProb = "<a class='list-group-item'>Predicted probability: " + transObj['probability'].toFixed(2) + "</a>";
+        var timesTriggered = "<a class='list-group-item'>This rule has triggered " + transObj['times_triggered'] + " times in the training set</a>";
+        var reliability = "<a class='list-group-item'>Reliability: " + transObj['reliability'].toFixed(2) + " (" + (transObj['reliability'] > data['ad_params']['reliability_threshold'] ? "&gt" : "&lt") + " Reliability Threshold of " + data['ad_params']['reliability_threshold'] + ") </a>";
+        var localCompatibility = "<a class='list-group-item'>Local Compatibility: " + transObj['local_compatibility'].toFixed(2) + " (" + (transObj['local_compatibility'] > data['ad_params']['local_compatibilty_threshold'] ? "&gt" : "&lt") + " Local Compatibility Threshold of " + data['ad_params']['local_compatibilty_threshold'] + ")</a>";
+
+        var transImg = "<img width='100%' src='" + transObj['rule']['url'] + "?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "'>";
+
+        var transformation = `
+                    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
+                        <h4 class="panel-title">
+                            <a id="transformation-${t}-link" data-toggle="collapse" data-parent="#transformation-${t}" href="#transformation-${t}">${panelName}</a>
+                        </h4>
+                    </div>
+                    <div id="transformation-${t}" class="panel-collapse collapse">
+                        <div class="panel-body list-group-item">
+                            ${objLink}
+                            ${predProb}
+                            ${timesTriggered}
+                            ${reliability}
+                            ${localCompatibility}
+                            <p></p>
+                            <div id="image-div" align="center">
+                                ${transImg}
+                            </div>
+                            <p></p>
+                            ${neighbors}
+                        </div>
+                    </div>
+                `
+        transformations += transformation;
+    }
+
+    res = tpl + transformations;
+
+    $("#appDomainAssessmentResultTable").append(res);
+
+}

static/js/pw.js

@@ -1,4 +1,4 @@
-console.log("loaded")
+console.log("loaded pw.js")
 
 
 function predictFromNode(url) {
@@ -144,6 +144,16 @@ function draw(pathway, elem) {
     function node_popup(n) {
         popupContent = "<a href='" + n.url +"'>" + n.name + "</a><br>";
         popupContent += "Depth " + n.depth + "<br>"
+
+        if (appDomainViewEnabled) {
+            if(n.app_domain != null) {
+                popupContent += "This compound is " + (n.app_domain['inside_app_domain'] ? "inside" : "outside") + " the Applicability Domain derived from the chemical (PCA) space constructed using the training data." + "<br>"
+                if (n.app_domain['uncovered_functional_groups']) {
+                    popupContent += "Compound contains functional groups not covered by the training set  <br>"
+                }
+            }
+        }
+
         popupContent += "<img src='" + n.image + "' width='"+ 20 * nodeRadius +"'><br>"
         if (n.scenarios.length > 0) {
             popupContent += '<b>Half-lives and related scenarios:</b><br>'
@@ -162,6 +172,18 @@ function draw(pathway, elem) {
 
     function edge_popup(e) {
         popupContent = "<a href='" + e.url +"'>" + e.name + "</a><br>";
+
+        if(e.app_domain){
+            adcontent = "<p>";
+            if(e.app_domain["times_triggered"]) {
+                adcontent += "This rule triggered " + e.app_domain["times_triggered"] + " times in the training set<br>";
+            }
+            adcontent += "Reliability " + e.app_domain["reliability"].toFixed(2) + " (" + (e.app_domain["reliability"] > e.app_domain["reliability_threshold"] ? "&gt" : "&lt") + " Reliability Threshold of " +  e.app_domain["reliability_threshold"] + ")<br>";
+            adcontent += "Local Compatibility " + e.app_domain["local_compatibility"].toFixed(2) + " (" + (e.app_domain["local_compatibility"] > e.app_domain["local_compatibility_threshold"] ? "&gt" : "&lt") + " Local Compatibility Threshold of " +  e.app_domain["local_compatibility_threshold"] + ")<br>";
+            adcontent += "</p>";
+        }
+        popupContent += adcontent;
+
         popupContent += "<img src='" + e.image + "' width='"+ 20 * nodeRadius +"'><br>"
         if (e.reaction_probability) {
             popupContent += '<b>Probability:</b><br>' + e.reaction_probability.toFixed(3) + '<br>';
@@ -233,13 +255,12 @@ function draw(pathway, elem) {
         .enter().append("line")
         // Check if target is pseudo and draw marker only if not pseudo
         .attr("class", d => d.target.pseudo ? "link_no_arrow" : "link")
-        // .on("mouseover", (event, d) => {
+        .attr("marker-end", d => d.target.pseudo ? '' : 'url(#arrow)')
-        //     tooltip.style("visibility", "visible")
+
-        //         .text(`Link: ${d.source.id} → ${d.target.id}`)
+    // add element to links array
-        //         .style("top", `${event.pageY + 5}px`)
+    link.each(function(d) {
-        //         .style("left", `${event.pageX + 5}px`);
+      d.el = this;  // attach the DOM element to the data object
-        // })
+    });
-        // .on("mouseout", () => tooltip.style("visibility", "hidden"));
 
     pop_add(link, "Reaction", edge_popup);
 
@@ -255,16 +276,6 @@ function draw(pathway, elem) {
         .on("click", function (event, d) {
             d3.select(this).select("circle").classed("highlighted", !d3.select(this).select("circle").classed("highlighted"));
         })
-        // .on("mouseover", (event, d) => {
-        //     if (d.pseudo) {
-        //         return
-        //     }
-        //     tooltip.style("visibility", "visible")
-        //         .text(`Node: ${d.id} Depth: ${d.depth}`)
-        //         .style("top", `${event.pageY + 5}px`)
-        //         .style("left", `${event.pageX + 5}px`);
-        // })
-        // .on("mouseout", () => tooltip.style("visibility", "hidden"));
 
     // Kreise für die Knoten hinzufügen
     node.append("circle")
@@ -280,5 +291,10 @@ function draw(pathway, elem) {
         .attr("width", nodeRadius * 2)
         .attr("height", nodeRadius * 2);
 
+    // add element to nodes array
+    node.each(function(d) {
+      d.el = this;  // attach the DOM element to the data object
+    });
+
     pop_add(node, "Compound", node_popup);
 }

templates/objects/model.html

@@ -269,141 +269,6 @@
 
     <script>
 
-        function handleAssessmentResponse(data) {
-            var inside_app_domain = "<a class='list-group-item'>This compound is " + (data["assessment"]["inside_app_domain"] ? "inside" : "outside") + " the Applicability Domain derived from the chemical (PCA) space constructed using the training data." + "</a>";
-            var functionalGroupsImgSrc = "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "'>";
-            var reactivityCentersImgSrc = "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "'>";
-
-            tpl = `<div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="app-domain-assessment-functional-groups-link" data-toggle="collapse" data-parent="#app-domain-assessment" href="#app-domain-assessment-functional-groups">Functional Groups Covered by Model</a>
-                </h4>
-            </div>
-            <div id="app-domain-assessment-functional-groups" class="panel-collapse collapse">
-                <div class="panel-body list-group-item">
-                    ${inside_app_domain}
-                    <p></p>
-                    <div id="image-div" align="center">
-                        ${functionalGroupsImgSrc}
-                    </div>
-                </div>
-            </div>
-
-            <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                <h4 class="panel-title">
-                    <a id="app-domain-assessment-reactivity-centers-link" data-toggle="collapse" data-parent="#app-domain-assessment" href="#app-domain-assessment-reactivity-centers">Reactivity Centers</a>
-                </h4>
-            </div>
-            <div id="app-domain-assessment-reactivity-centers" class="panel-collapse collapse">
-                <div class="panel-body list-group-item">
-                    <div id="image-div" align="center">
-                        ${reactivityCentersImgSrc}
-                    </div>
-                </div>
-            </div>`
-
-            var transformations = '';
-
-            for (t in data['assessment']['transformations']) {
-                transObj = data['assessment']['transformations'][t];
-                var neighbors = '';
-                for (n in transObj['neighbors']) {
-                    neighObj = transObj['neighbors'][n];
-                    var neighImg = "<img width='100%' src='" + transObj['rule']['url'] + "?smiles=" + encodeURIComponent(neighObj['smiles']) + "'>";
-                    var objLink = `<a class='list-group-item' href="${neighObj['url']}">${neighObj['name']}</a>`
-                    var neighPredProb = "<a class='list-group-item'>Predicted probability: " + neighObj['probability'].toFixed(2) + "</a>";
-
-                    var pwLinks = '';
-                    for (pw in neighObj['related_pathways']) {
-                        var pwObj = neighObj['related_pathways'][pw];
-                        pwLinks += "<a class='list-group-item' href=" + pwObj['url'] + ">" + pwObj['name'] + "</a>";
-                    }
-
-                    var expPathways = `
-                    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                        <h4 class="panel-title">
-                            <a id="transformation-${t}-neighbor-${n}-exp-pathway-link" data-toggle="collapse" data-parent="#transformation-${t}-neighbor-${n}" href="#transformation-${t}-neighbor-${n}-exp-pathway">Experimental Pathways</a>
-                        </h4>
-                    </div>
-                    <div id="transformation-${t}-neighbor-${n}-exp-pathway" class="panel-collapse collapse">
-                        <div class="panel-body list-group-item">
-                            ${pwLinks}
-                        </div>
-                    </div>
-                    `
-
-                    if (pwLinks === '') {
-                        expPathways = ''
-                    }
-
-                    neighbors += `
-                    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                        <h4 class="panel-title">
-                            <a id="transformation-${t}-neighbor-${n}-link" data-toggle="collapse" data-parent="#transformation-${t}" href="#transformation-${t}-neighbor-${n}">Analog Transformation on ${neighObj['name']}</a>
-                        </h4>
-                    </div>
-                    <div id="transformation-${t}-neighbor-${n}" class="panel-collapse collapse">
-                        <div class="panel-body list-group-item">
-                            ${objLink}
-                            ${neighPredProb}
-                            ${expPathways}
-                            <p></p>
-                            <div id="image-div" align="center">
-                                ${neighImg}
-                            </div>
-                        </div>
-                    </div>
-                    `
-                }
-
-                var panelName = null;
-                var objLink = null;
-                if (transObj['is_predicted']) {
-                    panelName = `Predicted Transformation by ${transObj['rule']['name']}`;
-                    objLink = `<a class='list-group-item' href="${transObj['edge']['url']}">${transObj['edge']['name']}</a>`
-                } else {
-                    panelName = `Potential Transformation by applying ${transObj['rule']['name']}`;
-                    objLink = `<a class='list-group-item' href="${transObj['rule']['url']}">${transObj['rule']['name']}</a>`
-                }
-
-                var predProb = "<a class='list-group-item'>Predicted probability: " + transObj['probability'].toFixed(2) + "</a>";
-                var timesTriggered = "<a class='list-group-item'>This rule has triggered " + transObj['times_triggered'] + " times in the training set</a>";
-                var reliability = "<a class='list-group-item'>Reliability: " + transObj['reliability'].toFixed(2) + " (" + (transObj['reliability'] > data['ad_params']['reliability_threshold'] ? "&gt" : "&lt") + " Reliability Threshold of " + data['ad_params']['reliability_threshold'] + ") </a>";
-                var localCompatibility = "<a class='list-group-item'>Local Compatibility: " + transObj['local_compatibility'].toFixed(2) + " (" + (transObj['local_compatibility'] > data['ad_params']['local_compatibilty_threshold'] ? "&gt" : "&lt") + " Local Compatibility Threshold of " + data['ad_params']['local_compatibilty_threshold'] + ")</a>";
-
-                var transImg = "<img width='100%' src='" + transObj['rule']['url'] + "?smiles=" + encodeURIComponent(data['assessment']['smiles']) + "'>";
-
-                var transformation = `
-                    <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
-                        <h4 class="panel-title">
-                            <a id="transformation-${t}-link" data-toggle="collapse" data-parent="#transformation-${t}" href="#transformation-${t}">${panelName}</a>
-                        </h4>
-                    </div>
-                    <div id="transformation-${t}" class="panel-collapse collapse">
-                        <div class="panel-body list-group-item">
-                            ${objLink}
-                            ${predProb}
-                            ${timesTriggered}
-                            ${reliability}
-                            ${localCompatibility}
-                            <p></p>
-                            <div id="image-div" align="center">
-                                ${transImg}
-                            </div>
-                            <p></p>
-                            ${neighbors}
-                        </div>
-                    </div>
-                `
-                transformations +=  transformation;
-            }
-
-            res = tpl + transformations;
-
-            $("#appDomainAssessmentResultTable").append(res);
-
-        }
-
         function handlePredictionResponse(data) {
             res = "<table class='table table-striped'>"
             res += "<thead>"
@@ -498,7 +363,7 @@
                     success: function (data, textStatus) {
                         try {
                             $("#appDomainLoading").empty();
-                            handleAssessmentResponse(data);
+                            handleAssessmentResponse("{% url 'depict' %}", data);
                             console.log(data);
                         } catch (error) {
                             console.log("Error");

templates/objects/node.html

@@ -69,7 +69,18 @@
                 </div>
             </div>
 
+            {% if app_domain_assessment_data %}
+                <div id="appDomainAssessmentResultTable"></div>
+                <script>
+                    $(document).ready(function () {
+                        handleAssessmentResponse("{% url 'depict' %}", {{ app_domain_assessment_data|safe }})
+                    })
+                </script>
+            {% endif %}
+
         </div>
 
     </div>
+
+
 {% endblock content %}

templates/objects/pathway.html

@@ -4,16 +4,22 @@
 
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <style>
-        svg {
+        #vizdiv {
             width: 100%;
             height: 600px;
+            background: white;
+        }
+
+        #pwsvg {
+            width: 100%;
+            height: 100%;
             color: red;
         }
 
         .link {
             stroke: #999;
             stroke-opacity: 0.6;
-            marker-end: url(#arrow);
+            //marker-end: url(#arrow);
         }
 
         .link_no_arrow {
@@ -31,6 +37,31 @@
             stroke-width: 1.5px;
         }
 
+        .inside_app_domain {
+            fill: green;
+            stroke: green;
+            stroke-width: 1.5px;
+        }
+
+        .outside_app_domain {
+            fill: red;
+            stroke: red;
+            stroke-width: 1.5px;
+        }
+
+        .passes_app_domain {
+            stroke: green;
+            stroke-width: 1.5px;
+            stroke-opacity: 0.6;
+        }
+
+        .fails_app_domain {
+            stroke: red;
+            stroke-width: 1.5px;
+            stroke-opacity: 0.6;
+        }
+
+
         .highlighted {
             stroke: red;
             stroke-width: 3px;
@@ -80,8 +111,7 @@
                         <ul class="nav navbar-nav">
                             <li class="dropdown requiresWritePerm">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                                   aria-haspopup="true"
+                                   aria-haspopup="true" aria-expanded="false">
-                                   aria-expanded="false">
                                     <span class="glyphicon glyphicon-edit"></span>
                                     Edit
                                     <span class="caret"></span></a>
@@ -91,11 +121,26 @@
                                     {% endblock %}
                                 </ul>
                             </li>
+                            {% if pathway.setting.model.app_domain %}
+                            <li class="dropdown">
+                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+                                   aria-haspopup="true" aria-expanded="false">
+                                    <span class="glyphicon glyphicon-eye-open"></span>
+                                    View
+                                    <span class="caret"></span></a>
+                                <ul id="editingList" class="dropdown-menu">
+                                    <li>
+                                        <a class="button" id="app-domain-toggle-button">
+                                            <i id="app-domain-toggle-button" class="glyphicon glyphicon-eye-open"></i> App Domain View</a>
+                                    </li>
+                                </ul>
+                            </li>
+                            {% endif %}
                         </ul>
 
                         <ul class="nav navbar-nav navbar-right">
                             <li>
-                                <a role="button" data-toggle="modal" onclick="goFullscreen('pwcontent')">
+                                <a role="button" data-toggle="modal" onclick="goFullscreen('vizdiv')">
                                     <span class="glyphicon glyphicon-fullscreen"></span>
                                     Fullscreen
                                 </a>
@@ -126,16 +171,24 @@
 
                     </div>
                 </nav>
-                <div id="vizdiv">
+                <div id="vizdiv" >
-                    <svg width="2000" height="2000">
+                    <svg id="pwsvg">
                         {% if debug %}
                             <rect width="100%" height="100%" fill="aliceblue"/>
                         {% endif %}
                         <defs>
                             <marker id="arrow" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
-                                    orient="auto-start-reverse">
+                                    orient="auto-start-reverse" markerUnits="userSpaceOnUse">
                                 <path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
                             </marker>
+                            <marker id="arrow_passes_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
+                                    orient="auto-start-reverse" markerUnits="userSpaceOnUse">
+                                <path d="M 0 0 L 10 5 L 0 10 z" fill="green"/>
+                            </marker>
+                            <marker id="arrow_fails_app_domain" viewBox="0 0 10 10" refX="43" refY="5" markerWidth="6" markerHeight="6"
+                                    orient="auto-start-reverse" markerUnits="userSpaceOnUse">
+                                <path d="M 0 0 L 10 5 L 0 10 z" fill="red"/>
+                            </marker>
                         </defs>
                         <g id="zoomable"></g>
                     </svg>
@@ -160,7 +213,7 @@
                         <a id="pathwaySettingLink" data-toggle="collapse" data-parent="#pathwayAccordion"
                            href="#pathwaySetting">Setting</a></h4>
                 </div>
-                <div id="pathwaySetting" class="panel-collapse collapse in">
+                <div id="pathwaySetting" class="panel-collapse collapse">
                     <div class="panel-body list-group-item" id="pathwaySettingContent">
                         <table class="table table-bordered table-hover">
                             <tr style="background-color: rgba(0, 0, 0, 0.08);">
@@ -246,6 +299,8 @@
         </div>
     </div>
     <script>
+        // Globla switch for app domain view
+        var appDomainViewEnabled = false;
 
         function goFullscreen(id) {
             var element = document.getElementById(id);
@@ -267,6 +322,51 @@
             // TODO fix somewhere else...
             var newDesc = transformReferences($('#DescriptionContent')[0].innerText);
             $('#DescriptionContent').html(newDesc);
+
+
+            $('#app-domain-toggle-button').on('click', function () {
+                // glyphicon glyphicon-eye-close
+                // glyphicon glyphicon-eye-open
+                appDomainViewEnabled = !appDomainViewEnabled;
+
+                if (appDomainViewEnabled) {
+                    $('#app-domain-toggle-button > i').removeClass('glyphicon-eye-open');
+                    $('#app-domain-toggle-button > i').addClass('glyphicon-eye-close');
+                    nodes.forEach((x) => {
+                        if(x.app_domain) {
+                            if (x.app_domain.inside_app_domain) {
+                                d3.select(x.el).select("circle").classed("inside_app_domain", true);
+                            } else {
+                                d3.select(x.el).select("circle").classed("outside_app_domain", true);
+                            }
+                        }
+                    });
+                    links.forEach((x) => {
+                        if(x.app_domain) {
+                            if (x.app_domain.passes_app_domain) {
+                                d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow_passes_app_domain)");
+                                d3.select(x.el).classed("passes_app_domain", true);
+                            } else {
+                                d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow_fails_app_domain)");
+                                d3.select(x.el).classed("fails_app_domain", true);
+                            }
+                        }
+                    });
+                } else {
+                    $('#app-domain-toggle-button > i').removeClass('glyphicon-eye-close');
+                    $('#app-domain-toggle-button > i').addClass('glyphicon-eye-open');
+                    nodes.forEach((x) => {
+                        d3.select(x.el).select("circle").classed("inside_app_domain", false);
+                        d3.select(x.el).select("circle").classed("outside_app_domain", false);
+                    });
+                    links.forEach((x) => {
+                        d3.select(x.el).attr("marker-end", d => d.target.pseudo ? "" : "url(#arrow)");
+                        d3.select(x.el).classed("passes_app_domain", false);
+                        d3.select(x.el).classed("fails_app_domain", false);
+                    });
+                }
+            })
+
         });
 
     </script>