From b4afab1a605869f09c890d4e059cdbeaca4903a1 Mon Sep 17 00:00:00 2001 From: MiccWan Date: Mon, 7 Mar 2022 15:13:57 +0800 Subject: [PATCH 1/7] rename `moduleName` to `packageName` --- dbux-data/src/dataProviderUtil.js | 2 +- dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js | 6 +++--- dbux-graph-client/src/graph/syncGraph/ContextNode.js | 4 ++-- dbux-graph-common/src/graph/types/AsyncNodeData.js | 2 +- dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js | 4 ++-- dbux-graph-host/src/graph/syncGraph/ContextNode.js | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/dbux-data/src/dataProviderUtil.js b/dbux-data/src/dataProviderUtil.js index 6461f43da..edeb55e08 100644 --- a/dbux-data/src/dataProviderUtil.js +++ b/dbux-data/src/dataProviderUtil.js @@ -293,7 +293,7 @@ export default { }, /** @param {DataProvider} dp */ - getContextModuleName(dp, contextId) { + getContextPackageName(dp, contextId) { const context = dp.collections.executionContexts.getById(contextId); const staticContext = dp.collections.staticContexts.getById(context.staticContextId); return dp.util.getExternalProgramModuleName(staticContext.programId); diff --git a/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js b/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js index 6fcafbae0..847fc9def 100644 --- a/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js +++ b/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js @@ -132,7 +132,7 @@ class AsyncGraph extends GraphBase { isProgramRoot, realStaticContextid, - moduleName, + packageName, postAsyncEventUpdateType, hasError, nestingDepth, @@ -148,9 +148,9 @@ class AsyncGraph extends GraphBase { // const { asyncDetailMode } = graphDocument.state; // const highContractMode = screenshotMode && !asyncDetailMode; const highContractMode = screenshotMode; - // const moduleLabel = moduleName ? `${moduleName} | ` : ''; + // const moduleLabel = packageName ? `${packageName} | ` : ''; - const backgroundColor = makeStaticContextColor(themeMode, realStaticContextid, { bland: !!moduleName, highContractMode }); + const backgroundColor = makeStaticContextColor(themeMode, realStaticContextid, { bland: !!packageName, highContractMode }); let leftLabel = '', errorLabel = '', statsRawEl = ''; let shortLabel, fullLabel = displayName; diff --git a/dbux-graph-client/src/graph/syncGraph/ContextNode.js b/dbux-graph-client/src/graph/syncGraph/ContextNode.js index a40924689..5d24710c9 100644 --- a/dbux-graph-client/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-client/src/graph/syncGraph/ContextNode.js @@ -93,13 +93,13 @@ class ContextNode extends ClientComponentEndpoint { traceId, isSelectedTraceCallRelated, contextIdOfSelectedCallTrace, - moduleName, + packageName, visible, hasError, } = this.state; const { statsEnabled } = this.context; - const moduleLabel = moduleName ? `${moduleName} | ` : ''; + const moduleLabel = packageName ? `${packageName} | ` : ''; this.el.id = `application_${applicationId}-context_${contextId}`; this.el.style.background = backgroundStyle; diff --git a/dbux-graph-common/src/graph/types/AsyncNodeData.js b/dbux-graph-common/src/graph/types/AsyncNodeData.js index eeeae00fa..92e61fa9f 100644 --- a/dbux-graph-common/src/graph/types/AsyncNodeData.js +++ b/dbux-graph-common/src/graph/types/AsyncNodeData.js @@ -16,7 +16,7 @@ export default class AsyncNodeData { */ isProgramRoot; realStaticContextid; - moduleName; + packageName; postAsyncEventUpdateType; hasError; } \ No newline at end of file diff --git a/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js b/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js index ea1274def..04e554f64 100644 --- a/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js +++ b/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js @@ -80,7 +80,7 @@ class AsyncGraph extends GraphBase { const isProgramRoot = dp.util.isContextProgramContext(rootContextId); const realStaticContextid = dp.util.getRealContextOfContext(rootContextId).staticContextId; - const moduleName = dp.util.getContextModuleName(rootContextId); + const packageName = dp.util.getContextPackageName(rootContextId); const postAsyncEventUpdate = dp.util.getAsyncPostEventUpdateOfRoot(rootContextId); const postAsyncEventUpdateType = postAsyncEventUpdate?.type; @@ -118,7 +118,7 @@ class AsyncGraph extends GraphBase { isProgramRoot, realStaticContextid, - moduleName, + packageName, postAsyncEventUpdateType, stats, diff --git a/dbux-graph-host/src/graph/syncGraph/ContextNode.js b/dbux-graph-host/src/graph/syncGraph/ContextNode.js index 7e7a01be8..7f5a66540 100644 --- a/dbux-graph-host/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-host/src/graph/syncGraph/ContextNode.js @@ -83,11 +83,11 @@ class ContextNode extends HostComponentEndpoint { this.state.callerTracelabel = dp.util.makeContextCallerOrSchedulerLabel(contextId); this.state.valueLabel = makeTraceValueLabel(callTrace); } - const moduleName = this.state.moduleName = dp.util.getContextModuleName(contextId); + const packageName = this.state.packageName = dp.util.getContextPackageName(contextId); const realStaticContextid = dp.util.getRealContextOfContext(contextId).staticContextId; this.state.backgroundStyle = makeStaticContextColor(themeMode, realStaticContextid, { - bland: !!moduleName, + bland: !!packageName, screenshotMode }); } From 522be2a028a017257516dfd2c984fdf2fada400c Mon Sep 17 00:00:00 2001 From: MiccWan Date: Mon, 7 Mar 2022 15:34:32 +0800 Subject: [PATCH 2/7] add `stats`' toggling button --- dbux-graph-client/src/graph/Toolbar.js | 15 ++++++++++++++- .../src/graph/asyncGraph/AsyncGraph.js | 17 +++++++++-------- dbux-graph-client/src/graph/styles.css | 4 ++++ .../src/graph/syncGraph/ContextNode.js | 2 +- dbux-graph-host/src/graph/GraphDocument.js | 2 +- dbux-graph-host/src/graph/Toolbar.js | 7 +++++++ .../src/graph/asyncGraph/AsyncGraph.js | 3 ++- .../src/graph/syncGraph/ContextNode.js | 2 +- 8 files changed, 39 insertions(+), 13 deletions(-) diff --git a/dbux-graph-client/src/graph/Toolbar.js b/dbux-graph-client/src/graph/Toolbar.js index d8ed21e99..2b9f44d67 100644 --- a/dbux-graph-client/src/graph/Toolbar.js +++ b/dbux-graph-client/src/graph/Toolbar.js @@ -49,6 +49,7 @@ class Toolbar extends ClientComponentEndpoint { style="left: inherit; right: 0; min-width: 0;" aria-labelledby="dropdownMenuButton"> +
@@ -126,6 +127,7 @@ class Toolbar extends ClientComponentEndpoint { graphMode, stackMode, asyncDetailMode, + statsEnabled, } = this.parent.state; const { @@ -179,6 +181,9 @@ class Toolbar extends ClientComponentEndpoint { decorateClasses(this.els.clearThreadSelectionBtn, { hidden: !isThreadSelectionActive }); + decorateClasses(this.els.statsBtn, { + active: statsEnabled + }); [`navbar-${themeModeName}`, `bg-${themeModeName}`].forEach(mode => this.el.classList.add(mode)); this.els.thinModeBtn.innerHTML = `${!!thinMode && '|| ' || '| |'}`; this.els.hideNewRunBtn.innerHTML = `${hideAfter ? '⚪' : '🔴'}`; @@ -194,6 +199,7 @@ class Toolbar extends ClientComponentEndpoint { valueMode, thinMode, asyncDetailMode, + statsEnabled, } = this.parent.state; const docEl = this.parent.el; @@ -201,7 +207,8 @@ class Toolbar extends ClientComponentEndpoint { 'hide-locs': !locMode, 'hide-values': !valueMode, 'show-values': valueMode, - 'thin-mode': thinMode + 'thin-mode': thinMode, + 'stats-disabled': !statsEnabled, }); decorateAttr(docEl, { @@ -326,6 +333,12 @@ class Toolbar extends ClientComponentEndpoint { }, focus(evt) { evt.target.blur(); } }, + statsBtn: { + async click(evt) { + evt.preventDefault(); + await this.remote.toggleStats(); + } + }, searchContextsBtn: { async click(evt) { diff --git a/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js b/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js index 847fc9def..03fe57fc6 100644 --- a/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js +++ b/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js @@ -136,16 +136,11 @@ class AsyncGraph extends GraphBase { postAsyncEventUpdateType, hasError, nestingDepth, - stats: { - nTreeContexts, - nTreeStaticContexts, - nTreeFileCalled, - nTreeTraces, - }, + stats, } = nodeData; - const { themeMode, screenshotMode, statsEnabled } = this.context; - // const { asyncDetailMode } = graphDocument.state; + const { themeMode, screenshotMode, graphDocument } = this.context; + const { statsEnabled } = graphDocument.state; // const highContractMode = screenshotMode && !asyncDetailMode; const highContractMode = screenshotMode; // const moduleLabel = packageName ? `${packageName} | ` : ''; @@ -191,6 +186,12 @@ class AsyncGraph extends GraphBase { } if (statsEnabled) { const { statsIconUris } = this.context; + const { + nTreeContexts, + nTreeStaticContexts, + nTreeFileCalled, + nTreeTraces, + } = stats; statsRawEl = /*html*/`
diff --git a/dbux-graph-client/src/graph/styles.css b/dbux-graph-client/src/graph/styles.css index 04d86a961..014265c30 100644 --- a/dbux-graph-client/src/graph/styles.css +++ b/dbux-graph-client/src/graph/styles.css @@ -269,6 +269,10 @@ div { margin-left: 3px; } +.stats-disabled .context-stats { + display: none !important; +} + .show-values .async-context-label { display: none !important; } diff --git a/dbux-graph-client/src/graph/syncGraph/ContextNode.js b/dbux-graph-client/src/graph/syncGraph/ContextNode.js index 5d24710c9..db5a288cb 100644 --- a/dbux-graph-client/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-client/src/graph/syncGraph/ContextNode.js @@ -98,7 +98,7 @@ class ContextNode extends ClientComponentEndpoint { hasError, } = this.state; - const { statsEnabled } = this.context; + const { statsEnabled } = this.context.graphDocument.state; const moduleLabel = packageName ? `${packageName} | ` : ''; this.el.id = `application_${applicationId}-context_${contextId}`; diff --git a/dbux-graph-host/src/graph/GraphDocument.js b/dbux-graph-host/src/graph/GraphDocument.js index 085e3d4f7..3d282cb7a 100644 --- a/dbux-graph-host/src/graph/GraphDocument.js +++ b/dbux-graph-host/src/graph/GraphDocument.js @@ -24,6 +24,7 @@ class GraphDocument extends HostComponentEndpoint { this.state.valueMode = false; this.state.thinMode = false; this.state.asyncDetailMode = true; + this.state.statsEnabled = true; this.createOwnComponents(); @@ -170,7 +171,6 @@ class GraphDocument extends HostComponentEndpoint { contextNodeIconUris: this.state.contextNodeIconUris, statsIconUris: this.state.statsIconUris, screenshotMode: this.state.screenshotMode, - statsEnabled: true, } }; } diff --git a/dbux-graph-host/src/graph/Toolbar.js b/dbux-graph-host/src/graph/Toolbar.js index d483a270f..8ac1a8ac2 100644 --- a/dbux-graph-host/src/graph/Toolbar.js +++ b/dbux-graph-host/src/graph/Toolbar.js @@ -80,6 +80,13 @@ class Toolbar extends HostComponentEndpoint { clearThreadSelection() { allApplications.selection.data.threadSelection.clear(); + }, + + toggleStats() { + const { statsEnabled } = this.doc.state; + this.doc.setState({ + statsEnabled: !statsEnabled + }); } } } diff --git a/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js b/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js index 04e554f64..95665cffb 100644 --- a/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js +++ b/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js @@ -58,6 +58,7 @@ class AsyncGraph extends GraphBase { * #########################################################################*/ makeChildrenData() { + const { statsEnabled } = this.context.graphDocument.state; const appData = allApplications.selection.data; const asyncNodes = appData.asyncNodesInOrder.getAllActual(); @@ -99,7 +100,7 @@ class AsyncGraph extends GraphBase { const nestingDepth = dp.util.getNestedDepth(rootContextId); let stats = null; - if (this.context.statsEnabled) { + if (statsEnabled) { stats = dp.queries.statsByContext(rootContextId); } diff --git a/dbux-graph-host/src/graph/syncGraph/ContextNode.js b/dbux-graph-host/src/graph/syncGraph/ContextNode.js index 7f5a66540..9db11457e 100644 --- a/dbux-graph-host/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-host/src/graph/syncGraph/ContextNode.js @@ -39,7 +39,7 @@ class ContextNode extends HostComponentEndpoint { const { statsEnabled - } = this.context; + } = this.context.graphDocument.state; const { applicationId, contextId } = context; const app = allApplications.getById(applicationId); From 77fb71d5edef599a824b15029ee45f5dc0b60f5c Mon Sep 17 00:00:00 2001 From: MiccWan Date: Mon, 7 Mar 2022 15:42:58 +0800 Subject: [PATCH 3/7] always resolve stats data --- .../src/graph/asyncGraph/AsyncGraph.js | 52 +++++++++---------- .../src/graph/syncGraph/ContextNode.js | 36 +++++-------- .../src/componentLib/HostComponentEndpoint.js | 4 +- .../src/graph/asyncGraph/AsyncGraph.js | 6 +-- .../src/graph/syncGraph/ContextNode.js | 18 +------ 5 files changed, 44 insertions(+), 72 deletions(-) diff --git a/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js b/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js index 03fe57fc6..5d112a051 100644 --- a/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js +++ b/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js @@ -139,8 +139,7 @@ class AsyncGraph extends GraphBase { stats, } = nodeData; - const { themeMode, screenshotMode, graphDocument } = this.context; - const { statsEnabled } = graphDocument.state; + const { themeMode, screenshotMode } = this.context; // const highContractMode = screenshotMode && !asyncDetailMode; const highContractMode = screenshotMode; // const moduleLabel = packageName ? `${packageName} | ` : ''; @@ -184,31 +183,32 @@ class AsyncGraph extends GraphBase { // shortLabel = `${depthLabel}${shortLabel}`; // fullLabel = `${depthLabel}${fullLabel}`; } - if (statsEnabled) { - const { statsIconUris } = this.context; - const { - nTreeContexts, - nTreeStaticContexts, - nTreeFileCalled, - nTreeTraces, - } = stats; - statsRawEl = /*html*/` -
-
- ${nTreeContexts} -
-
- ${nTreeStaticContexts} -
-
- ${nTreeFileCalled} -
-
- ${nTreeTraces} -
+ + // generate stats label + const { statsIconUris } = this.context; + const { + nTreeContexts, + nTreeStaticContexts, + nTreeFileCalled, + nTreeTraces, + } = stats; + statsRawEl = /*html*/` +
+
+ ${nTreeContexts}
- `; - } +
+ ${nTreeStaticContexts} +
+
+ ${nTreeFileCalled} +
+
+ ${nTreeTraces} +
+
+ `; + const { asyncNodeId, applicationId, isTerminalNode } = asyncNode; const asyncNodeData = { 'async-node-id': asyncNodeId, diff --git a/dbux-graph-client/src/graph/syncGraph/ContextNode.js b/dbux-graph-client/src/graph/syncGraph/ContextNode.js index db5a288cb..f1da38da4 100644 --- a/dbux-graph-client/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-client/src/graph/syncGraph/ContextNode.js @@ -98,7 +98,6 @@ class ContextNode extends ClientComponentEndpoint { hasError, } = this.state; - const { statsEnabled } = this.context.graphDocument.state; const moduleLabel = packageName ? `${packageName} | ` : ''; this.el.id = `application_${applicationId}-context_${contextId}`; @@ -109,27 +108,20 @@ class ContextNode extends ClientComponentEndpoint { this.els.valueLabel.textContent = valueLabel; this.els.errorLabel.textContent = hasError ? '🔥' : ''; - if (statsEnabled) { - const { - nTreeContexts, - nTreeStaticContexts, - nTreeFileCalled, - nTreeTraces, - } = this.state; - const { - statsIconUris - } = this.context; - this.els.statsNTreeFileCalled.innerHTML = `${nTreeFileCalled}`; - this.els.statsNTreeStaticContexts.innerHTML = `${nTreeStaticContexts}`; - this.els.statsNTreeContexts.innerHTML = `${nTreeContexts}`; - this.els.statsNTreeTraces.innerHTML = `${nTreeTraces}`; - } - else { - this.els.statsNTreeContexts.innerHTML = ''; - this.els.statsNTreeStaticContexts.innerHTML = ''; - this.els.statsNTreeFileCalled.innerHTML = ''; - this.els.statsNTreeTraces.innerHTML = ''; - } + // generate stats label + const { + nTreeContexts, + nTreeStaticContexts, + nTreeFileCalled, + nTreeTraces, + } = this.state; + const { + statsIconUris + } = this.context; + this.els.statsNTreeFileCalled.innerHTML = `${nTreeFileCalled}`; + this.els.statsNTreeStaticContexts.innerHTML = `${nTreeStaticContexts}`; + this.els.statsNTreeContexts.innerHTML = `${nTreeContexts}`; + this.els.statsNTreeTraces.innerHTML = `${nTreeTraces}`; const prevSibling = this.el.previousElementSibling; const isAsyncRoot = prevSibling && parseInt(prevSibling.dataset.rootContextId, 10) !== rootContextId; diff --git a/dbux-graph-host/src/componentLib/HostComponentEndpoint.js b/dbux-graph-host/src/componentLib/HostComponentEndpoint.js index 20a315fcb..12e03c8ae 100644 --- a/dbux-graph-host/src/componentLib/HostComponentEndpoint.js +++ b/dbux-graph-host/src/componentLib/HostComponentEndpoint.js @@ -5,8 +5,8 @@ import ComponentEndpoint from '@dbux/graph-common/src/componentLib/ComponentEndp import NestedError from '@dbux/common/src/NestedError'; import HostComponentList from './HostComponentList'; -const Verbose = 1; -// const Verbose = 0; +// const Verbose = 1; +const Verbose = 0; // const Verbose = 2; /** diff --git a/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js b/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js index 95665cffb..bf5315435 100644 --- a/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js +++ b/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js @@ -58,7 +58,6 @@ class AsyncGraph extends GraphBase { * #########################################################################*/ makeChildrenData() { - const { statsEnabled } = this.context.graphDocument.state; const appData = allApplications.selection.data; const asyncNodes = appData.asyncNodesInOrder.getAllActual(); @@ -99,10 +98,7 @@ class AsyncGraph extends GraphBase { const parentAsyncNodeId = parentEdge?.parentAsyncNodeId; const nestingDepth = dp.util.getNestedDepth(rootContextId); - let stats = null; - if (statsEnabled) { - stats = dp.queries.statsByContext(rootContextId); - } + let stats = dp.queries.statsByContext(rootContextId); return { asyncNode, diff --git a/dbux-graph-host/src/graph/syncGraph/ContextNode.js b/dbux-graph-host/src/graph/syncGraph/ContextNode.js index 9db11457e..e6cfe39a2 100644 --- a/dbux-graph-host/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-host/src/graph/syncGraph/ContextNode.js @@ -37,10 +37,6 @@ class ContextNode extends HostComponentEndpoint { context } = this.state; - const { - statsEnabled - } = this.context.graphDocument.state; - const { applicationId, contextId } = context; const app = allApplications.getById(applicationId); const dp = app.dataProvider; @@ -50,9 +46,7 @@ class ContextNode extends HostComponentEndpoint { this.setNodeState(); - if (statsEnabled) { - this._addStats(this.state); - } + this._addStats(this.state); // add controllers let hasChildren = !!this.getActualChildContexts().length; @@ -147,16 +141,6 @@ class ContextNode extends HostComponentEndpoint { return stats?.nTreeTraces || 0; } - setStatsEnabled(enabled) { - const upd = { - statsEnabled: enabled - }; - if (enabled) { - this._addStats(upd); - } - this.setState(upd); - } - _addStats(_update) { const stats = this.allContextStats; _update.nTreeFileCalled = stats.nTreeFileCalled; From 0f6ac457b43e676e7f3fe6b4cb8a6bb0d065872e Mon Sep 17 00:00:00 2001 From: MiccWan Date: Mon, 7 Mar 2022 15:58:04 +0800 Subject: [PATCH 4/7] add `nTreePackages` stats --- dbux-data/src/impl/queries/StatsByContextQuery.js | 12 +++++++++++- dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js | 4 ++++ dbux-graph-client/src/graph/syncGraph/ContextNode.js | 3 +++ dbux-graph-host/src/graph/syncGraph/ContextNode.js | 1 + 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/dbux-data/src/impl/queries/StatsByContextQuery.js b/dbux-data/src/impl/queries/StatsByContextQuery.js index 00c5af54b..10adfbe27 100644 --- a/dbux-data/src/impl/queries/StatsByContextQuery.js +++ b/dbux-data/src/impl/queries/StatsByContextQuery.js @@ -25,6 +25,12 @@ export class ContextStats { * @type {number} */ nTreeTraces = 0; + + /** + * Amount of packages in context, plus it's entire sub-tree. + * @type {number} + */ + nTreePackages = 0; } export default class StatsByContextQuery extends SubscribableQuery { @@ -82,6 +88,7 @@ export default class StatsByContextQuery extends SubscribableQuery { const staticContexts = new Set(); const programIds = new Set(); + const packageNames = new Set(); const staticContextId = dp.util.getContextStaticContextId(contextId); staticContexts.add(staticContextId); @@ -91,6 +98,7 @@ export default class StatsByContextQuery extends SubscribableQuery { const staticContextProgramId = dp.util.getContextStaticContext(contextId)?.programId; programIds.add(staticContextProgramId); + packageNames.add(dp.util.getContextPackageName(contextId)); for (const child of children) { const childSets = dfs(child); @@ -98,16 +106,18 @@ export default class StatsByContextQuery extends SubscribableQuery { // add childSet to staticContextSet childSets.staticContextSet.forEach(staticContexts.add, staticContexts); childSets.programIdSet.forEach(programIds.add, programIds); + childSets.packageNameSet.forEach(packageNames.add, packageNames); stats.nTreeContexts += this.getContextNTreeContexts(child.contextId); stats.nTreeTraces += this.getContextNTreeTraces(child.contextId); } stats.nTreeStaticContexts = staticContexts.size; stats.nTreeFileCalled = programIds.size; + stats.nTreePackages = packageNames.size; this.storeByKey(contextId, stats); - const sets = { staticContextSet: staticContexts, programIdSet: programIds }; + const sets = { staticContextSet: staticContexts, programIdSet: programIds, packageNameSet: packageNames }; return sets; } ); diff --git a/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js b/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js index 5d112a051..1ff48e825 100644 --- a/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js +++ b/dbux-graph-client/src/graph/asyncGraph/AsyncGraph.js @@ -191,6 +191,7 @@ class AsyncGraph extends GraphBase { nTreeStaticContexts, nTreeFileCalled, nTreeTraces, + nTreePackages, } = stats; statsRawEl = /*html*/`
@@ -206,6 +207,9 @@ class AsyncGraph extends GraphBase {
${nTreeTraces}
+
+ ${nTreePackages} +
`; diff --git a/dbux-graph-client/src/graph/syncGraph/ContextNode.js b/dbux-graph-client/src/graph/syncGraph/ContextNode.js index f1da38da4..ec54e796e 100644 --- a/dbux-graph-client/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-client/src/graph/syncGraph/ContextNode.js @@ -46,6 +46,7 @@ class ContextNode extends ClientComponentEndpoint {
+
@@ -114,6 +115,7 @@ class ContextNode extends ClientComponentEndpoint { nTreeStaticContexts, nTreeFileCalled, nTreeTraces, + nTreePackages, } = this.state; const { statsIconUris @@ -122,6 +124,7 @@ class ContextNode extends ClientComponentEndpoint { this.els.statsNTreeStaticContexts.innerHTML = `${nTreeStaticContexts}`; this.els.statsNTreeContexts.innerHTML = `${nTreeContexts}`; this.els.statsNTreeTraces.innerHTML = `${nTreeTraces}`; + this.els.statsNTreePackages.innerHTML = `${nTreePackages}`; const prevSibling = this.el.previousElementSibling; const isAsyncRoot = prevSibling && parseInt(prevSibling.dataset.rootContextId, 10) !== rootContextId; diff --git a/dbux-graph-host/src/graph/syncGraph/ContextNode.js b/dbux-graph-host/src/graph/syncGraph/ContextNode.js index e6cfe39a2..48caab515 100644 --- a/dbux-graph-host/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-host/src/graph/syncGraph/ContextNode.js @@ -147,6 +147,7 @@ class ContextNode extends HostComponentEndpoint { _update.nTreeStaticContexts = stats.nTreeStaticContexts; _update.nTreeContexts = stats.nTreeContexts; _update.nTreeTraces = stats.nTreeTraces; + _update.nTreePackages = stats.nTreePackages; } // ######################################## From 69e8171ccf4dee34fcd84a716ac33c60505c4ff1 Mon Sep 17 00:00:00 2001 From: MiccWan Date: Mon, 7 Mar 2022 17:12:35 +0800 Subject: [PATCH 5/7] support `GroupNode` stats --- .../src/impl/queries/StatsByContextQuery.js | 94 +++++++++++++------ .../src/graph/asyncGraph/AsyncGraph.js | 14 ++- 2 files changed, 76 insertions(+), 32 deletions(-) diff --git a/dbux-data/src/impl/queries/StatsByContextQuery.js b/dbux-data/src/impl/queries/StatsByContextQuery.js index 10adfbe27..dd580a6a7 100644 --- a/dbux-data/src/impl/queries/StatsByContextQuery.js +++ b/dbux-data/src/impl/queries/StatsByContextQuery.js @@ -2,6 +2,25 @@ import SubscribableQuery from '../../queries/SubscribableQuery'; export class ContextStats { + /** + * + * @param {...ContextStats} stats + */ + static merge(...stats) { + const newStats = new ContextStats(); + + for (const s of stats) { + newStats.nTreeContexts += s.nTreeContexts; + newStats.nTreeTraces += s.nTreeTraces; + + s._staticContextIds.forEach(newStats._staticContextIds.add, newStats._staticContextIds); + s._programIds.forEach(newStats._programIds.add, newStats._programIds); + s._packageNames.forEach(newStats._packageNames.add, newStats._packageNames); + } + + return newStats; + } + /** * Amount of contexts in context, plus it's entire sub-tree. * @type {number} @@ -9,28 +28,49 @@ export class ContextStats { nTreeContexts = 0; /** - * Amount of referenced staticContexts in context, plus it's entire sub-tree. + * Amount of traces in context, plus it's entire sub-tree. * @type {number} */ - nTreeStaticContexts = 0; + nTreeTraces = 0; /** - * Amount of file called in context, plus it's entire sub-tree.? + * Amount of referenced staticContexts in context, plus it's entire sub-tree. * @type {number} */ - nTreeFileCalled = 0; + get nTreeStaticContexts() { + return this._staticContextIds.size; + } /** - * Amount of traces in context, plus it's entire sub-tree. + * Amount of file called in context, plus it's entire sub-tree.? * @type {number} */ - nTreeTraces = 0; - + get nTreeFileCalled() { + return this._programIds.size; + } + /** * Amount of packages in context, plus it's entire sub-tree. * @type {number} */ - nTreePackages = 0; + get nTreePackages() { + return this._packageNames.size; + } + + /** + * @type {Set} + */ + _staticContextIds = new Set(); + + /** + * @type {Set} + */ + _programIds = new Set(); + + /** + * @type {Set} + */ + _packageNames = new Set(); } export default class StatsByContextQuery extends SubscribableQuery { @@ -56,18 +96,8 @@ export default class StatsByContextQuery extends SubscribableQuery { * @param {number[]} contextIds */ getCombinedStats(contextIds) { - let stats = this._cache.get(contextIds[0]); - const keys = Object.keys(stats); - if (contextIds.length > 1) { - stats = { ...stats }; - for (let i = 1; i < contextIds.length; ++i) { - const next = this._cache.get(contextIds[i]); - for (const key of keys) { - stats[key] += next[key]; - } - } - } - return stats; + const allStats = contextIds.map((contextId) => this._cache.get(contextId)); + return ContextStats.merge(...allStats); } /** ########################################################################### @@ -86,38 +116,40 @@ export default class StatsByContextQuery extends SubscribableQuery { const { contextId } = context; const stats = this._cache.get(contextId) || new ContextStats(); - const staticContexts = new Set(); - const programIds = new Set(); - const packageNames = new Set(); + const staticContextIds = stats._staticContextIds; + const programIds = stats._programIds; + const packageNames = stats._packageNames; - const staticContextId = dp.util.getContextStaticContextId(contextId); - staticContexts.add(staticContextId); stats.nTreeContexts = 1; const childTraces = dp.indexes.traces.byContext.get(contextId); stats.nTreeTraces = childTraces?.length || 0; + const staticContextId = dp.util.getContextStaticContextId(contextId); + staticContextIds.add(staticContextId); const staticContextProgramId = dp.util.getContextStaticContext(contextId)?.programId; programIds.add(staticContextProgramId); - packageNames.add(dp.util.getContextPackageName(contextId)); + const packageName = dp.util.getContextPackageName(contextId); + packageNames.add(packageName); for (const child of children) { const childSets = dfs(child); // add childSet to staticContextSet - childSets.staticContextSet.forEach(staticContexts.add, staticContexts); + childSets.staticContextIdSet.forEach(staticContextIds.add, staticContextIds); childSets.programIdSet.forEach(programIds.add, programIds); childSets.packageNameSet.forEach(packageNames.add, packageNames); stats.nTreeContexts += this.getContextNTreeContexts(child.contextId); stats.nTreeTraces += this.getContextNTreeTraces(child.contextId); } - stats.nTreeStaticContexts = staticContexts.size; - stats.nTreeFileCalled = programIds.size; - stats.nTreePackages = packageNames.size; + // data are directly added into the set + // stats._staticContextIds = staticContextIds; + // stats._programIds = programIds; + // stats._packageNames = packageNames; this.storeByKey(contextId, stats); - const sets = { staticContextSet: staticContexts, programIdSet: programIds, packageNameSet: packageNames }; + const sets = { staticContextIdSet: staticContextIds, programIdSet: programIds, packageNameSet: packageNames }; return sets; } ); diff --git a/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js b/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js index bf5315435..fadd2f481 100644 --- a/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js +++ b/dbux-graph-host/src/graph/asyncGraph/AsyncGraph.js @@ -98,7 +98,7 @@ class AsyncGraph extends GraphBase { const parentAsyncNodeId = parentEdge?.parentAsyncNodeId; const nestingDepth = dp.util.getNestedDepth(rootContextId); - let stats = dp.queries.statsByContext(rootContextId); + const stats = this.getContextStats(executionContext); return { asyncNode, @@ -225,6 +225,18 @@ class AsyncGraph extends GraphBase { return asyncNodeData; } + getContextStats({ applicationId, contextId }) { + const dp = allApplications.getById(applicationId).dataProvider; + const stats = dp.queries.statsByContext(contextId); + return { + nTreeFileCalled: stats.nTreeFileCalled, + nTreeStaticContexts: stats.nTreeStaticContexts, + nTreeContexts: stats.nTreeContexts, + nTreeTraces: stats.nTreeTraces, + nTreePackages: stats.nTreePackages, + }; + } + getAsyncNodeWidthDown(nodeData, dataByNodeMap) { if (!nodeData.widthDown) { const { applicationId, rootContextId } = nodeData.asyncNode; From 5b05d1a342d8520fb14e4b045ae17a1cc02de74b Mon Sep 17 00:00:00 2001 From: MiccWan Date: Mon, 7 Mar 2022 17:31:17 +0800 Subject: [PATCH 6/7] add `nTreePackages` stats icon --- dbux-code/resources/dark/nodejs.svg | 12 ++++++++++++ dbux-code/resources/light/nodejs.svg | 12 ++++++++++++ dbux-graph-client/src/graph/styles.css | 1 + dbux-graph-host/src/graph/GraphDocument.js | 1 + 4 files changed, 26 insertions(+) create mode 100644 dbux-code/resources/dark/nodejs.svg create mode 100644 dbux-code/resources/light/nodejs.svg diff --git a/dbux-code/resources/dark/nodejs.svg b/dbux-code/resources/dark/nodejs.svg new file mode 100644 index 000000000..f51cf4858 --- /dev/null +++ b/dbux-code/resources/dark/nodejs.svg @@ -0,0 +1,12 @@ + + + Layer 1 + + + + + + + + + \ No newline at end of file diff --git a/dbux-code/resources/light/nodejs.svg b/dbux-code/resources/light/nodejs.svg new file mode 100644 index 000000000..f51cf4858 --- /dev/null +++ b/dbux-code/resources/light/nodejs.svg @@ -0,0 +1,12 @@ + + + Layer 1 + + + + + + + + + \ No newline at end of file diff --git a/dbux-graph-client/src/graph/styles.css b/dbux-graph-client/src/graph/styles.css index 014265c30..20d707a75 100644 --- a/dbux-graph-client/src/graph/styles.css +++ b/dbux-graph-client/src/graph/styles.css @@ -671,6 +671,7 @@ body:not(.theme-mode-dark) .highlight { .context-stats img { width: 13px; height: 13px; + filter: grayscale(1); } /** ########################################################################### diff --git a/dbux-graph-host/src/graph/GraphDocument.js b/dbux-graph-host/src/graph/GraphDocument.js index 3d282cb7a..7084e6846 100644 --- a/dbux-graph-host/src/graph/GraphDocument.js +++ b/dbux-graph-host/src/graph/GraphDocument.js @@ -151,6 +151,7 @@ class GraphDocument extends HostComponentEndpoint { nTreeStaticContexts: this.getIconUri('nTreeStaticContextsStats.svg'), nTreeFileCalled: this.getIconUri('document.svg'), nTreeTraces: this.getIconUri('circuit.svg'), + nTreePackages: this.getIconUri('nodejs.svg'), }; return { themeMode, From 3f50f92b4ff2b608c2f07035f54fc2f5168a02bc Mon Sep 17 00:00:00 2001 From: MiccWan Date: Mon, 7 Mar 2022 18:07:46 +0800 Subject: [PATCH 7/7] move `addStats` from `init` to `update` --- dbux-graph-host/src/graph/syncGraph/ContextNode.js | 6 ++++-- dbux-graph-host/src/graph/syncGraph/HoleNode.js | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/dbux-graph-host/src/graph/syncGraph/ContextNode.js b/dbux-graph-host/src/graph/syncGraph/ContextNode.js index 48caab515..67b6587a4 100644 --- a/dbux-graph-host/src/graph/syncGraph/ContextNode.js +++ b/dbux-graph-host/src/graph/syncGraph/ContextNode.js @@ -46,8 +46,6 @@ class ContextNode extends HostComponentEndpoint { this.setNodeState(); - this._addStats(this.state); - // add controllers let hasChildren = !!this.getActualChildContexts().length; this.controllers.createComponent('GraphNode', { hasChildren }); @@ -55,6 +53,10 @@ class ContextNode extends HostComponentEndpoint { this.controllers.createComponent('Highlighter'); } + update() { + this._addStats(this.state); + } + /** * @virtual */ diff --git a/dbux-graph-host/src/graph/syncGraph/HoleNode.js b/dbux-graph-host/src/graph/syncGraph/HoleNode.js index 843797728..159209762 100644 --- a/dbux-graph-host/src/graph/syncGraph/HoleNode.js +++ b/dbux-graph-host/src/graph/syncGraph/HoleNode.js @@ -16,6 +16,7 @@ export default class HoleNode extends GroupNode { } update() { + super.update(); this.state.contextLabel = `(hidden: ${this.state.group.contextCount})`; }