Erd diagram with Graphviz: How to improve the rendering layout - layout

I implemented a short python script using the graphviz library which parse a given documentation and automate the rendering of a simplified ER Diagram.
I achieved to render the entities and their relations, but the resulting layout is not optimal:
I would like something more human readable, landscape-oriented, like:
I tried to play with some of the attributes from the Graphviz documentation like size or ratio, and ended up with a script of this form:
digraph G {
graph [overlap=false rankdir=LR ratio=3 size="5,8!" splines=true]
node [fontname=Verdana fontsize=10 shape=record]
edge [arrowhead=crow style=dashed]
Tbl1 [label=<
<table border="0" cellborder="1" cellspacing="0" cellpadding="4">
<tr><td bgcolor="lightblue">Tbl1</td></tr>
<tr><td port='0' align='left'>id <i style='margin-left: 4px'>[int]</i></td></tr>
<tr><td port='1' align='left'>field2 <i style='margin-left: 4px'>[int]</i></td></tr>
<tr><td port='2' align='left'>field3 <i style='margin-left: 4px'>[date]</i></td></tr>
<tr><td port='3' align='left'>Tbl2Id <i style='margin-left: 4px'>[int]</i></td></tr>
</table>
> margin=0 shape=none]
Tbl2 [label=<
<table border="0" cellborder="1" cellspacing="0" cellpadding="4">
<tr><td bgcolor="lightblue">Tbl2</td></tr>
<tr><td port='0' align='left'>id <i style='margin-left: 4px'>[int]</i></td></tr>
<tr><td port='1' align='left'>field2 <i style='margin-left: 4px'>[int]</i></td></tr>
<tr><td port='2' align='left'>field3 <i style='margin-left: 4px'>[str]</i></td></tr>
</table>
> margin=0 shape=none]
Tbl3 [label=<
<table border="0" cellborder="1" cellspacing="0" cellpadding="4">
<tr><td bgcolor="lightblue">Tbl3</td></tr>
<tr><td port='0' align='left'>id <i style='margin-left: 4px'>[int]</i></td></tr>
<tr><td port='1' align='left'>field2 <i style='margin-left: 4px'>[int]</i></td></tr>
<tr><td port='2' align='left'>field3 <i style='margin-left: 4px'>[str]</i></td></tr>
<tr><td port='3' align='left'>field4 <i style='margin-left: 4px'>[str]</i></td></tr>
<tr><td port='4' align='left'>Tbl2Id <i style='margin-left: 4px'>[str]</i></td></tr>
</table>
> margin=0 shape=none]
Tbl1:3 -> Tbl2:0
Tbl3:4 -> Tbl2:0
}
Is there something to do to achieve this? Should I use subgraphes? Some other graph or nodes attributes?

Related

How to get the text from this element?

