how to edit string in editable datatable? - plotly-dash

I am using dash_table.DataTable() with cell value of date string. I use editable=True so I can delete and change whole cell's value. I am wondering if I can edit part of string value? For example, below the cell value is a date string of 2021-10-31 18:00. How can I just change month or hour data or whatever without changing whole string? Typically, we just double click the location to highlight the part which need to be changed. But this double-click doesn't work for DataTable. Thanks
from dash_table import DataTable
mytable=DataTable(
id="date-table",
columns=columns,
data=data,
editable=True,
active_cell={"row": 0, "column": 0},
fixed_rows={"headers": True},
sort_action="native",
derived_virtual_data=data,
style_table={
"minHeight": "85vh",
"height": "85vh",
"overflowY": "scroll",
"borderRadius": "0px 0px 10px 10px",
},
style_cell={
"whiteSpace": "normal",
"height": "auto",
"font-family": "verdana",
},
style_header={
"textAlign": "center",
"fontSize": 14,
},
style_data={
"fontSize": 12,
},
style_data_conditional=[
{
"if": {"column_id": 'Well'},
"width": "30%",
"textAlign": "center",
"textDecoration": "underline",
"cursor": "pointer",
},
{
"if": {"column_id": 'Type'},
"width": "50%",
"textAlign": "center",
},
{
"if": {"column_id": 'Pad'},
"width": "20%",
"textAlign": "center",
},
{"if": {"row_index": "odd"}, "backgroundColor": "#fafbfb"},
],
)

It appears this is possible by double clicking THEN moving the arrow keys. Requires hitting enter to save changes. If you lose focus, they're gone.
I'm using dash 2.0.0 and dash-datatable 5.0.0.

Related

How to combine text and a field value in a single line of display

I am using Vega and I am stuck on this simple issue. I want to display
The yield is 43.67%
However using the samples provided I have managed to just display the value 43.67
{
mark:
{
type: "text",
align: "center",
fontSize: 40,
fontWeight: "bold"
},
encoding:
{
"text": {"field": "Yield", "type": "quantitative",format: ".2f"}
}
}
Is it possible to add some text in front of this value and put a % sign after it?
THe best way to add this sort of complicated annotation is using a calculate transform; for example:
{
mark:
{
type: "text",
align: "center",
fontSize: 40,
fontWeight: "bold"
},
transform:
[
{"calculate": "'The yield is ' + datum.Yield + '%'", "as": "annotated_yield"}
],
encoding:
{
"text": {"field": "annotated_yield", "type": "nominal"}
}
}

Can't change VS Code Settings: problem with Json file

