Update query explorer

etc/flecs.js

@@ -286,6 +286,7 @@ const flecs = {
 
           new_params.offset = params.offset;
           new_params.limit = params.limit;
+          new_params.plan = params.plan;
 
           params = new_params;
         }
@@ -397,6 +398,7 @@ const flecs = {
         }
 
         out.entities = entities;
+        out.content = msg.content;
 
         if (!msg.results) {
           return out;
@@ -442,7 +444,12 @@ const flecs = {
 
       // Do query request
       request_query: function(host, params, recv, err, poll_interval) {
-        return flecs._.request(host, "GET", "query", params, (msg) => {
+        let endpoint = "query";
+        if (params.plan) {
+          params = {q: params.q};
+          endpoint = "query_plan";
+        }
+        return flecs._.request(host, "GET", endpoint, params, (msg) => {
           if (msg[0] == '{' || msg[0] == '[') {
             msg = JSON.parse(msg);
             if (!params.raw)  {

etc/query_editor/css/colors.css

@@ -16,7 +16,9 @@
 
   --grey-200: rgb(237, 237, 237);
 
-  --green: #47B576;
+  --green: #42b983;
+  --blue: #4272b9;
+  --yellow: #b9a542;
   --red: #B5494B;
   --bright-green: #A2D8B4;
   --bright-red: #EF8784;
@@ -30,5 +32,19 @@
   --text-color:   rgb(175, 175, 175);
   --highlight-bg: hsl(206, 100%, 40%);
   --highlight-text: white;
-  --secondary-text: var(--steel-300);
+
+  --primary-color: var(--green);
+  --secondary-color: var(--blue);
+  --tertiary-color: var(--yellow);
+
+  --primary-text: #d2dbde;
+  --secondary-text: #859399;
+
+  --tab-separator-color: rgba(255,255,255,0.07);
+
+  --border-radius-large: 8px;
+  --border-radius-small: 4px;
+  --border-radius-medium: 6px;
+
+  --animation-duration: .12s;
 }

etc/query_editor/css/style.css

@@ -22,3 +22,7 @@ body {
   grid-template-rows: 0.1rem 2.0rem 1.0fr 0.5rem;
   gap: 0.5rem;
 }
+
+pre {
+  font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Source Code Pro', 'source-code-pro', monospace;
+}

etc/query_editor/index.html

@@ -15,15 +15,16 @@
       <title-bar
         v-model:host="host">
       </title-bar>
+
       <editor 
         :host="host"
         v-model:query="query">
       </editor>
 
-      <query-request 
+      <inspect-pane
         :host="host"
         :query="query">
-      </query-request>
+      </inspect-pane>
     </div>
 
     <!-- Vue3 -->

etc/query_editor/js/app.js

@@ -10,6 +10,8 @@ function getParameterByName(name, url = window.location.href) {
 
 let components = [
   loadModule('js/components/title-bar.vue', options),
+  loadModule('js/components/tabs.vue', options),
+  loadModule('js/components/inspect-pane.vue', options),
   loadModule('js/components/app-menu.vue', options),
   loadModule('js/components/editor.vue', options),
   loadModule('js/components/code-editor.vue', options),
@@ -18,6 +20,8 @@ let components = [
   loadModule('js/components/query-request.vue', options),
   loadModule('js/components/query-result.vue', options),
   loadModule('js/components/query-status.vue', options),
+  loadModule('js/components/query-plan.vue', options),
+  loadModule('js/components/query-error.vue', options),
   loadModule('js/components/url-bar.vue', options),
   loadModule('js/components/entity-parent.vue', options),
 ];

etc/query_editor/js/components/code-editor.vue

@@ -167,7 +167,5 @@ onMounted(() => {
     position: relative;
     grid-column: 1;
     font-size: 14px;
-    border-top-left-radius: 0.5em;
-    border-bottom-left-radius: 0.5em;
   }
 </style>

etc/query_editor/js/components/editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="editor">
+  <div class="editor ace-github-dark">
     <code-editor 
       v-model:value="query" 
       v-model:prop_query="prop_query">
@@ -33,8 +33,11 @@ const prop_query = ref({expr: "", first: ""});
 div.editor {
   display: grid;
   grid-template-columns: 2fr 1.5fr;
-  grid-template-rows: calc(100vh - 3.5em);
+  grid-template-rows: calc(100vh - 7rem);
   grid-column: 2;
   grid-row: 3;
+  padding: 1rem;
+  padding-left: 0px;
+  border-radius: var(--border-radius-medium);
 }
 </style>

etc/query_editor/js/components/inspect-pane.vue

@@ -0,0 +1,46 @@
+<template>
+<div id="inspect-pane" class="ace-github-dark">
+  <tabs :labels="['json', 'plan']">
+    <template v-slot:json>
+      <query-request 
+        :host="host"
+        :query="query">
+      </query-request>
+    </template>
+    <template v-slot:plan>
+      <query-request 
+        :host="host"
+        :query="query"
+        :params="{plan: true}">
+      </query-request>
+    </template>
+  </tabs>
+</div>
+</template>
+
+<script>
+export default {
+  name: "inspect-pane",
+}
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  host: {type: String, required: true },
+  query: {type: String, required: true }
+});
+</script>
+
+<style scoped>
+#inspect-pane {
+  position: relative;
+  grid-column: 3;
+  grid-row: 3 / 4;
+  border-radius: var(--border-radius-medium);
+  height: calc(100vh - 60px);
+  margin: 0px;
+}
+
+</style>

etc/query_editor/js/components/prop-explorer.vue

@@ -90,8 +90,6 @@ watch(() => [props.expr, oneof.value], () => {
 #prop-explorer {
   grid-column: 2;
   grid-row: 1;
-  border-top-right-radius: 0.5em;
-  border-bottom-right-radius: 0.5em;
   font-size: 14px;
   overflow-y: auto;
 }

etc/query_editor/js/components/query-error.vue

@@ -0,0 +1,24 @@
+<template>
+  <pre class="query-result-error"><span>error</span>: {{error}}</pre>
+</template>
+
+<script>
+export default { name: "query-error" }
+</script>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  error: {type: String, required: true }
+});
+</script>
+
+<style scoped>
+pre.query-result-error {
+  word-wrap: break-word;
+}
+pre.query-result-error span {
+  color: var(--bright-red);
+}
+</style>

etc/query_editor/js/components/query-plan.vue

@@ -0,0 +1,58 @@
+<template>
+  <render/>
+</template>
+
+<script>
+export default { name: "query-plan" };
+</script>
+
+<script setup>
+import { h, defineProps } from 'vue';
+
+const props = defineProps({
+  plan: {type: String, required: true}
+});
+
+const render = () => {
+  let elems = [ ];
+  const plan = props.plan;
+
+  const lines = plan.split("\n");
+  for (const line of lines) {
+    const tokens = line.split("[[0;");
+    for (const token of tokens) {
+      const color = token.slice(0, 2);
+      const text = token.slice(3, token.length);
+      elems.push(h('span', 
+        {class: 'plan-color-' + color},
+        [text]
+      ));
+    }
+    elems.push(h('br'));
+  }
+
+  return h('pre', elems);
+};
+</script>
+
+<style>
+span.plan-color-49 {
+  color: var(--primary-text);
+}
+
+span.plan-color-37 {
+  color: var(--secondary-text);
+}
+
+span.plan-color-32 {
+  color: var(--primary-color);
+}
+
+span.plan-color-34 {
+  color: var(--secondary-color);
+}
+
+span.plan-color-33 {
+  color: var(--tertiary-color);
+}
+</style>

etc/query_editor/js/components/query-request.vue

@@ -1,8 +1,5 @@
 <template>
-  <div id="query-request" class="ace-github-dark">
-    <query-result :result="query_result"></query-result>
-    <query-status :result="query_result"></query-status>
-  </div>
+  <query-result :result="query_result"></query-result>
 </template>
 
 <script>
@@ -14,23 +11,26 @@ import { ref, defineProps, watch, onMounted } from 'vue';
 
 const props = defineProps({
   host: {type: String, required: true },
-  query: {type: String, required: true }
+  query: {type: String, required: true },
+  params: {type: Object, required: false, default: {}}
 });
 
-const query_result = ref({entities: [], error: undefined});
+const query_result = ref({entities: [], error: undefined, content: undefined});
 
 const doRequest = () => {
   flecs.connect(props.host);
 
   if (!props.query.length) {
     query_result.value.entities = [];
   } else {
-    flecs.query(props.query, {}, (reply) => {
+    flecs.query(props.query, props.params, (reply) => {
       query_result.value.entities = reply.entities;
       query_result.value.error = reply.error;
+      query_result.value.content = reply.content;
     }, (err) => {
       query_result.value.entities = [];
       query_result.value.error = err.error;
+      query_result.value.content = [];
     });
   }
 }
@@ -43,16 +43,3 @@ watch(() => props.query, () => {
   doRequest();
 });
 </script>
-
-<style scoped>
-#query-request {
-  position: relative;
-  grid-column: 3;
-  grid-row: 3 / 4;
-  display: grid;
-  grid-template-rows: 1fr 0.25rem;
-  margin: 0px;
-  overflow-y: auto;
-  border-radius: 0.5em;
-}
-</style>

etc/query_editor/js/components/query-result.vue

@@ -1,10 +1,15 @@
 <template>
-  <template v-if="props.result.error">
-    <pre id="query-result"><span class="query-result-error">error</span>: {{query_result_str}}</pre>
-  </template>
-  <template v-else>
-    <pre id="query-result">{{query_result_str}}</pre>
-  </template>
+  <div id="query-result">
+    <template v-if="result.error">
+      <query-error :error="query_result_str"></query-error>
+    </template>
+    <template v-else-if="result.content">
+      <query-plan :plan="query_result_str"></query-plan>
+    </template>
+    <template v-else>
+      <pre>{{query_result_str}}</pre>
+    </template>
+  </div>
 </template>
 
 <script>
@@ -21,20 +26,19 @@ const props = defineProps({
 const query_result_str = computed(() => {
   if (props.result.error) {
     return props.result.error.split("\n").join("\n  ");
+  } else if (props.result.content) {
+    return props.result.content;
   } else {
     return JSON.stringify(props.result, null, 2);
   }
 });
 </script>
 
 <style scoped>
-#query-result {
+#query-result pre {
   position: relative;
-  grid-column: 1;
-  grid-row: 1;
   margin: 0px;
-  padding: 1em;
-  overflow-y: auto;
+  padding: 1rem;
 }
 span.query-result-error {
   color: var(--bright-red);