I use selenium webdriver with node js.
I cannot get the text from this site. I need the "In progress" text.
I don't want to use absolute xpath, because I want use the code in other tests.
Thank you. :)
<div class="issuePanelContainer" id="issue_actions_container"
style="height: auto;">
<table cellpadding="0" cellspacing="0" border="0" width="100%"> .
</table>
<div class="issue-data-block">
<div class="actionContainer">
<div class="action-details">
<span class="aui-avatar aui-avatar-xsmall">
<span class="aui-avatar-inner">
<img alt="" src="https://jira.au.flitech.net/secure/useravatar?size=xsmall&ownerId=jan.plzak%40flightcentre.co.uk&avatarId=12582">
</span>
</span>
<a class="user-hover" rel="jan.plzak#flightcentre.co.uk" id="email_jan.plzak#flightcentre.co.uk" href="/secure/ViewProfile.jspa?name=jan.plzak%40flightcentre.co.uk">Jan Plzak</a>
made transition
- <span class="date" title="18/Jun/19 4:57 PM"><time class="livestamp" datetime="2019-06-18T16:57:08+1000">18/Jun/19 4:57 PM</time></span>
</div>
<div class="changehistory action-body">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody><tr>
<td width="60%">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody><tr>
<td width="47%" align="right">
<span class=" jira-issue-status-lozenge aui-lozenge jira-issue-status-lozenge-blue-gray jira-issue-status-lozenge-new jira-issue-status-lozenge-max-width-medium" data-tooltip="<span class="jira-issue-status-tooltip-title">Open</span>" title="" original-title="">Open</span> </td>
<td align="center" nowrap="nowrap" width="6%">
<img src="/images/icons/arrow_right_small.gif" align="absmiddle" border="0" height="16" width="16">
</td>
<td width="47%">
<span class=" jira-issue-status-lozenge aui-lozenge jira-issue-status-lozenge-yellow jira-issue-status-lozenge-indeterminate jira-issue-status-lozenge-max-width-medium" data-tooltip="<span class="jira-issue-status-tooltip-title">In Progress</span><br><span class="jira-issue-status-tooltip-desc">The development task is currently in progress</span>" title="" original-title="">In Progress</span></td>
</tr>
</tbody></table>
</td>
<td width="20%">
13d 21h 18m
</td>
<td width="20%" align="center">
1
</td>
</tr>
</tbody></table>
</div>
List<WebElement> list=driver.findElement(By.xpath("//span[contains(#class,'status')]"));
for(WebElement li:list)
{
if(li.getText().equals("In progress")
{
li.click(); // or assert or whatever
}
}
This is my answer, which is working fine, and content free. :)
driver.findElements(By.xpath('//div[#class="changehistory action-body"]/table/tbody/tr/td/table/tbody/tr/td[1]/span'));

how i can select data from a combo box and fires onchange command using VBA-excel

