In cytoscape.js, I've been using the "breadthfirst" layout and configured it to be directed (the tree is directed downwards).
Here is an example: http://jsbin.com/jekago/1
It works great, however I would like the nodes to be closer together, especially vertically, and if possible without limiting the bounding box.
My node labels can be quite long so I would not mind having them spread apart horizontally.
How can I can achieve this with this layout? If I can't, what are you recommending? Thanks
The layout uses the available space and avoids node overlap. Reduce the available space as desired using the boundingBox, and specify fit: true if you want the graph to take up the entire viewport.
You can alternatively use spacingFactor, but this will not allow for as much control as boundingBox.
You'll have to experiment and see what functions best for your data.
You can use as an example spacingFactor=1.5 to have 1.5x space between the elements regarding to the elements dimension.
The fit:true is also a good idea. This is used regarding the div dimensions.
In conjunction to work nice you have to set properly the minZoom maxZoom of the Cy element. And you can set avoidOverlap: true also .
Related
I'm new to Office UI Fabric. The Pivot component doesn't seem to behave responsively by default. What would be the recommended way to deal with the Pivot component on small screens? I couldn't find any wrapping features. I tried to figure out if other components like OverflowSet & ResizeGroup could help. However, they don't seem to be the right solution for the Pivot either. Any suggestions are welcome.
I don't think the pivot was ever intended for responsive scenarios (there certainly isn't behavior baked in). But you could use ResizeGroup to modify your pivots if they don't fit. You might truncate text, reduce padding or switch to a dropdown.
Switching to dropdown might be the best idea. Just have a flag in your data that says "renderAsDropdown" and your reduceData just flips 'renderAsDropdown" to true, and your 'onRenderData' just renders a dropdown or a set of pivots. No need to calculate some breakpoint.
I am trying to use cytoscape to replace my dot output and make it interactive (move nodes and compounds, expand/collapse compounds, etc.)
When a graph is first loaded, the user should be presented with a default layout though. However, I am struggling to find a layout/config that supports what dot calls rank.
In my graph I have compound nodes that represent components.
Components contain other components and/or states, transitions, variables.
Each component can specify inputs and outputs.
In dot I tried to add some form of flow within the system (rankdir=LR;) by positioning the inputs on the left (rank=source;) and the outputs on the right (rank=sink;).
Other elements have no rank and are hence freely positioned.
I then specified cluster subgraphs containing all recursive components.
Now, here is what I have in dot. I hope it explains what I would like to end up with.
First, I already saw this question, but as far as I understood it's for manual positioning, rather than layouts.
I haven't found a layout that fully supports positioning nodes within the compound.
I looked into using the cytoscape.js-cola layout with the following options:
layout: {
name: 'cola',
flow: { axis: 'y', minSeparation: 40 },
avoidOverlap: true
}
I ended up with this
As you can see, there is some flow, but not as nicely as in dot.
I tried adding some function for the alignment parameter, but as far as I understood I can only specify the absolute coordinates (e.g. return {'x': 0};). This basically allows me to align ALL inputs, rather than all inputs of a compound.
Here is a CodePen of my example to play around with: https://codepen.io/anon/pen/GEaOQQ
In the Javascript you can see the comments of
You could try Klay: https://github.com/cytoscape/cytoscape.js-klay
If any of the existing layouts don't meet your requirements, you can use any algorithm you'd like by writing a layout extension. You could port the exact layout you're using with dot/graphviz, if you like.
I'm using Dgrid with an Observable JsonRest store. The JsonRest store is queried for 50 rows at a time. Now I have a function where the user can 'quicksearch' the data and the search is processed on the serverside. This works, and in this case the server returns for example "Content-Range: 210-260/1500". It returns 50 rows of data but Dgrid renders the full grid at the beginning, so the user can't scroll 'up' for previous entries.
How can I make Dgrid behave like that?
Not entirely sure if I'm completely grasping your problem, but if I am, it may require some thinking outside the box or compromising to get what you want. I assume your UI is basically jumping to the first match rather than simply filtering the grid to only show matches.
If your UI is such that the grid is always present and the search is basically intended to scroll the grid, you can use grid.scrollTo({ y: valueInPixels }) to scroll the grid. While this accepts a pixel value (not rows), if your rows are consistent height, you can multiply by grid.rowHeight (which is a property set by OnDemandList) to get the correct offset.
Another option, though probably not what you want, would be to use the Pagination extension and navigate to a specific page.
Of course, if you would rather actually filter the grid to only display matching items, that's possible too (assuming your server behaves as dojo/store/JsonRest expects, anyway). The Using Grids and Stores tutorial has an example towards the end.
I have to create a cube structure and for this I want to load a different tree panels under each of the columns of extjs grid panel.Is it possible to have the grid panel to show the tree panel under each of its columns.
You can refer TreeGrid component for this. I hope you are looking for this implementation. You can refer sencha kitchen sink link with example. Please refer below URL which may help you.
http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#tree-grid
Thanks.
So you need to use this TreeGrid for your project.
TreeGrid
No. Grid panel does not support this.
What's more, it does not make much sense from a functionality point of view - trees have nodes that can be expanded and collapsed. The only way this can work with a grid is if there is only one tree column; only then you can collapse or expand specific rows. But how would this work if there are different trees in different columns.
I'd take on rixo's recommendation and use a column layout in which there are trees. Although I still can't really see how users would benefit from such a screen.
I'd like to style a select-box with some gradients.
My problem is that somehow there is a shadow added.
You'll see what I mean by opening this fiddle.
The gradient of both classes is the same ...
I do not know why a shadow is added to the select-box and I just can't find a solution.
Can you help me?
Thank you.
The select element is handled by the underlying platform/OS, rather than the browser; as such it's not possible to style them (using Chrome 8/Win XP). If you feel the need to use styled select elements then you'll need to use a regular html element (such as an ol or ul) in combination with JavaScript.
I put together a demo of the ideas involved for another question, which shows how this might be achieved: JS Fiddle demo.
I'm not sure what you mean by the 'shadow', although typically input elements are styled with a :focus pseudo-element rule, to indicate that the element has focus. This can be amended with:
select:focus {
outline: 0 none transparent;
}
Although this does reduce the accessibility of the form for those navigating with keyboards/non-mouse input-devices. Ideally, it's better to define an outline that fits with your site's design.