hide links and highlight when no structure

components/OperonStructure.vue

@@ -242,8 +242,12 @@ const plotHeight = computed(() => {
     return marginTop + marginBottom + toValue(geneLabelHeight) + toValue(structureHeight) + toValue(geneHeight) + toValue(linkHeight) + 10
 })
 const linksGenesStruct = computed<StructureGeneLinks[]>(() => {
-    const geneNodesVal = toValue(geneNodesWithY)
-    const structureNodesVal = toValue(structureNodes)
+    const geneNodesVal = toValue(geneNodesWithY).filter(d => {
+        return d.structPath !== undefined
+    })
+    const structureNodesVal = toValue(structureNodes).filter(d => {
+        return d.structPath !== undefined
+    })
 
     return d3.zip(geneNodesVal, structureNodesVal).map(([source, target]) => {
         return {
@@ -362,11 +366,13 @@ function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
                     .classed("structure", true)
                     .on("click", function (event) {
                         const data = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(this).data()
-                        structureBasket.set(data.map(s => s?.structPath ?? ''))
+                        const structPaths = data.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+                        if (structPaths.length > 0) structureBasket.set(structPaths)
                     }).on("mouseover", function (event) {
                         const srcSelection = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(event.srcElement)
                         const node = srcSelection.data()
-                        geneToHighlight.value = node[0].gene
+                        const structPaths = node.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+                        if (structPaths.length > 0) geneToHighlight.value = node[0].gene
                     })
                     .on("mouseout", function (event) {
                         geneToHighlight.value = null
@@ -402,11 +408,6 @@ function drawStructure(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
 function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null, any>) {
     const genesWithCoordVal = toValue(geneNodesWithY)
     const genes = genesWithCoordVal
-
-
-
-
-
     const genesSelection = operonGroup
         .selectAll("g.gene-grp") // get all "existing" lines in svg
         .data<StructureOperonGeneWithCoordinate>(genes) // sync them with our data
@@ -416,12 +417,14 @@ function drawGenes(operonGroup: d3.Selection<SVGGElement, any, SVGElement | null
                     .classed("gene-grp", true)
                     .on("click", function (event) {
                         const data = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(this).data()
-                        structureBasket.set(data.map(s => s?.structPath ?? ''))
+                        const structPaths = data.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+                        if (structPaths.length > 0) structureBasket.set(structPaths)
                     })
                     .on("mouseover", function (event) {
                         const srcSelection = d3.select<SVGElement, StructureOperonGeneWithCoordinate>(event.srcElement)
                         const node = srcSelection.data()
-                        geneToHighlight.value = node[0].gene
+                        const structPaths = node.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+                        if (structPaths.length > 0) geneToHighlight.value = node[0].gene
                     })
                     .on("mouseout", function (event) {
                         geneToHighlight.value = null
@@ -496,12 +499,14 @@ function drawGenesLabel(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
                     .classed("gene-label", true)
                     .on("click", function (event) {
                         const data = d3.select<SVGElement, StructureOperonGeneLabels>(this).data()
-                        structureBasket.set(data.map(s => s?.structPath ?? ''))
+                        const structPaths = data.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+                        if (structPaths.length > 0) structureBasket.set(structPaths)
                     })
                     .on("mouseover", function (event) {
                         const srcSelection = d3.select<SVGElement, StructureOperonGeneLabels>(event.srcElement)
                         const node = srcSelection.data()
-                        geneToHighlight.value = node[0].gene
+                        const structPaths = node.filter(s => s?.structPath !== undefined).map<string>(s => s?.structPath ?? "")
+                        if (structPaths.length > 0) geneToHighlight.value = node[0].gene
                     })
 
                     .on("mouseout", function (event) {

components/content/PdockqMatrix.vue

@@ -184,10 +184,15 @@ const operonStructurePerMatrix = computed<[string, StructureOperonGeneWithImg[]]
                     }
 
                 })
-                const rawImgUrl = joinURL(`/${toValue(system).toLowerCase()}`, matchingMonomer?.structImg ?? '')
-                const rawStructUrl = joinURL(`/${toValue(system).toLowerCase()}`, matchingMonomer?.structPath ?? '')
-                const { refinedUrl: structImgHref } = useRefinedUrl(rawImgUrl)
-                return { ...gene, gene: matchingMonomer ? matchingMonomer.proteins_in_the_prediction[0] : sanitizedGene, structImg: toValue(structImgHref), structPath: rawStructUrl }
+                if (matchingMonomer === undefined) {
+                    return { ...gene, structImg: undefined, structPath: undefined }
+
+                } else {
+                    const rawImgUrl = joinURL(`/${toValue(system).toLowerCase()}`, matchingMonomer?.structImg ?? '')
+                    const rawStructUrl = joinURL(`/${toValue(system).toLowerCase()}`, matchingMonomer?.structPath ?? '')
+                    const { refinedUrl: structImgHref } = useRefinedUrl(rawImgUrl)
+                    return { ...gene, gene: matchingMonomer ? matchingMonomer.proteins_in_the_prediction[0] : sanitizedGene, structImg: toValue(structImgHref), structPath: rawStructUrl }
+                }
             })]
         }
         else { return [] }