diff --git a/simple-data-txt.txt b/simple-data-txt.txt
index d3fe927..7d9ec15 100644
--- a/simple-data-txt.txt
+++ b/simple-data-txt.txt
@@ -1,3 +1,5 @@
+hmset {uri:url,method:GET,body:"{\"productTypes\":[\"device\",\"software\"],\"pageNumber\":5},anotherKey:anotherValue}" filteredData sameplevalue
+
 set BaicUser:1:name "Job Smith"
 set BaicUser:1:id 1
 lpush user:1:role Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7
@@ -11,7 +13,7 @@ set BaicUser:3:name "New-User"
 set BaicUser:3:id 3
 lpush BaicUser:3:role Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7
 
-lpush WhitePermissionList "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" 
+lpush WhitePermissionList "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"
 
 set global-config:config1 1
 set global-config:config2 2
@@ -51,4 +53,4 @@ hmset global-map map-key-103 map-value-01
 hmset global-map map-key-203 map-value-01
 
 
-set global-string "Note: The Redis Documentation is also available in raw (computer friendly) format in the redis-doc github repository. The Redis Documentation is released under the Creative Commons Attribution-ShareAlike 4.0 International license."
\ No newline at end of file
+set global-string "Note: The Redis Documentation is also available in raw (computer friendly) format in the redis-doc github repository. The Redis Documentation is released under the Creative Commons Attribution-ShareAlike 4.0 International license."
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b6c69d4..d7f7536 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -17,7 +17,7 @@
         <button mat-icon-button matTooltip="Redis API Document"><i class="material-icons">info</i></button>
         <div class="flex1"></div>
         <mat-menu #sideMenu="matMenu">
-          <button mat-menu-item (click)="refreshAndExpand()">Refresh + Expand All Nodes</button>
+          <button mat-menu-item (click)="onRefresh(true)">Refresh + Expand All Nodes</button>
           <button mat-menu-item>Import</button>
           <button mat-menu-item>Export</button>
         </mat-menu>
@@ -30,6 +30,7 @@
       <div class="{{'tree-list ' + ((cli$ | async)?.expanded ? 'cli-expanded':'')}}">
         <app-instance-tree *ngFor="let instance of instances$ | async"
                            (updatePage)="updatePage($event)"
+                           [expandDeep]="expandDeepCommand$"
                            [instance]="instance"></app-instance-tree>
       </div>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ca65ed8..41bc556 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -13,7 +13,7 @@ import {
   REQ_REDIS_CONNECT,
   SELECT_REDIS
 } from './ngrx/actions/redis-actions';
-import {Observable} from 'rxjs';
+import {Observable, Subject} from 'rxjs';
 import {REQ_LOAD_PAGE, REQ_LOAD_ROOT_PAGE} from './ngrx/actions/page-actions';
 import {PageModel} from './models/page-model';
 import {ADD_COMMAND, CLEAR_HISTORY, TOGGLE_CLI} from './ngrx/actions/cli-actions';
@@ -44,6 +44,7 @@ export class AppComponent implements OnInit {
   cli$: Observable<any> = null;
   currentInstance = null;
   cliInputValue = '';
+  expandDeepCommand$: Subject<void> = new Subject();
 
   @ViewChild('cliScrollContent') private cliScrollContent: ElementRef;
 
@@ -59,7 +60,7 @@ export class AppComponent implements OnInit {
   constructor(public dialogService: MatDialog,
               private redisService: RedisService,
               private util: UtilService,
-              private _store: Store<any>
+              private _store: Store<any>,
   ) {
     this.instances$ = this._store.select('redis');
     this.currentPage$ = this._store.select('page');
@@ -97,7 +98,7 @@ export class AppComponent implements OnInit {
   /**
    * on refresh event
    */
-  onRefresh() {
+  onRefresh(expandNodes = false) {
     this.instances$.subscribe(instances => {
       const ins = instances.find(i => i.selected === true);
       if (!ins) {
@@ -107,8 +108,15 @@ export class AppComponent implements OnInit {
       this._store.dispatch({
         type: REQ_REDIS_CONNECT, payload: {
           instance: ins, scb: () => {
+            if (expandNodes) {
+              ins.expanded = true;
+            }
             if (ins.expanded) {
-              this._store.dispatch({type: REQ_FETCH_TREE, payload: {id: ins.id}});
+              this._store.dispatch({type: REQ_FETCH_TREE, payload: {id: ins.id, scb: () => {
+                if (expandNodes) {
+                  setTimeout(() => this.expandDeepCommand$.next(), 0);
+                }
+              }}});
             }
           }
         }
@@ -167,9 +175,6 @@ export class AppComponent implements OnInit {
     this._store.dispatch({type: REQ_LOAD_PAGE, payload: getNewPage()});
   }
 
-  refreshAndExpand() {
-  }
-
   /**
    * right page changed
    * @param page the page data
diff --git a/src/app/components/add-value-dialog/add-value-dialog.component.html b/src/app/components/add-value-dialog/add-value-dialog.component.html
index 8d80869..c360797 100644
--- a/src/app/components/add-value-dialog/add-value-dialog.component.html
+++ b/src/app/components/add-value-dialog/add-value-dialog.component.html
@@ -1,7 +1,13 @@
 <h1 mat-dialog-title>{{isEditMode()?'Edit value':'Add new value'}}</h1>
 <div mat-dialog-content>
   <mat-form-field>
-    <input matInput placeholder="Key" [readonly]="data.hideType" [(ngModel)]="data.key">
+    <textarea matInput placeholder="Key"
+            [readonly]="data.hideType"
+            [(ngModel)]="data.key"
+            cdkTextareaAutosize
+            #autosize="cdkTextareaAutosize"
+            cdkAutosizeMinRows="1"
+            cdkAutosizeMaxRows="7"></textarea>
   </mat-form-field>
 
 
diff --git a/src/app/components/add-value-form/add-value-form.component.html b/src/app/components/add-value-form/add-value-form.component.html
index 97aa21e..f144749 100644
--- a/src/app/components/add-value-form/add-value-form.component.html
+++ b/src/app/components/add-value-form/add-value-form.component.html
@@ -21,17 +21,21 @@
              [(ngModel)]="getItemArray()[i].score">
     </mat-form-field>
 
-    <mat-form-field *ngIf="type === 'Hash Map'">
+    <mat-form-field *ngIf="type === 'Hash Map'" style="flex-grow:0">
       <input matInput placeholder="Key"
              [readonly]="isEditMode"
              (change)="onValueChange()"
              [(ngModel)]="getItemArray()[i].key">
     </mat-form-field>
 
-    <mat-form-field *ngIf="type === 'Hash Map'">
-      <input matInput placeholder="Value"
+    <mat-form-field *ngIf="type === 'Hash Map'" [ngStyle]="{'width': 8 * getItemArray()[i].value.length + 'px'}" style="max-width:70%">
+      <textarea matInput placeholder="Value"
              (change)="onValueChange()"
-             [(ngModel)]="getItemArray()[i].value">
+             [(ngModel)]="getItemArray()[i].value"
+             cdkTextareaAutosize
+             #autosize="cdkTextareaAutosize"
+             cdkAutosizeMinRows="1"
+             cdkAutosizeMaxRows="7"></textarea>
     </mat-form-field>
 
     <button mat-icon-button (click)="onRemoveItem(getItemArray(),i)" [disabled]="isEditMode">
diff --git a/src/app/components/data-viewer/data-viewer.component.html b/src/app/components/data-viewer/data-viewer.component.html
index deb12a0..a66cb29 100644
--- a/src/app/components/data-viewer/data-viewer.component.html
+++ b/src/app/components/data-viewer/data-viewer.component.html
@@ -16,9 +16,18 @@
     </button>
   </div>
 
+  <div class="title">
+    <span class="key"><span class="t">Key</span>: {{pageData.item.key}}</span>
+  </div>
+
+  <div *ngIf="loadingPageData" class="material-icons" class="loading-data">
+    <mat-spinner class="loading-spinner"
+                 [diameter]="20"
+                 [strokeWidth]="2"></mat-spinner>
+  </div>
+
   <div class="string-editor" *ngIf="pageData.item.type === 'string'">
 
-    <span class="key"><span class="t">Key</span>: {{pageData.item.key}}</span>
     <mat-form-field [style.fontSize]="14">
       <mat-label>Value</mat-label>
       <textarea matInput
diff --git a/src/app/components/data-viewer/data-viewer.component.scss b/src/app/components/data-viewer/data-viewer.component.scss
index 7ec0e48..6dbdb70 100644
--- a/src/app/components/data-viewer/data-viewer.component.scss
+++ b/src/app/components/data-viewer/data-viewer.component.scss
@@ -10,6 +10,24 @@
     }
   }
 
+  .title {
+    margin-top: 16px;
+    padding: 16px;
+    .key {
+      font-size: 14px;
+      .t {
+        font-weight: bold;
+        margin-right: 6px;
+      }
+    }
+  }
+
+  .loading-data {
+    padding: 16px;
+    display: flex;
+    align-items: center;
+  }
+
   .table-content {
     margin: 6px 16px 16px 16px;
     position: relative;
@@ -29,18 +47,9 @@
   }
 
   .string-editor {
-    margin-top: 16px;
     padding: 16px;
     display: flex;
     flex-direction: column;
-    .key {
-      font-size: 14px;
-      .t {
-        font-weight: bold;
-        margin-right: 6px;
-      }
-      margin-bottom: 16px;
-    }
     button {
       width: 120px;
     }
diff --git a/src/app/components/data-viewer/data-viewer.component.ts b/src/app/components/data-viewer/data-viewer.component.ts
index 0063f03..e8c0c41 100644
--- a/src/app/components/data-viewer/data-viewer.component.ts
+++ b/src/app/components/data-viewer/data-viewer.component.ts
@@ -32,6 +32,7 @@ export class DataViewerComponent implements OnInit, OnChanges {
   @Input() pageData = null;
   @Output() onNewValue = new EventEmitter();
   @Output() onDeleteValue = new EventEmitter();
+  loadingPageData = false;
 
   public page = {
     pageIndex: 0,
@@ -165,11 +166,14 @@ export class DataViewerComponent implements OnInit, OnChanges {
 
 
     if (type === 'list') {
+      this.loadingPageData = true;
       this.redisService.call(instanceId, [['LRANGE', key, start, end]]).subscribe(ret => {
           this.data = injectValuesToArray(ret[0]);
+          this.loadingPageData = false;
         }
       );
     } else if (type === 'zset') {
+      this.loadingPageData = true;
       this.redisService.call(instanceId, [['ZRANGE', key, start, end, 'withscores']]).subscribe(ret => {
           this.data = [];
           for (let i = 0; i < ret[0].length;) {
@@ -179,20 +183,24 @@ export class DataViewerComponent implements OnInit, OnChanges {
               value: ret[0][i],
             });
             i += 2;
+            this.loadingPageData = false;
           }
         }
       );
     } else if (type === 'set') {
       if (!this.setCachedData) {
+        this.loadingPageData = true;
         this.redisService.call(instanceId, [['SMEMBERS', key]]).subscribe(ret => {
           this.setCachedData = injectValuesToArray(ret[0]);
           this.data = this.setCachedData.slice(start, end);
+          this.loadingPageData = false;
         });
       } else {
         this.data = this.setCachedData.slice(start, end);
       }
     } else if (type === 'hash') {
       if (!this.hashCachedData) {
+        this.loadingPageData = true;
         this.redisService.call(instanceId, [['HGETALL', key]]).subscribe(ret => {
             this.hashCachedData = [];
             for (let i = 0; i < ret[0].length;) {
@@ -203,6 +211,7 @@ export class DataViewerComponent implements OnInit, OnChanges {
               i += 2;
             }
             this.data = this.hashCachedData.slice(start, end);
+            this.loadingPageData = false;
           }
         );
       } else {
@@ -230,7 +239,8 @@ export class DataViewerComponent implements OnInit, OnChanges {
       viewMode.isEditMode = true;
     }
     this.dialogService.open(AddValueDialogComponent, {
-      width: '480px',
+      minWidth: Math.min(1000, Math.max(480, (viewMode.key.length / 50) * 480)) + 'px',
+      minHeight: '400px',
       data: viewMode,
     }).afterClosed().subscribe(ret => {
       if (ret) {
diff --git a/src/app/components/instance-tree/instance-tree.component.ts b/src/app/components/instance-tree/instance-tree.component.ts
index d9dff38..d127cd7 100644
--- a/src/app/components/instance-tree/instance-tree.component.ts
+++ b/src/app/components/instance-tree/instance-tree.component.ts
@@ -1,4 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Subject} from 'rxjs';
 import {RedisInstance} from '../../models/redis-instance';
 import {RedisService} from '../../services/redis.service';
 import {Store} from '@ngrx/store';
@@ -13,7 +14,8 @@ import {REQ_FETCH_TREE, TOGGLE_REDIS} from '../../ngrx/actions/redis-actions';
   styleUrls: ['./instance-tree.component.scss']
 })
 export class InstanceTreeComponent implements OnInit {
-  @Input() instance: RedisInstance = null;
+  @Input() instance: RedisInstance;
+  @Input() expandDeep: Subject<void>;
   @Output() updatePage = new EventEmitter();
   public selectedMap = {};
   public expandedMap = {};
@@ -59,6 +61,20 @@ export class InstanceTreeComponent implements OnInit {
     });
   }
 
+  deepExpandItem(item) {
+    this.expandedMap[item.key] = true;
+    if (item.children) {
+      item.children.forEach(child => { this.deepExpandItem(child); });
+    }
+  }
+
   ngOnInit() {
+    this.expandDeep.subscribe(() => {
+      this.instance.children.forEach(item => {
+        if (item.children) {
+          this.deepExpandItem(item);
+        }
+      });
+    });
   }
 }
diff --git a/src/app/components/tree-node/tree-node.component.html b/src/app/components/tree-node/tree-node.component.html
index 80b1c3b..f0005ac 100644
--- a/src/app/components/tree-node/tree-node.component.html
+++ b/src/app/components/tree-node/tree-node.component.html
@@ -15,7 +15,7 @@
       {{expandedMap[item.key]?'expand_more':'chevron_right'}}
     </i>
 
-    <span>{{item.name}}</span>
+    <span class="name">{{item.displayName || item.name}}</span>
     <span class="len" *ngIf="item.len">({{item.len}})</span>
     <span class="len" *ngIf="item.type === 'folder'">({{item.children.length}})</span>
   </div>
@@ -27,4 +27,3 @@
   >
   </app-tree-node>
 </div>
-
diff --git a/src/app/components/tree-node/tree-node.component.scss b/src/app/components/tree-node/tree-node.component.scss
index 36680ff..9a258a9 100644
--- a/src/app/components/tree-node/tree-node.component.scss
+++ b/src/app/components/tree-node/tree-node.component.scss
@@ -54,6 +54,10 @@
         margin-left: 4px;
       }
 
+      .name {
+        white-space: nowrap;
+      }
+
       .expand-icon {
         width: 20px;
         height: 20px;
diff --git a/src/app/components/tree-node/tree-node.component.ts b/src/app/components/tree-node/tree-node.component.ts
index c6d848c..e5638d9 100644
--- a/src/app/components/tree-node/tree-node.component.ts
+++ b/src/app/components/tree-node/tree-node.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, OnChanges} from '@angular/core';
 
 /**
  * tree node component
@@ -8,7 +8,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
   templateUrl: './tree-node.component.html',
   styleUrls: ['./tree-node.component.scss']
 })
-export class TreeNodeComponent implements OnInit {
+export class TreeNodeComponent implements OnInit, OnChanges {
   @Input() itemNode = null;
   @Input() selectedMap = null;
   @Input() expandedMap = null;
@@ -18,6 +18,7 @@ export class TreeNodeComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.ngOnChanges();
   }
 
 
@@ -35,4 +36,34 @@ export class TreeNodeComponent implements OnInit {
     };
     return typesMap[type];
   }
+
+  ngOnChanges() {
+    if (!this.itemNode || !this.itemNode.children || !this.itemNode.key) {
+      return;
+    }
+
+    const setDisplayName = item => {
+      if (item.key.indexOf('{') === -1) {
+        return item.displayName = item.name;
+      }
+
+      if (item.key.indexOf(',') === -1) {
+        return item.displayName = 'API Request' + '*';
+      }
+
+      const regexResults = item.key.match(/(?<=,|{)[^,{}]+(?=,|{|})/g);
+      let index = regexResults.length - 1;
+      item.displayName = regexResults[index];
+      while (item.displayName.indexOf(':') === -1) {
+        index -= 1;
+        item.displayName = regexResults[index] + item.displayName;
+      }
+
+      item.displayName += item.children ? '*' : '';
+    };
+
+    setDisplayName(this.itemNode);
+    this.itemNode.children.forEach(setDisplayName);
+
+  }
 }
diff --git a/src/app/ngrx/effects/redis-effect.ts b/src/app/ngrx/effects/redis-effect.ts
index 17a5faa..7556ce9 100644
--- a/src/app/ngrx/effects/redis-effect.ts
+++ b/src/app/ngrx/effects/redis-effect.ts
@@ -63,6 +63,9 @@ export class RedisEffect {
         const id = action['payload'].id;
         return this.redisService.fetchTree({id}).pipe(
           map(data => {
+            if (action['payload'].scb) {
+              action['payload'].scb(data);
+            }
             return {type: FETCHED_TREE, payload: {id, data}};
           }),
           catchError(() => {
diff --git a/src/styles.scss b/src/styles.scss
index 4eda1cf..3cf12d5 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -16,3 +16,8 @@ html, body {
 mat-form-field {
   width: 100%;
 }
+
+.cdk-overlay-pane {
+  resize: both;
+  overflow: hidden;
+}