diff --git a/static/view-grapher.js b/static/view-grapher.js
index aa64bbc..a46dc4a 100644
--- a/static/view-grapher.js
+++ b/static/view-grapher.js
@@ -18,7 +18,8 @@ grapher.Graph = class {
         this._modelNodeName2State = new Map();
         this._namedEdges = new Map();
 
-        this._pathArgumentNames = new Set();  // the name of arguments which occurs in both sides of an edge 
+        this._pathArgumentNames = new Set();  // the name of arguments which occurs in both sides of an edge
+        this._renameMap = new Map();
     }
 
     get options() {
diff --git a/static/view-sidebar.css b/static/view-sidebar.css
index 340a8b5..5626dce 100644
--- a/static/view-sidebar.css
+++ b/static/view-sidebar.css
@@ -85,5 +85,5 @@
     .sidebar-view-find input[type=text] { background: #383838; color: #dfdfdf; border-color: #424242; }
     .sidebar-view-find li:not(:first-child) { border-top: 1px solid #2a2a2a; }
     .sidebar-view-find li:hover { background: #383838; }
-    
+
 }
diff --git a/static/view-sidebar.js b/static/view-sidebar.js
index 5b99a19..4bad45e 100644
--- a/static/view-sidebar.js
+++ b/static/view-sidebar.js
@@ -202,23 +202,26 @@ sidebar.NodeSidebar = class {
             }
         }
 
-        this.add_separator('sidebar-view-separator')
-    
+        this.add_separator(this._elements, 'sidebar-view-separator')
+        this._elements.push(this._host.document.createElement('hr'));
+        this.add_separator(this._elements, 'sidebar-view-separator')
+
         this._addButton('Delete With Children');
         this.add_span()
         this._addButton('Delete Single Node');
         this.add_span()
         this._addButton('Reset Node');
 
-        this.add_separator('sidebar-view-separator');
+        this.add_separator(this._elements, 'sidebar-view-separator');
         this._addHeader('Rename helper');
 
     }
 
-    add_separator(className) {
+    add_separator(elment, className) {
         const separator = this._host.document.createElement('div');
         separator.className = className;
-        this._elements.push(separator); 
+        // this._elements.push(separator); 
+        elment.push(separator);
     }
 
     add_span(className) {
@@ -228,14 +231,26 @@ sidebar.NodeSidebar = class {
         this._elements.push(span); 
     }
 
-    add_rename_aux_element (arguments_) {
+    add_rename_aux_element(arguments_) {
         if (arguments_.length > 0) {
             for (const argument of arguments_) {
                 if (this._host._view._graph._pathArgumentNames.has(argument.name)) {
-                    const buttonElement = this._host.document.createElement('button');
-                    buttonElement.className = 'sidebar-view-button';
-                    buttonElement.innerText = argument.name;
-                    this._renameAuxelements.push(buttonElement);
+
+                    const origNameElement =  this._host.document.createElement("div");
+                    origNameElement.innerHTML = argument.name + " => ";
+                    const newNameElement = this._host.document.createElement('input');
+                    newNameElement.setAttribute('type', 'text');
+                    newNameElement.addEventListener('input', (e) => {
+                        // console.log(e.target.value);
+                        this._host._view._graph.recordRenameInfo(this._modelNodeName, argument.name, e.target.value);
+                        console.log(this._host._view._graph._renameMap);
+                        
+                    });
+
+                    this._renameAuxelements.push(origNameElement);
+                    this._renameAuxelements.push(newNameElement)
+                    this.add_separator(this._renameAuxelements, 'sidebar-view-separator')  
+                    
                 }
             }
         }
@@ -458,7 +473,7 @@ sidebar.NameValueView = class {
         nameInputElement.setAttribute('type', 'text');
         nameInputElement.setAttribute('value', name);
         nameInputElement.setAttribute('title', name);
-        nameInputElement.setAttribute('readonly', 'false');
+        nameInputElement.setAttribute('readonly', 'true');
         nameElement.appendChild(nameInputElement);
         // <=== 这一段是input框前的名称，如attributte的pad
 
diff --git a/static/view.js b/static/view.js
index 0d1fe05..e44f9eb 100644
--- a/static/view.js
+++ b/static/view.js
@@ -1078,12 +1078,19 @@ view.Graph = class extends grapher.Graph {
             // console.log(node.label.modelNodeName)
             this._modelNodeName2State.set(node.label.modelNodeName, 'Exist')
         }
-
         // console.log(this._modelNodeName2State)
+    }
 
+    recordRenameInfo(modelNodeName, src_name, dst_name) {
+        if (!this._renameMap.get(modelNodeName)) {
+            this._renameMap.set(modelNodeName, new Map());
+        }
+        this._renameMap.get(modelNodeName).set(src_name, dst_name);
     }
 
 
+
+
     build(document, origin) {
         for (const argument of this._arguments.values()) {
             argument.build();