Senzing SDK Components
  1. Components
  2. SzRelationshipPathComponent

File

src/lib/graph/sz-relationship-path/sz-relationship-path.component.ts

Implements

OnInit AfterViewInit

Metadata

selector sz-relationship-path
styleUrls ./sz-relationship-path.component.scss
templateUrl ./sz-relationship-path.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(graphService: EntityGraphService)
Parameters :
Name Type Optional
graphService EntityGraphService No

Inputs

excludeIds
Type : string
fixDraggedNodes
Type : boolean

sets whether or not to fix nodes in place after dragging.
from
Type : string
linkGravity
Type : number
maxDegrees
Type : string
port
Type : string
showLinkLabels
Type : boolean
svgHeight
Type : string

sets the height attribute of the svg.
svgPreserveAspectRatio
Type : string

sets the preserveAspectRatio attribute on the svg element. used to set aspect ratio, centering etc for dynamic scaling.
svgViewBox
Type : string

sets the viewBox attribute on the svg element.
svgWidth
Type : any

sets the width of the component
to
Type : string

Methods

addSvg
addSvg(graph: Graph, parentSelection)
Parameters :
Name Type Optional Default value
graph Graph No
parentSelection No d3.select("body")
Returns : void
Static asGraph
asGraph(rawTextOrJson)
Parameters :
Name Optional
rawTextOrJson No
Returns : { nodes: {}; links: {}; }
dragended
dragended(event)

Allows the simulation to 'cool' to the point that nodes stop moving. The simulation does not stop while alphaTarget (default 0, set at 0.3 by dragstarted) > alphaMin (default 0.001)

Parameters :
Name Optional
event No
Returns : void
dragged
dragged(event)

Update the position of the dragged node while dragging.

Parameters :
Name Optional
event No
Returns : void
dragstarted
dragstarted(event)

When the user clicks and drags and node, 'Re-heat' the simulation if nodes have stopped moving. To oversimplify, alpha is the rate at which the simulation advances. alpha approaches alphaTarget at a rate of alphaDecay. The simulation stops once alpha < alphaMin. Restart sets alpha back to 1.

Parameters :
Name Optional
event No
Returns : void
fade
fade(opacity)
Parameters :
Name Optional
opacity No
Returns : (d: any) => void
Static findEntityInfo
findEntityInfo(entitiesData, entityId)
Parameters :
Name Optional
entitiesData No
entityId No
Returns : any
Static getIconType
getIconType(resolvedEntity)

Determines which icon should be shown for this node.

Parameters :
Name Optional Description
resolvedEntity No

The entity for the node being drawn.
Returns : string

the key for the icon's SVG.
isConnected
isConnected(a, b)
Parameters :
Name Optional
a No
b No
Returns : any
linkFade
linkFade(opacity)
Parameters :
Name Optional
opacity No
Returns : (d: any) => void
Static linkSvg
linkSvg(leftNode, rightNode)

Generate SVG commands for a straight line between two nodes, always left-to-right.

Parameters :
Name Optional
leftNode No
rightNode No
Returns : string
Static linkTooltipText
linkTooltipText(d)
Parameters :
Name Optional
d No
Returns : string
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Static nodeTooltipText
nodeTooltipText(d)
Parameters :
Name Optional
d No
Returns : string
tick
tick()

Update the SVG to show changes in node position caused by either the user or D3's forces Not called when D3's forces reach equilibrium

Returns : void

Properties

