response outline for JSON responses (#1484)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/http/http-raw-body.vue

@@ -29,18 +29,20 @@
             </button>
           </div>
         </div>
-        <ace-editor
+        <div class="relative">
-          v-model="rawParamsBody"
+          <ace-editor
-          :lang="rawInputEditorLang"
+            v-model="rawParamsBody"
-          :options="{
+            :lang="rawInputEditorLang"
-            maxLines: '16',
+            :options="{
-            minLines: '8',
+              maxLines: '16',
-            fontSize: '16px',
+              minLines: '8',
-            autoScrollEditorIntoView: true,
+              fontSize: '16px',
-            showPrintMargin: false,
+              autoScrollEditorIntoView: true,
-            useWorker: false,
+              showPrintMargin: false,
-          }"
+              useWorker: false,
-        />
+            }"
+          />
+        </div>
       </li>
     </ul>
   </div>

components/lenses/renderers/JSONLensRenderer.vue

@@ -43,6 +43,7 @@
       <ace-editor
         :value="jsonBodyText"
         :lang="'json'"
+        :provideJSONOutline="true"
         :options="{
           maxLines: responseBodyMaxLines,
           minLines: '16',

components/ui/ace-editor.vue

@@ -1,5 +1,23 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
+    <div class="outline" v-if="lang == 'json'">
+      <div class="block" v-for="(p, index) in currPath" :key="index">
+        <div class="label" @click="onBlockClick(index)">
+          {{ p }}
+        </div>
+        <i v-if="index + 1 !== currPath.length" class="material-icons">chevron_right</i>
+        <div
+          class="siblings"
+          v-if="sibDropDownIndex == index"
+          @mouseleave="clearSibList"
+          :ref="`sibling-${index}`"
+        >
+          <div class="sib" v-for="(sib, i) in currSib" :key="i" @click="goToSib(sib)">
+            {{ sib.key ? sib.key.value : i }}
+          </div>
+        </div>
+      </div>
+    </div>
     <pre ref="editor" :class="styles"></pre>
   </div>
 </template>
@@ -16,6 +34,61 @@
     @apply transition-none;
   }
 }
+
+.outline {
+  @apply flex;
+  @apply flex-no-wrap;
+  @apply w-full;
+  @apply overflow-auto;
+  @apply font-mono;
+  @apply shadow-lg;
+  @apply px-4;
+
+  .block {
+    @apply inline-flex;
+    @apply items-center;
+    @apply flex-grow-0;
+    @apply flex-shrink-0;
+    @apply text-fgLightColor;
+    @apply text-sm;
+
+    &:hover {
+      @apply text-fgColor;
+      @apply cursor-pointer;
+    }
+
+    .label {
+      @apply p-2;
+      @apply transition;
+      @apply ease-in-out;
+      @apply duration-150;
+    }
+
+    .siblings {
+      @apply absolute;
+      @apply z-50;
+      @apply top-9;
+      @apply bg-bgColor;
+      @apply max-h-60;
+      @apply overflow-auto;
+      @apply shadow-lg;
+      @apply text-fgLightColor;
+      @apply overscroll-none;
+
+      border-radius: 0 0 8px 8px;
+    }
+
+    .sib {
+      @apply px-4;
+      @apply py-1;
+
+      &:hover {
+        @apply text-fgColor;
+        @apply bg-bgLightColor;
+      }
+    }
+  }
+}
 </style>
 
 <script>
@@ -23,9 +96,15 @@ import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import jsonParse from "~/helpers/jsonParse"
 import debounce from "~/helpers/utils/debounce"
+import outline from "~/helpers/outline"
 
 export default {
   props: {
+    provideJSONOutline: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
     value: {
       type: String,
       default: "",
@@ -59,6 +138,10 @@ export default {
       initialized: false,
       editor: null,
       cacheValue: "",
+      outline: outline(),
+      currPath: [],
+      currSib: [],
+      sibDropDownIndex: null,
     }
   },
 
@@ -104,13 +187,29 @@ export default {
     this.editor = editor
     this.cacheValue = this.value
 
+    if (this.lang === "json" && this.provideJSONOutline) this.initOutline(this.value)
+
     editor.on("change", () => {
       const content = editor.getValue()
       this.$emit("input", content)
       this.cacheValue = content
+
+      if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
+
       if (this.lint) this.provideLinting(content)
     })
 
+    if (this.lang === "json" && this.provideJSONOutline) {
+      editor.session.selection.on("changeCursor", (e) => {
+        const index = editor.session.doc.positionToIndex(editor.selection.getCursor(), 0)
+        const path = this.outline.genPath(index)
+        if (path.success) {
+          this.currPath = path.res
+        }
+      })
+      document.addEventListener("touchstart", this.onTouchStart)
+    }
+
     // Disable linting, if lint prop is false
     if (this.lint) this.provideLinting(this.value)
   },
@@ -144,10 +243,53 @@ export default {
         }
       }
     }, 2000),
