Support for layout options that accept JS func

[xhluca]

Description

Certain layout contains options that accept functions. For example, the grid layout:

let options = {
  name: 'grid',

  fit: true, // whether to fit the viewport to the graph
  padding: 30, // padding used on fit
  boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
  avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
  avoidOverlapPadding: 10, // extra spacing around nodes when avoidOverlap: true
  nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
  spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
  condense: false, // uses all available space on false, uses minimal space on true
  rows: undefined, // force num of rows in the grid
  cols: undefined, // force num of columns in the grid
  position: function( node ){}, // returns { row, col } for element
  sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
  animate: false, // whether to transition the node positions
  animationDuration: 500, // duration of animation in ms if enabled
  animationEasing: undefined, // easing of animation if enabled
  animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
  ready: undefined, // callback on layoutready
  stop: undefined, // callback on layoutstop
  transform: function (node, position ){ return position; } // transform a given node position. Useful for changing flow direction in discrete layouts 
};

Obviously, position is not accepted in Python, since it accepts input that is a function mapping from a node object to a {row,col} object.

Possible Solution

Optionally accept dictionary input instead of a function on the Dash/Python side. On the react side, the function will simply look up the object's names (i.e. dictionary keys) and return the corresponding value.

[xhluca]

Dash clientside callbacks accepts JS, so that should cover some scenarios. If you find a use-case that is not covered, feel free to reopen this.

[pbelmann]

Thank you for creating this issue. Could you please show the code how you would solve your example with the dash clientside callback?

[ThomWorm]

@pbelmann @xhlulu do either of you have an example of how I might use a clientside callback here as a workaround for the inability to use the embedded JS functions? I'm having trouble figuring it out from the dash documentation.

[MoburgLeGrand]

@ThomWorm Did you ever get this to work ? I can't seem to get it right.

[nmz787-intel]

did anyone ever come up with an example? I want to try this option on breadthfirst :
depthSort: undefined, // a sorting function to order nodes at equal depth. e.g. function(a, b){ return a.data('weight') - b.data('weight') }

[nmz787-intel]

seems like the way to do this is, write the JS function as a string in Python... on the JS side, this string would need passed into something like eval

[lvlte]

Hi, I'm a bit late but I just wrote an answer on stackoverflow that shows how we can use a clientside callback to assign a JS function to a component property, it addresses the use case of @nmz787-intel but it should help others too. @pbelmann @ThomWorm @MoburgLeGrand

Is it possible to use the depthSort argument in breadthfirst layout in dash-cytoscape?