Develop Reference

Google Documents AppScript - set cell border style for each side

i have a for loop adding rows and cells. I want these cells to have only bottom border, thickness 1pt and black color. What is the best way to do this? the documentation is lacking examples
for (var r = 0; r < rowdata.length; r++) { //loop through data for each row
var newrow = table.insertTableRow(1+r)
//add cells and values
var cell1 = newrow.appendTableCell(rowdata[r][0])
var cell2 = newrow.appendTableCell(rowdata[r][1])
//align cell text to center
var cellStyle = {};
cellStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
cell1.getChild(0).asParagraph().setAttributes(cellStyle)
cell2.getChild(0).asParagraph().setAttributes(cellStyle)
//set bottom border line width to 1pt, line color to black
//set the other borders line width to 0pt
???
}

I believe your goal is as follows.
When the rows are appended, you want to set the bottom border as 1 pt width and black color, and want to set the other borders as 0 pt width.
In the current stage, it seems that unfortunately, the Google Document service (DocumentApp) cannot manage each border. But, fortunately, when Docs API is used, your goal can be achieved. In this answer, I would like to propose achieving your goal using Docs API. When your script is modified it becomes as follows.
Modified script:
Before you use this script, please enable Google Docs API at Advanced Google services.
function myFunction() {
var doc = DocumentApp.getActiveDocument(); // Please set your Document.
var body = doc.getBody();
var table = body.getTables()[0]; // Please set your table.
var rowdata = [[,,,],[,,,],,,]; // Please set your values.
// --- This is your showing script.
for (var r = 0; r < rowdata.length; r++) {
var newrow = table.insertTableRow(1 + r);
var cell1 = newrow.appendTableCell(rowdata[r][0]);
var cell2 = newrow.appendTableCell(rowdata[r][1]);
var cellStyle = {};
cellStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
cell1.getChild(0).asParagraph().setAttributes(cellStyle);
cell2.getChild(0).asParagraph().setAttributes(cellStyle);
}
// ---
doc.saveAndClose();
var docId = doc.getId();
var i = body.getChildIndex(table);
var index = Docs.Documents.get(docId).body.content[i + 1].startIndex;
var requests = [{ updateTableCellStyle: { tableCellStyle: { borderRight: { dashStyle: "SOLID", width: { magnitude: 0, unit: "PT" }, color: { color: {} } }, borderLeft: { dashStyle: "SOLID", width: { magnitude: 0, unit: "PT" }, color: { color: {} } } }, tableStartLocation: { index }, fields: "borderRight,borderLeft" } }];
Docs.Documents.batchUpdate({ requests }, doc.getId());
}
When this script is run, several rows are appended to the table on Document, and the width of vertical borders is changed to 0 pt. By this, only the bottom borders are shown.
References:
Method: documents.get
Method: documents.batchUpdate
UpdateTableCellStyleRequest
Added:
From your following reply,
that is what i am looking for with one difference. The table i am appending to already has some rows that i want to remain unchanged concerning their border style. I want to apply your code to the newly added rows only!
When you wanted to reflect the above request body to the appended rows, how about the following modification?
In your showing script, you are using var newrow = table.insertTableRow(1 + r);. In this case, the rows are put from the 2nd row. Using this script, how about the following sample script?
Sample script:
function myFunction() {
var doc = DocumentApp.getActiveDocument(); // Please set your Document.
var body = doc.getBody();
var table = body.getTables()[0]; // Please set your table.
var rowdata = [[,,,],[,,,],,,]; // Please set your values.
// --- This is your showing script.
for (var r = 0; r < rowdata.length; r++) {
var newrow = table.insertTableRow(1 + r);
var cell1 = newrow.appendTableCell(rowdata[r][0]);
var cell2 = newrow.appendTableCell(rowdata[r][1]);
var cellStyle = {};
cellStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
cell1.getChild(0).asParagraph().setAttributes(cellStyle);
cell2.getChild(0).asParagraph().setAttributes(cellStyle);
}
// ---
doc.saveAndClose();
var docId = doc.getId();
var i = body.getChildIndex(table);
var index = Docs.Documents.get(docId).body.content[i + 1].startIndex;
// I modified this request body.
var requests = [{ updateTableCellStyle: { tableCellStyle: { borderRight: { dashStyle: "SOLID", width: { magnitude: 0, unit: "PT" }, color: { color: {} } }, borderLeft: { dashStyle: "SOLID", width: { magnitude: 0, unit: "PT" }, color: { color: {} } } }, tableRange: { tableCellLocation: { tableStartLocation: { index }, rowIndex: 1 }, rowSpan: rowdata.length, columnSpan: rowdata[0].length }, fields: "borderRight,borderLeft" } }];
Docs.Documents.batchUpdate({ requests }, doc.getId());
}
When this script is run, the vertical lines are removed from the appended rows from the 2nd row.

