How to make text within nodes findable in cytoscape.js, dagre-layout - cytoscape.js

I have been trying to use the dagre-layout in cytoscape.js to create a graph, however I seem unable to find the text within nodes, which I am able to do in dagre-d3, (EDIT: Find as in CTRL + F).
It seems like even in demos such as: http://js.cytoscape.org/demos/labels/ this is not available.
Any ideas on how to make it possible?

When working with Cytoscape, you're not working with traditional DOM elements for the nodes and edges. Rather it draws on a canvas. So are you screwed?
Nope. You just need to program a bit. Add a text box to your page. Add an on change listener to it (or add a button to search only when the user clicks it). When the user types, you can run a search that reads through all of the nodes in the graph. For speed you might want to implement a binary search based on the node's text.
When you find text that matches (exact or partial), you can add a class to change the visual appearance using Cytoscape.js' addClass method. You decision of how to show the data is up to you.

Related

How to create "menu grid" in kotlin

I have searched google/stackoverflow etc. for answer to my question, but I didn't quite manage to find the right one. I believe I just don't know, how to set the question properly, and thus I cannot find solution.
Is there any way, how to create grid like I drawed in following image (with red colour):
I need to add this red grid to several images, which look very simmilar. The grid field (the one selected) have rolling menu, prescribed position, and a field for additional text. Black lines in background are image in background, and the red supposed to be grid above the image. I thought of creating a lot of buttons alined to each other, but i think that is very bad way to do so.
I would like a pop-up menu from selected field, but opening new activity with same fields is usable aswell. Is there any "simple" solution for creating such grid/menu ?
Btw, I am not programmer with many experience with coding, let's say, I know basics only.
Thanks in advance.

RedisInsight: Configuring graph visual display/results?

Is there a way to configure the display of RedisGraph results in RedisInsight.
May be an option to edit the CSS directly is good too.
The reasons :
The color of the nodes is awful
The font-size is too small
nice to be able to change color of nodes with property value X
it will be good to be able to specify the default-property that will be displayed instead of node ID. Also on mouse-over too. (i know i can changed but it becomes tedious to do it for every result).
same for relationships
ERR: If some of the nodes in the result does not have the property you want to switch to (for display), then the 'switch' does not work i.e. all nodes still display IDs
for my screen it just happen that the +/- zoom is hidden i.e. I have to scroll back and forth. It will be good if we can use the keyboard to zoomin/zoomout
once you select something you have to click outside of the graph area to be able to scroll, supper annoying
command history on the query editor would be nice
ability to pin the result-area so that the new result does not spawn yet another area .. it is nice to have the option for multiple result-areas, but the normal interaction is refining queries rather than writing new query every time. (tabs would have been better)
if possible select-area to zoom will be nice. (by holding mouse down and selecting area )
!! double-click outside a node, may Zoom, instead of doing nothing
!! local zoom/search : typing in search-bar (there is space for it after +/-) to zoomin on the node with that have property and/or value f.e. val:3 , word:test , ...
Posting this here because couldn't find a place to give feedback on RedisInsight !

How to develop inspect element tab for my Web Browser(Using VS2015 Community) in VB.NET