i want to select "56 - Hoyer (Suk / Rontec)" in the combo box and then fire the event that reloads the page using VBA excel, i can put the text on the combo box, but it doesnt load tha javascript attached to it (onchange event).
see image of the drop down / combo box here
below is the code i use in VBA to fill out the combobox with a constant value. but i cannot run the onchange event on html provided.
Call IE.document.getElementById("orders.carrier_number_txtSelectionDisplay").setAttribute("value", "56 - Hoyer (Suk / Rontec)")
Call IE.document.getElementById("orders.carrier_number_txtSelectionDisplay").setAttribute("value", "56 - Hoyer (Suk / Rontec)")
Set x = IE.document.getElementById(orders.carrier_number_txtSelectedValue)
x.Focus
x.FireEvent "onchange"
Below is the HTML code:
<td>
<div>
<span id="Descriptor.orders.carrier_number" class="dataentry-descriptor dataentry-descriptor-top" style="text-align:left;">Carrier</span>
</div>
<div class="dataentry-field-control" style="text-align:left;">
<div id="orders.carrier_number_4b7bc829-2760-4042-aab0-be8ccfb9541b" timerid="" querymethodname="GetSupplierCarriers">
<div id="orders.carrier_number_pnlSelectionDisplay" class="ffnet-combo-box dataentry-field required" style="width:180px;">
<table border="0" style="border-spacing: 0px; border-collapse: collapse; margin:0px;">
<colgroup>
<col style="width: 100%">
<col style="width: 30px; text-align: right;">
</colgroup>
<tbody>
<tr>
<td style="padding: 0px;">
<input name="orders.carrier_number$txtSelectionDisplay" type="text" id="orders.carrier_number_txtSelectionDisplay" class="dataentry-field required validate[required] required" isrequired="True" datatype="3"
onkeydown="javascript:return InputProcessKeyDown('orders.carrier_number_4b7bc829-2760-4042-aab0-be8ccfb9541b', event);" onfocus="javascript:return InputProcessOnFocus('orders.carrier_number_4b7bc829-2760-4042-aab0-be8ccfb9541b');
" style="width:150px;">
<input name="orders.carrier_number$txtSelectedValue" type="text" onchange="retrieveChildData("orders.carrier_number_4b7bc829-2760-4042-aab0-be8ccfb9541b","orders.loaded_driver_number_e5ba36ca-
aa0f-4f55-aa3e-c7cb342d0b0b"); retrieveChildData("orders.carrier_number_4b7bc829-2760-4042-aab0-be8ccfb9541b","orders.delivered_driver_number_e7747c68-df71-4774-9b04-
d897d1fd9833"); retrieveChildData("orders.carrier_number_4b7bc829-2760-4042-aab0-be8ccfb9541b","orders.vehicle_code_d3cc805c-e505-45c5-a351-98028439e34d"); retrieveChildData("orders.carrier_number_4b7bc829-
2760-4042-aab0-be8ccfb9541b","orders.tractor_number_089faa52-6810-4815-8f64-81eb201105a2"); UpdateDirtyBit(1);setTimeout('__doPostBack(\'orders.carrier_number$txtSelectedValue\',\'\')', 0)"
onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="orders.carrier_number_txtSelectedValue" datavaluefield="carrier_number" assembly="FFNET_CORE" funcname="OrderDispatch_DeleteOrderTrailer"
methodclass="CBL" hasautopostback="true" namespace="FBS" selectlistargs="{"SenderId":"orders.carrier_number","supplier_number":"139","RequiresParent":"True"}" style="display:none;">
</td>
<td>
<img id="orders.carrier_number_imgArrow" onclick="InputProcessOnFocus('orders.carrier_number_4b7bc829-2760-4042-aab0-be8ccfb9541b'); activeCB.toggleDropDown();" src="/ffnet/Images/DropDownListArrow.gif">
</td>
</tr>
</tbody>
</table>
</div>
<div id="orders.carrier_number_pnlDropDownList" class="ffnet-combo-box-ddlist" style="width:339px;">
<div id="orders.carrier_number_pnlDropDownRegion" class="ffnet-combo-box-ddregion" value="" style="width:339px;">
<table header="0" style="width:322px;" cellspacing="0" cellpadding="0">
<colgroup>
<col style="width:80px;">
<col style="width:210px;">
</colgroup>
<tbody>
<tr>
<th>Carrier Number</th>
<th>Name</th>
</tr>
</tbody>
</table>
<div id="orders.carrier_number_pnlDataRegion" class="ffnet-combo-box-data" style="width:339px;height:200px;">
<table style="width:322px;" onkeydown="javascript:return ProcessKeyDown(this, event);" tabindex="0" mode="combobox">
<colgroup>
<col style="width:80px;">
<col style="width:210px;">
</colgroup>
<tbody>
<tr id="orders.carrier_number_tr0" pk="1" text="1 - Armac Shipping" class="ffnet-combo-box-row-focus">
<td>1</td>
<td>Armac Shipping</td>
</tr>
<tr id="orders.carrier_number_tr1" pk="2" text="2 - IPCS Ltd">
<td>2</td>
<td>IPCS Ltd</td>
</tr>
<tr id="orders.carrier_number_tr23" pk="56" text="56 - Hoyer (Suk / Rontec)">
<td>56</td>
<td>Hoyer (Suk / Rontec)</td>
</tr>
</tbody>
</table>
</div>
<div id="orders.carrier_number_pnlPager" class="ffnet-combo-box-paging" title="Click for more records" onclick="RetrieveNextPage($("[id$='orders.carrier_number_4b7bc829-2760-4042-aab0-be8ccfb9541b']").get(0), false);
" recordcount="129">
1-30 of 129 results
</div>
</div>
</div>
</div>
<input type="hidden" name="orders.carrier_number_txtSelectedValue_hdnDirtyBit" id="orders.carrier_number_txtSelectedValue_hdnDirtyBit" value="0">
</div>

Layout for table using Bootstrap 4.2 not aligning as expected

