multiple graphs in one instance - cytoscape.js

I'm making view of my switch with cytoscape. Switch has about 40 ports, each port fits nice to the breadthfirst layout.
http://i.stack.imgur.com/Ddg2D.png
But I need around 40 about same graphs in one page
When I'm using breadthfirst with multiple roots I'm getting mess like this
http://i.stack.imgur.com/nYcNz.png
So, can I deal with this somehow?
Sorry, dont have 10 rep yet, so cant paste images and more links to explain more correctly.
Also english not my native language.

You can run different layouts on different parts of the graph, if you want to keep all elements in a single instance: http://js.cytoscape.org/#collection/layout

Have you looked at this example?:
http://jsbin.com/gist/310dca83ba6970812dd0?js,output
It is basically the same that you want to do. Just add in your body tag:
<body>
<div id="cyFirstInstance"></div>
<div id="cySecondInstance"></div>
</body>
And in your javascript function where you define the nodes, add for each instance the style (it could be the same for both nodes)
$('#cyFirstInstance').cytoscape({
style: ...
$('#cySecondInstance').cytoscape({
style: ...
Hope this helps.

Related

UI Automation - Elements on my UI have ember ids , which change frequently with addition of new UI elements. How to use the id for automation?

Example of the HTML of a dropdown element:
<div aria-owns="ember-basic-dropdown-content-ember1234" tabindex="0" data-ebd-id="ember1234-trigger" role="button" id="ember1235" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-view"> <!---->
<span class="ember-power-select-status-icon"></span>
</div>
The xpath and CSS selector also contain the same ember id.
xpath : //*[#id="ember1235"]
css selector : #ember1235
The ember id would change from id="ember1235" to say, id="ember1265" when there is a change in the UI.
I am using id to locate the element. But every time it changes I need to modify the code. Is there any other attribute I could use for Ember JS UI elements?
There is quite a lot to discuss in your question but hopefully we will have a good answer for you #PriyaK
The first thing to mention is that Ember IDs may not be the best method to select an element in the DOM. As you have already mentioned, they can change from time to time and also it doesn't really give you a great semantic thing to select in your selenium test so it might seem a bit out of context when looking back.
One thing that you could try is to either pass a class to the ember-power-select component (the one that provides the HTML that you used in your example) and use that to select the element, something like:
<PowerSelect
#class="my-fancy-class"
as |name|
>
{{name}}
</PowerSelect>
Then you should be able to select the selected value by using the CSS selector .my-fancy-class span (because the component outputs the selected value in a span)
We just tried this in an example app but it didn't actually work 🤔 Never fear, you can also do something like this and it should work with the same selector as before:
<div class="my-fancy-class">
<PowerSelect as |name|>
{{name}}
</PowerSelect>
</div>
This is fine, but there are also a few issues using classes for selectors in tests. One example of a problem that might crop up is that your tests might all suddenly stop working if you did a style refactor and changed or removed some of the classes on your elements. One technique that has become popular in the Ember community is to use data-test- attributes on your DOM nodes like this:
<div data-test-my-fancy-select>
<PowerSelect
#class="my-fancy-class"
as |name|
>
{{name}}
</PowerSelect>
</div>
which can then be accessed by the following selector: [data-test-my-fancy-select] span. This is great for a few reasons! Firstly it separates the implementation of your application and tests from your styling and avoids the issue I described above. The second benefit of this method is that using what #Gokul suggested in the comments, the ember-test-selectors package, you can make use of these data-test- selectors in your development and test environments but they will be automatically removed from your production build. This is great to keep your DOM clean in production but also, depending on the size of your application, could save you a reasonable amount of size in your templates on aggregate.
I know you say that you are using selenium for your testing but it's also worth mentioning that if you're using the built-in Ember testing system you will be able to make use of some testing helpers that addons may provide you. ember-power-select is one of those addons that provides specific testing helpers and you can read more about it in their documentation: https://ember-power-select.com/docs/test-helpers
I hope this answers any questions you had!
This question was answered as part of "May I Ask a Question" Season 3 Episode 1. If you would like to see us discuss this answer in full you can check out the video here: https://www.youtube.com/watch?v=1DAJXUucnQU

DNN - trying to insert background-image in .DnnModule HTML module, and then give client 3 choices to use as HTML modules

My first problem is that I can't even seem to get a full background image to work for individual modules of type "DnnModule DnnModule-DNN_HTML". Of course I could give them all the same background-image by targeting the DNN_HTML class, but I need to be able to use different background-images on different HTML modules (I need a green, a blue, and a tan). So I need a way to target the HTML modules being used individually? Is there a way to do that? (I am a newb, so please go easy)
Then, the ultimate goal is to have the client able to pick and choose which color module they want to use throughout the site.
Of course I could code an HTML module with the different backgrounds in-line, however, there are various other divs that surround that HTML module, and therefore, the background-image I set in the module using the editor is tiny, and does not cover the whole div.
I'm also not sure if its best to make the client a template with different colored backgrounds they can use already layed out in "bucket" containers for them, but I don't think they could switch the order around could they?
Is there any way at all to accomplish this? Any help would be really really appreciated.
This really would normally be handled by the Container system within DNN.
I would create 3 different Containers for the colors in question, and then instruct the customer how to choose the Container in the module settings for each of the modules that they want to change the BG for.

How can I control the speed of the Carousel element in the Twitter Bootstrap Package in TYPO3

I have tried to find an answer, but all I get is answers on how to control the speed when implementing Twitter Bootstrap by your self.
I cannot figure out how to do it in TYPO3. I think it should be done through TypoScript, but how?
In Bootstrap 3's Carousel, you can set the option interval or data-interval, see http://getbootstrap.com/javascript/#carousel.
You know that already. Here's how I'd do it:
First you have to find out if the extension can set that parameter at all. Supposing the manual is quiet on that, you want to check the Constant Editor under Templates > Constant Editor first. No luck yet.
So you will have to look at the code of typo3conf/ext/bootstrap_package. Everything that can be set via TypoScript will probably be in /Configuration/TypoScript/: constants.txt and/or setup.txt. Nothing there for the carousel, though.
Now the I would search for interval in the entire extension, using your favourite editor. Ah, there you are: In the file /Resources/Private/Templates/ContentElements/Bootstrap/Carousel.html you will find the interval of 10seconds hardcoded:
<div id="carousel-{data.uid}" class="carousel slide{f:if(condition: '{data.layout} == 110',then:' carousel-small')}" data-interval="10000" data-ride="carousel">
Of course, do NOT edit the extension as you have to keep it updateable. No problem, though.
If you search for Carousel.html, you will find it in /Configuration/ContentElements/Bootstrap/Carousel.ts:
tt_content.bootstrap_package_carousel = COA
tt_content.bootstrap_package_carousel {
10 =< lib.stdheader
20 = FLUIDTEMPLATE
20 {
file = {$plugin.bootstrap_package_contentelements.view.templateRootPath}Bootstrap/Carousel.html
partialRootPath = {$plugin.bootstrap_package_contentelements.view.partialRootPath}
layoutRootPath = {$plugin.bootstrap_package_contentelements.view.layoutRootPath}
}
}
So that's where the path to the template is set. And oho! The thing inside the curly brackets is a constant. Turns out that right at the beginning, we could have set a complete new path to include a copy of all bootstrap templates from bootstrap_package/Resources/Private/Templates/Page/ and do the modification there. As well as for Partials and Layouts, which are other, larger and smaller chunks of fluid templates (cf. http://typo3.org/documentation/article/the-fluidtemplate-cobject/).
If out of some reason you'd only like to modify that very specific part of the bootstrap package, you can set something like this in your TypoScript:
tt_content.bootstrap_package_carousel.20.file = /path/to/my/template/ext/Bootstrap/Carousel.html
Now all you have to do is to create a copy of the carousel template and edit it at will - in the rendering process, your own template will be used, featuring faster intervals.
This should also demonstrate the overriding powers of TypoScript nicely - you can do stuff like that at any point in the page tree for the branch you want.
Also, I'd like to point out that I find this a very good approach to the authoring of TYPO3 extensions: instead of having dozens and dozens of constants that could be set in the backend like in the old days, we now have replaceable fluid templates with clear structure. Much more maintainable and easier to use this way!

Transition views in javascript of a dojo based application

I have two scenarios I need help with, and I thought posting them together would prove more
valuable for myself, and other viewers.
Setup:
Worklight 6.1
dojo 1.9
Application:
MainView.html (Contains Body, and a transition Div, and NorthSouthView.js script reference)
View1.html (Contains a single Div that displays and unordered list
View2.html (Contains a single Div that Displays <p> data, and also plays audio)
View3.html (Contains a single Div that Displays instructional information)
application-descriptor <mainFile> MainView.html </mainFile>
All of the views are stored together in the application. There are no external http queries made by the application. All view transitions are local to the application.
Scenario #1:
At application start the MainView.html is invoked by worklight. Anticipated format::
<body>
<div>
<h1 id="SSheader" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Loan Snapshot</h1>
</div>
<div id="TransitionViewDiv">
/* Would like to load content of View1.html, View2.html, or View3.html here */
</div>
<script>SetView.js</script>
</body>
Description + Questions:
When the application starts, SetView.js will be loaded, and the purpose of this script is to look at localStorage and determine which view should be displayed. (View1, View2, or View3). The goal is to keep SSheader fixed at the top of the screen at all times. Only TransitionViewDiv would update.
Questions:
1) What coding approach can be used in SetView.js to load one of the 3 possible views into the TransitionViewDiv?. I did findin dojo 1.9 specs an example using dojox/mobile/ViewController but I was not able to get the sample code to work as documented by dojo.
2) Is the approach of having the TransitionViewDiv necessary, or could View1, 2 or 3 be loaded without TransitionViewDiv? Keep in mind that each view View1, 2, and 3 are defined as individual Div's.
Appreciate any advice to accomplish the above approach, or welcome any suggestion on the best practices to accomplish the transition.
Scenario #2:
As a follow-on to the scenario 1 above. Once View1, 2 or 3 is successfully loaded the views will have buttons defined that will want to cause the transition to another one of the remaining views. So, if inside SetView.js the decision is to slide in View2 to be displayed, View2
will have buttons that will want to load for example View3.html.
Description + Questions:
1) Would the best approach to load View3.html from View2.html be to use the moveTo on the button click, or should the button use the callback to invoke javascript to cause the transition similar to what was used to load the initial view?
Appreciate any advice on the best practices to managing multiple view stored in independent files. In the end the application will have upwards of 15+ ViewXX.html files each containing a Div. Based on this, having all of the views in one html file and forcing the hide, and show is not feasible.
Appreciate your time and help
To load an HTML fragment (View1.html, View2.html or View3.html), you can use the dojox/mobile/ContentPane. This widget allows you to provide a href property that can be used to specify the location of the view.
You can also alter it later on by setting the href property again, for example:
registry.byId("myContentPane").set("href", "View2.html");
You should keep the div#TransitionViewDiv and programmatically add the dojox/mobile/ContentPane to it, or use declarative syntax and add the following attributes:
<div id="TransitionViewDiv" data-dojo-type="dojox/mobile/ContentPane" data-dojo-props="href: 'View1.html'"></div>
Your second scenario is differs from the first one. In the first one, you actually have 1 view with many fragments, while in your second scenario you have many views.
If you only have 1 view, you cannot transition to other views (there are none). So if you want to use transitions you cannot use dojox/mobile/ContentPane.
However, if you have seperate views, then that means you need to move the header to each view (since they're part of it). For these, more complex cases I think you should look at the dojox/app module. This covers a lot of the MVC code for you and the only thing you need to do is configure it.
If you're not interested in the dojox/app module, you can try to inherit views. You might want to look at this answer I once provided. In the comment section of that answer you can also find a more detailed JSFiddle. In this example the header is actually inherited. I also wrote a more detailed article to handle this case .

Dojo and Dijit reference for all properties

I was experimenting with Dojo and Dijit in the past days and I find it quite interesting. I was however trying to find a reference or an API doc that helps me understand all the properties I can assign to widgets and containers.
For example a Tab with a Save Icon will be like this:
<div data-dojo-type="dijit.layout.ContentPane" title="Group Two" data-dojo-props="iconClass: 'dijitEditorIcon dijitEditorIconSave'">
Now, where can I find what to put in the "data-dojo-props" property? Where can I find for example all the list of icons?
My main question would be for example on how to create a vertical menubar, but beyond odd examples scattered here and there, the api reference is not much helpful...
Any help? Am I missing something here?
For this kind of situation, the trick is learning how to convert between the programmatic Javascript style and the declarative HTML style (and sometimes also between the old declarative style, without data).
For the new declarative style, basically the only "real" argument now is data-dojo-props and it consists of an object that will be passed to the widget constructor.
//programatic style
new dijit.myWidget({foo:'a', bar:'b'});
//declarative style
<div data-dojo-type="dijit.myWidget" data-dojo-props="foo:'a', bar:'b'"></div>
You can find what properties an widget accepts by checking the corresponding widget documentation and looking for either declarative or programmatic examples (now that we know how to convert between them). If that is not enough, you can also check the source code - it is usually very well commented and is where api.dojotoolkit.org gets its data from anyway.