{history.past.length > 0 ? undoLink : null}
@@ -99,12 +99,12 @@ function UnconnectedToolbar(props) {
UnconnectedToolbar.propTypes = {
history: PropTypes.object,
- dispatch: PropTypes.func,
+ dispatch: PropTypes.func
};
const Toolbar = connect(
state => ({
- history: state.history,
+ history: state.history
}),
dispatch => ({dispatch})
)(Radium(UnconnectedToolbar));
diff --git a/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css
index fb98faa56e..025e59eddc 100644
--- a/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css
+++ b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.css
@@ -3,8 +3,8 @@
position: fixed;
bottom: 165px;
right: 16px;
- max-width: 80vw;
- max-height: calc(100vh - 180px);
+ width: 80vw;
+ height: calc(100vh - 180px);
overflow: auto;
box-sizing: border-box;
background: #ffffff;
@@ -14,3 +14,34 @@
0px 2px 6px rgba(80, 103, 132, 0.12),
0px 0px 1px rgba(80, 103, 132, 0.32);
}
+
+.dash-callback-dag--info {
+ border-radius: 4px;
+ position: absolute;
+ padding: 8px;
+ bottom: 16px;
+ left: 16px;
+ max-width: calc(100% - 32px);
+ max-height: 50%;
+ overflow: auto;
+ box-sizing: border-box;
+ background: rgba(255,255,255,0.9);
+ border: 2px solid #ccc;
+ font-family: "Arial", sans-serif;
+}
+
+.dash-callback-dag--message {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+ line-height: 2em;
+ font-family: "Arial", sans-serif;
+}
+
+.dash-callback-dag--layoutSelector {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
diff --git a/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js
index 480e65e768..3e298154ce 100644
--- a/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js
+++ b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainer.react.js
@@ -1,89 +1,448 @@
-import React, {useEffect, useRef} from 'react';
+import React, {Component, useState, useMemo, useEffect, useRef} from 'react';
import PropTypes from 'prop-types';
+import {connect, useSelector} from 'react-redux';
+import Cytoscape from 'cytoscape';
+import CytoscapeComponent from 'react-cytoscapejs';
+import Dagre from 'cytoscape-dagre';
+import JSONTree from 'react-json-tree';
+import {keys, mergeRight, omit, path} from 'ramda';
+
+import {getPath} from '../../../actions/paths';
+import {stringifyId} from '../../../actions/dependencies';
+import {onError} from '../../../actions';
import './CallbackGraphContainer.css';
+import stylesheet from './CallbackGraphContainerStylesheet';
+import {
+ updateSelectedNode,
+ updateChangedProps,
+ updateCallback
+} from './CallbackGraphEffects';
-import Viz from 'viz.js';
-import {Module, render} from 'viz.js/full.render';
+Cytoscape.use(Dagre);
-import {stringifyId} from '../../../actions/dependencies';
+/*
+ * Generates all the elements (nodes, edeges) for the dependency graph.
+ */
+function generateElements(graphs, profile) {
+ const consumed = [];
+ const elements = [];
-const CallbackGraphContainer = ({graphs}) => {
- const el = useRef(null);
+ function recordNode(id, property) {
+ const idStr = stringifyId(id);
+ const idType = typeof id === 'object' ? 'wildcard' : 'component';
- const viz = useRef(null);
+ const parent = idStr;
+ const child = `${idStr}.${property}`;
- const makeViz = () => {
- viz.current = new Viz({Module, render});
- };
+ if (!consumed.includes(parent)) {
+ consumed.push(parent);
+ elements.push({
+ data: {
+ id: idStr,
+ label: idStr,
+ type: idType
+ }
+ });
+ }
- if (!viz.current) {
- makeViz();
+ if (!consumed.includes(child)) {
+ consumed.push(child);
+ elements.push({
+ data: {
+ id: child,
+ label: property,
+ parent: parent,
+ type: 'property'
+ }
+ });
+ }
+
+ return child;
}
- useEffect(() => {
- const {callbacks} = graphs;
- const elements = {};
- const callbacksOut = [];
- const links = callbacks.map(({inputs, outputs}, i) => {
- callbacksOut.push(`cb${i};`);
- function recordAndReturn({id, property}) {
- const idClean = stringifyId(id)
- .replace(/[\{\}".;\[\]()]/g, '')
- .replace(/:/g, '-')
- .replace(/,/g, '_');
- elements[idClean] = elements[idClean] || {};
- elements[idClean][property] = true;
- return `"${idClean}.${property}"`;
+ function recordEdge(source, target, type) {
+ elements.push({
+ data: {
+ source: source,
+ target: target,
+ type: type
}
- const out_nodes = outputs.map(recordAndReturn).join(', ');
- const in_nodes = inputs.map(recordAndReturn).join(', ');
- return `{${in_nodes}} -> cb${i} -> {${out_nodes}};`;
});
+ }
- const dot = `digraph G {
- overlap = false; fontname="Arial"; fontcolor="#333333";
- edge [color="#888888"];
- node [shape=box, fontname="Arial", style=filled, color="#109DFF", fontcolor=white];
- graph [penwidth=0];
- subgraph callbacks {
- node [shape=circle, width=0.3, label="", color="#00CC96"];
- ${callbacksOut.join('\n')} }
-
- ${Object.entries(elements)
- .map(
- ([id, props], i) => `
- subgraph cluster_${i} {
- bgcolor="#B9C2CE";
- ${Object.keys(props)
- .map(p => `"${id}.${p}" [label="${p}"];`)
- .join('\n')}
- label = "${id}"; }`
- )
- .join('\n')}
-
- ${links.join('\n')} }`;
-
- viz.current
- .renderSVGElement(dot)
- .then(vizEl => {
- el.current.innerHTML = '';
- el.current.appendChild(vizEl);
- })
- .catch(e => {
- // https://github.com/mdaines/viz.js/wiki/Caveats
- makeViz();
- // eslint-disable-next-line no-console
- console.error(e);
- el.current.innerHTML = 'Error creating callback graph';
- });
+ (graphs.callbacks || []).forEach((callback, i) => {
+ const cb = `__dash_callback__.${callback.output}`;
+ const cbProfile = profile.callbacks[callback.output] || {};
+ const count = cbProfile.count || 0;
+ const time = cbProfile.total || 0;
+
+ elements.push({
+ data: {
+ id: cb,
+ label: `callback.${i}`,
+ type: 'callback',
+ mode: callback.clientside_function ? 'client' : 'server',
+ count: count,
+ time: count > 0 ? Math.round(time / count) : 0,
+ loadingSet: Date.now(),
+ errorSet: Date.now()
+ }
+ });
+
+ callback.outputs.map(({id, property}) => {
+ const node = recordNode(id, property);
+ recordEdge(cb, node, 'output');
+ });
+
+ callback.inputs.map(({id, property}) => {
+ const node = recordNode(id, property);
+ recordEdge(node, cb, 'input');
+ });
+
+ callback.state.map(({id, property}) => {
+ const node = recordNode(id, property);
+ recordEdge(node, cb, 'state');
+ });
});
- return
;
+ return elements;
+}
+
+function reduceStatus(status) {
+ if (keys(status).length === 2) {
+ return status.latest;
+ }
+ return status;
+}
+
+function flattenOutputs(res) {
+ const outputs = {};
+ for (const idStr in res) {
+ for (const prop in res[idStr]) {
+ outputs[idStr + '.' + prop] = res[idStr][prop];
+ }
+ }
+ return outputs;
+}
+
+function flattenInputs(inArray, final) {
+ (inArray || []).forEach(inItem => {
+ if (Array.isArray(inItem)) {
+ flattenInputs(inItem, final);
+ } else {
+ const {id, property, value} = inItem;
+ final[stringifyId(id) + '.' + property] = value;
+ }
+ });
+ return final;
+}
+
+// len('__dash_callback__.')
+const cbPrefixLen = 18;
+
+const layouts = {
+ 'top-down': {
+ name: 'dagre',
+ padding: 10,
+ spacingFactor: 0.8
+ },
+ 'left-right': {
+ name: 'dagre',
+ padding: 10,
+ nodeSep: 0,
+ rankSep: 80,
+ rankDir: 'LR'
+ },
+ force: {
+ name: 'cose',
+ padding: 10,
+ animate: false
+ }
};
-CallbackGraphContainer.propTypes = {
- graphs: PropTypes.object,
+function CallbackGraph() {
+ // Grab items from the redux store.
+ const paths = useSelector(state => state.paths);
+ const layout = useSelector(state => state.layout);
+ const graphs = useSelector(state => state.graphs);
+ const profile = useSelector(state => state.profile);
+ const changed = useSelector(state => state.changed);
+ const lifecycleState = useSelector(state => state.appLifecycle);
+
+ // Keep track of cytoscape reference and user selected items.
+ const [selected, setSelected] = useState(null);
+ const [cytoscape, setCytoscape] = useState(null);
+
+ const {graphLayout} = profile;
+ const chosenType = graphLayout?._chosenType;
+ const layoutSelector = useRef(null);
+ const [layoutType, setLayoutType] = useState(chosenType || 'top-down');
+
+ // Generate and memoize the elements.
+ const elements = useMemo(() => generateElements(graphs, profile), [graphs]);
+
+ // Custom hook to make sure cytoscape is loaded.
+ const useCytoscapeEffect = (effect, condition) => {
+ useEffect(
+ () => (cytoscape && effect(cytoscape)) || undefined,
+ condition
+ );
+ };
+
+ function setPresetLayout({cy}) {
+ const positions = {};
+ cy.nodes().each(n => {
+ positions[n.id()] = n.position();
+ });
+ profile.graphLayout = {
+ name: 'preset',
+ fit: false,
+ positions,
+ zoom: cy.zoom(),
+ pan: cy.pan(),
+ _chosenType: layoutSelector.current?.value
+ };
+ }
+
+ // Adds callbacks once cyctoscape is intialized.
+ useCytoscapeEffect(
+ cy => {
+ cytoscape.on('tap', 'node', e => setSelected(e.target));
+ cytoscape.on('tap', e => {
+ if (e.target === cy) {
+ setSelected(null);
+ }
+ });
+ cytoscape.on('zoom', setPresetLayout);
+ cytoscape.on('pan', setPresetLayout);
+ cytoscape.nodes().on('position', setPresetLayout);
+ },
+ [cytoscape]
+ );
+
+ // Set node classes on selected.
+ useCytoscapeEffect(
+ cy => selected && updateSelectedNode(cy, selected.data().id),
+ [selected]
+ );
+
+ // Flash classes when props change. Uses changed as a trigger. Also
+ // flash all input edges originating from this node and highlight
+ // the subtree that contains the selected node.
+ useCytoscapeEffect(
+ cy => changed && updateChangedProps(cy, changed.id, changed.props),
+ [changed]
+ );
+
+ // Update callbacks from profiling information.
+ useCytoscapeEffect(
+ cy =>
+ profile.updated.forEach(cb =>
+ updateCallback(cy, cb, profile.callbacks[cb])
+ ),
+ [profile.updated]
+ );
+
+ if (lifecycleState !== 'HYDRATED') {
+ // If we get here too early - most likely during hot reloading - then
+ // we need to bail out and wait for the full state to be available
+ return (
+
+
+
Waiting for app to be ready...
+
+
+ );
+ }
+
+ // FIXME: Move to a new component?
+ // Generate the element introspection data.
+ let elementName = '';
+ let elementInfo = {};
+ let hasPatterns = false;
+
+ if (selected) {
+ function getComponent(id) {
+ // for now ignore pattern-matching IDs
+ // to do better we may need to store the *actual* IDs used for each
+ // callback invocation, since they need not match what's on the page now.
+ if (id.charAt(0) === '{') {
+ hasPatterns = true;
+ return undefined;
+ }
+ const idPath = getPath(paths, id);
+ return idPath ? path(idPath, layout) : undefined;
+ }
+
+ function getPropValue(data) {
+ const parent = getComponent(data.parent);
+ return parent ? parent.props[data.label] : undefined;
+ }
+
+ const data = selected.data();
+
+ switch (data.type) {
+ case 'component': {
+ const rest = omit(['id'], getComponent(data.id)?.props);
+ elementInfo = rest;
+ elementName = data.id;
+ break;
+ }
+
+ case 'property': {
+ elementName = data.parent;
+ elementInfo[data.label] = getPropValue(data);
+ break;
+ }
+
+ // callback
+ default: {
+ elementInfo.type = data.mode;
+
+ // Remove uid and set profile.
+ const callbackOutputId = data.id.slice(cbPrefixLen);
+ elementName = callbackOutputId.replace(/(^\.\.|\.\.$)/g, '');
+ const cbProfile = profile.callbacks[callbackOutputId];
+ if (cbProfile) {
+ const {
+ count,
+ status,
+ network,
+ resources,
+ total,
+ compute,
+ result,
+ inputs,
+ state
+ } = cbProfile;
+
+ const avg = v => Math.round(v / (count || 1));
+
+ elementInfo['call count'] = count;
+ elementInfo.status = reduceStatus(status);
+
+ const timing = (elementInfo['time (avg milliseconds)'] = {
+ total: avg(total),
+ compute: avg(compute)
+ });
+ if (data.mode === 'server') {
+ timing.network = avg(network.time);
+
+ elementInfo['data transfer (avg bytes)'] = {
+ download: avg(network.download),
+ upload: avg(network.upload)
+ };
+ }
+ for (const key in resources) {
+ timing['user: ' + key] = avg(resources[key]);
+ }
+
+ elementInfo.outputs = flattenOutputs(result);
+ elementInfo.inputs = flattenInputs(inputs, {});
+ elementInfo.state = flattenInputs(state, {});
+ } else {
+ elementInfo['call count'] = 0;
+ }
+ }
+ }
+ }
+
+ const cyLayout =
+ chosenType === layoutType
+ ? graphLayout
+ : mergeRight(layouts[layoutType], {ready: setPresetLayout});
+
+ return (
+
+
+ {selected ? (
+
+ {hasPatterns ? (
+
+ Info isn't supported for pattern-matching IDs at
+ this time
+
+ ) : null}
+
+ _keys.length === 1 ? elementName : _keys[0]
+ }
+ getItemString={(type, data, itemType) => (
+ {itemType}
+ )}
+ shouldExpandNode={(keyName, data, level) => level < 1}
+ />
+
+ ) : null}
+
setLayoutType(e.target.value)}
+ value={layoutType}
+ ref={layoutSelector}
+ >
+ {keys(layouts).map(k => (
+
+ {k}
+
+ ))}
+
+
+ );
+}
+
+CallbackGraph.propTypes = {};
+
+class UnconnectedCallbackGraphContainer extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {hasError: false};
+ }
+
+ static getDerivedStateFromError(_) {
+ return {hasError: true};
+ }
+
+ componentDidCatch(error, info) {
+ const {dispatch} = this.props;
+ dispatch(
+ onError({
+ myID: this.state.myID,
+ type: 'frontEnd',
+ error,
+ info
+ })
+ );
+ }
+
+ render() {
+ return this.state.hasError ? (
+
+
+
Oops! The callback graph threw an error.
+
Check the error list for details.
+
+
+ ) : (
+
+ );
+ }
+}
+
+UnconnectedCallbackGraphContainer.propTypes = {
+ dispatch: PropTypes.func
};
+const CallbackGraphContainer = connect(null, dispatch => ({dispatch}))(
+ UnconnectedCallbackGraphContainer
+);
+
export {CallbackGraphContainer};
diff --git a/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js
new file mode 100644
index 0000000000..60a7305b43
--- /dev/null
+++ b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphContainerStylesheet.js
@@ -0,0 +1,154 @@
+const stylesheet = [
+ {
+ selector: '*',
+ style: {
+ 'font-size': 12,
+ 'font-family': '"Arial", sans-serif'
+ }
+ },
+
+ {
+ selector: 'edge',
+ style: {
+ width: 2,
+ 'line-color': '#888888',
+ 'target-arrow-color': '#888888',
+ 'target-arrow-shape': 'triangle',
+ 'target-arrow-fill': 'filled',
+ 'arrow-scale': 1,
+ 'curve-style': 'bezier',
+ 'control-point-step-size': 40,
+ 'transition-property': 'line-color, target-arrow-color',
+ 'transition-duration': '0.25s',
+ 'transition-timing-function': 'ease-in-out-sine'
+ }
+ },
+
+ {
+ selector: 'edge[type="output"]',
+ style: {
+ 'line-color': '#0080D0',
+ 'target-arrow-color': '#0080D0'
+ }
+ },
+
+ {
+ selector: 'edge[type="state"]',
+ style: {
+ 'line-style': 'dashed'
+ }
+ },
+
+ {
+ selector: 'node',
+ style: {
+ color: '#333333',
+ padding: 6,
+ 'text-valign': 'center',
+ 'text-halign': 'center',
+ 'border-width': 2,
+ 'border-opacity': 0,
+ 'border-style': 'solid',
+ 'border-color': '#888888',
+ 'transition-property': 'border-opacity',
+ 'transition-duration': '0.25s',
+ 'transition-timing-function': 'ease-in-out-sine'
+ }
+ },
+
+ {
+ selector: 'node[type="callback"]',
+ style: {
+ width: 35,
+ height: 25,
+ shape: 'round-rectangle',
+ label: e => `${e.data().count}\n${e.data().time} ms`,
+ 'text-wrap': 'wrap',
+ 'text-justification': 'center'
+ }
+ },
+
+ {
+ selector: 'node[type="callback"][mode="client"]',
+ style: {
+ color: '#323330',
+ 'background-color': '#F0DB4F'
+ }
+ },
+
+ {
+ selector: 'node[type="callback"][mode="server"]',
+ style: {
+ color: '#323330',
+ 'background-color': '#00CC96'
+ }
+ },
+
+ {
+ selector: 'node[type="component"], node[type="wildcard"]',
+ style: {
+ width: 'label',
+ // height: 'label',
+ shape: 'rectangle',
+ content: e => e.data().label.replace(/\"/g, ''),
+ 'text-valign': 'top',
+ 'background-color': '#B9C2CE'
+ }
+ },
+
+ {
+ selector: 'node[type="property"]',
+ style: {
+ width: 'label',
+ height: 20,
+ shape: 'rectangle',
+ content: 'data(label)',
+ color: 'white',
+ 'background-color': '#109DFF'
+ }
+ },
+
+ {
+ selector: '.selected-node',
+ style: {
+ ghost: 'yes',
+ 'ghost-offset-x': 2,
+ 'ghost-offset-y': 2,
+ 'ghost-opacity': 0.25,
+ 'border-opacity': 1
+ }
+ },
+
+ {
+ selector: '.prop-changed, .callback-loading',
+ style: {
+ 'border-color': '#CC43B7',
+ 'border-width': 2,
+ 'border-opacity': 1
+ }
+ },
+
+ {
+ selector: '.callback-error',
+ style: {
+ 'background-color': '#E1332E'
+ }
+ },
+
+ {
+ selector: '.triggered',
+ style: {
+ 'line-color': '#CC43B7',
+ 'target-arrow-color': '#CC43B7'
+ }
+ },
+
+ {
+ selector: '.inactive',
+ style: {
+ opacity: 0.5
+ }
+ }
+];
+
+export default stylesheet;
diff --git a/dash-renderer/src/components/error/CallbackGraph/CallbackGraphEffects.js b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphEffects.js
new file mode 100644
index 0000000000..05c777f8cc
--- /dev/null
+++ b/dash-renderer/src/components/error/CallbackGraph/CallbackGraphEffects.js
@@ -0,0 +1,161 @@
+import {STATUS, STATUSMAP} from '../../../constants/constants';
+
+/**
+ * getEdgeTypes
+ *
+ * Finds all edges connected to a node and splits them by type.
+ *
+ * @param {Object} node - Cytoscape node.
+ * @returns {Object} - Object contaiing the edges, sorted by type.
+ */
+function getEdgeTypes(node) {
+ const elements = node.connectedEdges();
+ return {
+ input: elements.filter('[type = "input"]'),
+ state: elements.filter('[type = "state"]'),
+ output: elements.filter('[type = "output"]')
+ };
+}
+
+/**
+ * updateSelected
+ *
+ * Updates the classes of the selected node and recenters the viewport.
+ *
+ * @param {Object} cy - Reference to the cytoscape instance.
+ * @param {String} id - The id of the selected node.
+ * @returns {function} - cleanup function, for useEffect hook
+ */
+export function updateSelectedNode(cy, id) {
+ if (id) {
+ const node = cy.getElementById(id);
+
+ // Highlght the selected node.
+
+ node.addClass('selected-node');
+
+ // Find the subtree that the node belongs to. A subtree contains
+ // all all ancestors and descendents that are connected via Inputs
+ // or Outputs (but not State).
+
+ // WARNING: No cycle detection!
+
+ function ascend(node, collection) {
+ // FIXME: Should we include State parents but non-recursively?
+ const type = node.data().type === 'callback' ? 'input' : 'output';
+ const edges = getEdgeTypes(node)[type];
+ const parents = edges.sources();
+ collection.merge(edges);
+ collection.merge(parents);
+ if (node.data().type === 'property') {
+ collection.merge(node.ancestors());
+ }
+ parents.forEach(node => ascend(node, collection));
+ }
+
+ function descend(node, collection) {
+ const type = node.data().type === 'callback' ? 'output' : 'input';
+ const edges = getEdgeTypes(node)[type];
+ const children = edges.targets();
+ collection.merge(edges);
+ collection.merge(children);
+ if (node.data().type === 'property') {
+ collection.merge(node.ancestors());
+ }
+ children.forEach(node => descend(node, collection));
+ }
+
+ const subtree = cy.collection();
+ subtree.merge(node);
+ ascend(node, subtree);
+ descend(node, subtree);
+
+ const other = subtree.absoluteComplement();
+ other.addClass('inactive');
+
+ return () => {
+ node.removeClass('selected-node');
+ other.removeClass('inactive');
+ };
+ }
+ return undefined;
+}
+
+/**
+ * updateChangedProp
+ *
+ * Flashes property nodes that updated and any inputs they are connected to.
+ *
+ * @param {Object} cy - Reference to the cytoscape instance.
+ * @param {String} id - The component id which updated.
+ * @param {Object} props - The props that updated.
+ * @param {Number} flashTime - The time to flash classes for in ms.
+ * @returns {undefined}
+ */
+export function updateChangedProps(cy, id, props, flashTime = 500) {
+ Object.keys(props).forEach(prop => {
+ const node = cy.getElementById(`${id}.${prop}`);
+ node.flashClass('prop-changed', flashTime);
+ node.edgesTo('*')
+ .filter('[type = "input"]')
+ .flashClass('triggered', flashTime);
+ });
+}
+
+/**
+ * updateCallback
+ *
+ * Updates a callback node with profiling information (call count, avg time)
+ * and adds or removes classes as necessary. Classes are always assert for
+ * at least flashTime ms so that they can be visually observed. When callbacks
+ * resolve, all output edges are flashed.
+ *
+ * @param {Object} cy - Reference to the cytoscape instance.
+ * @param {String} id - The id of the callback (i.e., it's output identifier)
+ * @param {Object} profile - The callback profiling infomration.
+ * @param {Number} flashTime - The time to flash classes for in ms.
+ * @returns {undefined}
+ */
+export function updateCallback(cy, id, profile, flashTime = 500) {
+ const node = cy.getElementById(`__dash_callback__.${id}`);
+ const {count, total, status} = profile;
+ const {latest} = status;
+
+ // Update data.
+ const avgTime = count > 0 ? total / count : 0;
+ node.data('count', count);
+ node.data('time', Math.round(avgTime));
+
+ // Either flash the classes OR maintain it for long callbacks.
+ if (latest === 'loading') {
+ node.data('loadingSet', Date.now());
+ node.addClass('callback-loading');
+ } else if (node.hasClass('callback-loading')) {
+ const timeLeft = node.data('loadingSet') + flashTime - Date.now();
+ setTimeout(
+ () => node.removeClass('callback-loading'),
+ Math.max(timeLeft, 0)
+ );
+ }
+
+ if (
+ latest !== 'loading' &&
+ latest !== STATUSMAP[STATUS.OK] &&
+ latest !== STATUSMAP[STATUS.PREVENT_UPDATE]
+ ) {
+ node.data('errorSet', Date.now());
+ node.addClass('callback-error');
+ } else if (node.hasClass('callback-error')) {
+ const timeLeft = node.data('errorSet') + flashTime - Date.now();
+ setTimeout(
+ () => node.removeClass('callback-error'),
+ Math.max(timeLeft, 0)
+ );
+ }
+
+ // FIXME: This will flash branches that return no_update!!
+ // If the callback resolved properly, flash the outputs.
+ if (latest === STATUSMAP[STATUS.OK]) {
+ node.edgesTo('*').flashClass('triggered', flashTime);
+ }
+}
diff --git a/dash-renderer/src/components/error/ComponentErrorBoundary.react.js b/dash-renderer/src/components/error/ComponentErrorBoundary.react.js
index f62b63cbe6..dbc2171f47 100644
--- a/dash-renderer/src/components/error/ComponentErrorBoundary.react.js
+++ b/dash-renderer/src/components/error/ComponentErrorBoundary.react.js
@@ -8,7 +8,7 @@ class ComponentErrorBoundary extends Component {
this.state = {
myID: props.componentId,
oldChildren: null,
- hasError: false,
+ hasError: false
};
}
@@ -23,7 +23,7 @@ class ComponentErrorBoundary extends Component {
myID: this.state.myID,
type: 'frontEnd',
error,
- info,
+ info
})
);
dispatch(revert);
@@ -38,7 +38,7 @@ class ComponentErrorBoundary extends Component {
) {
/* eslint-disable-next-line react/no-did-update-set-state */
this.setState({
- oldChildren: prevChildren,
+ oldChildren: prevChildren
});
}
}
@@ -53,7 +53,7 @@ ComponentErrorBoundary.propTypes = {
children: PropTypes.object,
componentId: PropTypes.string,
error: PropTypes.object,
- dispatch: PropTypes.func,
+ dispatch: PropTypes.func
};
export default ComponentErrorBoundary;
diff --git a/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js b/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js
index a4cac920ea..5703add4db 100644
--- a/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js
+++ b/dash-renderer/src/components/error/FrontEnd/FrontEndError.react.js
@@ -12,7 +12,7 @@ class FrontEndError extends Component {
constructor(props) {
super(props);
this.state = {
- collapsed: this.props.isListItem,
+ collapsed: this.props.isListItem
};
}
@@ -27,20 +27,20 @@ class FrontEndError extends Component {
/* eslint-disable no-inline-comments */
const errorHeader = (
this.setState({collapsed: !collapsed})}
>
-
+
⛑️
-
+
{e.error.message || 'Error'}
-
-
+
+
{`${e.timestamp.toLocaleTimeString()}`}
-
+
{/* Special percy timestamp for visual testing.
* Hidden during regular usage.
*/}
@@ -59,7 +59,7 @@ class FrontEndError extends Component {
/* eslint-enable no-inline-comments */
return collapsed ? (
- {errorHeader}
+ {errorHeader}
) : (
{errorHeader}
@@ -73,7 +73,7 @@ const MAX_MESSAGE_LENGTH = 40;
/* eslint-disable no-inline-comments */
function UnconnectedErrorContent({error, base}) {
return (
-
+
{/*
* 40 is a rough heuristic - if longer than 40 then the
* message might overflow into ellipses in the title above &
@@ -81,16 +81,16 @@ function UnconnectedErrorContent({error, base}) {
*/}
{typeof error.message !== 'string' ||
error.message.length < MAX_MESSAGE_LENGTH ? null : (
-
-
+
)}
{typeof error.stack !== 'string' ? null : (
-
-
+
+
@@ -112,8 +112,8 @@ function UnconnectedErrorContent({error, base}) {
{typeof error.html !== 'string' ? null : error.html.indexOf(
'
-
+
+
{/* Embed werkzeug debugger in an iframe to prevent
CSS leaking - werkzeug HTML includes a bunch
of CSS on base html elements like `
`
@@ -138,14 +138,14 @@ function UnconnectedErrorContent({error, base}) {
*/
width: 'calc(600px - 67px)',
height: '75vh',
- border: 'none',
+ border: 'none'
}}
/>
-
-
+
+
🛑 Errors (
-
+
{errorsLength}
){connected ? null : '\u00a0 🚫 Server Unavailable'}
-
{errorElements}
+
{errorElements}
);
}
@@ -44,11 +44,11 @@ class FrontEndErrorContainer extends Component {
FrontEndErrorContainer.propTypes = {
errors: PropTypes.array,
connected: PropTypes.bool,
- inAlertsTray: PropTypes.any,
+ inAlertsTray: PropTypes.any
};
FrontEndErrorContainer.propTypes = {
- inAlertsTray: PropTypes.any,
+ inAlertsTray: PropTypes.any
};
export {FrontEndErrorContainer};
diff --git a/dash-renderer/src/components/error/GlobalErrorContainer.react.js b/dash-renderer/src/components/error/GlobalErrorContainer.react.js
index bd9fa3887a..4ca50cfd01 100644
--- a/dash-renderer/src/components/error/GlobalErrorContainer.react.js
+++ b/dash-renderer/src/components/error/GlobalErrorContainer.react.js
@@ -10,15 +10,11 @@ class UnconnectedGlobalErrorContainer extends Component {
}
render() {
- const {config, error, graphs, children} = this.props;
+ const {config, error, children} = this.props;
return (
-
-
- {children}
+
);
@@ -28,14 +24,12 @@ class UnconnectedGlobalErrorContainer extends Component {
UnconnectedGlobalErrorContainer.propTypes = {
children: PropTypes.object,
config: PropTypes.object,
- error: PropTypes.object,
- graphs: PropTypes.object,
+ error: PropTypes.object
};
const GlobalErrorContainer = connect(state => ({
config: state.config,
- error: state.error,
- graphs: state.graphs,
+ error: state.error
}))(Radium(UnconnectedGlobalErrorContainer));
export default GlobalErrorContainer;
diff --git a/dash-renderer/src/components/error/GlobalErrorContainerPassthrough.react.js b/dash-renderer/src/components/error/GlobalErrorContainerPassthrough.react.js
index 11f4975f29..161f239257 100644
--- a/dash-renderer/src/components/error/GlobalErrorContainerPassthrough.react.js
+++ b/dash-renderer/src/components/error/GlobalErrorContainerPassthrough.react.js
@@ -6,12 +6,12 @@ class GlobalErrorContainer extends Component {
super(props);
}
render() {
- return {this.props.children}
;
+ return {this.props.children}
;
}
}
GlobalErrorContainer.propTypes = {
- children: PropTypes.object,
+ children: PropTypes.object
};
export default GlobalErrorContainer;
diff --git a/dash-renderer/src/components/error/GlobalErrorOverlay.react.js b/dash-renderer/src/components/error/GlobalErrorOverlay.react.js
index bdbc46b34d..4ad50a978c 100644
--- a/dash-renderer/src/components/error/GlobalErrorOverlay.react.js
+++ b/dash-renderer/src/components/error/GlobalErrorOverlay.react.js
@@ -27,7 +27,7 @@ export default class GlobalErrorOverlay extends Component {
return (
{this.props.children}
-
+
{frontEndErrors}
@@ -41,5 +41,5 @@ GlobalErrorOverlay.propTypes = {
children: PropTypes.object,
visible: PropTypes.bool,
error: PropTypes.object,
- errorsOpened: PropTypes.any,
+ errorsOpened: PropTypes.any
};
diff --git a/dash-renderer/src/components/error/menu/DebugMenu.react.js b/dash-renderer/src/components/error/menu/DebugMenu.react.js
index 636323eb48..47f0d5cf23 100644
--- a/dash-renderer/src/components/error/menu/DebugMenu.react.js
+++ b/dash-renderer/src/components/error/menu/DebugMenu.react.js
@@ -24,7 +24,7 @@ const buttonFactory = (
iconVariant,
label
) => (
-
+
<_Icon className={classes('dash-debug-menu__icon', iconVariant)} />
{label ? (
- {label}
+ {label}
) : null}
@@ -48,12 +48,12 @@ class DebugMenu extends Component {
this.state = {
opened: false,
callbackGraphOpened: false,
- errorsOpened: true,
+ errorsOpened: true
};
}
render() {
const {opened, errorsOpened, callbackGraphOpened} = this.state;
- const {error, graphs, hotReload} = this.props;
+ const {error, hotReload} = this.props;
const errCount = error.frontEnd.length + error.backEnd.length;
const connected = error.backEndConnected;
@@ -74,16 +74,14 @@ class DebugMenu extends Component {
: ClockIcon;
const menuContent = opened ? (
-
- {callbackGraphOpened ? (
-
- ) : null}
+
+ {callbackGraphOpened ?
) : (
-
+
);
const alertsLabel =
(errCount || !connected) && !opened ? (
-
-
+
+
{errCount ? (
-
+
{'🛑 ' + errCount}
) : null}
{connected ? null : (
-
🚫
+
🚫
)}
@@ -160,8 +158,7 @@ class DebugMenu extends Component {
DebugMenu.propTypes = {
children: PropTypes.object,
error: PropTypes.object,
- graphs: PropTypes.object,
- hotReload: PropTypes.bool,
+ hotReload: PropTypes.bool
};
export {DebugMenu};
diff --git a/dash-renderer/src/constants/constants.js b/dash-renderer/src/constants/constants.js
index f883eb68f8..c37b3b1f75 100644
--- a/dash-renderer/src/constants/constants.js
+++ b/dash-renderer/src/constants/constants.js
@@ -5,4 +5,10 @@ export const STATUS = {
OK: 200,
PREVENT_UPDATE: 204,
CLIENTSIDE_ERROR: 'CLIENTSIDE_ERROR',
+ NO_RESPONSE: 'NO_RESPONSE'
+};
+
+export const STATUSMAP = {
+ [STATUS.OK]: 'SUCCESS',
+ [STATUS.PREVENT_UPDATE]: 'NO_UPDATE'
};
diff --git a/dash-renderer/src/observers/documentTitle.ts b/dash-renderer/src/observers/documentTitle.ts
new file mode 100644
index 0000000000..f4d9bcf1f4
--- /dev/null
+++ b/dash-renderer/src/observers/documentTitle.ts
@@ -0,0 +1,55 @@
+import {IStoreObserverDefinition} from '../StoreObserver';
+import {IStoreState} from '../store';
+
+const updateTitle = (getState: () => IStoreState) => {
+ const {config, isLoading} = getState();
+
+ const update_title = config?.update_title;
+
+ if (!update_title) {
+ return;
+ }
+
+ if (isLoading) {
+ if (document.title !== update_title) {
+ observer.title = document.title;
+ document.title = update_title;
+ }
+ } else {
+ if (document.title === update_title) {
+ document.title = observer.title;
+ } else {
+ observer.title = document.title;
+ }
+ }
+};
+
+const observer: IStoreObserverDefinition
= {
+ inputs: ['isLoading'],
+ mutationObserver: undefined,
+ observer: ({getState}) => {
+ const {config} = getState();
+
+ if (observer.config !== config) {
+ observer.config = config;
+ observer.mutationObserver?.disconnect();
+ observer.mutationObserver = new MutationObserver(() =>
+ updateTitle(getState)
+ );
+
+ const title = document.querySelector('title');
+ if (title) {
+ observer.mutationObserver.observe(title, {
+ subtree: true,
+ childList: true,
+ attributes: true,
+ characterData: true
+ });
+ }
+ }
+
+ updateTitle(getState);
+ }
+};
+
+export default observer;
diff --git a/dash-renderer/src/observers/executedCallbacks.ts b/dash-renderer/src/observers/executedCallbacks.ts
index 90e3787dd7..9df4809b86 100644
--- a/dash-renderer/src/observers/executedCallbacks.ts
+++ b/dash-renderer/src/observers/executedCallbacks.ts
@@ -12,7 +12,7 @@ import {
toPairs
} from 'ramda';
-import { IStoreState } from '../store';
+import {IStoreState} from '../store';
import {
aggregateCallbacks,
@@ -22,7 +22,7 @@ import {
addStoredCallbacks
} from '../actions/callbacks';
-import { parseIfWildcard } from '../actions/dependencies';
+import {parseIfWildcard} from '../actions/dependencies';
import {
combineIdAndProp,
@@ -31,33 +31,22 @@ import {
includeObservers
} from '../actions/dependencies_ts';
-import {
- ICallback,
- IStoredCallback
-} from '../types/callbacks';
+import {ICallback, IStoredCallback} from '../types/callbacks';
-import { updateProps, setPaths, handleAsyncError } from '../actions';
-import { getPath, computePaths } from '../actions/paths';
+import {updateProps, setPaths, handleAsyncError} from '../actions';
+import {getPath, computePaths} from '../actions/paths';
-import {
- applyPersistence,
- prunePersistence
-} from '../persistence';
-import { IStoreObserverDefinition } from '../StoreObserver';
+import {applyPersistence, prunePersistence} from '../persistence';
+import {IStoreObserverDefinition} from '../StoreObserver';
const observer: IStoreObserverDefinition = {
- observer: ({
- dispatch,
- getState
- }) => {
+ observer: ({dispatch, getState}) => {
const {
- callbacks: {
- executed
- }
+ callbacks: {executed}
} = getState();
function applyProps(id: any, updatedProps: any) {
- const { layout, paths } = getState();
+ const {layout, paths} = getState();
const itempath = getPath(paths, id);
if (!itempath) {
return false;
@@ -74,7 +63,7 @@ const observer: IStoreObserverDefinition = {
// In case the update contains whole components, see if any of
// those components have props to update to persist user edits.
- const { props } = applyPersistence({ props: updatedProps }, dispatch);
+ const {props} = applyPersistence({props: updatedProps}, dispatch);
dispatch(
updateProps({
@@ -91,16 +80,10 @@ const observer: IStoreObserverDefinition = {
let storedCallbacks: IStoredCallback[] = [];
forEach(cb => {
- const predecessors = concat(
- cb.predecessors ?? [],
- [cb.callback]
- );
+ const predecessors = concat(cb.predecessors ?? [], [cb.callback]);
const {
- callback: {
- clientside_function,
- output
- },
+ callback: {clientside_function, output},
executionResult
} = cb;
@@ -108,12 +91,16 @@ const observer: IStoreObserverDefinition = {
return;
}
- const { data, error, payload } = executionResult;
+ const {data, error, payload} = executionResult;
if (data !== undefined) {
- forEach(([id, props]: [any, { [key: string]: any }]) => {
+ forEach(([id, props]: [any, {[key: string]: any}]) => {
const parsedId = parseIfWildcard(id);
- const { graphs, layout: oldLayout, paths: oldPaths } = getState();
+ const {
+ graphs,
+ layout: oldLayout,
+ paths: oldPaths
+ } = getState();
// Components will trigger callbacks on their own as required (eg. derived)
const appliedProps = applyProps(parsedId, props);
@@ -121,10 +108,19 @@ const observer: IStoreObserverDefinition = {
// Add callbacks for modified inputs
requestedCallbacks = concat(
requestedCallbacks,
- flatten(map(
- prop => getCallbacksByInput(graphs, oldPaths, parsedId, prop, true),
- keys(props)
- )).map(rcb => ({
+ flatten(
+ map(
+ prop =>
+ getCallbacksByInput(
+ graphs,
+ oldPaths,
+ parsedId,
+ prop,
+ true
+ ),
+ keys(props)
+ )
+ ).map(rcb => ({
...rcb,
predecessors
}))
@@ -132,12 +128,19 @@ const observer: IStoreObserverDefinition = {
// New layout - trigger callbacks for that explicitly
if (has('children', appliedProps)) {
- const { children } = appliedProps;
+ const {children} = appliedProps;
- const oldChildrenPath: string[] = concat(getPath(oldPaths, parsedId) as string[], ['props', 'children']);
+ const oldChildrenPath: string[] = concat(
+ getPath(oldPaths, parsedId) as string[],
+ ['props', 'children']
+ );
const oldChildren = path(oldChildrenPath, oldLayout);
- const paths = computePaths(children, oldChildrenPath, oldPaths);
+ const paths = computePaths(
+ children,
+ oldChildrenPath,
+ oldPaths
+ );
dispatch(setPaths(paths));
// Get callbacks for new layout (w/ execution group)
@@ -156,7 +159,9 @@ const observer: IStoreObserverDefinition = {
requestedCallbacks = concat(
requestedCallbacks,
getLayoutCallbacks(graphs, oldPaths, oldChildren, {
- removedArrayInputsOnly: true, newPaths: paths, chunkPath: oldChildrenPath
+ removedArrayInputsOnly: true,
+ newPaths: paths,
+ chunkPath: oldChildrenPath
}).map(rcb => ({
...rcb,
predecessors
@@ -172,11 +177,16 @@ const observer: IStoreObserverDefinition = {
appliedProps
);
if (!isEmpty(addedProps)) {
- const { graphs: currentGraphs, paths } = getState();
+ const {graphs: currentGraphs, paths} = getState();
requestedCallbacks = concat(
requestedCallbacks,
- includeObservers(id, addedProps, currentGraphs, paths).map(rcb => ({
+ includeObservers(
+ id,
+ addedProps,
+ currentGraphs,
+ paths
+ ).map(rcb => ({
...rcb,
predecessors
}))
@@ -190,25 +200,37 @@ const observer: IStoreObserverDefinition = {
storedCallbacks.push({
...cb,
executionMeta: {
- allProps: map(combineIdAndProp, flatten(cb.getOutputs(getState().paths))),
- updatedProps: flatten(map(
- ([id, value]) => map(
- property => combineIdAndProp({ id, property }),
- keys(value)
- ),
- toPairs(data)
- ))
+ allProps: map(
+ combineIdAndProp,
+ flatten(cb.getOutputs(getState().paths))
+ ),
+ updatedProps: flatten(
+ map(
+ ([id, value]) =>
+ map(
+ property =>
+ combineIdAndProp({id, property}),
+ keys(value)
+ ),
+ toPairs(data)
+ )
+ )
}
});
}
if (error !== undefined) {
const outputs = payload
- ? map(combineIdAndProp, flatten([payload.outputs])).join(', ')
+ ? map(combineIdAndProp, flatten([payload.outputs])).join(
+ ', '
+ )
: output;
let message = `Callback error updating ${outputs}`;
if (clientside_function) {
- const { namespace: ns, function_name: fn } = clientside_function;
+ const {
+ namespace: ns,
+ function_name: fn
+ } = clientside_function;
message += ` via clientside function ${ns}.${fn}`;
}
@@ -217,19 +239,28 @@ const observer: IStoreObserverDefinition = {
storedCallbacks.push({
...cb,
executionMeta: {
- allProps: map(combineIdAndProp, flatten(cb.getOutputs(getState().paths))),
+ allProps: map(
+ combineIdAndProp,
+ flatten(cb.getOutputs(getState().paths))
+ ),
updatedProps: []
}
});
}
}, executed);
- dispatch(aggregateCallbacks([
- executed.length ? removeExecutedCallbacks(executed) : null,
- executed.length ? addCompletedCallbacks(executed.length) : null,
- storedCallbacks.length ? addStoredCallbacks(storedCallbacks) : null,
- requestedCallbacks.length ? addRequestedCallbacks(requestedCallbacks) : null
- ]));
+ dispatch(
+ aggregateCallbacks([
+ executed.length ? removeExecutedCallbacks(executed) : null,
+ executed.length ? addCompletedCallbacks(executed.length) : null,
+ storedCallbacks.length
+ ? addStoredCallbacks(storedCallbacks)
+ : null,
+ requestedCallbacks.length
+ ? addRequestedCallbacks(requestedCallbacks)
+ : null
+ ])
+ );
},
inputs: ['callbacks.executed']
};
diff --git a/dash-renderer/src/observers/executingCallbacks.ts b/dash-renderer/src/observers/executingCallbacks.ts
index ffc92141e4..0ec1ef7908 100644
--- a/dash-renderer/src/observers/executingCallbacks.ts
+++ b/dash-renderer/src/observers/executingCallbacks.ts
@@ -1,9 +1,4 @@
-import {
- assoc,
- find,
- forEach,
- partition
-} from 'ramda';
+import {assoc, find, forEach, partition} from 'ramda';
import {
addExecutedCallbacks,
@@ -13,48 +8,68 @@ import {
removeWatchedCallbacks
} from '../actions/callbacks';
-import { IStoreObserverDefinition } from '../StoreObserver';
-import { IStoreState } from '../store';
+import {IStoreObserverDefinition} from '../StoreObserver';
+import {IStoreState} from '../store';
const observer: IStoreObserverDefinition = {
- observer: ({
- dispatch,
- getState
- }) => {
+ observer: ({dispatch, getState}) => {
const {
- callbacks: {
- executing
- }
+ callbacks: {executing}
} = getState();
- const [deferred, skippedOrReady] = partition(cb => cb.executionPromise instanceof Promise, executing);
+ const [deferred, skippedOrReady] = partition(
+ cb => cb.executionPromise instanceof Promise,
+ executing
+ );
- dispatch(aggregateCallbacks([
- executing.length ? removeExecutingCallbacks(executing) : null,
- deferred.length ? addWatchedCallbacks(deferred) : null,
- skippedOrReady.length ? addExecutedCallbacks(skippedOrReady.map(cb => assoc('executionResult', cb.executionPromise as any, cb))) : null
- ]));
+ dispatch(
+ aggregateCallbacks([
+ executing.length ? removeExecutingCallbacks(executing) : null,
+ deferred.length ? addWatchedCallbacks(deferred) : null,
+ skippedOrReady.length
+ ? addExecutedCallbacks(
+ skippedOrReady.map(cb =>
+ assoc(
+ 'executionResult',
+ cb.executionPromise as any,
+ cb
+ )
+ )
+ )
+ : null
+ ])
+ );
forEach(async cb => {
const result = await cb.executionPromise;
- const { callbacks: { watched } } = getState();
+ const {
+ callbacks: {watched}
+ } = getState();
// Check if it's been removed from the `watched` list since - on callback completion, another callback may be cancelled
// Find the callback instance or one that matches its promise (eg. could have been pruned)
- const currentCb = find(_cb => _cb === cb || _cb.executionPromise === cb.executionPromise, watched);
+ const currentCb = find(
+ _cb =>
+ _cb === cb || _cb.executionPromise === cb.executionPromise,
+ watched
+ );
if (!currentCb) {
return;
}
// Otherwise move to `executed` and remove from `watched`
- dispatch(aggregateCallbacks([
- removeWatchedCallbacks([currentCb]),
- addExecutedCallbacks([{
- ...currentCb,
- executionResult: result
- }])
- ]));
+ dispatch(
+ aggregateCallbacks([
+ removeWatchedCallbacks([currentCb]),
+ addExecutedCallbacks([
+ {
+ ...currentCb,
+ executionResult: result
+ }
+ ])
+ ])
+ );
}, deferred);
},
inputs: ['callbacks.executing']
diff --git a/dash-renderer/src/observers/isLoading.ts b/dash-renderer/src/observers/isLoading.ts
index fc625d45a9..687f607378 100644
--- a/dash-renderer/src/observers/isLoading.ts
+++ b/dash-renderer/src/observers/isLoading.ts
@@ -1,18 +1,11 @@
-import { IStoreObserverDefinition } from '../StoreObserver';
-import { IStoreState } from '../store';
-import { getPendingCallbacks } from '../utils/callbacks';
-import { setIsLoading } from '../actions/isLoading';
-
+import {IStoreObserverDefinition} from '../StoreObserver';
+import {IStoreState} from '../store';
+import {getPendingCallbacks} from '../utils/callbacks';
+import {setIsLoading} from '../actions/isLoading';
const observer: IStoreObserverDefinition = {
- observer: ({
- dispatch,
- getState
- }) => {
- const {
- callbacks,
- isLoading
- } = getState();
+ observer: ({dispatch, getState}) => {
+ const {callbacks, isLoading} = getState();
const pendingCallbacks = getPendingCallbacks(callbacks);
diff --git a/dash-renderer/src/observers/loadingMap.ts b/dash-renderer/src/observers/loadingMap.ts
index 50b300bfc1..d91e057811 100644
--- a/dash-renderer/src/observers/loadingMap.ts
+++ b/dash-renderer/src/observers/loadingMap.ts
@@ -1,27 +1,14 @@
-import {
- equals,
- flatten,
- isEmpty,
- map,
- reduce
-} from 'ramda';
+import {equals, flatten, isEmpty, map, reduce} from 'ramda';
-import { setLoadingMap } from '../actions/loadingMap';
-import { IStoreObserverDefinition } from '../StoreObserver';
-import { IStoreState } from '../store';
-import { ILayoutCallbackProperty } from '../types/callbacks';
+import {setLoadingMap} from '../actions/loadingMap';
+import {IStoreObserverDefinition} from '../StoreObserver';
+import {IStoreState} from '../store';
+import {ILayoutCallbackProperty} from '../types/callbacks';
const observer: IStoreObserverDefinition = {
- observer: ({
- dispatch,
- getState
- }) => {
+ observer: ({dispatch, getState}) => {
const {
- callbacks: {
- executing,
- watched,
- executed
- },
+ callbacks: {executing, watched, executed},
loadingMap,
paths
} = getState();
@@ -34,39 +21,48 @@ const observer: IStoreObserverDefinition = {
are impacted for this node and nested nodes.
*/
- const loadingPaths: ILayoutCallbackProperty[] = flatten(map(
- cb => cb.getOutputs(paths),
- [...executing, ...watched, ...executed]
- ));
+ const loadingPaths: ILayoutCallbackProperty[] = flatten(
+ map(cb => cb.getOutputs(paths), [
+ ...executing,
+ ...watched,
+ ...executed
+ ])
+ );
- const nextMap: any = isEmpty(loadingPaths) ?
- null :
- reduce(
- (res, {id, property, path}) => {
- let target = res;
- const idprop = {id, property};
+ const nextMap: any = isEmpty(loadingPaths)
+ ? null
+ : reduce(
+ (res, {id, property, path}) => {
+ let target = res;
+ const idprop = {id, property};
- // Assign all affected props for this path and nested paths
- target.__dashprivate__idprops__ = target.__dashprivate__idprops__ || [];
- target.__dashprivate__idprops__.push(idprop);
+ // Assign all affected props for this path and nested paths
+ target.__dashprivate__idprops__ =
+ target.__dashprivate__idprops__ || [];
+ target.__dashprivate__idprops__.push(idprop);
- path.forEach((p, i) => {
- target = (target[p] = target[p] ??
- (p === 'children' && typeof path[i + 1] === 'number' ? [] : {})
- );
+ path.forEach((p, i) => {
+ target = target[p] =
+ target[p] ??
+ (p === 'children' &&
+ typeof path[i + 1] === 'number'
+ ? []
+ : {});
- target.__dashprivate__idprops__ = target.__dashprivate__idprops__ || [];
- target.__dashprivate__idprops__.push(idprop);
- });
+ target.__dashprivate__idprops__ =
+ target.__dashprivate__idprops__ || [];
+ target.__dashprivate__idprops__.push(idprop);
+ });
- // Assign one affected prop for this path
- target.__dashprivate__idprop__ = target.__dashprivate__idprop__ || idprop;
+ // Assign one affected prop for this path
+ target.__dashprivate__idprop__ =
+ target.__dashprivate__idprop__ || idprop;
- return res;
- },
- {} as any,
- loadingPaths
- );
+ return res;
+ },
+ {} as any,
+ loadingPaths
+ );
if (!equals(nextMap, loadingMap)) {
dispatch(setLoadingMap(nextMap));
diff --git a/dash-renderer/src/observers/prioritizedCallbacks.ts b/dash-renderer/src/observers/prioritizedCallbacks.ts
index 0b6efeb2ba..dfda545878 100644
--- a/dash-renderer/src/observers/prioritizedCallbacks.ts
+++ b/dash-renderer/src/observers/prioritizedCallbacks.ts
@@ -1,15 +1,6 @@
-import {
- find,
- flatten,
- forEach,
- map,
- partition,
- pluck,
- sort,
- uniq
-} from 'ramda';
-
-import { IStoreState } from '../store';
+import {find, flatten, forEach, map, partition, pluck, sort, uniq} from 'ramda';
+
+import {IStoreState} from '../store';
import {
addBlockedCallbacks,
@@ -20,11 +11,9 @@ import {
removePrioritizedCallbacks
} from '../actions/callbacks';
-import { stringifyId } from '../actions/dependencies';
+import {stringifyId} from '../actions/dependencies';
-import {
- combineIdAndProp
-} from '../actions/dependencies_ts';
+import {combineIdAndProp} from '../actions/dependencies_ts';
import isAppReady from '../actions/isAppReady';
@@ -34,71 +23,94 @@ import {
ILayoutCallbackProperty,
IPrioritizedCallback
} from '../types/callbacks';
-import { IStoreObserverDefinition } from '../StoreObserver';
+import {IStoreObserverDefinition} from '../StoreObserver';
const sortPriority = (c1: ICallback, c2: ICallback): number => {
return (c1.priority ?? '') > (c2.priority ?? '') ? -1 : 1;
-}
+};
-const getStash = (cb: IPrioritizedCallback, paths: any): {
- allOutputs: ILayoutCallbackProperty[][],
- allPropIds: any[]
+const getStash = (
+ cb: IPrioritizedCallback,
+ paths: any
+): {
+ allOutputs: ILayoutCallbackProperty[][];
+ allPropIds: any[];
} => {
- const { getOutputs } = cb;
+ const {getOutputs} = cb;
const allOutputs = getOutputs(paths);
const flatOutputs: any[] = flatten(allOutputs);
const allPropIds: any[] = [];
const reqOut: any = {};
- flatOutputs.forEach(({ id, property }) => {
+ flatOutputs.forEach(({id, property}) => {
const idStr = stringifyId(id);
const idOut = (reqOut[idStr] = reqOut[idStr] || []);
idOut.push(property);
- allPropIds.push(combineIdAndProp({ id: idStr, property }));
+ allPropIds.push(combineIdAndProp({id: idStr, property}));
});
- return { allOutputs, allPropIds };
-}
+ return {allOutputs, allPropIds};
+};
-const getIds = (cb: ICallback, paths: any) => uniq(pluck('id', [
- ...flatten(cb.getInputs(paths)),
- ...flatten(cb.getState(paths))
-]));
+const getIds = (cb: ICallback, paths: any) =>
+ uniq(
+ pluck('id', [
+ ...flatten(cb.getInputs(paths)),
+ ...flatten(cb.getState(paths))
+ ])
+ );
const observer: IStoreObserverDefinition = {
- observer: async ({
- dispatch,
- getState
- }) => {
- const { callbacks: { executing, watched }, config, hooks, layout, paths } = getState();
- let { callbacks: { prioritized } } = getState();
-
- const available = Math.max(
- 0,
- 12 - executing.length - watched.length
- );
+ observer: async ({dispatch, getState}) => {
+ const {
+ callbacks: {executing, watched},
+ config,
+ hooks,
+ layout,
+ paths
+ } = getState();
+ let {
+ callbacks: {prioritized}
+ } = getState();
+
+ const available = Math.max(0, 12 - executing.length - watched.length);
// Order prioritized callbacks based on depth and breadth of callback chain
prioritized = sort(sortPriority, prioritized);
// Divide between sync and async
- const [syncCallbacks, asyncCallbacks] = partition(cb => isAppReady(
- layout,
- paths,
- getIds(cb, paths)
- ) === true, prioritized);
+ const [syncCallbacks, asyncCallbacks] = partition(
+ cb => isAppReady(layout, paths, getIds(cb, paths)) === true,
+ prioritized
+ );
const pickedSyncCallbacks = syncCallbacks.slice(0, available);
- const pickedAsyncCallbacks = asyncCallbacks.slice(0, available - pickedSyncCallbacks.length);
+ const pickedAsyncCallbacks = asyncCallbacks.slice(
+ 0,
+ available - pickedSyncCallbacks.length
+ );
if (pickedSyncCallbacks.length) {
- dispatch(aggregateCallbacks([
- removePrioritizedCallbacks(pickedSyncCallbacks),
- addExecutingCallbacks(map(
- cb => executeCallback(cb, config, hooks, paths, layout, getStash(cb, paths)),
- pickedSyncCallbacks
- ))
- ]));
+ dispatch(
+ aggregateCallbacks([
+ removePrioritizedCallbacks(pickedSyncCallbacks),
+ addExecutingCallbacks(
+ map(
+ cb =>
+ executeCallback(
+ cb,
+ config,
+ hooks,
+ paths,
+ layout,
+ getStash(cb, paths),
+ dispatch
+ ),
+ pickedSyncCallbacks
+ )
+ )
+ ])
+ );
}
if (pickedAsyncCallbacks.length) {
@@ -111,29 +123,48 @@ const observer: IStoreObserverDefinition = {
pickedAsyncCallbacks
);
- dispatch(aggregateCallbacks([
- removePrioritizedCallbacks(pickedAsyncCallbacks),
- addBlockedCallbacks(deffered)
- ]));
+ dispatch(
+ aggregateCallbacks([
+ removePrioritizedCallbacks(pickedAsyncCallbacks),
+ addBlockedCallbacks(deffered)
+ ])
+ );
forEach(async cb => {
await cb.isReady;
- const { callbacks: { blocked } } = getState();
-
- // Check if it's been removed from the `blocked` list since - on callback completion, another callback may be cancelled
- // Find the callback instance or one that matches its promise (eg. could have been pruned)
- const currentCb = find(_cb => _cb === cb || _cb.isReady === cb.isReady, blocked);
+ const {
+ callbacks: {blocked}
+ } = getState();
+
+ // Check if it's been removed from the `blocked` list since - on
+ // callback completion, another callback may be cancelled
+ // Find the callback instance or one that matches its promise
+ // (eg. could have been pruned)
+ const currentCb = find(
+ _cb => _cb === cb || _cb.isReady === cb.isReady,
+ blocked
+ );
if (!currentCb) {
return;
}
- const executingCallback = executeCallback(cb, config, hooks, paths, layout, cb);
-
- dispatch(aggregateCallbacks([
- removeBlockedCallbacks([cb]),
- addExecutingCallbacks([executingCallback])
- ]));
+ const executingCallback = executeCallback(
+ cb,
+ config,
+ hooks,
+ paths,
+ layout,
+ cb,
+ dispatch
+ );
+
+ dispatch(
+ aggregateCallbacks([
+ removeBlockedCallbacks([cb]),
+ addExecutingCallbacks([executingCallback])
+ ])
+ );
}, deffered);
}
},
diff --git a/dash-renderer/src/observers/requestedCallbacks.ts b/dash-renderer/src/observers/requestedCallbacks.ts
index 2d787a43a1..2b1cd1dc0e 100644
--- a/dash-renderer/src/observers/requestedCallbacks.ts
+++ b/dash-renderer/src/observers/requestedCallbacks.ts
@@ -4,32 +4,37 @@ import {
difference,
filter,
flatten,
+ forEach,
groupBy,
includes,
intersection,
isEmpty,
isNil,
map,
+ mergeLeft,
+ mergeWith,
+ pluck,
+ reduce,
values
} from 'ramda';
-import { IStoreState } from '../store';
+import {IStoreState} from '../store';
import {
aggregateCallbacks,
- removeRequestedCallbacks,
removePrioritizedCallbacks,
removeExecutingCallbacks,
removeWatchedCallbacks,
- addRequestedCallbacks,
addPrioritizedCallbacks,
addExecutingCallbacks,
addWatchedCallbacks,
removeBlockedCallbacks,
- addBlockedCallbacks
+ addBlockedCallbacks,
+ addRequestedCallbacks,
+ removeRequestedCallbacks
} from '../actions/callbacks';
-import { isMultiValued } from '../actions/dependencies';
+import {isMultiValued} from '../actions/dependencies';
import {
combineIdAndProp,
@@ -45,16 +50,25 @@ import {
IBlockedCallback
} from '../types/callbacks';
-import { getPendingCallbacks } from '../utils/callbacks';
-import { IStoreObserverDefinition } from '../StoreObserver';
+import wait from './../utils/wait';
+
+import {getPendingCallbacks} from '../utils/callbacks';
+import {IStoreObserverDefinition} from '../StoreObserver';
const observer: IStoreObserverDefinition = {
- observer: ({
- dispatch,
- getState
- }) => {
- const { callbacks, callbacks: { prioritized, blocked, executing, watched, stored }, paths } = getState();
- let { callbacks: { requested } } = getState();
+ observer: async ({dispatch, getState}) => {
+ await wait(0);
+
+ const {
+ callbacks,
+ callbacks: {prioritized, blocked, executing, watched, stored},
+ paths
+ } = getState();
+ let {
+ callbacks: {requested}
+ } = getState();
+
+ const initialRequested = requested.slice(0);
const pendingCallbacks = getPendingCallbacks(callbacks);
@@ -78,26 +92,53 @@ const observer: IStoreObserverDefinition = {
1. Remove duplicated `requested` callbacks - give precedence to newer callbacks over older ones
*/
- /*
- Extract all but the first callback from each IOS-key group
- these callbacks are duplicates.
- */
- const rDuplicates = flatten(map(
- group => group.slice(0, -1),
- values(
- groupBy(
- getUniqueIdentifier,
- requested
- )
- )
- ));
+ let rDuplicates: ICallback[] = [];
+ let rMergedDuplicates: ICallback[] = [];
+
+ forEach(group => {
+ if (group.length === 1) {
+ // keep callback if its the only one of its kind
+ rMergedDuplicates.push(group[0]);
+ } else {
+ const initial = group.find(cb => cb.initialCall);
+ if (initial) {
+ // drop the initial callback if it's not alone
+ rDuplicates.push(initial);
+ }
+
+ const groupWithoutInitial = group.filter(cb => cb !== initial);
+ if (groupWithoutInitial.length === 1) {
+ // if there's only one callback beside the initial one, keep that callback
+ rMergedDuplicates.push(groupWithoutInitial[0]);
+ } else {
+ // otherwise merge all remaining callbacks together
+ rDuplicates = concat(rDuplicates, groupWithoutInitial);
+ rMergedDuplicates.push(
+ mergeLeft(
+ {
+ changedPropIds: reduce(
+ mergeWith(Math.max),
+ {},
+ pluck('changedPropIds', groupWithoutInitial)
+ ),
+ executionGroup: filter(
+ exg => !!exg,
+ pluck('executionGroup', groupWithoutInitial)
+ ).slice(-1)[0]
+ },
+ groupWithoutInitial.slice(-1)[0]
+ ) as ICallback
+ );
+ }
+ }
+ }, values(groupBy(getUniqueIdentifier, requested)));
/*
TODO?
Clean up the `requested` list - during the dispatch phase,
duplicates will be removed for real
*/
- requested = difference(requested, rDuplicates);
+ requested = rMergedDuplicates;
/*
2. Remove duplicated `prioritized`, `executing` and `watching` callbacks
@@ -107,73 +148,94 @@ const observer: IStoreObserverDefinition = {
Extract all but the first callback from each IOS-key group
these callbacks are `prioritized` and duplicates.
*/
- const pDuplicates = flatten(map(
- group => group.slice(0, -1),
- values(
- groupBy(
- getUniqueIdentifier,
- concat(prioritized, requested)
+ const pDuplicates = flatten(
+ map(
+ group => group.slice(0, -1),
+ values(
+ groupBy(
+ getUniqueIdentifier,
+ concat(prioritized, requested)
+ )
)
)
- ));
-
- const bDuplicates = flatten(map(
- group => group.slice(0, -1),
- values(
- groupBy(
- getUniqueIdentifier,
- concat(blocked, requested)
+ );
+
+ const bDuplicates = flatten(
+ map(
+ group => group.slice(0, -1),
+ values(
+ groupBy(
+ getUniqueIdentifier,
+ concat(blocked, requested)
+ )
)
)
- )) as IBlockedCallback[];
-
- const eDuplicates = flatten(map(
- group => group.slice(0, -1),
- values(
- groupBy(
- getUniqueIdentifier,
- concat(executing, requested)
+ ) as IBlockedCallback[];
+
+ const eDuplicates = flatten(
+ map(
+ group => group.slice(0, -1),
+ values(
+ groupBy(
+ getUniqueIdentifier,
+ concat(executing, requested)
+ )
)
)
- )) as IExecutingCallback[];
-
- const wDuplicates = flatten(map(
- group => group.slice(0, -1),
- values(
- groupBy(
- getUniqueIdentifier,
- concat(watched, requested)
+ ) as IExecutingCallback[];
+
+ const wDuplicates = flatten(
+ map(
+ group => group.slice(0, -1),
+ values(
+ groupBy(
+ getUniqueIdentifier,
+ concat(watched, requested)
+ )
)
)
- )) as IExecutingCallback[];
+ ) as IExecutingCallback[];
/*
3. Modify or remove callbacks that are outputting to non-existing layout `id`.
*/
- const { added: rAdded, removed: rRemoved } = pruneCallbacks(requested, paths);
- const { added: pAdded, removed: pRemoved } = pruneCallbacks(prioritized, paths);
- const { added: bAdded, removed: bRemoved } = pruneCallbacks(blocked, paths);
- const { added: eAdded, removed: eRemoved } = pruneCallbacks(executing, paths);
- const { added: wAdded, removed: wRemoved } = pruneCallbacks(watched, paths);
+ const {added: rAdded, removed: rRemoved} = pruneCallbacks(
+ requested,
+ paths
+ );
+ const {added: pAdded, removed: pRemoved} = pruneCallbacks(
+ prioritized,
+ paths
+ );
+ const {added: bAdded, removed: bRemoved} = pruneCallbacks(
+ blocked,
+ paths
+ );
+ const {added: eAdded, removed: eRemoved} = pruneCallbacks(
+ executing,
+ paths
+ );
+ const {added: wAdded, removed: wRemoved} = pruneCallbacks(
+ watched,
+ paths
+ );
/*
TODO?
Clean up the `requested` list - during the dispatch phase,
it will be updated for real
*/
- requested = concat(
- difference(
- requested,
- rRemoved
- ),
- rAdded
- );
+ requested = concat(difference(requested, rRemoved), rAdded);
/*
4. Find `requested` callbacks that do not depend on a outstanding output (as either input or state)
*/
- let readyCallbacks = getReadyCallbacks(paths, requested, pendingCallbacks);
+ let readyCallbacks = getReadyCallbacks(
+ paths,
+ requested,
+ pendingCallbacks
+ );
let oldBlocked: ICallback[] = [];
let newBlocked: ICallback[] = [];
@@ -210,21 +272,32 @@ const observer: IStoreObserverDefinition = {
candidates = candidates.slice(1);
// Remaining candidates are not blocked by current assumptions
- candidates = getReadyCallbacks(paths, candidates, readyCallbacks);
+ candidates = getReadyCallbacks(
+ paths,
+ candidates,
+ readyCallbacks
+ );
// Blocked requests need to make sure they have the callback as a predecessor
const blockedByAssumptions = difference(candidates, candidates);
const modified = filter(
- cb => !cb.predecessors || !includes(readyCallback.callback, cb.predecessors),
+ cb =>
+ !cb.predecessors ||
+ !includes(readyCallback.callback, cb.predecessors),
blockedByAssumptions
);
oldBlocked = concat(oldBlocked, modified);
- newBlocked = concat(newBlocked, modified.map(cb => ({
- ...cb,
- predecessors: concat(cb.predecessors ?? [], [readyCallback.callback])
- })));
+ newBlocked = concat(
+ newBlocked,
+ modified.map(cb => ({
+ ...cb,
+ predecessors: concat(cb.predecessors ?? [], [
+ readyCallback.callback
+ ])
+ }))
+ );
}
}
@@ -233,13 +306,7 @@ const observer: IStoreObserverDefinition = {
Clean up the `requested` list - during the dispatch phase,
it will be updated for real
*/
- requested = concat(
- difference(
- requested,
- oldBlocked
- ),
- newBlocked
- );
+ requested = concat(difference(requested, oldBlocked), newBlocked);
/*
5. Prune callbacks that became irrelevant in their `executionGroup`
@@ -255,7 +322,11 @@ const observer: IStoreObserverDefinition = {
const dropped: ICallback[] = filter(cb => {
// If there is no `stored` callback for the group, no outputs were dropped -> `cb` is kept
- if (!cb.executionGroup || !pendingGroups[cb.executionGroup] || !pendingGroups[cb.executionGroup].length) {
+ if (
+ !cb.executionGroup ||
+ !pendingGroups[cb.executionGroup] ||
+ !pendingGroups[cb.executionGroup].length
+ ) {
return false;
}
@@ -263,84 +334,76 @@ const observer: IStoreObserverDefinition = {
const inputs = map(combineIdAndProp, flatten(cb.getInputs(paths)));
// Get all the potentially updated props for the group so far
- const allProps = flatten(map(
- gcb => gcb.executionMeta.allProps,
- pendingGroups[cb.executionGroup]
- ));
+ const allProps = flatten(
+ map(
+ gcb => gcb.executionMeta.allProps,
+ pendingGroups[cb.executionGroup]
+ )
+ );
// Get all the updated props for the group so far
- const updated = flatten(map(
- gcb => gcb.executionMeta.updatedProps,
- pendingGroups[cb.executionGroup]
- ));
+ const updated = flatten(
+ map(
+ gcb => gcb.executionMeta.updatedProps,
+ pendingGroups[cb.executionGroup]
+ )
+ );
// If there's no overlap between the updated props and the inputs,
// + there's no props that aren't covered by the potentially updated props,
// and not all inputs are multi valued
// -> drop `cb`
const res =
- isEmpty(intersection(
- inputs,
- updated
- )) &&
- isEmpty(difference(
- inputs,
- allProps
- ))
- && !all(
- isMultiValued,
- cb.callback.inputs
- );
+ isEmpty(intersection(inputs, updated)) &&
+ isEmpty(difference(inputs, allProps)) &&
+ !all(isMultiValued, cb.callback.inputs);
return res;
- },
- readyCallbacks
- );
+ }, readyCallbacks);
/*
TODO?
Clean up the `requested` list - during the dispatch phase,
it will be updated for real
*/
- requested = difference(
- requested,
- dropped
- );
-
- readyCallbacks = difference(
- readyCallbacks,
- dropped
+ requested = difference(requested, dropped);
+
+ readyCallbacks = difference(readyCallbacks, dropped);
+
+ requested = difference(requested, readyCallbacks);
+
+ const added = difference(requested, initialRequested);
+ const removed = difference(initialRequested, requested);
+
+ dispatch(
+ aggregateCallbacks([
+ // Clean up requested callbacks
+ added.length ? addRequestedCallbacks(added) : null,
+ removed.length ? removeRequestedCallbacks(removed) : null,
+ // Clean up duplicated callbacks
+ pDuplicates.length
+ ? removePrioritizedCallbacks(pDuplicates)
+ : null,
+ bDuplicates.length ? removeBlockedCallbacks(bDuplicates) : null,
+ eDuplicates.length
+ ? removeExecutingCallbacks(eDuplicates)
+ : null,
+ wDuplicates.length ? removeWatchedCallbacks(wDuplicates) : null,
+ // Prune callbacks
+ pRemoved.length ? removePrioritizedCallbacks(pRemoved) : null,
+ pAdded.length ? addPrioritizedCallbacks(pAdded) : null,
+ bRemoved.length ? removeBlockedCallbacks(bRemoved) : null,
+ bAdded.length ? addBlockedCallbacks(bAdded) : null,
+ eRemoved.length ? removeExecutingCallbacks(eRemoved) : null,
+ eAdded.length ? addExecutingCallbacks(eAdded) : null,
+ wRemoved.length ? removeWatchedCallbacks(wRemoved) : null,
+ wAdded.length ? addWatchedCallbacks(wAdded) : null,
+ // Promote callbacks
+ readyCallbacks.length
+ ? addPrioritizedCallbacks(readyCallbacks)
+ : null
+ ])
);
-
- dispatch(aggregateCallbacks([
- // Clean up duplicated callbacks
- rDuplicates.length ? removeRequestedCallbacks(rDuplicates) : null,
- pDuplicates.length ? removePrioritizedCallbacks(pDuplicates) : null,
- bDuplicates.length ? removeBlockedCallbacks(bDuplicates) : null,
- eDuplicates.length ? removeExecutingCallbacks(eDuplicates) : null,
- wDuplicates.length ? removeWatchedCallbacks(wDuplicates) : null,
- // Prune callbacks
- rRemoved.length ? removeRequestedCallbacks(rRemoved) : null,
- rAdded.length ? addRequestedCallbacks(rAdded) : null,
- pRemoved.length ? removePrioritizedCallbacks(pRemoved) : null,
- pAdded.length ? addPrioritizedCallbacks(pAdded) : null,
- bRemoved.length ? removeBlockedCallbacks(bRemoved) : null,
- bAdded.length ? addBlockedCallbacks(bAdded) : null,
- eRemoved.length ? removeExecutingCallbacks(eRemoved) : null,
- eAdded.length ? addExecutingCallbacks(eAdded) : null,
- wRemoved.length ? removeWatchedCallbacks(wRemoved) : null,
- wAdded.length ? addWatchedCallbacks(wAdded) : null,
- // Prune circular callbacks
- rCirculars.length ? removeRequestedCallbacks(rCirculars) : null,
- // Prune circular assumptions
- oldBlocked.length ? removeRequestedCallbacks(oldBlocked) : null,
- newBlocked.length ? addRequestedCallbacks(newBlocked) : null,
- // Drop non-triggered initial callbacks
- dropped.length ? removeRequestedCallbacks(dropped) : null,
- // Promote callbacks
- readyCallbacks.length ? removeRequestedCallbacks(readyCallbacks) : null,
- readyCallbacks.length ? addPrioritizedCallbacks(readyCallbacks) : null
- ]));
},
inputs: ['callbacks.requested', 'callbacks.completed']
};
diff --git a/dash-renderer/src/observers/storedCallbacks.ts b/dash-renderer/src/observers/storedCallbacks.ts
index 83b19518b9..58116a73c8 100644
--- a/dash-renderer/src/observers/storedCallbacks.ts
+++ b/dash-renderer/src/observers/storedCallbacks.ts
@@ -8,30 +8,23 @@ import {
toPairs
} from 'ramda';
-import { IStoreState } from '../store';
+import {IStoreState} from '../store';
-import {
- aggregateCallbacks,
- removeStoredCallbacks
-} from '../actions/callbacks';
+import {aggregateCallbacks, removeStoredCallbacks} from '../actions/callbacks';
-import {
- ICallback,
- IStoredCallback
-} from '../types/callbacks';
+import {ICallback, IStoredCallback} from '../types/callbacks';
-import { getPendingCallbacks } from '../utils/callbacks';
-import { IStoreObserverDefinition } from '../StoreObserver';
+import {getPendingCallbacks} from '../utils/callbacks';
+import {IStoreObserverDefinition} from '../StoreObserver';
const observer: IStoreObserverDefinition = {
- observer: ({
- dispatch,
- getState
- }) => {
- const { callbacks } = getState();
+ observer: ({dispatch, getState}) => {
+ const {callbacks} = getState();
const pendingCallbacks = getPendingCallbacks(callbacks);
- let { callbacks: { stored } } = getState();
+ let {
+ callbacks: {stored}
+ } = getState();
const [nullGroupCallbacks, groupCallbacks] = partition(
cb => isNil(cb.executionGroup),
@@ -41,27 +34,30 @@ const observer: IStoreObserverDefinition = {
const executionGroups = groupBy(
cb => cb.executionGroup as any,
groupCallbacks
- )
+ );
const pendingGroups = groupBy(
cb => cb.executionGroup as any,
filter(cb => !isNil(cb.executionGroup), pendingCallbacks)
);
- let dropped = reduce((res, [
- executionGroup,
- executionGroupCallbacks
- ]) => !pendingGroups[executionGroup] ?
- concat(res, executionGroupCallbacks) :
- res,
+ let dropped = reduce(
+ (res, [executionGroup, executionGroupCallbacks]) =>
+ !pendingGroups[executionGroup]
+ ? concat(res, executionGroupCallbacks)
+ : res,
[] as IStoredCallback[],
toPairs(executionGroups)
);
- dispatch(aggregateCallbacks([
- nullGroupCallbacks.length ? removeStoredCallbacks(nullGroupCallbacks) : null,
- dropped.length ? removeStoredCallbacks(dropped) : null
- ]));
+ dispatch(
+ aggregateCallbacks([
+ nullGroupCallbacks.length
+ ? removeStoredCallbacks(nullGroupCallbacks)
+ : null,
+ dropped.length ? removeStoredCallbacks(dropped) : null
+ ])
+ );
},
inputs: ['callbacks.stored', 'callbacks.completed']
};
diff --git a/dash-renderer/src/persistence.js b/dash-renderer/src/persistence.js
index 658b83d896..85d3b47a00 100644
--- a/dash-renderer/src/persistence.js
+++ b/dash-renderer/src/persistence.js
@@ -64,7 +64,7 @@ import {
lensPath,
mergeRight,
set,
- type,
+ type
} from 'ramda';
import {createAction} from 'redux-actions';
@@ -78,7 +78,7 @@ function err(e) {
return createAction('ON_ERROR')({
type: 'frontEnd',
- error,
+ error
});
}
@@ -208,14 +208,14 @@ function longString() {
}
export const stores = {
- memory: new MemStore(),
+ memory: new MemStore()
// Defer testing & making local/session stores until requested.
// That way if we have errors here they can show up in devtools.
};
const backEnds = {
local: 'localStorage',
- session: 'sessionStorage',
+ session: 'sessionStorage'
};
function tryGetWebStore(backEnd, dispatch) {
@@ -262,7 +262,7 @@ function getStore(type, dispatch) {
const noopTransform = {
extract: propValue => propValue,
- apply: (storedValue, _propValue) => storedValue,
+ apply: (storedValue, _propValue) => storedValue
};
const getTransform = (element, propName, propPart) => {
@@ -302,7 +302,7 @@ const getProps = layout => {
element,
persistence,
persisted_props,
- persistence_type,
+ persistence_type
};
};
@@ -314,7 +314,7 @@ export function recordUiEdit(layout, newProps, dispatch) {
element,
persistence,
persisted_props,
- persistence_type,
+ persistence_type
} = getProps(layout);
if (!canPersist || !persistence) {
return;
@@ -389,7 +389,7 @@ function persistenceMods(layout, component, path, dispatch) {
element,
persistence,
persisted_props,
- persistence_type,
+ persistence_type
} = getProps(component);
let layoutOut = layout;
@@ -455,7 +455,7 @@ export function prunePersistence(layout, newProps, dispatch) {
persistence,
persisted_props,
persistence_type,
- element,
+ element
} = getProps(layout);
const getFinal = (propName, prevVal) =>
diff --git a/dash-renderer/src/reducers/callbacks.ts b/dash-renderer/src/reducers/callbacks.ts
index 196c652938..5386960354 100644
--- a/dash-renderer/src/reducers/callbacks.ts
+++ b/dash-renderer/src/reducers/callbacks.ts
@@ -1,8 +1,4 @@
-import {
- concat,
- difference,
- reduce
-} from 'ramda';
+import {concat, difference, reduce} from 'ramda';
import {
ICallback,
@@ -37,8 +33,8 @@ export enum CallbackAggregateActionType {
}
export interface IAggregateAction {
- type: CallbackAggregateActionType.Aggregate,
- payload: (ICallbackAction | ICompletedAction | null)[]
+ type: CallbackAggregateActionType.Aggregate;
+ payload: (ICallbackAction | ICompletedAction | null)[];
}
export interface ICallbackAction {
@@ -47,14 +43,11 @@ export interface ICallbackAction {
}
export interface ICompletedAction {
- type: CallbackAggregateActionType.AddCompleted,
- payload: number
+ type: CallbackAggregateActionType.AddCompleted;
+ payload: number;
}
-type CallbackAction =
- IAggregateAction |
- ICallbackAction |
- ICompletedAction;
+type CallbackAction = IAggregateAction | ICallbackAction | ICompletedAction;
export interface ICallbacksState {
requested: ICallback[];
@@ -79,7 +72,7 @@ const DEFAULT_STATE: ICallbacksState = {
};
const transforms: {
- [key: string]: (a1: ICallback[], a2: ICallback[]) => ICallback[]
+ [key: string]: (a1: ICallback[], a2: ICallback[]) => ICallback[];
} = {
[CallbackActionType.AddBlocked]: concat,
[CallbackActionType.AddExecuted]: concat,
@@ -98,7 +91,7 @@ const transforms: {
};
const fields: {
- [key: string]: keyof Omit
+ [key: string]: keyof Omit;
} = {
[CallbackActionType.AddBlocked]: 'blocked',
[CallbackActionType.AddExecuted]: 'executed',
@@ -114,41 +107,41 @@ const fields: {
[CallbackActionType.RemoveRequested]: 'requested',
[CallbackActionType.RemoveStored]: 'stored',
[CallbackActionType.RemoveWatched]: 'watched'
-}
+};
-const mutateCompleted = (
- state: ICallbacksState,
- action: ICompletedAction
-) => ({ ...state, completed: state.completed + action.payload });
+const mutateCompleted = (state: ICallbacksState, action: ICompletedAction) => ({
+ ...state,
+ completed: state.completed + action.payload
+});
-const mutateCallbacks = (
- state: ICallbacksState,
- action: ICallbackAction
-) => {
+const mutateCallbacks = (state: ICallbacksState, action: ICallbackAction) => {
const transform = transforms[action.type];
const field = fields[action.type];
- return (!transform || !field || action.payload.length === 0) ?
- state : {
- ...state,
- [field]: transform(state[field], action.payload)
- };
-}
-
-
+ return !transform || !field || action.payload.length === 0
+ ? state
+ : {
+ ...state,
+ [field]: transform(state[field], action.payload)
+ };
+};
export default (
state: ICallbacksState = DEFAULT_STATE,
action: CallbackAction
-) => reduce((s, a) => {
- if (a === null) {
- return s;
- } else if (a.type === CallbackAggregateActionType.AddCompleted) {
- return mutateCompleted(s, a);
- } else {
- return mutateCallbacks(s, a);
- }
-}, state, action.type === CallbackAggregateActionType.Aggregate ?
- action.payload :
- [action]
-);
+) =>
+ reduce(
+ (s, a) => {
+ if (a === null) {
+ return s;
+ } else if (a.type === CallbackAggregateActionType.AddCompleted) {
+ return mutateCompleted(s, a);
+ } else {
+ return mutateCallbacks(s, a);
+ }
+ },
+ state,
+ action.type === CallbackAggregateActionType.Aggregate
+ ? action.payload
+ : [action]
+ );
diff --git a/dash-renderer/src/reducers/changed.js b/dash-renderer/src/reducers/changed.js
new file mode 100644
index 0000000000..80fb1db107
--- /dev/null
+++ b/dash-renderer/src/reducers/changed.js
@@ -0,0 +1,13 @@
+const initialChange = {
+ id: null,
+ props: {}
+};
+
+function changed(state = initialChange) {
+ // This is empty just to initialize the store. Changes
+ // are actually recorded in reducer.js so that we can
+ // resolve paths to id.
+ return state;
+}
+
+export default changed;
diff --git a/dash-renderer/src/reducers/constants.js b/dash-renderer/src/reducers/constants.js
index da4dfb20b6..e8943eac5c 100644
--- a/dash-renderer/src/reducers/constants.js
+++ b/dash-renderer/src/reducers/constants.js
@@ -1,7 +1,7 @@
export function getAppState(state) {
const stateList = {
STARTED: 'STARTED',
- HYDRATED: 'HYDRATED',
+ HYDRATED: 'HYDRATED'
};
if (stateList[state]) {
return stateList[state];
diff --git a/dash-renderer/src/reducers/error.js b/dash-renderer/src/reducers/error.js
index 4188703054..a5dbfc12a6 100644
--- a/dash-renderer/src/reducers/error.js
+++ b/dash-renderer/src/reducers/error.js
@@ -3,7 +3,7 @@ import {mergeRight} from 'ramda';
const initialError = {
frontEnd: [],
backEnd: [],
- backEndConnected: true,
+ backEndConnected: true
};
export default function error(state = initialError, action) {
@@ -19,19 +19,19 @@ export default function error(state = initialError, action) {
return {
frontEnd: [
mergeRight(action.payload, {timestamp: new Date()}),
- ...frontEnd,
+ ...frontEnd
],
backEnd,
- backEndConnected,
+ backEndConnected
};
} else if (action.payload.type === 'backEnd') {
return {
frontEnd,
backEnd: [
mergeRight(action.payload, {timestamp: new Date()}),
- ...backEnd,
+ ...backEnd
],
- backEndConnected,
+ backEndConnected
};
}
return state;
diff --git a/dash-renderer/src/reducers/history.js b/dash-renderer/src/reducers/history.js
index 091cfb3221..799ede6705 100644
--- a/dash-renderer/src/reducers/history.js
+++ b/dash-renderer/src/reducers/history.js
@@ -1,7 +1,7 @@
const initialHistory = {
past: [],
present: {},
- future: [],
+ future: []
};
function history(state = initialHistory, action) {
@@ -13,7 +13,7 @@ function history(state = initialHistory, action) {
return {
past: newPast,
present: previous,
- future: [present, ...future],
+ future: [present, ...future]
};
}
@@ -24,7 +24,7 @@ function history(state = initialHistory, action) {
return {
past: [...past, present],
present: next,
- future: newFuture,
+ future: newFuture
};
}
@@ -35,7 +35,7 @@ function history(state = initialHistory, action) {
return {
past: newPast,
present: previous,
- future: [...future],
+ future: [...future]
};
}
diff --git a/dash-renderer/src/reducers/isLoading.ts b/dash-renderer/src/reducers/isLoading.ts
index 0a25260551..8f0c84124e 100644
--- a/dash-renderer/src/reducers/isLoading.ts
+++ b/dash-renderer/src/reducers/isLoading.ts
@@ -8,15 +8,11 @@ export interface ILoadingMapAction {
}
type IsLoadingState = boolean;
-export {
- IsLoadingState
-};
+export {IsLoadingState};
const DEFAULT_STATE: IsLoadingState = true;
export default (
state: IsLoadingState = DEFAULT_STATE,
action: ILoadingMapAction
-) => action.type === IsLoadingActionType.Set ?
- action.payload :
- state;
+) => (action.type === IsLoadingActionType.Set ? action.payload : state);
diff --git a/dash-renderer/src/reducers/layout.js b/dash-renderer/src/reducers/layout.js
index d9a6b6407f..6c082f313c 100644
--- a/dash-renderer/src/reducers/layout.js
+++ b/dash-renderer/src/reducers/layout.js
@@ -9,7 +9,7 @@ const layout = (state = {}, action) => {
includes(action.type, [
'UNDO_PROP_CHANGE',
'REDO_PROP_CHANGE',
- getAction('ON_PROP_CHANGE'),
+ getAction('ON_PROP_CHANGE')
])
) {
const propPath = append('props', action.payload.itempath);
diff --git a/dash-renderer/src/reducers/loadingMap.ts b/dash-renderer/src/reducers/loadingMap.ts
index 1fb31a208d..14981e9268 100644
--- a/dash-renderer/src/reducers/loadingMap.ts
+++ b/dash-renderer/src/reducers/loadingMap.ts
@@ -8,15 +8,11 @@ export interface ILoadingMapAction {
}
type LoadingMapState = any;
-export {
- LoadingMapState
-};
+export {LoadingMapState};
const DEFAULT_STATE: LoadingMapState = {};
export default (
state: LoadingMapState = DEFAULT_STATE,
action: ILoadingMapAction
-) => action.type === LoadingMapActionType.Set ?
- action.payload :
- state;
+) => (action.type === LoadingMapActionType.Set ? action.payload : state);
diff --git a/dash-renderer/src/reducers/profile.js b/dash-renderer/src/reducers/profile.js
new file mode 100644
index 0000000000..b71a61106d
--- /dev/null
+++ b/dash-renderer/src/reducers/profile.js
@@ -0,0 +1,86 @@
+import {clone} from 'ramda';
+
+import {STATUSMAP} from '../constants/constants';
+
+const defaultProfile = {
+ count: 0,
+ total: 0,
+ compute: 0,
+ network: {
+ time: 0,
+ upload: 0,
+ download: 0
+ },
+ resources: {},
+ status: {
+ latest: null
+ },
+ result: {}
+};
+
+const defaultState = {
+ updated: [],
+ resources: {},
+ callbacks: {}
+};
+
+const profile = (state = defaultState, action) => {
+ if (action.type === 'UPDATE_RESOURCE_USAGE') {
+ // Keep a record of the most recent change. This
+ // is subtly different from history.present becasue
+ // it watches all props, not just inputs.
+ const {id, usage, status} = action.payload;
+ const statusMapped = STATUSMAP[status] || status;
+
+ // Keep track of the callback that actually changed.
+ const newState = {
+ updated: [id],
+ resources: state.resources,
+ callbacks: state.callbacks
+ };
+
+ newState.callbacks[id] =
+ newState.callbacks[id] || clone(defaultProfile);
+
+ const cb = newState.callbacks[id];
+ const cbResources = cb.resources;
+ const totalResources = newState.resources;
+
+ // Update resource usage & params.
+ cb.count += 1;
+ cb.status.latest = statusMapped;
+ cb.status[statusMapped] = (cb.status[statusMapped] || 0) + 1;
+ cb.result = action.payload.result;
+ cb.inputs = action.payload.inputs;
+ cb.state = action.payload.state;
+
+ if (usage) {
+ const {
+ __dash_client,
+ __dash_server,
+ __dash_upload,
+ __dash_download,
+ ...user
+ } = usage;
+
+ cb.total += __dash_client;
+ cb.compute += __dash_server;
+ cb.network.time += __dash_client - __dash_server;
+ cb.network.upload += __dash_upload;
+ cb.network.download += __dash_download;
+
+ for (const r in user) {
+ if (user.hasOwnProperty(r)) {
+ cbResources[r] = (cbResources[r] || 0) + user[r];
+ totalResources[r] = (totalResources[r] || 0) + user[r];
+ }
+ }
+ }
+
+ return newState;
+ }
+
+ return state;
+};
+
+export default profile;
diff --git a/dash-renderer/src/reducers/reducer.js b/dash-renderer/src/reducers/reducer.js
index d238b75225..c722119270 100644
--- a/dash-renderer/src/reducers/reducer.js
+++ b/dash-renderer/src/reducers/reducer.js
@@ -11,6 +11,8 @@ import graphs from './dependencyGraph';
import error from './error';
import history from './history';
import hooks from './hooks';
+import profile from './profile';
+import changed from './changed';
import isLoading from './isLoading';
import layout from './layout';
import loadingMap from './loadingMap';
@@ -20,7 +22,7 @@ export const apiRequests = [
'dependenciesRequest',
'layoutRequest',
'reloadRequest',
- 'loginRequest',
+ 'loginRequest'
];
function mainReducer() {
@@ -32,10 +34,12 @@ function mainReducer() {
graphs,
history,
hooks,
+ profile,
+ changed,
isLoading,
layout,
loadingMap,
- paths,
+ paths
};
forEach(r => {
parts[r] = createApiReducer(r);
@@ -44,16 +48,22 @@ function mainReducer() {
return combineReducers(parts);
}
-function getInputHistoryState(itempath, props, state) {
- const {graphs, layout, paths} = state;
- const idProps = path(itempath.concat(['props']), layout);
- const {id} = idProps || {};
+function getInputHistoryState(payload, state, recordChanges) {
+ const {graphs, paths, layout} = state;
+ const {itempath, props} = payload;
+ const refProps = path(itempath.concat(['props']), layout) || {};
+ const {id} = refProps;
+
let historyEntry;
if (id) {
+ if (recordChanges) {
+ state.changed = {id, props};
+ }
+
historyEntry = {id, props: {}};
keys(props).forEach(propKey => {
if (getCallbacksByInput(graphs, paths, id, propKey).length) {
- historyEntry.props[propKey] = idProps[propKey];
+ historyEntry.props[propKey] = refProps[propKey];
}
});
}
@@ -63,9 +73,10 @@ function getInputHistoryState(itempath, props, state) {
function recordHistory(reducer) {
return function(state, action) {
// Record initial state
- if (action.type === 'ON_PROP_CHANGE') {
- const {itempath, props} = action.payload;
- const historyEntry = getInputHistoryState(itempath, props, state);
+ const {type, payload} = action;
+ if (type === 'ON_PROP_CHANGE') {
+ // history records all prop changes that are inputs.
+ const historyEntry = getInputHistoryState(payload, state, true);
if (historyEntry && !isEmpty(historyEntry.props)) {
state.history.present = historyEntry;
}
@@ -73,25 +84,17 @@ function recordHistory(reducer) {
const nextState = reducer(state, action);
- if (
- action.type === 'ON_PROP_CHANGE' &&
- action.payload.source !== 'response'
- ) {
- const {itempath, props} = action.payload;
+ if (type === 'ON_PROP_CHANGE' && payload.source !== 'response') {
/*
* if the prop change is an input, then
* record it so that it can be played back
*/
- const historyEntry = getInputHistoryState(
- itempath,
- props,
- nextState
- );
+ const historyEntry = getInputHistoryState(payload, nextState);
if (historyEntry && !isEmpty(historyEntry.props)) {
nextState.history = {
past: [...nextState.history.past, state.history.present],
present: historyEntry,
- future: [],
+ future: []
};
}
}
diff --git a/dash-renderer/src/registry.js b/dash-renderer/src/registry.js
index 35d60e4924..00bd498cb9 100644
--- a/dash-renderer/src/registry.js
+++ b/dash-renderer/src/registry.js
@@ -13,5 +13,5 @@ export default {
}
throw new Error(`${namespace} was not found.`);
- },
+ }
};
diff --git a/dash-renderer/src/store.ts b/dash-renderer/src/store.ts
index 3b26f75a92..3639b92fa2 100644
--- a/dash-renderer/src/store.ts
+++ b/dash-renderer/src/store.ts
@@ -1,15 +1,16 @@
-import { once } from 'ramda';
-import { createStore, applyMiddleware, Store, Observer } from 'redux';
+import {once} from 'ramda';
+import {createStore, applyMiddleware, Store, Observer} from 'redux';
import thunk from 'redux-thunk';
import {createReducer} from './reducers/reducer';
import StoreObserver from './StoreObserver';
-import { ICallbacksState } from './reducers/callbacks';
-import { LoadingMapState } from './reducers/loadingMap';
-import { IsLoadingState } from './reducers/isLoading';
+import {ICallbacksState} from './reducers/callbacks';
+import {LoadingMapState} from './reducers/loadingMap';
+import {IsLoadingState} from './reducers/isLoading';
+import documentTitle from './observers/documentTitle';
import executedCallbacks from './observers/executedCallbacks';
import executingCallbacks from './observers/executingCallbacks';
-import isLoading from './observers/isLoading'
+import isLoading from './observers/isLoading';
import loadingMap from './observers/loadingMap';
import prioritizedCallbacks from './observers/prioritizedCallbacks';
import requestedCallbacks from './observers/requestedCallbacks';
@@ -33,6 +34,7 @@ const storeObserver = new StoreObserver();
const setObservers = once(() => {
const observe = storeObserver.observe;
+ observe(documentTitle);
observe(isLoading);
observe(loadingMap);
observe(requestedCallbacks);
diff --git a/dash-renderer/src/styles/styles.js b/dash-renderer/src/styles/styles.js
index 868e2ec662..9b84068224 100644
--- a/dash-renderer/src/styles/styles.js
+++ b/dash-renderer/src/styles/styles.js
@@ -16,7 +16,7 @@ export const base = {
html: {
fontFamily: "'Open Sans', Helvetica, sans-serif",
fontWeight: 400,
- color: '#2A3F5F',
+ color: '#2A3F5F'
},
h2: {
@@ -24,13 +24,13 @@ export const base = {
fontWeight: '600',
fontSize: '28px',
marginTop: '14px',
- marginBottom: '14px',
+ marginBottom: '14px'
},
h4: {
fontSize: '18px',
marginTop: '9px',
- marginBottom: '18px',
+ marginBottom: '18px'
},
button: {
@@ -46,27 +46,27 @@ export const base = {
lineHeight: '1',
cursor: 'pointer',
outline: 'none',
- margin: '0px',
+ margin: '0px'
},
a: {
color: '#119DFF',
textDecoration: 'none',
- cursor: 'pointer',
+ cursor: 'pointer'
},
caption: {
fontSize: '13px',
marginTop: '20px',
- color: '#A2B1C6',
+ color: '#A2B1C6'
},
container: {
marginLeft: 'auto',
marginRight: 'auto',
width: '90%',
- maxWidth: '300px',
- },
+ maxWidth: '300px'
+ }
};
export default base;
diff --git a/dash-renderer/src/types/callbacks.ts b/dash-renderer/src/types/callbacks.ts
index 14882607d5..e9790ff704 100644
--- a/dash-renderer/src/types/callbacks.ts
+++ b/dash-renderer/src/types/callbacks.ts
@@ -1,4 +1,4 @@
-type CallbackId = string | { [key: string]: any }
+type CallbackId = string | {[key: string]: any};
export interface ICallbackDefinition {
clientside_function?: {
@@ -40,9 +40,7 @@ export interface ICallback extends ICallbackTemplate {
}
// tslint:disable-next-line:no-empty-interface
-export interface IPrioritizedCallback extends ICallback {
-
-}
+export interface IPrioritizedCallback extends ICallback {}
export interface IBlockedCallback extends IPrioritizedCallback {
allOutputs: ILayoutCallbackProperty[][];
@@ -55,9 +53,7 @@ export interface IExecutingCallback extends IPrioritizedCallback {
}
// tslint:disable-next-line:no-empty-interface
-export interface IWatchedCallback extends IExecutingCallback {
-
-}
+export interface IWatchedCallback extends IExecutingCallback {}
export interface IExecutedCallback extends IWatchedCallback {
executionResult: CallbackResult | null;
@@ -67,7 +63,7 @@ export interface IStoredCallback extends IExecutedCallback {
executionMeta: {
allProps: string[];
updatedProps: string[];
- }
+ };
}
export interface ICallbackPayload {
@@ -82,4 +78,4 @@ export type CallbackResult = {
data?: any;
error?: Error;
payload: ICallbackPayload | null;
-}
+};
diff --git a/dash-renderer/src/utils/TreeContainer.ts b/dash-renderer/src/utils/TreeContainer.ts
index cf9df689c1..8e28555160 100644
--- a/dash-renderer/src/utils/TreeContainer.ts
+++ b/dash-renderer/src/utils/TreeContainer.ts
@@ -1,7 +1,7 @@
-import { path, type, has } from 'ramda';
+import {path, type, has} from 'ramda';
import Registry from '../registry';
-import { stringifyId } from '../actions/dependencies';
+import {stringifyId} from '../actions/dependencies';
function isLoadingComponent(layout: any) {
validateComponent(layout);
@@ -10,7 +10,11 @@ function isLoadingComponent(layout: any) {
const NULL_LOADING_STATE = false;
-export function getLoadingState(componentLayout: any, componentPath: any, loadingMap: any) {
+export function getLoadingState(
+ componentLayout: any,
+ componentPath: any,
+ loadingMap: any
+) {
if (!loadingMap) {
return NULL_LOADING_STATE;
}
@@ -43,21 +47,21 @@ export function getLoadingState(componentLayout: any, componentPath: any, loadin
return NULL_LOADING_STATE;
}
-export const getLoadingHash = (
- componentPath: any,
- loadingMap: any
-) => (
- ((loadingMap && (path(componentPath, loadingMap) as any)?.__dashprivate__idprops__) ?? []) as any[]
-).map(({ id, property }) => `${id}.${property}`).join(',');
+export const getLoadingHash = (componentPath: any, loadingMap: any) =>
+ (((loadingMap &&
+ (path(componentPath, loadingMap) as any)?.__dashprivate__idprops__) ??
+ []) as any[])
+ .map(({id, property}) => `${id}.${property}`)
+ .join(',');
export function validateComponent(componentDefinition: any) {
if (type(componentDefinition) === 'Array') {
throw new Error(
'The children property of a component is a list of lists, instead ' +
- 'of just a list. ' +
- 'Check the component that has the following contents, ' +
- 'and remove one of the levels of nesting: \n' +
- JSON.stringify(componentDefinition, null, 2)
+ 'of just a list. ' +
+ 'Check the component that has the following contents, ' +
+ 'and remove one of the levels of nesting: \n' +
+ JSON.stringify(componentDefinition, null, 2)
);
}
if (
@@ -70,9 +74,9 @@ export function validateComponent(componentDefinition: any) {
) {
throw new Error(
'An object was provided as `children` instead of a component, ' +
- 'string, or number (or list of those). ' +
- 'Check the children property that looks something like:\n' +
- JSON.stringify(componentDefinition, null, 2)
+ 'string, or number (or list of those). ' +
+ 'Check the children property that looks something like:\n' +
+ JSON.stringify(componentDefinition, null, 2)
);
}
}
diff --git a/dash-renderer/src/utils/callbacks.ts b/dash-renderer/src/utils/callbacks.ts
index 14befb6e7c..30d592ff8c 100644
--- a/dash-renderer/src/utils/callbacks.ts
+++ b/dash-renderer/src/utils/callbacks.ts
@@ -1,8 +1,7 @@
-import { omit, values } from 'ramda';
+import {omit, values} from 'ramda';
-import { ICallbacksState } from '../reducers/callbacks';
-import { ICallback } from '../types/callbacks';
+import {ICallbacksState} from '../reducers/callbacks';
+import {ICallback} from '../types/callbacks';
-export const getPendingCallbacks = (state: ICallbacksState) => Array().concat(
- ...values(omit(['stored', 'completed'], state))
-);
+export const getPendingCallbacks = (state: ICallbacksState) =>
+ Array().concat(...values(omit(['stored', 'completed'], state)));
diff --git a/dash-renderer/src/utils/wait.ts b/dash-renderer/src/utils/wait.ts
new file mode 100644
index 0000000000..3059cb2a7a
--- /dev/null
+++ b/dash-renderer/src/utils/wait.ts
@@ -0,0 +1,8 @@
+export default async (duration: number) => {
+ let _resolve: any;
+ const p = new Promise(resolve => (_resolve = resolve));
+
+ setTimeout(_resolve, duration);
+
+ return p;
+};
diff --git a/dash-renderer/tslint.json b/dash-renderer/tslint.json
index 600dce2dfc..31269d7c5d 100644
--- a/dash-renderer/tslint.json
+++ b/dash-renderer/tslint.json
@@ -1,7 +1,8 @@
{
"defaultSeverity": "error",
"extends": [
- "tslint:recommended"
+ "tslint:recommended",
+ "tslint-config-prettier"
],
"linterOptions": {
"exclude": [
@@ -44,12 +45,7 @@
"ordered-imports": false,
"prefer-const": false,
"prefer-for-of": false,
- "quotemark": [true, "single"],
"space-before-function-paren": [false, "always"],
- "trailing-comma": [true, {
- "singleline": "never",
- "multiline": "never"
- }],
"unified-signatures": false,
"variable-name": false
},
diff --git a/dash/_callback_context.py b/dash/_callback_context.py
index d4e95dfb0e..71997f11dd 100644
--- a/dash/_callback_context.py
+++ b/dash/_callback_context.py
@@ -72,5 +72,29 @@ def states_list(self):
def response(self):
return getattr(flask.g, "dash_response")
+ @staticmethod
+ @has_context
+ def record_timing(name, duration=None, description=None):
+ """Records timing information for a server resource.
+
+ :param name: The name of the resource.
+ :type name: string
+
+ :param duration: The time in seconds to report. Internally, this
+ is rounded to the nearest millisecond.
+ :type duration: float or None
+
+ :param description: A description of the resource.
+ :type description: string or None
+ """
+ timing_information = getattr(flask.g, "timing_information", {})
+
+ if name in timing_information:
+ raise KeyError('Duplicate resource name "{}" found.'.format(name))
+
+ timing_information[name] = {"dur": round(duration * 1000), "desc": description}
+
+ setattr(flask.g, "timing_information", timing_information)
+
callback_context = CallbackContext()
diff --git a/dash/dash.py b/dash/dash.py
index c17ddbe271..cb3f7aae01 100644
--- a/dash/dash.py
+++ b/dash/dash.py
@@ -9,7 +9,10 @@
import threading
import re
import logging
+import time
import mimetypes
+import hashlib
+import base64
from functools import wraps
from future.moves.urllib.parse import urlparse
@@ -1128,6 +1131,42 @@ def _serve_default_favicon():
pkgutil.get_data("dash", "favicon.ico"), content_type="image/x-icon"
)
+ def csp_hashes(self, hash_algorithm="sha256"):
+ """Calculates CSP hashes (sha + base64) of all inline scripts, such that
+ one of the biggest benefits of CSP (disallowing general inline scripts)
+ can be utilized together with Dash clientside callbacks (inline scripts).
+
+ Calculate these hashes after all inline callbacks are defined,
+ and add them to your CSP headers before starting the server, for example
+ with the flask-talisman package from PyPI:
+
+ flask_talisman.Talisman(app.server, content_security_policy={
+ "default-src": "'self'",
+ "script-src": ["'self'"] + app.csp_hashes()
+ })
+
+ :param hash_algorithm: One of the recognized CSP hash algorithms ('sha256', 'sha384', 'sha512').
+ :return: List of CSP hash strings of all inline scripts.
+ """
+
+ HASH_ALGORITHMS = ["sha256", "sha384", "sha512"]
+ if hash_algorithm not in HASH_ALGORITHMS:
+ raise ValueError(
+ "Possible CSP hash algorithms: " + ", ".join(HASH_ALGORITHMS)
+ )
+
+ method = getattr(hashlib, hash_algorithm)
+
+ return [
+ "'{hash_algorithm}-{base64_hash}'".format(
+ hash_algorithm=hash_algorithm,
+ base64_hash=base64.b64encode(
+ method(script.encode("utf-8")).digest()
+ ).decode("utf-8"),
+ )
+ for script in self._inline_scripts + [self.renderer]
+ ]
+
def get_asset_url(self, path):
asset = get_asset_path(
self.config.requests_pathname_prefix,
@@ -1402,6 +1441,34 @@ def _wrap_errors(_):
break
return get_current_traceback(skip=skip).render_full(), 500
+ if debug and dev_tools.ui:
+
+ def _before_request():
+ flask.g.timing_information = {
+ "__dash_server": {"dur": time.time(), "desc": None}
+ }
+
+ def _after_request(response):
+ dash_total = flask.g.timing_information["__dash_server"]
+ dash_total["dur"] = round((time.time() - dash_total["dur"]) * 1000)
+
+ for name, info in flask.g.timing_information.items():
+
+ value = name
+ if info.get("desc") is not None:
+ value += ';desc="{}"'.format(info["desc"])
+
+ if info.get("dur") is not None:
+ value += ";dur={}".format(info["dur"])
+
+ response.headers.add("Server-Timing", value)
+
+ return response
+
+ self.server.before_request(_before_request)
+
+ self.server.after_request(_after_request)
+
if (
debug
and dev_tools.serve_dev_bundles
diff --git a/dash/testing/browser.py b/dash/testing/browser.py
index 91a09e499e..cbaac4e8fa 100644
--- a/dash/testing/browser.py
+++ b/dash/testing/browser.py
@@ -103,6 +103,7 @@ def visit_and_snapshot(
resource_path,
hook_id,
wait_for_callbacks=True,
+ convert_canvases=False,
assert_check=True,
stay_on_page=False,
):
@@ -114,7 +115,11 @@ def visit_and_snapshot(
# wait for the hook_id to present and all callbacks get fired
self.wait_for_element_by_id(hook_id)
- self.percy_snapshot(path, wait_for_callbacks=wait_for_callbacks)
+ self.percy_snapshot(
+ path,
+ wait_for_callbacks=wait_for_callbacks,
+ convert_canvases=convert_canvases,
+ )
if assert_check:
assert not self.driver.find_elements_by_css_selector(
"div.dash-debug-alert"
@@ -125,7 +130,7 @@ def visit_and_snapshot(
logger.exception("snapshot at resource %s error", path)
raise e
- def percy_snapshot(self, name="", wait_for_callbacks=False):
+ def percy_snapshot(self, name="", wait_for_callbacks=False, convert_canvases=False):
"""percy_snapshot - visual test api shortcut to `percy_runner.snapshot`.
It also combines the snapshot `name` with the Python version.
"""
@@ -148,7 +153,43 @@ def percy_snapshot(self, name="", wait_for_callbacks=False):
self.redux_state_rqs,
)
- self.percy_runner.snapshot(name=snapshot_name)
+ if convert_canvases:
+ self.driver.execute_script(
+ """
+ const stash = window._canvasStash = [];
+ Array.from(document.querySelectorAll('canvas')).forEach(c => {
+ const i = document.createElement('img');
+ i.src = c.toDataURL();
+ i.width = c.width;
+ i.height = c.height;
+ i.setAttribute('style', c.getAttribute('style'));
+ i.className = c.className;
+ i.setAttribute('data-canvasnum', stash.length);
+ stash.push(c);
+ c.parentElement.insertBefore(i, c);
+ c.parentElement.removeChild(c);
+ });
+ """
+ )
+
+ self.percy_runner.snapshot(name=snapshot_name)
+
+ self.driver.execute_script(
+ """
+ const stash = window._canvasStash;
+ Array.from(
+ document.querySelectorAll('img[data-canvasnum]')
+ ).forEach(i => {
+ const c = stash[+i.getAttribute('data-canvasnum')];
+ i.parentElement.insertBefore(c, i);
+ i.parentElement.removeChild(i);
+ });
+ delete window._canvasStash;
+ """
+ )
+
+ else:
+ self.percy_runner.snapshot(name=snapshot_name)
def take_snapshot(self, name):
"""Hook method to take snapshot when a selenium test fails. The
diff --git a/dash/version.py b/dash/version.py
index 6b0872cb2f..638c1217d2 100644
--- a/dash/version.py
+++ b/dash/version.py
@@ -1 +1 @@
-__version__ = "1.15.0"
+__version__ = "1.16.0"
diff --git a/requires-install.txt b/requires-install.txt
index a23dd78567..2c67c74890 100644
--- a/requires-install.txt
+++ b/requires-install.txt
@@ -1,8 +1,8 @@
Flask>=1.0.2
flask-compress
plotly
-dash_renderer==1.7.0
-dash-core-components==1.11.0
-dash-html-components==1.1.0
-dash-table==4.10.0
+dash_renderer==1.8.0
+dash-core-components==1.12.0
+dash-html-components==1.1.1
+dash-table==4.10.1
future
diff --git a/requires-testing.txt b/requires-testing.txt
index 1662b98057..1b14e7d6e9 100644
--- a/requires-testing.txt
+++ b/requires-testing.txt
@@ -10,3 +10,4 @@ cryptography==3.0
requests[security]==2.21.0
beautifulsoup4==4.8.2
waitress==1.4.3
+flask-talisman==0.7.0
diff --git a/tests/__init__.py b/tests/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tests/assets/__init__.py b/tests/assets/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tests/assets/todo_app.py b/tests/assets/todo_app.py
new file mode 100644
index 0000000000..ed4971be18
--- /dev/null
+++ b/tests/assets/todo_app.py
@@ -0,0 +1,123 @@
+from multiprocessing import Value
+
+import dash
+from dash.dependencies import Input, Output, State, MATCH, ALL, ALLSMALLER
+import dash_html_components as html
+import dash_core_components as dcc
+
+
+def todo_app(content_callback=False):
+ app = dash.Dash(__name__)
+
+ content = html.Div(
+ [
+ html.Div("Dash To-Do list"),
+ dcc.Input(id="new-item"),
+ html.Button("Add", id="add"),
+ html.Button("Clear Done", id="clear-done"),
+ html.Div(id="list-container"),
+ html.Hr(),
+ html.Div(id="totals"),
+ ]
+ )
+
+ if content_callback:
+ app.layout = html.Div([html.Div(id="content"), dcc.Location(id="url")])
+
+ @app.callback(Output("content", "children"), [Input("url", "pathname")])
+ def display_content(_):
+ return content
+
+ else:
+ app.layout = content
+
+ style_todo = {"display": "inline", "margin": "10px"}
+ style_done = {"textDecoration": "line-through", "color": "#888"}
+ style_done.update(style_todo)
+
+ app.list_calls = Value("i", 0)
+ app.style_calls = Value("i", 0)
+ app.preceding_calls = Value("i", 0)
+ app.total_calls = Value("i", 0)
+
+ @app.callback(
+ Output("list-container", "children"),
+ Output("new-item", "value"),
+ Input("add", "n_clicks"),
+ Input("new-item", "n_submit"),
+ Input("clear-done", "n_clicks"),
+ State("new-item", "value"),
+ State({"item": ALL}, "children"),
+ State({"item": ALL, "action": "done"}, "value"),
+ )
+ def edit_list(add, add2, clear, new_item, items, items_done):
+ app.list_calls.value += 1
+ triggered = [t["prop_id"] for t in dash.callback_context.triggered]
+ adding = len(
+ [1 for i in triggered if i in ("add.n_clicks", "new-item.n_submit")]
+ )
+ clearing = len([1 for i in triggered if i == "clear-done.n_clicks"])
+ new_spec = [
+ (text, done)
+ for text, done in zip(items, items_done)
+ if not (clearing and done)
+ ]
+ if adding:
+ new_spec.append((new_item, []))
+ new_list = [
+ html.Div(
+ [
+ dcc.Checklist(
+ id={"item": i, "action": "done"},
+ options=[{"label": "", "value": "done"}],
+ value=done,
+ style={"display": "inline"},
+ ),
+ html.Div(
+ text, id={"item": i}, style=style_done if done else style_todo
+ ),
+ html.Div(id={"item": i, "preceding": True}, style=style_todo),
+ ],
+ style={"clear": "both"},
+ )
+ for i, (text, done) in enumerate(new_spec)
+ ]
+ return [new_list, "" if adding else new_item]
+
+ @app.callback(
+ Output({"item": MATCH}, "style"),
+ Input({"item": MATCH, "action": "done"}, "value"),
+ )
+ def mark_done(done):
+ app.style_calls.value += 1
+ return style_done if done else style_todo
+
+ @app.callback(
+ Output({"item": MATCH, "preceding": True}, "children"),
+ Input({"item": ALLSMALLER, "action": "done"}, "value"),
+ Input({"item": MATCH, "action": "done"}, "value"),
+ )
+ def show_preceding(done_before, this_done):
+ app.preceding_calls.value += 1
+ if this_done:
+ return ""
+ all_before = len(done_before)
+ done_before = len([1 for d in done_before if d])
+ out = "{} of {} preceding items are done".format(done_before, all_before)
+ if all_before == done_before:
+ out += " DO THIS NEXT!"
+ return out
+
+ @app.callback(
+ Output("totals", "children"), Input({"item": ALL, "action": "done"}, "value")
+ )
+ def show_totals(done):
+ app.total_calls.value += 1
+ count_all = len(done)
+ count_done = len([d for d in done if d])
+ result = "{} of {} items completed".format(count_done, count_all)
+ if count_all:
+ result += " - {}%".format(int(100 * count_done / count_all))
+ return result
+
+ return app
diff --git a/tests/integration/callbacks/__init__.py b/tests/integration/callbacks/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tests/integration/callbacks/test_basic_callback.py b/tests/integration/callbacks/test_basic_callback.py
index 13276b1899..afbd81cd97 100644
--- a/tests/integration/callbacks/test_basic_callback.py
+++ b/tests/integration/callbacks/test_basic_callback.py
@@ -1,5 +1,5 @@
import json
-from multiprocessing import Value
+from multiprocessing import Lock, Value
import pytest
@@ -9,9 +9,12 @@
import dash
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
+from dash.testing import wait
def test_cbsc001_simple_callback(dash_duo):
+ lock = Lock()
+
app = dash.Dash(__name__)
app.layout = html.Div(
[
@@ -23,8 +26,9 @@ def test_cbsc001_simple_callback(dash_duo):
@app.callback(Output("output-1", "children"), [Input("input", "value")])
def update_output(value):
- call_count.value = call_count.value + 1
- return value
+ with lock:
+ call_count.value = call_count.value + 1
+ return value
dash_duo.start_server(app)
@@ -34,9 +38,11 @@ def update_output(value):
input_ = dash_duo.find_element("#input")
dash_duo.clear_input(input_)
- input_.send_keys("hello world")
+ for key in "hello world":
+ with lock:
+ input_.send_keys(key)
- assert dash_duo.find_element("#output-1").text == "hello world"
+ wait.until(lambda: dash_duo.find_element("#output-1").text == "hello world", 2)
dash_duo.percy_snapshot(name="simple-callback-hello-world")
assert call_count.value == 2 + len("hello world"), "initial count + each key stroke"
@@ -345,6 +351,8 @@ def set_path(n):
def test_cbsc008_wildcard_prop_callbacks(dash_duo):
+ lock = Lock()
+
app = dash.Dash(__name__)
app.layout = html.Div(
[
@@ -369,8 +377,9 @@ def test_cbsc008_wildcard_prop_callbacks(dash_duo):
@app.callback(Output("output-1", "data-cb"), [Input("input", "value")])
def update_data(value):
- input_call_count.value += 1
- return value
+ with lock:
+ input_call_count.value += 1
+ return value
@app.callback(Output("output-1", "children"), [Input("output-1", "data-cb")])
def update_text(data):
@@ -382,7 +391,10 @@ def update_text(data):
input1 = dash_duo.find_element("#input")
dash_duo.clear_input(input1)
- input1.send_keys("hello world")
+
+ for key in "hello world":
+ with lock:
+ input1.send_keys(key)
dash_duo.wait_for_text_to_equal("#output-1", "hello world")
dash_duo.percy_snapshot(name="wildcard-callback-2")
diff --git a/tests/integration/callbacks/test_callback_context.py b/tests/integration/callbacks/test_callback_context.py
index f4f4552c4c..3eabe92e64 100644
--- a/tests/integration/callbacks/test_callback_context.py
+++ b/tests/integration/callbacks/test_callback_context.py
@@ -1,4 +1,5 @@
import json
+import operator
import pytest
import dash_html_components as html
@@ -9,6 +10,9 @@
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate, MissingCallbackContextException
+import dash.testing.wait as wait
+
+from selenium.webdriver.common.action_chains import ActionChains
def test_cbcx001_modified_response(dash_duo):
@@ -96,3 +100,237 @@ def report_triggered(n):
'triggered is truthy, has prop/id ["btn", "n_clicks"], and full value '
'[{"prop_id": "btn.n_clicks", "value": 1}]',
)
+
+
+@pytest.mark.DASH1350
+def test_cbcx005_grouped_clicks(dash_duo):
+ class context:
+ calls = 0
+ callback_contexts = []
+ clicks = dict()
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ html.Button("Button 0", id="btn0"),
+ html.Div(
+ [
+ html.Button("Button 1", id="btn1"),
+ html.Div(
+ [html.Div(id="div3"), html.Button("Button 2", id="btn2")],
+ id="div2",
+ style=dict(backgroundColor="yellow", padding="50px"),
+ ),
+ ],
+ id="div1",
+ style=dict(backgroundColor="blue", padding="50px"),
+ ),
+ ],
+ id="div0",
+ style=dict(backgroundColor="red", padding="50px"),
+ )
+
+ @app.callback(
+ Output("div3", "children"),
+ [
+ Input("div1", "n_clicks"),
+ Input("div2", "n_clicks"),
+ Input("btn0", "n_clicks"),
+ Input("btn1", "n_clicks"),
+ Input("btn2", "n_clicks"),
+ ],
+ prevent_initial_call=True,
+ )
+ def update(div1, div2, btn0, btn1, btn2):
+ context.calls = context.calls + 1
+ context.callback_contexts.append(callback_context.triggered)
+ context.clicks["div1"] = div1
+ context.clicks["div2"] = div2
+ context.clicks["btn0"] = btn0
+ context.clicks["btn1"] = btn1
+ context.clicks["btn2"] = btn2
+
+ def click(target):
+ ActionChains(dash_duo.driver).move_to_element_with_offset(
+ target, 5, 5
+ ).click().perform()
+
+ dash_duo.start_server(app)
+ click(dash_duo.find_element("#btn0"))
+ assert context.calls == 1
+ keys = list(map(operator.itemgetter("prop_id"), context.callback_contexts[-1:][0]))
+ assert len(keys) == 1
+ assert "btn0.n_clicks" in keys
+
+ assert context.clicks.get("btn0") == 1
+ assert context.clicks.get("btn1") is None
+ assert context.clicks.get("btn2") is None
+ assert context.clicks.get("div1") is None
+ assert context.clicks.get("div2") is None
+
+ click(dash_duo.find_element("#div1"))
+ assert context.calls == 2
+ keys = list(map(operator.itemgetter("prop_id"), context.callback_contexts[-1:][0]))
+ assert len(keys) == 1
+ assert "div1.n_clicks" in keys
+
+ assert context.clicks.get("btn0") == 1
+ assert context.clicks.get("btn1") is None
+ assert context.clicks.get("btn2") is None
+ assert context.clicks.get("div1") == 1
+ assert context.clicks.get("div2") is None
+
+ click(dash_duo.find_element("#btn1"))
+ assert context.calls == 3
+ keys = list(map(operator.itemgetter("prop_id"), context.callback_contexts[-1:][0]))
+ assert len(keys) == 2
+ assert "btn1.n_clicks" in keys
+ assert "div1.n_clicks" in keys
+
+ assert context.clicks.get("btn0") == 1
+ assert context.clicks.get("btn1") == 1
+ assert context.clicks.get("btn2") is None
+ assert context.clicks.get("div1") == 2
+ assert context.clicks.get("div2") is None
+
+ click(dash_duo.find_element("#div2"))
+ assert context.calls == 4
+ keys = list(map(operator.itemgetter("prop_id"), context.callback_contexts[-1:][0]))
+ assert len(keys) == 2
+ assert "div1.n_clicks" in keys
+ assert "div2.n_clicks" in keys
+
+ assert context.clicks.get("btn0") == 1
+ assert context.clicks.get("btn1") == 1
+ assert context.clicks.get("btn2") is None
+ assert context.clicks.get("div1") == 3
+ assert context.clicks.get("div2") == 1
+
+ click(dash_duo.find_element("#btn2"))
+ assert context.calls == 5
+ keys = list(map(operator.itemgetter("prop_id"), context.callback_contexts[-1:][0]))
+ assert len(keys) == 3
+ assert "btn2.n_clicks" in keys
+ assert "div1.n_clicks" in keys
+ assert "div2.n_clicks" in keys
+
+ assert context.clicks.get("btn0") == 1
+ assert context.clicks.get("btn1") == 1
+ assert context.clicks.get("btn2") == 1
+ assert context.clicks.get("div1") == 4
+ assert context.clicks.get("div2") == 2
+
+
+@pytest.mark.DASH1350
+def test_cbcx006_initial_callback_predecessor(dash_duo):
+ class context:
+ calls = 0
+ callback_contexts = []
+
+ app = Dash(__name__)
+ app.layout = html.Div(
+ [
+ html.Div(
+ style={"display": "block"},
+ children=[
+ html.Div(
+ [
+ html.Label("ID: input-number-1"),
+ dcc.Input(id="input-number-1", type="number", value=0),
+ ]
+ ),
+ html.Div(
+ [
+ html.Label("ID: input-number-2"),
+ dcc.Input(id="input-number-2", type="number", value=0),
+ ]
+ ),
+ html.Div(
+ [
+ html.Label("ID: sum-number"),
+ dcc.Input(
+ id="sum-number", type="number", value=0, disabled=True
+ ),
+ ]
+ ),
+ ],
+ ),
+ html.Div(id="results"),
+ ]
+ )
+
+ @app.callback(
+ Output("sum-number", "value"),
+ [Input("input-number-1", "value"), Input("input-number-2", "value")],
+ )
+ def update_sum_number(n1, n2):
+ context.calls = context.calls + 1
+ context.callback_contexts.append(callback_context.triggered)
+
+ return n1 + n2
+
+ @app.callback(
+ Output("results", "children"),
+ [
+ Input("input-number-1", "value"),
+ Input("input-number-2", "value"),
+ Input("sum-number", "value"),
+ ],
+ )
+ def update_results(n1, n2, nsum):
+ context.calls = context.calls + 1
+ context.callback_contexts.append(callback_context.triggered)
+
+ return [
+ "{} + {} = {}".format(n1, n2, nsum),
+ html.Br(),
+ "ctx.triggered={}".format(callback_context.triggered),
+ ]
+
+ dash_duo.start_server(app)
+
+ # Initial Callbacks
+ wait.until(lambda: context.calls == 2, 2)
+ wait.until(lambda: len(context.callback_contexts) == 2, 2)
+
+ keys0 = list(map(operator.itemgetter("prop_id"), context.callback_contexts[0]))
+ # Special case present for backward compatibility
+ assert len(keys0) == 1
+ assert "." in keys0
+
+ keys1 = list(map(operator.itemgetter("prop_id"), context.callback_contexts[1]))
+ assert len(keys1) == 1
+ assert "sum-number.value" in keys1
+
+ # User action & followup callbacks
+ dash_duo.find_element("#input-number-1").click()
+ dash_duo.find_element("#input-number-1").send_keys("1")
+
+ wait.until(lambda: context.calls == 4, 2)
+ wait.until(lambda: len(context.callback_contexts) == 4, 2)
+
+ keys0 = list(map(operator.itemgetter("prop_id"), context.callback_contexts[2]))
+ # Special case present for backward compatibility
+ assert len(keys0) == 1
+ assert "input-number-1.value" in keys0
+
+ keys1 = list(map(operator.itemgetter("prop_id"), context.callback_contexts[3]))
+ assert len(keys1) == 2
+ assert "sum-number.value" in keys1
+ assert "input-number-1.value" in keys1
+
+ dash_duo.find_element("#input-number-2").click()
+ dash_duo.find_element("#input-number-2").send_keys("1")
+
+ wait.until(lambda: context.calls == 6, 2)
+ wait.until(lambda: len(context.callback_contexts) == 6, 2)
+
+ keys0 = list(map(operator.itemgetter("prop_id"), context.callback_contexts[4]))
+ # Special case present for backward compatibility
+ assert len(keys0) == 1
+ assert "input-number-2.value" in keys0
+
+ keys1 = list(map(operator.itemgetter("prop_id"), context.callback_contexts[5]))
+ assert len(keys1) == 2
+ assert "sum-number.value" in keys1
+ assert "input-number-2.value" in keys1
diff --git a/tests/integration/callbacks/test_wildcards.py b/tests/integration/callbacks/test_wildcards.py
index f8916340d3..b578b0c84e 100644
--- a/tests/integration/callbacks/test_wildcards.py
+++ b/tests/integration/callbacks/test_wildcards.py
@@ -1,4 +1,3 @@
-from multiprocessing import Value
import pytest
import re
from selenium.webdriver.common.keys import Keys
@@ -9,6 +8,8 @@
from dash.testing import wait
from dash.dependencies import Input, Output, State, ALL, ALLSMALLER, MATCH
+from ...assets.todo_app import todo_app
+
def css_escape(s):
sel = re.sub("[\\{\\}\\\"\\'.:,]", lambda m: "\\" + m.group(0), s)
@@ -16,123 +17,6 @@ def css_escape(s):
return sel
-def todo_app(content_callback):
- app = dash.Dash(__name__)
-
- content = html.Div(
- [
- html.Div("Dash To-Do list"),
- dcc.Input(id="new-item"),
- html.Button("Add", id="add"),
- html.Button("Clear Done", id="clear-done"),
- html.Div(id="list-container"),
- html.Hr(),
- html.Div(id="totals"),
- ]
- )
-
- if content_callback:
- app.layout = html.Div([html.Div(id="content"), dcc.Location(id="url")])
-
- @app.callback(Output("content", "children"), [Input("url", "pathname")])
- def display_content(_):
- return content
-
- else:
- app.layout = content
-
- style_todo = {"display": "inline", "margin": "10px"}
- style_done = {"textDecoration": "line-through", "color": "#888"}
- style_done.update(style_todo)
-
- app.list_calls = Value("i", 0)
- app.style_calls = Value("i", 0)
- app.preceding_calls = Value("i", 0)
- app.total_calls = Value("i", 0)
-
- @app.callback(
- Output("list-container", "children"),
- Output("new-item", "value"),
- Input("add", "n_clicks"),
- Input("new-item", "n_submit"),
- Input("clear-done", "n_clicks"),
- State("new-item", "value"),
- State({"item": ALL}, "children"),
- State({"item": ALL, "action": "done"}, "value"),
- )
- def edit_list(add, add2, clear, new_item, items, items_done):
- app.list_calls.value += 1
- triggered = [t["prop_id"] for t in dash.callback_context.triggered]
- adding = len(
- [1 for i in triggered if i in ("add.n_clicks", "new-item.n_submit")]
- )
- clearing = len([1 for i in triggered if i == "clear-done.n_clicks"])
- new_spec = [
- (text, done)
- for text, done in zip(items, items_done)
- if not (clearing and done)
- ]
- if adding:
- new_spec.append((new_item, []))
- new_list = [
- html.Div(
- [
- dcc.Checklist(
- id={"item": i, "action": "done"},
- options=[{"label": "", "value": "done"}],
- value=done,
- style={"display": "inline"},
- ),
- html.Div(
- text, id={"item": i}, style=style_done if done else style_todo
- ),
- html.Div(id={"item": i, "preceding": True}, style=style_todo),
- ],
- style={"clear": "both"},
- )
- for i, (text, done) in enumerate(new_spec)
- ]
- return [new_list, "" if adding else new_item]
-
- @app.callback(
- Output({"item": MATCH}, "style"),
- Input({"item": MATCH, "action": "done"}, "value"),
- )
- def mark_done(done):
- app.style_calls.value += 1
- return style_done if done else style_todo
-
- @app.callback(
- Output({"item": MATCH, "preceding": True}, "children"),
- Input({"item": ALLSMALLER, "action": "done"}, "value"),
- Input({"item": MATCH, "action": "done"}, "value"),
- )
- def show_preceding(done_before, this_done):
- app.preceding_calls.value += 1
- if this_done:
- return ""
- all_before = len(done_before)
- done_before = len([1 for d in done_before if d])
- out = "{} of {} preceding items are done".format(done_before, all_before)
- if all_before == done_before:
- out += " DO THIS NEXT!"
- return out
-
- @app.callback(
- Output("totals", "children"), Input({"item": ALL, "action": "done"}, "value")
- )
- def show_totals(done):
- app.total_calls.value += 1
- count_all = len(done)
- count_done = len([d for d in done if d])
- result = "{} of {} items completed".format(count_done, count_all)
- if count_all:
- result += " - {}%".format(int(100 * count_done / count_all))
- return result
-
- return app
-
-
@pytest.mark.parametrize("content_callback", (False, True))
def test_cbwc001_todo_app(content_callback, dash_duo):
app = todo_app(content_callback)
diff --git a/tests/integration/devtools/__init__.py b/tests/integration/devtools/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/tests/integration/devtools/test_callback_timing.py b/tests/integration/devtools/test_callback_timing.py
new file mode 100644
index 0000000000..a84b60942f
--- /dev/null
+++ b/tests/integration/devtools/test_callback_timing.py
@@ -0,0 +1,38 @@
+from time import sleep
+import requests
+
+import dash_html_components as html
+import dash
+from dash.dependencies import Output, Input
+
+
+def test_dvct001_callback_timing(dash_thread_server):
+ app = dash.Dash(__name__)
+ app.layout = html.Div()
+
+ @app.callback(Output("x", "p"), Input("y", "q"))
+ def x(y):
+ dash.callback_context.record_timing("pancakes", 1.23)
+ sleep(0.5)
+ return y
+
+ dash_thread_server(app, debug=True, use_reloader=False, use_debugger=True)
+
+ response = requests.post(
+ dash_thread_server.url + "/_dash-update-component",
+ json={
+ "output": "x.p",
+ "outputs": {"id": "x", "property": "p"},
+ "inputs": [{"id": "y", "property": "q", "value": 9}],
+ "changedPropIds": ["y.q"],
+ },
+ )
+
+ # eg 'Server-Timing': '__dash_server;dur=505, pancakes;dur=1230'
+ assert "Server-Timing" in response.headers
+ st = response.headers["Server-Timing"]
+ times = {k: int(float(v)) for k, v in [p.split(";dur=") for p in st.split(", ")]}
+ assert "__dash_server" in times
+ assert times["__dash_server"] >= 500 # 0.5 sec wait
+ assert "pancakes" in times
+ assert times["pancakes"] == 1230
diff --git a/tests/integration/devtools/test_callback_validation.py b/tests/integration/devtools/test_callback_validation.py
index a006e23eec..4f57e01254 100644
--- a/tests/integration/devtools/test_callback_validation.py
+++ b/tests/integration/devtools/test_callback_validation.py
@@ -677,7 +677,7 @@ def c2(children):
@app.callback([Output("a", "children")], [Input("c", "children")])
def c3(children):
- return children
+ return (children,)
dash_duo.start_server(app, **debugging)
diff --git a/tests/integration/devtools/test_devtools_ui.py b/tests/integration/devtools/test_devtools_ui.py
index 878e6377b7..d32facb033 100644
--- a/tests/integration/devtools/test_devtools_ui.py
+++ b/tests/integration/devtools/test_devtools_ui.py
@@ -5,6 +5,8 @@
import dash
import dash.testing.wait as wait
+from ...assets.todo_app import todo_app
+
def test_dvui001_disable_props_check_config(dash_duo):
app = dash.Dash(__name__)
@@ -62,3 +64,38 @@ def test_dvui002_disable_ui_config(dash_duo):
".dash-debug-menu"
), "the debug menu icon should NOT show up"
dash_duo.percy_snapshot("devtools - disable dev tools UI - no debug menu")
+
+
+def test_dvui003_callback_graph(dash_duo):
+ app = todo_app()
+
+ dash_duo.start_server(
+ app,
+ debug=True,
+ use_reloader=False,
+ use_debugger=True,
+ dev_tools_hot_reload=False,
+ )
+
+ dash_duo.wait_for_text_to_equal("#totals", "0 of 0 items completed")
+
+ # reset compute and network times for all profiled callbacks, so we get
+ # a consistent callback graph image
+ dash_duo.driver.execute_script(
+ """
+ const cbProfiles = window.store.getState().profile.callbacks;
+ Object.keys(cbProfiles).forEach(k => {
+ cbProfiles[k].compute = 44;
+ cbProfiles[k].network.time = 33;
+ cbProfiles[k].total = 77;
+ });
+ """
+ )
+
+ dash_duo.find_element(".dash-debug-menu").click()
+ sleep(1) # wait for debug menu opening animation
+ dash_duo.find_element(".dash-debug-menu__button--callbacks").click()
+ sleep(3) # wait for callback graph to draw
+ dash_duo.find_element('canvas[data-id="layer2-node"]')
+
+ dash_duo.percy_snapshot("devtools - callback graph", convert_canvases=True)
diff --git a/tests/integration/renderer/test_multi_output.py b/tests/integration/renderer/test_multi_output.py
index 4741471420..433301ea57 100644
--- a/tests/integration/renderer/test_multi_output.py
+++ b/tests/integration/renderer/test_multi_output.py
@@ -1,8 +1,9 @@
-from multiprocessing import Value
+from multiprocessing import Lock, Value
import dash
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
+from dash.testing import wait
import dash_core_components as dcc
import dash_html_components as html
@@ -47,6 +48,8 @@ def update_output(n_clicks):
def test_rdmo002_multi_outputs_on_single_component(dash_duo):
+ lock = Lock()
+
call_count = Value("i")
app = dash.Dash(__name__)
@@ -66,8 +69,9 @@ def test_rdmo002_multi_outputs_on_single_component(dash_duo):
[Input("input", "value")],
)
def update_output(value):
- call_count.value += 1
- return [value, {"fontFamily": value}, value]
+ with lock:
+ call_count.value += 1
+ return [value, {"fontFamily": value}, value]
dash_duo.start_server(app)
@@ -79,7 +83,9 @@ def update_output(value):
assert call_count.value == 1
- dash_duo.find_element("#input").send_keys(" hello")
+ for key in " hello":
+ with lock:
+ dash_duo.find_element("#input").send_keys(key)
dash_duo.wait_for_text_to_equal("#output-container", "dash hello")
_html = dash_duo.find_element("#output-container").get_property("innerHTML")
@@ -88,7 +94,7 @@ def update_output(value):
'style="font-family: "dash hello";">dash hello '
)
- assert call_count.value == 7
+ wait.until(lambda: call_count.value == 7, 3)
def test_rdmo003_single_output_as_multi(dash_duo):
diff --git a/tests/integration/test_csp.py b/tests/integration/test_csp.py
new file mode 100644
index 0000000000..6074ac30c8
--- /dev/null
+++ b/tests/integration/test_csp.py
@@ -0,0 +1,61 @@
+import contextlib
+
+import pytest
+import flask_talisman
+from selenium.common.exceptions import NoSuchElementException
+
+import dash
+import dash_core_components as dcc
+import dash_html_components as html
+from dash.dependencies import Input, Output
+
+
+@contextlib.contextmanager
+def does_not_raise():
+ yield
+
+
+@pytest.mark.parametrize(
+ "add_hashes, hash_algorithm, expectation",
+ [
+ (False, None, pytest.raises(NoSuchElementException)),
+ (True, "sha256", does_not_raise()),
+ (True, "sha384", does_not_raise()),
+ (True, "sha512", does_not_raise()),
+ (True, "sha999", pytest.raises(ValueError)),
+ ],
+)
+def test_incs001_csp_hashes_inline_scripts(
+ dash_duo, add_hashes, hash_algorithm, expectation
+):
+ app = dash.Dash(__name__)
+
+ app.layout = html.Div(
+ [dcc.Input(id="input_element", type="text"), html.Div(id="output_element")]
+ )
+
+ app.clientside_callback(
+ """
+ function(input) {
+ return input;
+ }
+ """,
+ Output("output_element", "children"),
+ [Input("input_element", "value")],
+ )
+
+ with expectation:
+ csp = {
+ "default-src": "'self'",
+ "script-src": ["'self'"]
+ + (app.csp_hashes(hash_algorithm) if add_hashes else []),
+ }
+
+ flask_talisman.Talisman(
+ app.server, content_security_policy=csp, force_https=False
+ )
+
+ dash_duo.start_server(app)
+
+ dash_duo.find_element("#input_element").send_keys("xyz")
+ assert dash_duo.wait_for_element("#output_element").text == "xyz"