Bug fixes symmetric predicates/edges showing arrows (#257)

src/pages/answer/queryGraph/QueryGraph.jsx

@@ -24,8 +24,9 @@ const edgeLength = 225;
  */
 export default function QueryGraph({ query_graph }) {
   const svgRef = useRef();
-  const { colorMap } = useContext(BiolinkContext);
+  const { colorMap, predicates } = useContext(BiolinkContext);
   const [drawing, setDrawing] = useState(false);
+  const symmetricPredicates = predicates.filter((predicate) => predicate.symmetric).map((predicate) => predicate.predicate);
 
   /**
    * Initialize the svg size
@@ -141,7 +142,7 @@ export default function QueryGraph({ query_graph }) {
             .attr('fill', 'none')
             .attr('stroke-width', (d) => d.strokeWidth)
             .attr('class', 'edge')
-            .attr('marker-end', (d) => (graphUtils.shouldShowArrow(d) ? 'url(#arrow)' : '')))
+            .attr('marker-end', (d) => (graphUtils.shouldShowArrow(d, symmetricPredicates) ? 'url(#arrow)' : '')))
           .call((e) => e.append('path')
             .attr('stroke', 'transparent')
             .attr('fill', 'none')

src/pages/answer/resultsTable/ResultExplorer.jsx

@@ -32,14 +32,15 @@ export default function ResultExplorer({ answerStore }) {
   const node = useRef({});
   const edge = useRef({});
   const simulation = useRef();
-  const { colorMap } = useContext(BiolinkContext);
+  const { colorMap, predicates } = useContext(BiolinkContext);
   const [numTrimmedNodes, setNumTrimmedNodes] = useState(answerStore.numQgNodes);
   const debouncedTrimmedNodes = useDebounce(numTrimmedNodes, 500);
   const [popoverPosition, setPopoverPosition] = useState({ x: 0, y: 0 });
   // const [attributesPopoverOpen, setAttributesPopoverOpen] = useState(false);
   // const [currentEdgeAttributes, setCurrentEdgeAttributes] = useState({});
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [popoverData, setPopoverData] = useState({});
+  const symmetricPredicates = predicates.filter((predicate) => predicate.symmetric).map((predicate) => predicate.predicate);
 
   /**
    * Initialize svg object
@@ -247,7 +248,7 @@ export default function ResultExplorer({ answerStore }) {
               .attr('fill', 'none')
               .attr('stroke-width', (d) => d.strokeWidth)
               .attr('class', 'result_edge')
-              .attr('marker-end', (d) => (graphUtils.shouldShowArrow(d) ? 'url(#arrow)' : '')))
+              .attr('marker-end', (d) => (graphUtils.shouldShowArrow(d, symmetricPredicates) ? 'url(#arrow)' : '')))
             .attr('fill', 'black')
             .attr('stroke', '#999')
             .style('transition', 'stroke 100ms ease-in-out, fill 100ms ease-in-out')

src/pages/queryBuilder/graphEditor/QueryGraph.jsx

@@ -26,7 +26,8 @@ export default function QueryGraph({
   height, width,
   clickState, updateClickState,
 }) {
-  const { colorMap } = useContext(BiolinkContext);
+  const { colorMap, predicates } = useContext(BiolinkContext);
+  const symmetricPredicates = predicates.filter((predicate) => predicate.symmetric).map((predicate) => predicate.predicate);
   const queryBuilder = useContext(QueryBuilderContext);
   const { query_graph } = queryBuilder;
   const { nodes, edges } = useMemo(() => queryGraphUtils.getNodeAndEdgeListsForDisplay(query_graph), [queryBuilder.state]);
@@ -253,6 +254,10 @@ export default function QueryGraph({
     // edge ends need the x and y of their attached nodes
     // must come after simulation
     const edgesWithCurves = edgeUtils.addEdgeCurveProperties(newEdges);
+    // add symmetricPredicates to each edgesWithCurves
+    edgesWithCurves.forEach((e) => {
+      e.symmetric = symmetricPredicates;
+    });
 
     edge.current = edge.current.data(edgesWithCurves, (d) => d.id)
       .join(

src/stores/useBiolinkModel.js

@@ -61,6 +61,7 @@ export default function useBiolinkModel() {
       predicate: strings.edgeFromBiolink(identifier),
       domain: strings.nodeFromBiolink(predicate.domain),
       range: strings.nodeFromBiolink(predicate.range),
+      symmetric: predicate.symmetric || false,
     }));
   }
 

src/utils/d3/edges.js

@@ -130,7 +130,7 @@ function enter(edge) {
       .attr('fill', 'none')
       .attr('stroke-width', (d) => d.strokeWidth)
       .attr('class', 'edgePath')
-      .attr('marker-end', (d) => (graphUtils.shouldShowArrow(d) ? 'url(#arrow)' : '')))
+      .attr('marker-end', (d) => (graphUtils.shouldShowArrow(d, d.symmetric) ? 'url(#arrow)' : '')))
     // wider clickable line
     .call((e) => e.append('path')
       .attr('stroke', 'transparent')
@@ -232,7 +232,7 @@ function update(edge) {
       .text((d) => (d.predicates ? d.predicates.map((p) => strings.displayPredicate(p)).join(', ') : '')))
     .call((e) => e.select('.edgePath')
       // .attr('stroke-width', (d) => d.strokeWidth)
-      .attr('marker-end', (d) => (graphUtils.shouldShowArrow(d) ? 'url(#arrow)' : '')))
+      .attr('marker-end', (d) => (graphUtils.shouldShowArrow(d, d.symmetric) ? 'url(#arrow)' : '')))
     .call((e) => e.select('text')
       .select('textPath')
         .text((d) => (d.predicates ? d.predicates.map((p) => strings.displayPredicate(p)).join(', ') : '')));

src/utils/d3/graph.js

@@ -215,8 +215,8 @@ function isInside(x, y, cx, cy, r) {
  * @param {obj} edge edge object
  * @returns {str} url(#arrow) or empty string
  */
-function shouldShowArrow(edge) {
-  return (edge.predicates && edge.predicates.findIndex((p) => p !== 'biolink:related_to') > -1) || (edge.predicate && edge.predicate !== 'biolink:related_to');
+function shouldShowArrow(edge, symmetric_predicates = ['biolink:related_to']) {
+  return (edge.predicates && edge.predicates.findIndex((p) => !symmetric_predicates.includes(p)) > -1) || (edge.predicate && !symmetric_predicates.includes(edge.predicate));
 }
 
 /**