Crosstalk + leaflet + plotly - non-persistent selection

I have a reproducible example taken from https://bl.ocks.org/timelyportfolio/5ab450e90ee510f4df9758b9ec5a8ad0.
library(sf)
library(plotly)
library(leaflet)
library(crosstalk)
library(htmltools)
boroughs<- st_read("http://services5.arcgis.com/GfwWNkhOj9bNBqoJ/arcgis/rest/services/nybb/FeatureServer/0/query?where=1=1&outFields=*&outSR=4326&f=geojson")
boroughs$x <- seq(1:5)
boroughs$y <- seq(2,10,2)
boroughs_sd <- SharedData$new(
boroughs,
key=~BoroCode,
# provide explicit group so we can easily refer to this later
group = "boroughs"
)
map <- leaflet(boroughs_sd) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
addPolygons(
data=boroughs,
layerId = ~BoroCode,
color = "#444444",
weight = 1,
smoothFactor = 0.5,
opacity = 1.0,
fillOpacity = 0.5,
fillColor = ~colorQuantile("Greens", x)(x)#,
# turn off highlight since it interferes with selection styling
# if careful with styling could have both highlight and select
# highlightOptions = highlightOptions(color = "white", weight = 2)
)
# borrow from https://github.com/r-spatial/mapedit/blob/master/R/query.R#L73-L132
# to select/deselect features but instead of Shiny.onInputChange
# use crosstalk to manage state
add_select_script <- function(lf, styleFalse, styleTrue, ns="") {
## check for existing onRender jsHook?
htmlwidgets::onRender(
lf,
sprintf(
"
function(el,x) {
var lf = this;
var style_obj = {
'false': %s,
'true': %s
}
// instead of shiny input as our state manager
// use crosstalk
if(crosstalk) {
var ct_sel = new crosstalk.SelectionHandle()
ct_sel.setGroup('boroughs')
ct_sel.on('change', function(x){
if(x.sender !== ct_sel) { //ignore select from this map
lf.eachLayer(function(lyr){
if(lyr.options && lyr.options.layerId) {
var id = String(lyr.options.layerId)
if(
!x.value ||
(Array.isArray(x.value) && x.value.indexOf(id) === -1)
) {
toggle_state(lyr, false)
toggle_style(lyr, style_obj.false)
}
if(Array.isArray(x.value) && x.value.indexOf(id) > -1) {
toggle_state(lyr, true)
toggle_style(lyr, style_obj.true)
}
}
})
}
})
}
// define our functions for toggling
function toggle_style(layer, style_obj) {
layer.setStyle(style_obj);
};
function toggle_state(layer, selected, init) {
if(typeof(selected) !== 'undefined') {
layer._mapedit_selected = selected;
} else {
selected = !layer._mapedit_selected;
layer._mapedit_selected = selected;
}
if(typeof(Shiny) !== 'undefined' && Shiny.onInputChange && !init) {
Shiny.onInputChange(
'%s-mapedit_selected',
{
'group': layer.options.group,
'id': layer.options.layerId,
'selected': selected
}
)
}
if(ct_sel) {
var ct_values = ct_sel.value
var id = String(layer.options.layerId)
if(selected) {
if(!ct_values) {
ct_sel.set([id])
}
if(Array.isArray(ct_values) && ct_values.indexOf(id) === -1) {
ct_sel.set(ct_values.concat(id))
}
}
if(ct_values && !selected) {
ct_values.length > 1 ?
ct_sel.set(
ct_values.filter(function(d) {
return d !== id
})
) :
ct_sel.set(null) // select all if nothing selected
}
}
return selected;
};
// set up click handler on each layer with a group name
lf.eachLayer(function(lyr){
if(lyr.on && lyr.options && lyr.options.layerId) {
// start with all unselected ?
toggle_state(lyr, false, init=true);
toggle_style(lyr, style_obj[lyr._mapedit_selected]);
lyr.on('mouseover',function(e){
var selected = toggle_state(e.target);
toggle_style(e.target, style_obj[String(selected)]);
});
}
});
}
",
jsonlite::toJSON(styleFalse, auto_unbox=TRUE),
jsonlite::toJSON(styleTrue, auto_unbox=TRUE),
ns
)
)
}
browsable(
tagList(
tags$div(
style = "float:left; width: 49%;",
add_select_script(
map,
styleFalse = list(fillOpacity = 0.2, weight = 1, opacity = 0.4, color="black"),
styleTrue = list(fillOpacity = 0.7, weight = 3, opacity = 0.7, color="blue")
)
),
tags$div(
style = "float:left; width: 49%;",
plot_ly(boroughs_sd, x = ~x, y = ~y) %>%
add_markers(alpha = 0.5,text = ~paste('Borough: ', BoroName)) %>%
highlight(on = "plotly_selected")
)
)
)
I made a minor change to the code from it's original source so that polygons are highlighted on mouseover rather than click.
My experience with JavaScript is pretty minimal. What do I need to change so that selection of polygons is not persistent (i.e. highlight style only changes when on mouseover and does not remain after the mouse has left that particular polygon)?