In the process of moving from Bootstrap 3 to Bootstrap 4.2. I have a table inside a Ajax modal screen. Here is the code snippet:
<div class="card-body">
<div class="row">
<table class="table table-hover table-responsive-lg">
<thead>
<tr>
<td class="text-center col-sm-3"><strong>ACTIVITY</strong></td>
<td class="text-center col-sm-3"><strong>QTY</strong></td>
<td class="text-center col-sm-3"><strong>RATE</strong></td>
<td class="text-center col-sm-3"><strong>AMOUNT</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Closing Service" CssClass="form-con"></asp:Label></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_QTY" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_Rate" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_Total" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox></td>
</tr>
</tbody>
</table>
</div>
</div>
In my system the columns showing QTY is too small to see the full number, even the number 1.
UPDATE
I changed the headers to col-sm-4 and the results are much the same. Here is an image of the outcome:
UPDATE 2
Suggested adding ROW class to the <tr> results in:
You can try adding class="row" to each tr instead of to the outside div
Example:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<div style="width: 572px;">
<div class="card-body">
<div class="">
<table class="table table-hover table-responsive-lg">
<thead>
<tr class="row">
<td class="text-center col-sm-3"><strong>ACTIVITY</strong></td>
<td class="text-center col-sm-3"><strong>QTY</strong></td>
<td class="text-center col-sm-3"><strong>RATE</strong></td>
<td class="text-center col-sm-3"><strong>AMOUNT</strong></td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-sm-3 text-center "><asp:Label ID="Label1" runat="server" Text="Closing Service" CssClass="form-con"></asp:Label></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_QTY" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_Rate" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_Total" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
I wanted to close this out with a solution that worked for me. It was simple to fix. In the <thead> section of the table I removed the col-sm-3 tag and the table behaved as expected.
Thanks everyone!

Find label name which doesn't contain input immediately from a table

I am having a table which contains multiple td/tr.
My problem is label which i want to get doesn't contains input immediately neither that label has any attributes property.
I want to get "Countries of Permanent Residence" and Dates which are in span but doesn't have any properties that span is in div that too doesn't contains any property.
I tried with
formElement[input[name="icims_gh_Permanent_Country_Residence"]]
But don't know how to get associate label.
Html looks like:
<div style="margin:0px">
<table style="width:100%" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px"> Countries of Permanent Residence (list all) </span>
</div>
</td>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px"> Dates </span>
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div style="margin:0px">
<div>
<input type="hidden" name="icims_gh_Permanent_Country_Residence" value="1">
<a name="0.1_icims_ga_Permanent_Country_Residence"></a>
<div>
<table style="width:100%;border:0px">
<tbody>
<tr>
<td>
<table style="width:100%" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px">
<input type="text" name="icims_0_permResidenceCountry"> </span>
</div>
</td>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px">
<input type="text" name="icims_0_permResidenceCountryDates"> </span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

MODX: display elements in groups by two with wrapper for every group

Imagine situation when you need to have output like this
<table>
<tr class="row">
<td class="cell">First resource</td>
<td class="cell">Second resource</td>
</tr>
<tr class="row">
<td class="cell">Third resource</td>
<td class="cell">Fourth resource</td>
</tr>
<tr class="row">
<td class="cell">Fifth resource</td>
<td class="cell">Sixth resource</td>
</tr>
</table>
or like this
<div class="container">
<div class="row"><!--groups-->
<div class="col-md-6">
First resource
</div>
<div class="col-md-6">
Second resource
</div>
<div class="clearfix"> </div>
</div>
<div class="row"><!--group-->
<div class="col-md-6">
Third resource
</div>
<div class="col-md-6">
Fourth resource
</div>
<div class="clearfix"> </div>
</div>
<div><!--group-->
...
</div>
...
...
</div>
As for me this structures are similar for my purpose. I was looking for examples of the usage of placeholders, but do not get it. Please write the example with getResources or PDOTools or similar.
[[pdoResources?
&parents=`0`
&depth=`1`
&tplFirst=`tplFirst`
&tpl=`tpl`
&tplOdd=`tplOdd`
&tplLast=`tplLast`
&tplWrapper=`tplWrapper`
]]
tplFirst
<tr class="row">
<td class="cell">[[+pagetitle]]</td>
tpl
<td class="cell">[[+pagetitle]]</td>
tplOdd
<td class="cell">[[+pagetitle]]</td>
</tr>
<tr class="row">
tplLast
<td class="cell">[[+pagetitle]]</td>
</tr>
tplWrapper
<table>
[[+output]]
</table>

Resources