esnet / react-network-diagrams

Contains ESnet network mapping and circuit rendering code, as used in the ESnet portal.
http://software.es.net/react-network-diagrams
Other
196 stars 37 forks source link

Unable to render `angled` for EndpointLabelPosition #40

Closed ssidhar2 closed 5 years ago

ssidhar2 commented 5 years ago

Trying to render a concatenated circuit with the code below.

const memberList2 = []
if (finalArr && finalArr.length > 0) {
  console.log('finalArr ', finalArr)
  console.log('activeTab ', this.state.activeTab)
  let selectedValue = finalArr.find(o => o.id === this.state.activeTab);
  if (selectedValue === undefined ) {
    selectedValue = finalArr[0]
  }
  console.log("selectedList " + selectedValue)
  console.log('this is the activePath ', selectedValue.activePath)
  for (var i = 0; i < selectedValue.activePath.length; i++) {
    console.log('i ', i)
    if (i != 0 && i  % 2 != 0) {
      memberList2.push({
                styleProperties: circuitTypeProperties.coupler,
                endpointStyle: stylesMap.endpoint,
                endpointLabelA: selectedValue.activePath[i-1].port_id,
                endpointLabelZ: selectedValue.activePath[i].port_id
            });
      if (i != selectedValue.activePath.length-1) {
        memberList2.push({
                  styleProperties: circuitTypeProperties.optical,
                  endpointStyle: stylesMap.endpoint,
                  endpointLabelA: selectedValue.activePath[i].port_id,
                  endpointLabelZ: selectedValue.activePath[i+1].port_id
              });
      }
    }
  }
  console.log('memberList2 ', memberList2);
  console.log('length  of pathNodeList ' + pathNodeList.length);
}

const serviceDisplay = finalArr ? (
  pathNodeList.map((item, i) =>
    <Tab eventKey={item.id} title={item.label}>
      <ConcatenatedCircuit
      memberList={memberList2}
      endpointLabelPosition="bottomleftangled"
      connectionLabelPosition="center"
      yOffset={1}
      disabled="false"
      title=""
      onSelectionChange={this.handleSelectionChange}
      endpointLabelOffset={10}
      parentId={"services_tab"} />
    </Tab>
  )
 )
 :
 '';

endpointLabelPosition="bottomleftangled"

Endpoint label position just stays at bottom or top horizontally and is not angled.