I suggest to change the following part of code
lyr.on('mouseover',function(e){
var selected = toggle_state(e.target);
toggle_style(e.target, style_obj[String(selected)]);
});
with
lyr.on('mouseover',function(e) {
var selected = toggle_state(e.target, true);
toggle_style(e.target, style_obj[String(selected)]);
});
lyr.on('mouseout',function(e) {
var selected = toggle_state(e.target, false);
toggle_style(e.target, style_obj[String(selected)]);
});
It works on my R.

filtering nodes by degree in cytoscape.js

I have a cytoscape.js graph and i want to filter nodes by degree size. for example if node1 is only connected to node2 and node3 , when I select threshold 3 from filter, all nodes witch have less than 3 edges will be removed. now I have this problems:
1) how can I filter by degree? I know var collection = cy.elements("node[weight > 2]"); select a collection and cy.remove(collection); will delete those nodes but how remove by number of connected edges?
2)after removing some nodes, its needed to rerun layout for better representation. I found a solution but it takes time roughly as big as before removing nodes. I tested this code :
code for adding node:
for (var i = 0; i < keys.length; i++) {
try {
cy.add({
data: {
id: keys[i],
weight: i
}
}
);
}
code for layout:
var layout;
cy.ready(function () {
layout = cy.layout({
name: 'cose-bilkent',
animate: false,
padding: 100,
nodeRepulsion: 20000,
idealEdgeLength: 700,
edgeElasticity: 10,
numIter: 2500,
initialEnergyOnIncremental: 0.01,
ready: function () {
}, // on layoutready
stop: function () {
cy.endBatch();
var b64key = 'base64,';
var b64 = cy.png().substring(cy.png().indexOf(b64key) + b64key.length);
var imgBlob = b64toBlob(b64, 'image/png');
saveAs(imgBlob, 'graph.png');
alert(new Date().getTime() - n);
n = new Date().getTime();
}
});
layout.run();
});
and on button click I run this :
var collection = cy.elements("node[weight > 2]");
cy.remove( collection );
layout.run();
but it takes 37sec for loading this graph with 3 nodes!!!

Showing Progress while Child row loads

Coming again with another question :)
This time I had a requirement to show some progress while Child rows are being loaded. Since there is an Api call which relatively takes little time to return data, I do want to show the some progress unless the user who clicks the parent row is totally unaware whether there is a call done to see its child rows.
What I have done:
I wrote a style sheet class which has a
loader-small.gif
image as this:
tr.loading td.details-control {
background: url('/Images/loader-small.gif') no-repeat center center;
}
and applied like this:
$('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
try {
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
//Calling the loading Class ------>
tr.addClass('loading');
// Open this row
var arrForTable1 = [];
var arrForTable2 = [];
totalBrokerage = 0;
totalRetailBrokerage = 0;
totalSelfServiceBrokerage = 0;
console.log('You selected: ' + row.data().AccountManagerID);
var settings = {
"columnDefs": [
{ targets: 1, align: "right", decimals: 0 },
{ targets: 2, align: "right", decimals: 0 },
{ targets: 3, align: "right", decimals: 0 },
{ targets: 4, align: "right", decimals: 2 },
{ targets: 5, align: "right", decimals: 2 }
]
};
//problems with asynchoronus call back
var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
if (response.success === "true") {
for (var i = 0; i < response.value.length; i++) {
for (var j = 0; j < response.value[i].Securities.length; j++) {
var itemRow2 = {};
itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
itemRow2["Trades"] = response.value[i].Securities[j].Trades;
itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
arrForTable2.push(itemRow2);
totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
}
totalBrokerage = Math.round(totalBrokerage * 100) / 100;
totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;
var itemRow1 = {};
itemRow1["Account ID"] = response.value[i].AccountId;
itemRow1["Account Name"] = response.value[i].AccountName;
itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j, settings) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
arrForTable1.push(itemRow1);
arrForTable2 = [];
totalBrokerage = 0;
totalRetailBrokerage = 0;
totalSelfServiceBrokerage = 0;
}
tr.removeClass('loading');
htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
row.child(htmlTable1).show();
tr.addClass('shown');
}
else {
row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
tr.addClass('shown');
};
}
} catch (e) {
console.log(e.message);
}
});
The Problem:
Firefox nicely shows the Progress image after the user clicks it, but Edge and Chrome does not show. Both browsers crossed this piece of code when I was debugging from developer tools of the respective browser.
Its browser compatible problem? Is there a solution for it? Help me please.

