Show links in map

timur/lib/client/jsx/components/model_map.jsx

@@ -13,6 +13,10 @@ import AttributeReport from './model_map/attribute_report';
 import MapHeading from './model_map/map_heading';
 import ModelReport from './model_map/model_report';
 import ModelMapGraphic from './model_map/model_map_graphic';
+import Tooltip from '@material-ui/core/Tooltip';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import CallMadeIcon from '@material-ui/icons/CallMade';
 
 import {selectUser} from 'etna-js/selectors/user-selector';
 import {isAdmin} from 'etna-js/utils/janus';
@@ -123,18 +127,29 @@ const ModelMap = ({}) => {
     return isAdmin(user, CONFIG.project_name);
   }, [user, CONFIG.project_name]);
 
+  const [options,setOptions] = useState([]);
+
   return (
     <Grid className={classes.model_map} container>
       <Grid item container direction='column'>
         <MapHeading
           className={classes.heading}
           name='Project'
           title={full_name}
-        />
+        >
+          <ToggleButtonGroup className={classes.buttons} value={options} onChange={ (e,f) => setOptions(f) } size='small'>
+            <ToggleButton aria-label="Show links" disableRipple={true} value='links' size="small">
+              <Tooltip title="Show links">
+                <CallMadeIcon fontSize="small"/>
+              </Tooltip>
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </MapHeading>
         <Grid item className={classes.map}>
           <ModelMapGraphic
             width={width}
             height={height}
+            showLinks={ options.includes("links") }
             selected_models={[model]}
             handler={updateModel}
           />

timur/lib/client/jsx/components/model_map/model_link.jsx

@@ -3,27 +3,52 @@ import React from 'react';
 const dist = (p1, p2) =>
   Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
 
-const ModelLink = ({center, parent, size}) => {
+const ModelLink = ({center, parent, size, type}) => {
   if (!parent || !center) return null;
 
   let scale = size / dist(center, parent);
 
-  return (
-    <g className='model_link'>
-      <line
+  let p1 = parent;
+  let p2 = { x: center.x, y: center.y - size / 2 };
+  let s = dist(p1, p2);
+  let tan = { x: (p1.y - p2.y)/s, y: (p2.x - p1.x)/s };
+  if (p1.x < p2.x) {
+    tan.x = - tan.x;
+    tan.y = - tan.y;
+  }
+  let mid = { x: (p1.x + p2.x) / 2 + tan.x * s / 3, y: (p1.y + p2.y) / 2 + tan.y * s  / 3}
+
+  let element = type == 'link'
+    ? <path
+        d={`M ${p1.x} ${p1.y}
+          Q ${mid.x} ${mid.y}
+            ${p2.x} ${p2.y}`}
+        stroke="goldenrod"
+        strokeWidth="3"
+        strokeOpacity="0.1"
+        fill='none'
+        markerEnd='url(#path_arrow)'
+      />
+    : <line
         x2={center.x + (parent.x - center.x) * scale}
         y2={center.y - size / 2}
         x1={parent.x}
         y1={parent.y}
-        markerEnd='url(#arrow)'
+        stroke="#aca"
+        strokeWidth="3"
+        markerEnd='url(#line_arrow)'
       />
+
+  return (
+    <g className='model_link'>
+      {element}
     </g>
   );
 };
 
-export const Arrowhead = () => (
+export const Arrowhead = (props) => (
   <marker
-    id='arrow'
+    {...props}
     markerWidth='3'
     markerHeight='3'
     refX='0'

timur/lib/client/jsx/components/model_map/model_map_graphic.jsx

@@ -10,6 +10,7 @@ import Grid from '@material-ui/core/Grid';
 const ModelMapGraphic = ({
   selected_models,
   handler,
+  showLinks = false,
   width = 600,
   height = 600,
   disabled_models
@@ -30,8 +31,28 @@ const ModelMapGraphic = ({
     <Grid style={{ width, height, position: 'relative' }}>
       <svg id='map' width={width} height={height}>
         <defs>
-          <Arrowhead />
+          <Arrowhead id='line_arrow' fill='#aca'/>
+          <Arrowhead id='path_arrow' fill='goldenrod' fillOpacity='0.1'/>
         </defs>
+        {showLinks && model_names.map((model_name) => {
+          // for each link attribute, draw a link line.
+          let node = layout.nodes[model_name];
+          if (!node) return null;
+          const { attributes } = node.model;
+
+        return Object.entries(attributes).map( ([att_name, att]) => {
+          if (att.attribute_type != 'link') return null;
+        console.log({node, p: layout.nodes[att.link_model_name]});
+
+          return <ModelLink
+            key={`${model_name}.${att_name}`}
+            center={ node.center}
+            size={node.size}
+            type='link'
+            parent={ layout.nodes[att.link_model_name].center }
+        />
+        }).filter(_=>_);
+        }).filter(_=>_).flat()}
         {model_names.map((model_name) => {
           let node = layout.nodes[model_name];
           return (
@@ -47,6 +68,7 @@ const ModelMapGraphic = ({
             />
           );
         })}
+
       </svg>
       {model_names.map((model_name) => {
         let node = layout.nodes[model_name];

timur/lib/client/scss/model_map.scss

@@ -2,13 +2,6 @@
 
 svg#map {
   overflow: visible;
-  line {
-    stroke-width: 3px;
-    stroke: #aca;
-  }
-  #arrow {
-    fill: #aca;
-  }
 }
 
 .model_node {