@acala-network/chopsticks 0.3.11 → 0.4.0

package/{dist → lib}/rpc/substrate/chain.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const shared_1 = require("../shared");
+const processHeader = (header) => {
+    const res = header.toJSON();
+    res.number = '0x' + res.number.toString(16); // number is hex format
+    return res;
+};
 const handlers = {
     chain_getBlockHash: async (context, [blockNumber]) => {
         const block = await context.chain.getBlockAt(blockNumber);
@@ -14,7 +19,7 @@ const handlers = {
         if (!block) {
             throw new shared_1.ResponseError(1, `Block ${hash} not found`);
         }
-        return await block.header;
+        return processHeader(await block.header);
     },
     chain_getBlock: async (context, [hash]) => {
         const block = await context.chain.getBlock(hash);
@@ -37,7 +42,7 @@ const handlers = {
         const id = context.chain.headState.subscribeHead(() => update());
         const callback = subscribe('chain_newHead', id, () => context.chain.headState.unsubscribeHead(id));
         update = async () => {
-            callback(await context.chain.head.header);
+            callback(processHeader(await context.chain.head.header));
         };
         update();
         return id;
@@ -45,9 +50,9 @@ const handlers = {
     chain_subscribeFinalizedHeads: async (context, _params, { subscribe }) => {
         let update = () => { };
         const id = context.chain.headState.subscribeHead(() => update());
-        const callback = subscribe('chain_newFinalizedHead', id, () => context.chain.headState.unsubscribeHead(id));
+        const callback = subscribe('chain_finalizedHead', id, () => context.chain.headState.unsubscribeHead(id));
         update = async () => {
-            callback(await context.chain.head.header);
+            callback(processHeader(await context.chain.head.header));
         };
         update();
         return id;
@@ -59,6 +64,7 @@ const handlers = {
 const alias = {
     chain_subscribeNewHeads: handlers.chain_subscribeNewHead,
     chain_unsubscribeNewHeads: handlers.chain_unsubscribeNewHead,
+    chain_unsubscribeFinalizedHeads: handlers.chain_unsubscribeNewHead,
 };
 exports.default = {
     ...handlers,

package/lib/rpc/substrate/system.d.ts

@@ -0,0 +1,3 @@
+import { Handlers } from '../shared';
+declare const handlers: Handlers;
+export default handlers;

package/{dist → lib}/server.js

@@ -76,6 +76,7 @@ const createServer = async (handler, port) => {
                 subscriptions[subid] = onCancel;
                 return (data) => {
                     if (subscriptions[subid]) {
+                        logger.trace({ method, subid, data: (0, logger_1.truncate)(data) }, 'Subscription notification');
                         send({
                             jsonrpc: '2.0',
                             method,
@@ -128,7 +129,11 @@ const createServer = async (handler, port) => {
             }, 'Received message');
             try {
                 const resp = await handler(req, subscriptionManager);
-                logger.trace('Sending response for request %o %o', req.id, req.method);
+                logger.trace({
+                    id: req.id,
+                    method: req.method,
+                    result: (0, logger_1.truncate)(resp),
+                }, 'Sending response for request');
                 send({
                     id: req.id,
                     jsonrpc: '2.0',

package/{dist → lib}/setup.js

@@ -63,8 +63,10 @@ const setup = async (argv) => {
     });
     if (argv.timestamp)
         await (0, time_travel_1.timeTravel)(chain, argv.timestamp);
-    await (0, import_storage_1.importStorage)(chain, argv['import-storage']);
+    // override wasm before importing storage, in case new pallets have been
+    // added that have storage imports
     await (0, import_storage_1.overrideWasm)(chain, argv['wasm-override']);
+    await (0, import_storage_1.importStorage)(chain, argv['import-storage']);
     return { chain, api, ws: provider };
 };
 exports.setup = setup;

package/{dist → lib}/utils/decoder.js

@@ -100,6 +100,10 @@ const decodeStorageDiff = async (block, diff) => {
         lodash_1.default.merge(oldState, await (0, exports.decodeKeyValue)(block, key, (await block.get(key))));
         lodash_1.default.merge(newState, await (0, exports.decodeKeyValue)(block, key, value));
     }
-    return [oldState, newState, diffPatcher.diff(oldState, newState)];
+    const oldStateWithoutEvents = lodash_1.default.cloneDeep(oldState);
+    if (oldStateWithoutEvents['system']?.['events']) {
+        oldStateWithoutEvents['system']['events'] = [];
+    }
+    return [oldState, newState, diffPatcher.diff(oldStateWithoutEvents, newState)];
 };
 exports.decodeStorageDiff = decodeStorageDiff;

package/{dist → lib}/utils/set-storage.js

@@ -28,12 +28,14 @@ function objectToStorageItems(meta, storage) {
                 throw Error(`Cannot find storage ${storageName} in pallet ${sectionName}`);
             if (storageEntry.meta.type.isPlain) {
                 const key = new types_1.StorageKey(meta.registry, [storageEntry]);
-                storageItems.push([key.toHex(), storage ? meta.registry.createType(key.outputType, storage).toHex(true) : null]);
+                const type = storageEntry.meta.modifier.isOptional ? `Option<${key.outputType}>` : key.outputType;
+                storageItems.push([key.toHex(), storage ? meta.registry.createType(type, storage).toHex() : null]);
             }
             else {
                 for (const [keys, value] of storage) {
                     const key = new types_1.StorageKey(meta.registry, [storageEntry, keys]);
-                    storageItems.push([key.toHex(), value ? meta.registry.createType(key.outputType, value).toHex(true) : null]);
+                    const type = storageEntry.meta.modifier.isOptional ? `Option<${key.outputType}>` : key.outputType;
+                    storageItems.push([key.toHex(), value ? meta.registry.createType(type, value).toHex() : null]);
                 }
             }
         }

package/package.json

@@ -1,91 +1,68 @@
 {
   "name": "@acala-network/chopsticks",
-  "version": "0.3.11",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "version": "0.4.0",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "author": "Bryan Chen <xlchen1291@gmail.com>",
   "license": "Apache-2.0",
-  "packageManager": "yarn@3.2.4",
-  "workspaces": [
-    ".",
-    "executor/pkg"
-  ],
   "bin": "./chopsticks.js",
   "scripts": {
     "lint": "tsc --noEmit --project tsconfig.json && eslint . --ext .js,.ts && prettier --check .",
     "fix": "eslint . --ext .js,.ts --fix && prettier -w .",
-    "prepare": "husky install",
-    "start": "ts-node --transpile-only src/cli.ts",
-    "build": "rm -rf dist && tsc -p tsconfig.prod.json",
-    "build-wasm": "wasm-pack build executor --target nodejs --scope acala-network",
-    "build-wasm-logging": "yarn build-wasm --features=logging",
-    "check": "cd executor && cargo check --locked",
-    "test": "vitest --silent",
-    "test:dev": "LOG_LEVEL=trace vitest --inspect",
-    "dev": "LOG_LEVEL=trace ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=configs/dev.yml",
-    "dev:karura": "ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=configs/karura.yml",
-    "dev:acala": "ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=configs/acala.yml",
-    "dev:moonriver": "ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=configs/moonriver.yml",
-    "dev:moonbeam": "ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=configs/moonbeam.yml"
+    "build": "rm -rf lib && tsc -p ./tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "script:start": "cd ../..; ts-node packages/chopsticks/src/cli.ts",
+    "script:run": "LOG_LEVEL=trace ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=../../configs/dev.yml",
+    "dev:karura": "ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=../../configs/karura.yml",
+    "dev:acala": "ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=../../configs/acala.yml",
+    "dev:moonriver": "ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=../../configs/moonriver.yml",
+    "dev:moonbeam": "ts-node-dev --transpile-only --inspect --notify=false src/cli.ts -- dev --config=../../configs/moonbeam.yml"
   },
   "dependencies": {
-    "@acala-network/chopsticks-executor": "0.3.10",
-    "@polkadot/api": "^9.12.1",
-    "@polkadot/rpc-provider": "^9.12.1",
-    "@polkadot/types": "^9.12.1",
-    "@polkadot/types-codec": "^9.12.1",
-    "@polkadot/types-known": "^9.12.1",
-    "@polkadot/util": "^10.2.6",
-    "@polkadot/util-crypto": "^10.2.6",
-    "axios": "^1.2.5",
+    "@acala-network/chopsticks-executor": "0.4.0",
+    "@polkadot/api": "^9.14.2",
+    "@polkadot/rpc-provider": "^9.14.2",
+    "@polkadot/types": "^9.14.2",
+    "@polkadot/types-codec": "^9.14.2",
+    "@polkadot/types-known": "^9.14.2",
+    "@polkadot/util": "^10.4.2",
+    "@polkadot/util-crypto": "^10.4.2",
+    "axios": "^1.3.3",
     "js-yaml": "^4.1.0",
     "jsondiffpatch": "^0.4.1",
     "lodash": "^4.17.21",
-    "pino": "^8.8.0",
-    "pino-pretty": "^9.1.1",
+    "pino": "^8.10.0",
+    "pino-pretty": "^9.3.0",
     "reflect-metadata": "^0.1.13",
     "sqlite3": "^5.1.4",
-    "typeorm": "^0.3.11",
-    "typescript": "^4.9.4",
-    "ws": "^8.12.0",
-    "yargs": "^17.6.2",
-    "zod": "^3.20.2"
+    "typeorm": "^0.3.12",
+    "ws": "^8.12.1",
+    "yargs": "^17.7.1",
+    "zod": "^3.20.6"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.14.0",
+    "@types/prettier": "^2.7.2",
     "@types/ws": "^8.5.4",
-    "@types/yargs": "^17.0.20",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
-    "eslint": "^8.32.0",
+    "@types/yargs": "^17.0.22",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "ts-node": "^10.9.1",
     "ts-node-dev": "^2.0.0",
-    "vitest": "^0.28.3",
-    "wasm-pack": "^0.10.3"
+    "typescript": "^4.9.5",
+    "vitest": "^0.28.5"
   },
   "files": [
-    "dist",
-    "bin",
-    "template"
-  ],
-  "engines": {
-    "node": ">=v14"
-  },
-  "prettier": {
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
-  },
-  "lint-staged": {
-    "*.{js,ts}": "eslint --cache --fix",
-    "*.{js,ts,css,md}": "prettier --write"
-  }
+    "lib",
+    "template",
+    "chopsticks.js"
+  ]
 }

package/template/diff.html

@@ -13,7 +13,7 @@
 
 			div#app {
 				margin: 0 !important;
-				padding: 10px !important;
+				padding: 0 !important;
 			}
 
 			.diff {
@@ -24,6 +24,36 @@
 				line-height: 150%;
 			}
 
+			.diff > button {
+				position: absolute;
+				display: none;
+				left: 50%;
+				top: 50%;
+				translate: -50% -50%;
+				background: #fff;
+				border: none;
+				border-radius: 50%;
+				padding: 10px;
+				cursor: pointer;
+				cursor: pointer;
+				opacity: 80%;
+				width: 40px;
+				height: 40px;
+			}
+
+			.diff > button > img {
+				width: 100%;
+				height: 100%;
+			}
+
+			.diff > button:hover {
+				opacity: 100%;
+			}
+
+			.diff:hover > button {
+				display: block;
+			}
+
 			.diffWrap {
 				position: relative;
 				z-index: 1;
@@ -37,30 +67,36 @@
 
 			.diffAdd {
 				color: darkseagreen;
+				display: inline-flex;
 			}
 
 			.diffRemove {
 				text-decoration: line-through;
 				text-decoration-thickness: 1px;
 				color: red;
+				display: inline-flex;
 			}
 
 			.diffUpdateFrom {
 				text-decoration: line-through;
 				text-decoration-thickness: 1px;
 				color: red;
+				display: inline-flex;
 			}
 
 			.diffUpdateTo {
 				color: darkseagreen;
+				display: inline-flex;
 			}
 
 			.diffUpdateArrow {
 				color: #ccc;
 			}
+
 			.unchanged {
 				color: #666;
 			}
+
 			.delta {
 				color: #ccc;
 				font-size: 12px;
@@ -94,76 +130,82 @@
 				return { className: className.join(' ') }
 			}
 
-			function valueRenderer(raw, value, ...keys) {
-				const modifyPath = keys.reverse().join('.')
-				const removePath = keys.map(x => Number.isInteger(parseInt(x)) ? '_' + x : x).join('.')
-				const isDelta = _.has(delta, modifyPath) || _.has(delta, removePath)
+			function valueRenderer(viewPartial) {
+				return function (raw, value, ...keys) {
+					const modifyPath = keys.reverse().join('.')
+					const removePath = keys.map(x => Number.isInteger(parseInt(x)) ? '_' + x : x).join('.')
+					const isDelta = _.has(delta, modifyPath) || _.has(delta, removePath)
 
-				function renderSpan(name, body) {
-					return (
-						<span key={name} {...styling(['diff', name])}>
-							{body}
-						</span>
-					);
-				}
+					function renderSpan(name, body, raw) {
+						return (
+							<span key={name} {...styling(['diff', name])}>
+								{body}
+								{_.isObjectLike(raw) ? <button onClick={() => viewPartial({ [modifyPath]: raw })}><img src='data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjY0cHgiIHdpZHRoPSI2NHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQyLjEzMyAyNDIuMTMzIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHJva2U9IiMwMDAwMDAiPgoNPGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiLz4KDTxnIGlkPSJTVkdSZXBvX3RyYWNlckNhcnJpZXIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgoNPGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPiA8ZyBpZD0iWE1MSURfMjVfIj4gPHBhdGggaWQ9IlhNTElEXzI2XyIgZD0iTTg5LjI0NywxMzEuNjczbC00Ny43MzIsNDcuNzNsLTE1LjkwOS0xNS45MWMtNC4yOS00LjI5MS0xMC43NDItNS41NzItMTYuMzQ3LTMuMjUyIEMzLjY1NCwxNjIuNTYzLDAsMTY4LjAzMywwLDE3NC4xdjUzLjAzMmMwLDguMjg0LDYuNzE2LDE1LDE1LDE1bDUzLjAzMywwLjAwMWMwLjAwNy0wLjAwMSwwLjAxMi0wLjAwMSwwLjAxOSwwIGM4LjI4NSwwLDE1LTYuNzE2LDE1LTE1YzAtNC4zNzctMS44NzUtOC4zMTYtNC44NjUtMTEuMDU5bC0xNS40NTgtMTUuNDU4bDQ3LjczLTQ3LjcyOWM1Ljg1OC01Ljg1OCw1Ljg1OC0xNS4zNTUsMC0yMS4yMTMgQzEwNC42MDMsMTI1LjgxNSw5NS4xMDQsMTI1LjgxNiw4OS4yNDcsMTMxLjY3M3oiLz4gPHBhdGggaWQ9IlhNTElEXzI4XyIgZD0iTTIyNy4xMzMsMEgxNzQuMWMtNi4wNjcsMC0xMS41MzYsMy42NTUtMTMuODU4LDkuMjZjLTIuMzIxLDUuNjA1LTEuMDM4LDEyLjA1NywzLjI1MiwxNi4zNDdsMTUuOTExLDE1LjkxMSBsLTQ3LjcyOSw0Ny43M2MtNS44NTgsNS44NTgtNS44NTgsMTUuMzU1LDAsMjEuMjEzYzIuOTI5LDIuOTI5LDYuNzY4LDQuMzkzLDEwLjYwNiw0LjM5M2MzLjgzOSwwLDcuNjc4LTEuNDY0LDEwLjYwNi00LjM5NCBsNDcuNzMtNDcuNzNsMTUuOTA5LDE1LjkxYzIuODY5LDIuODcsNi43MDYsNC4zOTQsMTAuNjA5LDQuMzk0YzEuOTMzLDAsMy44ODItMC4zNzMsNS43MzctMS4xNDIgYzUuNjA1LTIuMzIyLDkuMjYtNy43OTIsOS4yNi0xMy44NThWMTVDMjQyLjEzMyw2LjcxNiwyMzUuNDE3LDAsMjI3LjEzMywweiIvPiA8L2c+IDwvZz4KDTwvc3ZnPg==' /></button> : null}
+							</span>
+						);
+					}
 
-				function renderDelta(value) {
-					if (/^\d+(,\d+)*$/.test(value[0]) && /^\d+(,\d+)*$/.test(value[1])) {
-						const oldValue = parseInt(value[0].replace(/,/g, ''))
-						const newValue = parseInt(value[1].replace(/,/g, ''))
-						if (oldValue > 0 && newValue > 0) {
-							const delta = Number(newValue - oldValue)
-							return (<span className="delta" >{delta > 0 ? '+' : ''}{delta.toLocaleString()}</span>)
+					function renderDelta(value) {
+						if (/^\d+(,\d+)*$/.test(value[0]) && /^\d+(,\d+)*$/.test(value[1])) {
+							const oldValue = parseInt(value[0].replace(/,/g, ''))
+							const newValue = parseInt(value[1].replace(/,/g, ''))
+							if (oldValue > 0 && newValue > 0) {
+								const delta = Number(newValue - oldValue)
+								return (<span className="delta" >{delta > 0 ? '+' : ''}{delta.toLocaleString()}</span>)
+							}
 						}
 					}
-				}
 
-				if (isDelta && Array.isArray(value)) {
-					switch (value.length) {
-						case 0:
-						return (
-							<span {...styling('diffWrap')}>
-							{renderSpan('diff', '[]')}
-							</span>
-						)
-						case 1:
-						return (
-							<span {...styling('diffWrap')}>
-							{renderSpan(
-								'diffAdd',
-								stringifyAndShrink(value[0])
-							)}
-							</span>
-						);
-						case 2:
-						return (
-							<span {...styling('diffWrap')}>
-							{renderSpan(
-								'diffUpdateFrom',
-								stringifyAndShrink(value[0])
-							)}
-							{renderSpan('diffUpdateArrow', ' => ')}
-							{renderSpan(
-								'diffUpdateTo',
-								stringifyAndShrink(value[1])
-							)}
-							{renderDelta(value)}
-							</span>
-						);
-						case 3:
-						return (
-							<span {...styling('diffWrap')}>
-							{renderSpan('diffRemove', stringifyAndShrink(value[0]))}
-							</span>
-						);
+					if (isDelta && Array.isArray(value)) {
+						switch (value.length) {
+							case 0:
+								return (
+									<span {...styling('diffWrap')}>
+										{renderSpan('diff', '[]')}
+									</span>
+								)
+							case 1:
+								return (
+									<span {...styling('diffWrap')}>
+										{renderSpan(
+											'diffAdd',
+											stringifyAndShrink(value[0]),
+											value[0]
+										)}
+									</span>
+								);
+							case 2:
+								return (
+									<span {...styling('diffWrap')}>
+										{renderSpan(
+											'diffUpdateFrom',
+											stringifyAndShrink(value[0]),
+											value[0]
+										)}
+										{renderSpan('diffUpdateArrow', ' => ')}
+										{renderSpan(
+											'diffUpdateTo',
+											stringifyAndShrink(value[1]),
+											value[1]
+										)}
+										{renderDelta(value)}
+									</span>
+								);
+							case 3:
+								return (
+									<span {...styling('diffWrap')}>
+										{renderSpan('diffRemove', stringifyAndShrink(value[0]), value[0])}
+									</span>
+								);
+						}
 					}
-				}
 
-				return (
-					<span {...styling('diffWrap')}>
-						{renderSpan('unchanged', stringifyAndShrink(value))}
-					</span>
-				);
+					return (
+						<span {...styling('diffWrap')}>
+							{renderSpan('unchanged', stringifyAndShrink(value), value)}
+						</span>
+					);
+				}
 			};
 
 			function prepareDelta(value) {
@@ -208,30 +250,49 @@
 			class App extends React.Component {
 				constructor(props) {
 					super(props);
-					this.state = { showUnchanged: false };
+					this.state = { showUnchanged: false, partial: null };
 				}
 
 				toggle = (e) => {
 					this.setState(state => {
-						return { showUnchanged: !state.showUnchanged }
+						return { ...state, showUnchanged: !state.showUnchanged }
+					})
+				}
+
+				viewPartial = (value) => {
+					this.setState(state => {
+						return { ...state, partial: _.isEqual(state.partial, value) ? null : value }
 					})
 				}
 
 				render() {
 					return (
 						<div>
-							<input type="checkbox" onChange={this.toggle} id="show_unchanged" />
-							<label for="show_unchanged" style={{fontSize: '12px', color: 'white'}}>Show Unchanged</label>
-							<ReactJsonTree.JSONTree
-								theme={theme}
-								invertTheme={false}
-								data={this.state.showUnchanged ? _.merge(_.cloneDeep(left), delta): delta}
-								valueRenderer={valueRenderer}
-								postprocessValue={prepareDelta}
-								isCustomNode={Array.isArray}
-								shouldExpandNodeInitially={expandFirstLevel}
-								hideRoot
-							/>
+							<div style={{ display: 'flex', flexDirection: 'row' }}>
+								<div style={{ flex: 1, padding: '0 10px', overflow: 'hidden', overflowY: 'scroll', height: '100vh' }}>
+									<input type="checkbox" onChange={this.toggle} id="show_unchanged" />
+									<label for="show_unchanged" style={{ fontSize: '12px', color: 'white' }}>Show Unchanged</label>
+									<ReactJsonTree.JSONTree
+										theme={theme}
+										invertTheme={false}
+										data={this.state.showUnchanged ? _.merge(_.cloneDeep(left), delta) : delta}
+										valueRenderer={valueRenderer(this.viewPartial)}
+										postprocessValue={prepareDelta}
+										isCustomNode={Array.isArray}
+										shouldExpandNodeInitially={expandFirstLevel}
+										hideRoot
+									/>
+								</div>
+								{this.state.partial ? <div style={{ flex: 1, padding: '0 10px', overflow: 'hidden', overflowY: 'scroll', height: '100vh' }}>
+									<ReactJsonTree.JSONTree
+										theme={theme}
+										invertTheme={false}
+										data={this.state.partial}
+										shouldExpandNodeInitially={() => true}
+										hideRoot
+									/>
+								</div> : null}
+							</div>
 						</div>
 					);
 				}