I'm working on a feature to edit an edge's data in Cytoscape.js. I have the same for editing a node's data, and it's working perfectly! But when I try to do the same for an edge, it doesn't.
Chrome: 70.0.3538.110
Cytoscape.js: 3.2.16
Node.js: 8.10.0
Angular: 6.1.2
Here's my simplified code:
Node editing:
<form #form="ngForm" autocomplete="off">
<div *ngFor="let field of buildDisplaySet(selectedElement) | keyvalue" class="search-input">
<label>
{{field.key}}
</label><br/>
<input [name]="field.key"
title="{{field.key}}"
[value]="field.value"
[(ngModel)]="field.value"/>
</div>
</form>
This form iterates over the selectedElement (in this case a Cytoscape node)'s key/value pairs in node.data(), and creates an input field for each. When live, this template is rendered only once and allows for editing the values in the input fields (as expected).
Now, my attempt to do the same for a Cytoscape edge is exactly the same:
Get the key/value pairs for edge.data() through buildDisplaySet()
Put each key/value pair into an input element
When live, and dealing with edges, the above template renders, but is constantly recalculated in the browser such that I can't highlight an input or enter a new value.
Here are some screenshots of the console:
Working node data template
Constantly recalculating edge data template, that won't let me focus on input fields
I thought that maybe it had something to do with the way edges are drawn on the Cytoscape canvas (hence my lifecycle(?) in the title), but I'm at an absolute loss as to why it's not working. Any help would be greatly appreciated!
This situation was related to the custom pipe we were using and NOT anything Cytoscape.js related!! Thank you for looking anyway!
Related
We had Selenium tests running on Sales Force non Lightning. Now I am converting to Lightning. There is a chain of menus to go through. I have successfully navigated to a certain menu, but now I have run into a problem. This is not the standard question about new element names. Here is the question. This is a small piece of what the page looks like (see below).
When using inspect with Chrome I can find the elements. This is what it looks like (a small cross section corresponding to above). The SPAN tag has the label ("Original Agreement") and the DIV below it will contain the box for the input value.
<div class="slds-form-element__control" data-aura-rendered-by="228:1224;a">
<div data-aura-rendered-by="1108:0" class="uiInput forceSearchInputLookupDesktop uiInput--default" data-aura-class="uiInput forceSearchInputLookupDesktop uiInput--default">
<label class="label inputLabel uiLabel-left form-element__label uiLabel" for="157:1224;a" data-aura-rendered-by="1103:0" data-aura-class="uiLabel">
<span class="" data-aura-rendered-by="1104:0">Original Agreement</span>
<!--render facet: 1106:0--><!--render facet: 1107:0--></label>
<div data-aura-rendered-by="161:1224;a"><div class="contentWrapper slds-box--border" data-aura-rendered-by="162:1224;a">
However, Selenium can not find the elements (though inspect does). When I did a "View Page Source instead of an
inspect, almost the entire thing is in JavaScript like this:
function rewriteAndInjectCss(linkEl, source, varLookup) {
var css = rewriteCssVars(source, varLookup);
injectStyles(linkEl, css);
}
but a lot more. Almost all functions, with maybe only a couple elements.
In the past when I have seen something similar there is often an iframe to switch to to get the elements. But there is no iframe to switch to. So I am stuck how to get these. Can anyone shed some light?
OK. Found it. I needed to do a driver.switchTo().defaultContent()
I'm still pretty new to vue.js.
I recently created some vue components to tidy up my html. The components are different inputs like text and checkbox. They update the parents data using $emit('input', val). And make sure that the components are up-to-date using props and watch() on those props.
Now there is a problem with using watch() on <input type="file />, since you cannot set the input value like you can on other input types.
Using this example:
https://jsfiddle.net/minde281/nyu73dz6/25/
I have a list of, in this case, items on a shoppinglist. You can add an image for each item.
The image is loaded and added to the list. This works fine.
To get my problem:
add an image to item1
delete that item by clicking the X-button
The result is now that item2 will have that image on the <input type="file" />. The preview works as expected since this can be set through script and therefore use watch(). But somehow vue removes the wrong part of the html markup causing the last one to be removed.
Is there a different way to solve this problem? Or is there a way to tell vue to remove the correct part of the html markup?
-Minde
Vue tries to reuse the component and thats why the selected file is in the second input after deleting the component.
To prevent that you should use the key binding like this:
<li v-for="(item, index) in items" :key="item.name">
Now the hole component gets removed and everything should work as expected.
I have a Protractor/Jasmine E2E Automation test that is to drag and drop a couple of collapsible panels to change the order and just verify they the elements have been moved.
I'm currently running latest versions of Protractor, Jasmine, and webdrivers (tests run in IE 11)
EDIT: Found out we're using ng-dragula to perform the drag and drops. I'm assuming protractor just isn't playing nicely with this. I'll do more digging about it, but still curious to know if there's a work around.
/end edit
This function used to work, and I have since tried a handful of variations of it:
browser.actions().
mouseMove(dragFromElement).
mouseDown().
mouseMove(dropToElement).
mouseUp().
perform();
browser.actions().
dragAndDrop(dragFromElement, dropToElement).
perform();
I've also tried with .getWebElement() appended to the element tag, getting each elements location and doing a mouse click, move, drop to those locations, and trying various actionSequences instead of actions().
Basically all of the above will highlight the text of the elements like it's clicking behind the panels and does not actually grab the element and drag/drop it.
Curious to know if this is a known problem or if there's a possible solution for my issue.
What i'm working with is:
<core-drag-and-drop-panel _nghost-wod-4="">
<div class="sortable-panels" _ngcontent-wod-4="">
<div id="elementId_10" class="draggableDiv" _ngcontent-wod-4="" aria-dropeffect="move" aria-grabbed="false">
<div id="elementId_12" class="draggableDiv" _ngcontent-wod-4="" aria-dropeffect="move" aria-grabbed="false">
<div id="elementId_1" class="draggableDiv" _ngcontent-wod-4="" aria-dropeffect="move" aria-grabbed="false">
</div>
</core-drag-and-drop-panel>
I want to find an element for the bars present in the image but when i try to find the element the whole image is shown as an element. However when i hover mouse over a bar then then popup is shown. I need the value shown in the bar. So that can verify the same on other location.
Is there anyway i can do this? I am using webdriver with Java to automate this.
Here is the HTML code for the image. I cannot see child elements as it rendered as image only using(Dev express).
<div id="ctl00_MainContent_panelCallback_chart" onmousemove="__chartMouseMove(event, 'ctl00_MainContent_panelCallback_chart')" onclick="__chartClick(event, 'ctl00_MainContent_panelCallback_chart')" style="height:330px;width:500px;">
<img id="ctl00_MainContent_panelCallback_chart_IMG" src="/ManageTRM/DXB.axd?DXCache=254a85bb-62ad-4ab0-8c32-9e4b53aefc4b" alt="The Aging chart showing Deferred series, Revisit series, Carry Over series, New series, Removed series, Utilized series, Centralized series." /><input type="hidden" name="ctl00$MainContent$panelCallback$chart$CallbackState" id="ctl00_MainContent_panelCallback_chart_CallbackState" />
How can I avoid the dojo parser showing a hidden element after it's parsed?
<input type="checkbox" dojoType="dijit.form.CheckBox" style="display:none">
When the dojo parser is done, the dijit checkbox will be shown, but the input "inside" it, will still be hidden. I want the dojo parser to create the dijit checkbox, but keep it hidden.
I think that's a limitation of how Dijit works... it's the construction of the widget that's doing this, not the parser per se. The style element gets mapped to the INPUT element, so there is no way to do this short of instantiating the widget directly and hiding it before placing it in the DOM. Updating the style after the parser does its thing would probably result in some unwanted redraws.
I use dijit.layout.BorderContainer with style="height:100%;width:100%;visibility:hidden" and it's working fine for me.