-  },
+    onBlockClick(index) {
+      if (this.sibDropDownIndex == index) {
+        this.clearSibList()
+      } else {
+        this.currSib = this.outline.getSiblings(index)
+        if (this.currSib.length) this.sibDropDownIndex = index
+      }
+    },
+    clearSibList() {
+      this.currSib = []
+      this.sibDropDownIndex = null
+    },
+    goToSib(obj) {
+      this.clearSibList()
+      if (obj.start) {
+        let pos = this.editor.session.doc.indexToPosition(obj.start, 0)
+        if (pos) {
+          this.editor.session.selection.moveCursorTo(pos.row, pos.column, true)
+          this.editor.session.selection.clearSelection()
+          this.editor.scrollToLine(pos.row, false, true, null)
+        }
+      }
+    },
+    initOutline: debounce(function (content) {
+      if (this.lang == "json") {
+        try {
+          this.outline.init(content)
 
+          if (content[0] == "[") this.currPath.push("[]")
+          else this.currPath.push("{}")
+        } catch (e) {
+          console.log("Outline error: ", e)
+        }
+      }
+    }),
+    onTouchStart(e) {
+      if (this.sibDropDownIndex == null) return
+      else {
+        if (e.target.parentElement != this.$refs[`sibling-${this.sibDropDownIndex}`][0]) {
+          this.clearSibList()
+        }
+      }
+    },
+  },
   destroyed() {
     this.editor.destroy()
+    document.removeEventListener("touchstart", this.onTouchStart)
   },
 }
 </script>

helpers/outline.js

@@ -0,0 +1,126 @@
+import jsonParse from "./jsonParse"
+
+export default () => {
+  let jsonAST = {}
+  let path = []
+
+  const init = (jsonStr) => {
+    jsonAST = jsonParse(jsonStr)
+    linkParents(jsonAST)
+  }
+
+  const setNewText = (jsonStr) => {
+    init(jsonStr)
+    path = []
+  }
+
+  const linkParents = (node) => {
+    if (node.kind == "Object") {
+      if (node.members) {
+        node.members.forEach((m) => {
+          m.parent = node
+          linkParents(m)
+        })
+      }
+    } else if (node.kind == "Array") {
+      if (node.values) {
+        node.values.forEach((v) => {
+          v.parent = node
+          linkParents(v)
+        })
+      }
+    } else if (node.kind == "Member") {
+      if (node.value) {
+        node.value.parent = node
+        linkParents(node.value)
+      }
+    }
+  }
+
+  const genPath = (index) => {
+    let output = {}
+    path = []
+    let current = jsonAST
+    if (current.kind == "Object") {
+      path.push({ label: "{}", obj: "root" })
+    } else if (current.kind == "Array") {
+      path.push({ label: "[]", obj: "root" })
+    }
+    let over = false
+
+    try {
+      while (!over) {
+        if (current.kind == "Object") {
+          let i = 0
+          let found = false
+          while (i < current.members.length) {
+            let m = current.members[i]
+            if (m.start <= index && m.end >= index) {
+              path.push({ label: m.key.value, obj: m })
+              current = current.members[i]
+              found = true
+              break
+            }
+            i++
+          }
+          if (!found) over = true
+        } else if (current.kind == "Array") {
+          if (current.values) {
+            let i = 0
+            let found = false
+            while (i < current.values.length) {
+              let m = current.values[i]
+              if (m.start <= index && m.end >= index) {
+                path.push({ label: `[${i.toString()}]`, obj: m })
+                current = current.values[i]
+                found = true
+                break
+              }
+              i++
+            }
+            if (!found) over = true
+          } else over = true
+        } else if (current.kind == "Member") {
+          if (current.value) {
+            if (current.value.start <= index && current.value.end >= index) {
+              current = current.value
+            } else over = true
+          } else over = true
+        } else if (
+          current.kind == "String" ||
+          current.kind == "Number" ||
+          current.kind == "Boolean" ||
+          current.kind == "Null"
+        ) {
+          if (current.start <= index && current.end >= index) {
+            path.push({ label: `${current.value}`, obj: current })
+          }
+          over = true
+        }
+      }
+      output = { success: true, res: path.map((p) => p.label) }
+    } catch (e) {
+      output = { success: false, res: e }
+    }
+    return output
+  }
+
+  const getSiblings = (index) => {
+    let parent = path[index].obj.parent
+    if (!parent) return []
+    else {
+      if (parent.kind == "Object") {
+        return parent.members
+      } else if (parent.kind == "Array") {
+        return parent.values
+      } else return []
+    }
+  }
+
+  return {
+    init,
+    genPath,
+    getSiblings,
+    setNewText,
+  }
+}