forceSimulation
Type : Simulation<NodeInfo | LinkInfo>
Static Readonly ICONS
Type : object
Default value : { business: { shape: "M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z", enclosed: "M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" }, // TODO replace the business .png with SVG userFemale: { // The outline of the face and shoulders for the female icon shape: "M687.543 599.771c-29.257 73.143-95.086 124.343-175.543 124.343s-146.286-51.2-175.543-117.029c-146.286 36.571-256 146.286-256 277.943v95.086h870.4v-95.086c0-138.971-117.029-248.686-263.314-285.257zM768 592.457c0 0-51.2-299.886-65.829-365.714-14.629-87.771-95.086-160.914-197.486-160.914-95.086 0-182.857 65.829-197.486 160.914-7.314 51.2-73.143 329.143-80.457 343.771 0 0 7.314 14.629 95.086-14.629 7.314 0 43.886-14.629 51.2-14.629 36.571 51.2 80.457 80.457 138.971 80.457 51.2 0 102.4-29.257 138.971-87.771 29.257 14.629 14.629 36.571 117.029 58.514zM512 599.771c-43.886 0-80.457-21.943-109.714-65.829v0c0 0-7.314-7.314-7.314-7.314s0 0 0 0-7.314-7.314-7.314-14.629c0 0 0 0 0 0 0-7.314-7.314-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314-7.314-7.314-7.314-14.629 0 0 0 0 0 0-7.314 0-7.314-7.314-7.314-7.314s0 0 0 0c0-7.314 0-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314 0-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314 0-7.314 0-14.629 0 0 0-7.314-7.314-7.314-7.314-7.314-14.629-21.943-14.629-43.886s7.314-43.886 14.629-51.2c0 0 7.314 0 7.314-7.314 14.629 14.629 7.314-7.314 7.314-21.943 0-43.886 0-51.2 0-58.514 29.257-21.943 80.457-51.2 117.029-51.2 0 0 0 0 0 0 43.886 0 51.2 14.629 73.143 36.571 14.629 29.257 43.886 51.2 109.714 51.2 0 0 0 0 7.314 0 0 0 0 14.629 0 29.257s0 43.886 7.314 14.629c0 0 0 0 7.314 7.314s14.629 21.943 14.629 51.2c0 21.943-7.314 36.571-21.943 43.886 0 0-7.314 7.314-7.314 7.314 0 7.314 0 7.314 0 14.629 0 0 0 0 0 0-7.314 7.314-7.314 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0s-0 7.314-0 7.314c0 0 0 0 0 0 0 7.314-7.314 7.314-7.314 14.629 0 0 0 0 0 0s-7.314 7.314-7.314 7.314v0c-29.257 43.886-73.143 65.829-109.714 65.829z", // The space enclosed by the face of the female icon enclosed: "M512 599.771c-43.886 0-80.457-21.943-109.714-65.829v0c0 0-7.314-7.314-7.314-7.314s0 0 0 0-7.314-7.314-7.314-14.629c0 0 0 0 0 0 0-7.314-7.314-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314-7.314-7.314-7.314-14.629 0 0 0 0 0 0-7.314 0-7.314-7.314-7.314-7.314s0 0 0 0c0-7.314 0-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314 0-7.314-7.314-14.629 0 0 0 0 0 0 0-7.314 0-7.314 0-14.629 0 0 0-7.314-7.314-7.314-7.314-7.314-14.629-21.943-14.629-43.886s7.314-43.886 14.629-51.2c0 0 7.314 0 7.314-7.314 14.629 14.629 7.314-7.314 7.314-21.943 0-43.886 0-51.2 0-58.514 29.257-21.943 80.457-51.2 117.029-51.2 0 0 0 0 0 0 43.886 0 51.2 14.629 73.143 36.571 14.629 29.257 43.886 51.2 109.714 51.2 0 0 0 0 7.314 0 0 0 0 14.629 0 29.257s0 43.886 7.314 14.629c0 0 0 0 7.314 7.314s14.629 21.943 14.629 51.2c0 21.943-7.314 36.571-21.943 43.886 0 0-7.314 7.314-7.314 7.314 0 7.314 0 7.314 0 14.629 0 0 0 0 0 0-7.314 7.314-7.314 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0 0 7.314 0 7.314-7.314 14.629 0 0 0 0 0 0s-0 7.314-0 7.314c0 0 0 0 0 0 0 7.314-7.314 7.314-7.314 14.629 0 0 0 0 0 0s-7.314 7.314-7.314 7.314v0c-29.257 43.886-73.143 65.829-109.714 65.829z" }, userMale: { // The outline of the face and shoulders for the male icon shape: "M256 48C148.5 48 60.1 129.5 49.2 234.1c-.8 7.2-1.2 14.5-1.2 21.9 0 7.4.4 14.7 1.2 21.9C60.1 382.5 148.5 464 256 464c114.9 0 208-93.1 208-208S370.9 48 256 48zm135.8 326.1c-22.7-8.6-59.5-21.2-82.4-28-2.4-.7-2.7-.9-2.7-10.7 0-8.1 3.3-16.3 6.6-23.3 3.6-7.5 7.7-20.2 9.2-31.6 4.2-4.9 10-14.5 13.6-32.9 3.2-16.2 1.7-22.1-.4-27.6-.2-.6-.5-1.2-.6-1.7-.8-3.8.3-23.5 3.1-38.8 1.9-10.5-.5-32.8-14.9-51.3-9.1-11.7-26.6-26-58.5-28h-17.5c-31.4 2-48.8 16.3-58 28-14.5 18.5-16.9 40.8-15 51.3 2.8 15.3 3.9 35 3.1 38.8-.2.7-.4 1.2-.6 1.8-2.1 5.5-3.7 11.4-.4 27.6 3.7 18.4 9.4 28 13.6 32.9 1.5 11.4 5.7 24 9.2 31.6 2.6 5.5 3.8 13 3.8 23.6 0 9.9-.4 10-2.6 10.7-23.7 7-58.9 19.4-80 27.8C91.6 341.4 76 299.9 76 256c0-48.1 18.7-93.3 52.7-127.3S207.9 76 256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256c0 43.9-15.6 85.4-44.2 118.1z", // The space enclosed by the face of the male icon enclosed: "M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" }, // TODO introduce a gender-neutral person icon for when we can tell a node is a person but the gender isn't specified. default: { shape: "M256 48C148.5 48 60.1 129.5 49.2 234.1c-.8 7.2-1.2 14.5-1.2 21.9 0 7.4.4 14.7 1.2 21.9C60.1 382.5 148.5 464 256 464c114.9 0 208-93.1 208-208S370.9 48 256 48zm135.8 326.1c-22.7-8.6-59.5-21.2-82.4-28-2.4-.7-2.7-.9-2.7-10.7 0-8.1 3.3-16.3 6.6-23.3 3.6-7.5 7.7-20.2 9.2-31.6 4.2-4.9 10-14.5 13.6-32.9 3.2-16.2 1.7-22.1-.4-27.6-.2-.6-.5-1.2-.6-1.7-.8-3.8.3-23.5 3.1-38.8 1.9-10.5-.5-32.8-14.9-51.3-9.1-11.7-26.6-26-58.5-28h-17.5c-31.4 2-48.8 16.3-58 28-14.5 18.5-16.9 40.8-15 51.3 2.8 15.3 3.9 35 3.1 38.8-.2.7-.4 1.2-.6 1.8-2.1 5.5-3.7 11.4-.4 27.6 3.7 18.4 9.4 28 13.6 32.9 1.5 11.4 5.7 24 9.2 31.6 2.6 5.5 3.8 13 3.8 23.6 0 9.9-.4 10-2.6 10.7-23.7 7-58.9 19.4-80 27.8C91.6 341.4 76 299.9 76 256c0-48.1 18.7-93.3 52.7-127.3S207.9 76 256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256c0 43.9-15.6 85.4-44.2 118.1z", enclosed: "M256 76c48.1 0 93.3 18.7 127.3 52.7S436 207.9 436 256s-18.7 93.3-52.7 127.3S304.1 436 256 436c-48.1 0-93.3-18.7-127.3-52.7S76 304.1 76 256s18.7-93.3 52.7-127.3S207.9 76 256 76m0-28C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" } }
link
linkedByNodeIndexMap
linkLabel
node
nodeLabel
svgComponent
Type : ElementRef
Decorators :
@ViewChild('graphEle', {static: false})

svg element
Public svgElement
Type : SVGElement
Public unsubscribe$
Default value : new Subject<void>()

subscription to notify subscribers to unbind
Static Readonly WITH_RAW
Type : boolean
Default value : true
Static Readonly WITHOUT_RAW
Type : boolean
Default value : true

Accessors

svgViewBox
getsvgViewBox()

gets the viewBox attribute on the svg element.
setsvgViewBox(value: string)

sets the viewBox attribute on the svg element.

Parameters :
Name Type Optional
value string No
Returns : void
svgPreserveAspectRatio
getsvgPreserveAspectRatio()

gets the preserveAspectRatio attribute on the svg element.
setsvgPreserveAspectRatio(value: string)

sets the preserveAspectRatio attribute on the svg element. used to set aspect ratio, centering etc for dynamic scaling.

Parameters :
Name Type Optional
value string No
Returns : void
fixDraggedNodes
setfixDraggedNodes(value: boolean)

sets whether or not to fix nodes in place after dragging.

Parameters :
Name Type Optional
value boolean No
Returns : void
linkGravity
setlinkGravity(value: number)
Parameters :
Name Type Optional
value number No
Returns : void
port
setport(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
excludeIds
setexcludeIds(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
from
getfrom()
setfrom(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
to
getto()
setto(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
maxDegrees
setmaxDegrees(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
showLinkLabels
getshowLinkLabels()
setshowLinkLabels(value: boolean)
Parameters :
Name Type Optional
value boolean No
Returns : void 
<svg #graphEle 
class="graph-chart"
[attr.viewBox]="this.svgViewBox"
[attr.preserveAspectRatio]="this.svgPreserveAspectRatio"></svg>

./sz-relationship-path.component.scss 

:host {
    font-family: var(--sz-font-family);
    &.not-showing-link-labels {
      ::ng-deep svg.graph-chart {
        .sz-graph-link-label {
          opacity: 0;
        }
      }
    }
  }
  
  .sz-graph-node {
    font-size: 12px;
  }
  
  .sz-graph-link-label {
    font-size: 10px;
  }
  
  .sz-graph-bbox {
    fill: white;
    fill-opacity: 0.7;
  }
  
  .sz-graph-core-link {
    stroke: #555;
    stroke-width: 3px;
  }
  
  .sz-graph-link {
    stroke: #999;
    stroke-width: 2px;
  }
  
  .sz-graph-icon-enclosure, .sz-graph-business-icon-enclosure {
    fill: white;
  }
  
  div.sz-graph-tooltip {
    position: absolute;
    background-color: white;
    max-width: 200px;
    height: auto;
    padding: 1px;
    border-radius: 4px;
    border: 1px solid;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  :host {
    display: block;
    width: 100%;
    height: 100%;
  
    .chart-container {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      kl-components {
        display: block;
        width: 100%;
        height: 100%;
  
        kl-component {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
  
      .kl-chart {
        width: 100%;
        height: 100%;
      }
    }
  
    svg {
      display: inline-block;
      width: 100%;
      height: 100%;
  
      .sz-graph-link {
        stroke: #999;
        stroke-width: 2px;
      }
    }
  
    .tooltip-container {
      /* position container relative to flow */
      position: relative;
      left: 0px;
      top: 0px;
      height: 0;
      overflow: visible;
  
      /* position actual tooltip node absolute
        to container. that way tooltip can use
        absolute positioning, relative to the place
        that the container is located.
      */
      .tooltip {
        font-size: var(--sz-graph-tooltip-font-size);
        background-color:  var(--sz-graph-tooltip-background-color);
        position: absolute;
        z-index: 5000;
        padding: 1px;
        border-radius: var(--sz-graph-tooltip-border-radius);
        border: var(--sz-graph-tooltip-border);
        box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s linear;
  
        .popover-title {
          margin: 0 4px 10px 0;
          font-size: var(--sz-graph-tooltip-font-size);
        }
      }
    }
  
    #tooltip, .tooltip {
      border: var(--sz-graph-tooltip-border);
      padding: var(--sz-graph-tooltip-padding);
    }
  }

results matching ""

    No results matching ""