+
{stateDiff.map((d, i) => this.renderDiffs(d, i))}
);
}
renderDiffs(diff, i) {
- const [path, pathRoot] = this.createPathAndBg(diff);
+ const path = this.createPath(diff);
return (
-
+
);
}
- createPathAndBg = (diff) => {
+ createPath = (diff) => {
let path = [];
- let pathRoot;
if (diff.path) {
path = path.concat(diff.path);
- pathRoot = diff.path[0];
- if (!this.pathShades[pathRoot]) {
- const randomShade = PATH_BGS[Math.floor(Math.random() * PATH_BGS.length)];
- this.pathShades[pathRoot] = buildBg(randomShade);
- }
}
if (typeof diff.index !== 'undefined') {
path.push(diff.index);
}
const pathStr = path.length ? path.join('.') : '';
- return [pathStr, pathRoot];
+ return pathStr;
};
ensureString(actionType) {
@@ -182,6 +155,10 @@ export default class Storage extends React.PureComponent {
name = item.mutation.join('');
}
+ if (src !== null && !this.state.showDiffs) {
+ this.setState({ showDiffs: true })
+ }
+
return (
>
)}
-
- {i + 1 < listNow.length && (
-
- )}
- {i + 1 === listNow.length && i + 1 < list.length && (
-
- )}
+
{typeof item.duration === 'number' && (
{formatMs(item.duration)}
)}
+
+ {i + 1 < listNow.length && (
+
+ )}
+ {i + 1 === listNow.length && i + 1 < list.length && (
+
+ )}
+
);
@@ -233,8 +212,18 @@ export default class Storage extends React.PureComponent {
{list.length > 0 && (
- {showStore &&
{'STORE'}
}
- {getActionsName(type)}
+ {showStore && {'STATE'}
}
+ {this.state.showDiffs ? (
+
+ DIFFS
+
+ ) : null}
+ {getActionsName(type)}
+
+
+ TTE
+
+
)}
diff --git a/frontend/app/components/Session_/Storage/storage.module.css b/frontend/app/components/Session_/Storage/storage.module.css
index 55f04d5db..d34ab27b9 100644
--- a/frontend/app/components/Session_/Storage/storage.module.css
+++ b/frontend/app/components/Session_/Storage/storage.module.css
@@ -1,8 +1,7 @@
.button {
- padding: 2px 6px;
+ padding: 3px 6px;
cursor: pointer;
- width: 60px;
border-radius: 3px;
color: $gray-light;
&:hover {
@@ -14,4 +13,4 @@
font-size: 12px;
margin-right: 5px;
-}
\ No newline at end of file
+}