How to Develop inspect element tab section for my Web Browser which i've developed in VS2015 Community. Please help I'm searching this from last few days...
A suggestion for this could be using the TreeView Class which could potentially provide you with what you are looking for (If you're looking to create the 'Inspect Element' in it's entirety). If you just want the code then simply using the DocumentText WebBrowser Property would do that. Just having a TextBox and writing the document text into it, then you could make changes and then on a 'onFocus' Event on the WebBrowser you could have it write the edited text back to the browsers html code.
(I have done the second way before out of curiosity and it's obviously much simpler than the other way that i have suggested)
-
But with the TreeView :
You can dynamically add Nodes to that object.
Roots are 'Base' Nodes (Parents) and the and the Child, well, is obviously the Child of the Root Node.
(A node consisting of an actual name to call it by, a display name (text), and a tag for any extra info.)
But anyways, the TreeView would be the most work to do.
A few other things potentially worth your time to look at, if you chose to do either option, I've written below in a comment.

Drawing Interactive paths in JavaFX 8?

(please excuse any mistakes in the way of questioning/ formatting the question since I'm new)
[Please Note that I cannot post code here as yet, and FXML code isnt worth posting right ?
Also, my GUI programming experience before this is very little... I picked up JavaFX 8 first because I use Java, and heard that FX >> Swing in many ways]
I am trying to make a GUI that allows the user to input the NumberLink puzzle numbers (through mouse action events), and then, displays the puzzle in a grid with features to draw a path, and undo it. This is almost exactly the same functionality as in Numberlink on Nikoli. The puzzle is quite interesting, and these are the rules. The goal of the UI is for the user to interactively solve the puzzle by drawing lines,etc, just as on Nikoli's site. The solver will be a later addition.
In my project, I have a Stage in which a setup Scene prompts user for rows and columns (to take size of puzzle),
next, it generates an empty grid (I'm thinking of using a GridPane here), and the user clicks the squares to enter the numbers into the square. this phase isnt a problem if I use TextFields and mouse listeners and store info in a grid... the next phase is what I'm stuck at... unless I know exactly how to do that, I cant make progress...
in the third stage, I have to display the numbers to the user just like on the Nikoli site (the highlighting number pairs on mouse hover is a necessary feature too, which I think I can handle with CSS).. and the user should draw paths between the numbers, just as on that site ( I thought VLineTo and HLineTo classes would be suitable.. but I'm not sure, and cant find any alternatives) Please help on this ...
So with this in mind, I made FXML based dummy gui layouts to test if my ideas work...
and I cant get the GridPane to have lines drawing atop it (meaning, I cant place Line objects like HLineTo on top of the grid panes).... is there any other way to do what I need to do ?
I also thought of making multiple Canvas objects in a grid (each square is its own canvas), having the numbers as Text objects, and a Canvas on top of the grid with transparency ON, and having them both on a StackPane, but then, the StackPane's children will not be synchronised.
Please help point me in the right direction, thanks (tell me if I'm missing something basic, which I think I am).
You can wrap the GridPane in an AnchorPane, then use getChildren().add(Node node).
Assuming your controller has defined <AnchorPane fx:id="anchorpane"...> and implements Initializable
#FXML private AnchorPane anchorpane;
#Override
public void initialize(URL location, ResourceBundle resources) {
Line line = new Line(double startX, double startY, double endX, double endY);
anchorpane.getChildren.add(line);
}
NOTE: The line should actually be dependent on mouse events, so it really shouldn't even be in your initialize method; but it should help you get started with what you want to do.
HTH

LINQPad: Anyway to make the Dump() results be initially collapsed?

Couldn't find it anywhere (google or stackoverflow).
Is there a way to force Dump()'s output to be automatically collapsed?
Update:
Some more info, to bring more focus to the question.
As mentioned below Collapsing can be done after the output as rendered via keyboard shortcust (Alt+1, Alt+2, Alt+3)
And can rendering depth can be determined by passing an int depth param, but that does not allow to expand the results.
Is there some way to change the CSS formatting? I'm not that fluent in CSS, so this might be the solution.
Why I need this:
What I want is to make the output 'cleaner', and dive in when something of interest show's up.
I'm running a query repeatedly, and don't need all of the output all the time, but still using my human abilities to detect change, instead of coding the detection.
Update: November 2013
As Joe (the author himself!) mentions in the comments, LINQPad no longer has the limitation described.
It is now possible to state 0 and collapse the information after it's rendered.
No, although you can call Dump with a number to force it to display to that nesting depth:
.Dump(0)
You can also use the formatting shortcuts (Alt+1, Alt+2, Alt+3) to collapse the whole display to one, two or three levels.
Another option is to dump to grids. Call Dump(true) or use the toolbar button. Grids show only one level and subsequent levels are shown upon demand with hyperlinks.