In case of chrome there is such an issue while showing the loading bar while making a server call. Please make the following changes where you are making the service call. First add the class loading to the table
tr.addClass('loading');
After that make the service call by giving a timeout function
setTimeout(function(){
var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
......
//Your service calls and response call backs
},1);
On providing a timeout (say 1ms), Chrome will get the time to bind the loading bar to DOM, In other case the DOM Object is not available to show the spinner.

Adding dgrids with variable widths to TabContainer

I'm populating a TabContainer with grids (Dojo 1.8, dgrid) that are showing the results of a query for different datasets. Each tab is the result of a single dataset. The different datasets will have a varying number of fields, so I'm dynamically building each grid and adding it to a ContentPane, which gets added to the TabContainer.
My current problem is seting the width of the grids when they are built. The datasets could have from two fields to upwards of 100 fields to be shown in the grid. I've set a default width in CSS for the grid of 600px, but the grid will only show the first six fields of the dataset. If I set the width to "auto", it is only as wide as the TabContainer, removing the scroll bar and cutting off the data. Is it possible to set a width for each grid separately?
This is what the result looks like
This is the code for populating the TabContainer
function buildColumns(feature) {
var attributes = feature.attributes;
var columns = [];
for (attribute in attributes) {
if (attribute != "Shape") {
var objects = {};
objects.label = attribute;
objects.field = attribute;
columns.push(objects);
}
}
return columns;
}
function populateTC(results, evt) {
try {
if (dijit.byId('tabs').hasChildren) {
dijit.byId('tabs').destroyDescendants();
}
if (results.length == 0) {
console.log('Nothing found.');
return;
}
var combineResults = {};
for (var i = 0, len = results.length; i < len; i++) {
var result = results[i];
var feature = result.feature;
var lyrName = result.layerName.replace(' ', '');
if (combineResults.hasOwnProperty(lyrName)) {
combineResults[lyrName].push(result);
}
else {
combineResults[lyrName] = [result];
}
}
for (result in combineResults) {
var columns = buildColumns(combineResults[result][0].feature);
var features = [];
for (i = 0, len = combineResults[result].length; i < len; i++) {
features.push(combineResults[result][i].feature);
}
var data = array.map(features, function (feature) {
return lang.clone(feature.attributes);
});
var dataGrid = new (declare([Grid, Selection]))({
id: "dgrid_" + combineResults[result][0].layerId,
bufferRows: Infinity,
columns: columns,
"class": "resultsGrid"
});
dataGrid.renderArray(data);
dataGrid.resize();
dataGrid.on(".dgrid-row:click", gridSelect);
var cp = new ContentPane({
id: result,
content: "<b>" + combineResults[result][0].layerName + "\b",
//content: dataGrid,
title: combineResults[result][0].layerId
}).placeAt(dijit.byId('tabs'));
cp.addChild(dataGrid);
cp.startup();
cp.resize();
}
tc.startup();
tc.resize();
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
catch (e) { console.log(e.message); }
}

The problem is not with the grid width, it's the column widths. They fit the container.
If you give a column a fixed width, you will get the desired effect.
You should be able to style .dgrid-cell or .dgrid-column-[index]
I've also had a need for more control depending on the column data. You can control the style by providing a column with its own renderHeaderCell and renderCell method as well. (style refers to dom-style)
renderHeaderCell: function(node) {
style.set(node, 'width', '50px');
}
renderCell: function(object, value, node) {
style.set(node, 'width', '50px');
}

I was able to use the AddCssRule to dynamically change the size of the grids
var dataGrid = new (declare([Grid, Selection]))({
id: "dgrid_" + combineResults[result][0].layerId,
bufferRows: Infinity,
columns: columns,
"class": "resultsGrid"
});
dataGrid.renderArray(data);
var gridWidth = "width: " + String(columns.length * 100) + "px";
dataGrid.addCssRule("#" + dataGrid.id, gridWidth);
dataGrid.resize();
dataGrid.refresh();
Here is a Fiddle that shows the result. Click on a colored polygon to show the different grids (although the content is sometimes being shoved into the header of the grid). Also, the tabs aren't being rendered correctly, but there should be 0, 224, and 227 (if you also clicked on a point).