original_docstring: Produces a `cytoscape` representation of the feature graph.
          This component can be used within Python Dash applications to
          visualize the feature graph.
          
docstring: Produces a `cytoscape` representation of the feature graph.
  This component can be used within Python Dash applications to
  visualize the feature graph.
docstring_tokens: Produces a ` cytoscape ` representation of the feature graph . This component can be used within Python Dash applications to visualize the feature graph .
code: def cytoscape(self, stylesheet: Optional[Union[List, Dict]] = None):
          """Produces a `cytoscape` representation of the feature graph.
          This component can be used within Python Dash applications to
          visualize the feature graph.
          """
          nodes = [{"data": {"id": str(f.guid), "label": f.name}, "style": {
                    "background-color": Colors.MANDATORY.value if f.is_mandatory else Colors.OPTIONAL.value}}
                   for f in self.features]
          edges = [{"data": {"source": str(f.guid), "target": str(r.guid), "label": str(r.rel.value)}, "style": {
                   #   "mid-target-arrow-color": "red",
                   #   "mid-target-arrow-shape": "vee",
                    "line-color": Colors.ALTERNATIVE.value if r.rel == RelationshipTypes.ALTERNATIVE else Colors.DEFAULT.value,
                    'opacity': 0.9,
                    #   'z-index': 5000,
                    'label': 'data(label)',
                    "text-wrap": "wrap"}}
                   for f in self.features
                   for r in f.relationships]
          return html.Div([
              cyto.Cytoscape(
                  id='cytoscape',
                  elements=nodes + edges,
                  layout={'name': 'circle'},
                  style={
                      'height': '95vh',
                      # 'width': '75vw',
                      # "float": "left",
                  },
                  stylesheet=stylesheet or [
                      {
                          "selector": 'node',
                          'style': {
                              "opacity": 0.65,
                              'z-index': 9999
                          }
                      },
                      {
                          "selector": 'edge',
                          'style': {
                              "curve-style": "bezier",
                              "opacity": 0.45,
                              'z-index': 5000,
                              'label': 'data(label)'  # to add relationship labels
                          }
                      },
                      {
                          'selector': '.followerNode',
                          'style': {
                              'background-color': '#0074D9'
                          }
                      },
                      {
                          'selector': '.followerEdge',
                          "style": {
                              "mid-target-arrow-color": "blue",
                              "mid-target-arrow-shape": "vee",
                              "line-color": "#0074D9"
                          }
                      },
                      {
                          'selector': '.followingNode',
                          'style': {
                              'background-color': '#FF4136'
                          }
                      },
                      {
                          'selector': '.followingEdge',
                          "style": {
                              "mid-target-arrow-color": "red",
                              "mid-target-arrow-shape": "vee",
                              "line-color": "#FF4136",
                          }
                      },
                      {
                          "selector": '.genesis',
                          "style": {
                              'background-color': '#B10DC9',
                              "border-width": 2,
                              "border-color": "purple",
                              "border-opacity": 1,
                              "opacity": 1,
  
                              "label": "data(label)",
                              "color": "#B10DC9",
                              "text-opacity": 1,
                              "font-size": 12,
                              'z-index': 9999
                          }
                      },
                      {
                          'selector': ':selected',
                          "style": {
                              "border-width": 2,
                              "border-color": "black",
                              "border-opacity": 1,
                              "opacity": 1,
                              "label": "data(label)",
                              "color": "black",
                              "font-size": 12,
                              'z-index': 9999
                          }
                      }
                  ]
              )
          ])
code_tokens: def cytoscape ( self , stylesheet : Optional [ Union [ List , Dict ] ] = None ) : nodes = [ { "data" : { "id" : str ( f . guid ) , "label" : f . name } , "style" : { "background-color" : Colors . MANDATORY . value if f . is_mandatory else Colors . OPTIONAL . value } } for f in self . features ] edges = [ { "data" : { "source" : str ( f . guid ) , "target" : str ( r . guid ) , "label" : str ( r . rel . value ) } , "style" : { "line-color" : Colors . ALTERNATIVE . value if r . rel == RelationshipTypes . ALTERNATIVE else Colors . DEFAULT . value , 'opacity' : 0.9 , 'label' : 'data(label)' , "text-wrap" : "wrap" } } for f in self . features for r in f . relationships ] return html . Div ( [ cyto . Cytoscape ( id = 'cytoscape' , elements = nodes + edges , layout = { 'name' : 'circle' } , style = { 'height' : '95vh' , } , stylesheet = stylesheet or [ { "selector" : 'node' , 'style' : { "opacity" : 0.65 , 'z-index' : 9999 } } , { "selector" : 'edge' , 'style' : { "curve-style" : "bezier" , "opacity" : 0.45 , 'z-index' : 5000 , 'label' : 'data(label)' } } , { 'selector' : '.followerNode' , 'style' : { 'background-color' : '#0074D9' } } , { 'selector' : '.followerEdge' , "style" : { "mid-target-arrow-color" : "blue" , "mid-target-arrow-shape" : "vee" , "line-color" : "#0074D9" } } , { 'selector' : '.followingNode' , 'style' : { 'background-color' : '#FF4136' } } , { 'selector' : '.followingEdge' , "style" : { "mid-target-arrow-color" : "red" , "mid-target-arrow-shape" : "vee" , "line-color" : "#FF4136" , } } , { "selector" : '.genesis' , "style" : { 'background-color' : '#B10DC9' , "border-width" : 2 , "border-color" : "purple" , "border-opacity" : 1 , "opacity" : 1 , "label" : "data(label)" , "color" : "#B10DC9" , "text-opacity" : 1 , "font-size" : 12 , 'z-index' : 9999 } } , { 'selector' : ':selected' , "style" : { "border-width" : 2 , "border-color" : "black" , "border-opacity" : 1 , "opacity" : 1 , "label" : "data(label)" , "color" : "black" , "font-size" : 12 , 'z-index' : 9999 } } ] ) ] )
short_docstring: Produces a `cytoscape` representation of the feature graph.
short_docstring_tokens: Produces a ` cytoscape ` representation of the feature graph .
comment: """Produces a `cytoscape` representation of the feature graph.
          This component can be used within Python Dash applications to
          visualize the feature graph.
          """$SEP$#   "mid-target-arrow-color": "red",
  $SEP$#   "mid-target-arrow-shape": "vee",
  $SEP$#   'z-index': 5000,
  $SEP$# 'width': '75vw',
  $SEP$# "float": "left",
  $SEP$# to add relationship labels
  