Fixed an issue where the ERD tool fails to open a saved file containing parent-child relationship within the same table. #8389

Fixed an issue in ERD where link notation end-points were not rendering occasionally.

---------

Co-authored-by: Aditya Toshniwal <[email protected]>

Author: pravesh-sharma

web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx

@@ -81,7 +81,7 @@ export class OneToManyLinkModel extends RightAngleLinkModel {
       data: this.getData(),
     };
   }
-  
+
   setPointType(nodesDict) {
     let data = this.getData();
     let target = nodesDict[data['local_table_uid']].getData();
@@ -97,6 +97,18 @@ export class OneToManyLinkModel extends RightAngleLinkModel {
   getPointType() {
     return this._linkPointType;
   }
+
+  setFirstAndLastPathsDirection() {
+    let points = this.getPoints();
+    if (points.length > 2){
+      super.setFirstAndLastPathsDirection();
+    } else {
+      let dx = Math.abs(points[1].getX() - points[0].getX());
+      let dy = Math.abs(points[1].getY() - points[0].getY());
+      this._firstPathXdirection = dx > dy;
+      this._lastPathXdirection = dx > dy;
+    }
+  }
 }
 
 const svgLinkSelected =   keyframes`
@@ -147,49 +159,33 @@ ChenNotation.propTypes = {
   type: PropTypes.string,
 };
 
-function CustomLinkEndWidget(props) {
-  const { point, rotation, tx, ty, type } = props;
-
+function NotationForType({itype, width, rotation}) {
   const settings = useContext(ERDCanvasSettings);
 
-  const svgForType = (itype) => {
-    if(settings.cardinality_notation == 'chen') {
-      return <ChenNotation rotation={rotation} type={itype} />;
-    }
-    if(itype == 'many') {
-      return (
-        <>
-          <circle className={['OneToMany-svgLink','OneToMany-svgLinkCircle'].join(' ')} cx="0" cy="16" r={props.width*2.5} strokeWidth={props.width} />
-          <polyline className='OneToMany-svgLink' points="-8,0 0,15 0,0 0,30 0,15 8,0" fill="none" strokeWidth={props.width} />
-        </>
-      );
-    } else if (itype == 'one') {
-      return (
-        <polyline className='OneToMany-svgLink' points="-8,15 0,15 0,0 0,30 0,15 8,15" fill="none" strokeWidth={props.width} />
-      );
-    }
-  };
-
-  return (
-    <g transform={'translate(' + point.getPosition().x + ', ' + point.getPosition().y + ')'}>
-      <g transform={'translate('+tx+','+ty+')'}>
-        <g transform={'rotate(' + rotation + ')' }>
-          {svgForType(type)}
-        </g>
-      </g>
-    </g>
-  );
+  if(settings.cardinality_notation == 'chen') {
+    return <ChenNotation rotation={rotation} type={itype} />;
+  }
+  if(itype == 'many') {
+    return (
+      <>
+        <circle className={['OneToMany-svgLink','OneToMany-svgLinkCircle'].join(' ')} cx="0" cy="16" r={width*2.5} strokeWidth={width} />
+        <polyline className='OneToMany-svgLink' points="-8,0 0,15 0,0 0,30 0,15 8,0" fill="none" strokeWidth={width} />
+      </>
+    );
+  } else if (itype == 'one') {
+    return (
+      <polyline className='OneToMany-svgLink' points="-8,15 0,15 0,0 0,30 0,15 8,15" fill="none" strokeWidth={width} />
+    );
+  }
 }
 
-CustomLinkEndWidget.propTypes = {
-  point: PropTypes.instanceOf(PointModel).isRequired,
+NotationForType.propTypes = {
+  itype: PropTypes.oneOf(['many', 'one']).isRequired,
   rotation: PropTypes.number.isRequired,
-  tx: PropTypes.number.isRequired,
-  ty: PropTypes.number.isRequired,
-  type: PropTypes.oneOf(['many', 'one']).isRequired,
   width: PropTypes.number,
 };
 
+
 export class OneToManyLinkWidget extends RightAngleLinkWidget {
   constructor(props) {
     super(props);
@@ -255,17 +251,13 @@ export class OneToManyLinkWidget extends RightAngleLinkWidget {
 
   generateCustomEndWidget({type, point, rotation, tx, ty}) {
     return (
-      <CustomLinkEndWidget
-        key={point.getID()}
-        point={point}
-        rotation={rotation}
-        tx={tx}
-        ty={ty}
-        type={type}
-        colorSelected={this.props.link.getOptions().selectedColor}
-        color={this.props.link.getOptions().color}
-        width={this.props.width}
-      />
+      <g key={point.getID()} transform={'translate(' + point.getPosition().x + ', ' + point.getPosition().y + ')'}>
+        <g transform={'translate('+tx+','+ty+')'}>
+          <g transform={'rotate(' + rotation + ')' }>
+            <NotationForType itype={type} width={this.props.width} rotation={rotation} />
+          </g>
+        </g>
+      </g>
     );
   }
 
@@ -318,6 +310,7 @@ export class OneToManyLinkWidget extends RightAngleLinkWidget {
     }
 
     // If there is existing link which has two points add one
+    // and the link is horizontal
     if (points.length === 2 && !this.state.canDrag && onePoint.point.getX() != manyPoint.point.getX()) {
       this.props.link.addPoint(
         new PointModel({
@@ -357,7 +350,6 @@ export class OneToManyLinkWidget extends RightAngleLinkWidget {
     }
     paths.push(this.generateCustomEndWidget(manyPoint));
 
-    this.refPaths = [];
     return <StyledG data-default-link-test={this.props.link.getOptions().testName}>{paths}</StyledG>;
   }
 }