When ever I try to change a setting in VS Code it shows an error saying "unable to write into user settings".
When I open the JSON file in VS Code it shows there is an error but I cannot seem to find it since I have no idea how JSON works.... Below is all the code in my settings file:
{
"window.zoomLevel": -1,
"editor.fontSize": 26,
"editor.tabSize": 1,
"files.autoSave": "off",
"editor.wordWrap": "on",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
}
"highlight-matching-tag.styles": {
"opening": {
"left": {
"custom": {
"borderWidth": "0 0 0 5px",
"borderStyle": "Solid",
"borderColor": "Yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
},
"right": {
"custom": {
"borderWidth": "0 5px 0 0",
"borderStyle": "Solid",
"borderColor": "Yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
}
}
}
"prettier.singleQuote": true
EDIT: I managed to solve it when I realised that JSON are just stringified JS objects and that VS code only allows single object JSON (not sure if multiple object JSON is even a thing). Basically I neded to move everything into the first {} which is where the official VS code settings are stored (i.e the ones outside were put there by the plugins for some reason).
I also do not know much about JSON. But I know there are online validators like this one: https://jsonlint.com/.
In the line "editor.formatOnSave": true, remove the ,. It could also be the case that VS Code does not like multiple root elements in its JSON - for that you could try to add { as the first and } as the last character of the file (no guarantee).
The settings.json file is 1 dictionary of keys
{
"window.zoomLevel": -1,
"editor.fontSize": 26,
"editor.tabSize": 1,
"files.autoSave": "off",
"editor.wordWrap": "on",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"highlight-matching-tag.styles": {
"opening": {
"left": {
"custom": {
"borderWidth": "0 0 0 5px",
"borderStyle": "Solid",
"borderColor": "Yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
},
"right": {
"custom": {
"borderWidth": "0 5px 0 0",
"borderStyle": "Solid",
"borderColor": "Yellow",
"borderRadius": "5px",
"overviewRulerColor": "white"
}
}
}
},
"prettier.singleQuote": true
}

Loading pushpin in the forge viewer does not respect the viewerState

We are using the "Autodesk.BIM360.Extension.PushPin" extension inside the forge viewer to enable push pins.
When a push pin has been added to the model, we serialize the pushpin data and store it in our database. An example of such a pushpin is here:
{
"id": "12",
"label": "12",
"status": "quality_issues-not_approved",
"position": {
"x": 15.324803588519861,
"y": -10.150864635427533,
"z": -5.532972775562976
},
"type": "issues",
"objectId": 24518,
"externalId": "d9a1e318-14d0-4d08-b7ab-6d1c331454c2-002793d1",
"viewerState": {
"seedURN": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6MDQyY2QwMmUtNzU0Yi00ZDY2LTgyYTMtNjBmYjFlOWVjMjcxL2U5ODAxZTA4LTUwZjQtNDc0ZS05ZWU4LTAxYWQ0ZGM0ODFiYl9WMV9Lb25nZXN0aWVuKzMwKy0rVGlsYnlnbmluZystK0clMjVDMyUyNUE2bGRlbmRlK2QuKzA1LjA2LnJ2dA",
"objectSet": [{
"id": [],
"isolated": [],
"hidden": [],
"explodeScale": 0,
"idType": "lmv"
}],
"viewport": {
"name": "",
"eye": ["-15.17842530349136", "-0.9048862425583284", "0.6506974303790392"],
"target": ["-22.06049144652811", "0.915848677106827", "-0.4205110420886964"],
"up": [-0.14385076361076257, 0.038057482024001874, 0.9888673247056924],
"worldUpVector": [0, 0, 1],
"pivotPoint": ["-22.510046835506888", "1.6223793651751013", "3.668585646439837"],
"distanceToOrbit": 7.198985875545766,
"aspectRatio": 1.491792224702381,
"projection": "orthographic",
"isOrthographic": true,
"orthographicHeight": 7.198985875545767
},
"renderOptions": {
"environment": "Boardwalk",
"ambientOcclusion": {
"enabled": true,
"radius": 13.123359580052492,
"intensity": 1
},
"toneMap": {
"method": 1,
"exposure": -7,
"lightMultiplier": -1e-20
},
"appearance": {
"ghostHidden": true,
"ambientShadow": true,
"antiAliasing": true,
"progressiveDisplay": true,
"swapBlackAndWhite": false,
"displayLines": true,
"displayPoints": true
}
},
"cutplanes": [],
"globalOffset": {
"x": -20.808594999999997,
"y": 6.686511499999999,
"z": 8.456207
}
},
"objectData": {
"guid": "6de5f80c-73da-30ae-b2d1-8a78f177c2a4",
"urn": "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6MDQyY2QwMmUtNzU0Yi00ZDY2LTgyYTMtNjBmYjFlOWVjMjcxL2U5ODAxZTA4LTUwZjQtNDc0ZS05ZWU4LTAxYWQ0ZGM0ODFiYl9WMV9Lb25nZXN0aWVuKzMwKy0rVGlsYnlnbmluZystK0clMjVDMyUyNUE2bGRlbmRlK2QuKzA1LjA2LnJ2dA",
"viewableId": "aaff5911-e8b1-4ae2-b41c-4284d0703eb4-00150218",
"viewName": "{3D}"
}
}
We then load the pushpin into the model again at a later point (when the user reopens the model), like this:
pushPinExtension.loadItems([pushPinItem]);
The result is that the pushpin is added in the model at the correct place, but the viewer state is incorrect. It seems like the viewer state for the pushpin is set to the viewer state of the model at the time when we load the pushpin - and not to the viewer state stored inside the pushpin.
Is this expected behaviour? - and if so, how do I use the viewer state from the pushpin instead?
why not explicitly load the viewer state stored in the pushpin separately after loading the pushpin:
pushPinExtension.loadItems([pushPinItem]);
viewer.restoreState(pushPinItem.viewerState)
EDIT:
Try restore the viewer state when an item is clicked - subscribe to the click event with:
viewer.restoreState(...)
//...
})

Backstopjs site loading issue not solved by delay: what is wrong?

When I try to run backstopjs on certain sites (they all must have some dynamic rendering thing in common, though I don't know what), the screenshots generated by backstopjs only include the first piece of content, centered in the screen. Here's the URL to a screenshot: https://user-images.githubusercontent.com/41495147/63806833-1612b680-c8e2-11e9-9932-680864b470b7.png
I've already tried setting the delay to 5 seconds. I've tried waiting until the footer class is available before screenshot. No dice. What is going on? Here's my config file:
"id": "backstop_default",
"viewports": [
{
"label": "phone",
"width": 320,
"height": 480
},
{
"label": "tablet",
"width": 1024,
"height": 768
},
{
"label": "desktop",
"width": 1280,
"height": 1024
}
],
"onBeforeScript": "puppet/onBefore.js",
"onReadyScript": "puppet/onReady.js",
"scenarios": [
{
"label": "VMLYR Home",
"cookiePath": "backstop_data/engine_scripts/cookies.json",
"url": "https://www.vmlyr.com",
"referenceUrl": "",
"readyEvent": "",
"readySelector": ".region-footer",
"delay": 5000,
"hideSelectors": [],
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"postInteractionWait": 0,
"selectors": [],
"selectorExpansion": true,
"expect": 0,
"misMatchThreshold" : 0.1,
"requireSameDimensions": true
}
],
"paths": {
"bitmaps_reference": "backstop_data/bitmaps_reference",
"bitmaps_test": "backstop_data/bitmaps_test",
"engine_scripts": "backstop_data/engine_scripts",
"html_report": "backstop_data/html_report",
"ci_report": "backstop_data/ci_report"
},
"report": ["browser"],
"engine": "puppeteer",
"engineOptions": {
"args": ["--no-sandbox"]
},
"asyncCaptureLimit": 5,
"asyncCompareLimit": 50,
"debug": false,
"debugWindow": false
}```

how to change background color of amchart gauge graph in angular 6

I am using gauge graph of amchart having multiple axes with the help of following code from amchart tutorial in my angular6 app.
var chart = AmCharts.makeChart( "chartdiv", {
"theme": "red",
"type": "gauge",
"backgroundColor":"#67b7dc",
"axes": [ {
"axisColor": "#67b7dc",
"axisThickness": 3,
"endValue": 240,
"gridInside": false,
"inside": false,
"radius": "100%",
"valueInterval": 20,
"tickColor": "#67b7dc",
"backgroundColor":"#67b7dc"
}, {
"axisColor": "#fdd400",
"axisThickness": 3,
"endValue": 160,
"radius": "40%",
"valueInterval": 20,
"tickColor": "#fdd400"
} ],
"arrows": [ {
"color": "#67b7dc",
"innerRadius": "20%",
"nailRadius": 0,
"radius": "85%"
} ],
"export": {
"enabled": true
}
} );
The code works fine in my angular app, but I failed to add backgroundcolor to the axes.I found there is an option for chaging the border color of the axes, but how can I add different background colors for the two axes?