fix: fixed traces scatter chart rendering (#7526)

### **PR Type** Bug fix, Enhancement ___ ### **Description** - Hide original-data toggle for traces streams - Auto redraw scatter chart on component mount - Remove redundant v-show guard on histogram - Refactor schema UI formatting and logic ___ ### **Changes diagram** ```mermaid flowchart LR A["Stream type != \"traces\"?"] -- evaluates --> B["showStoreOriginalDataToggle"] B -- true --> C["Display \"Store Original Data\" toggle"] D["SearchResult.vue onMounted"] -- triggers --> E["reDrawChart() scatter chart"] ``` ___ ### **Changes walkthrough** 📝 <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>schema.vue</strong><dd><code>Schema UI toggle & formatting cleanup</code>                                        </dd></summary> <hr> web/src/components/logstream/schema.vue <li>Added <code>showStoreOriginalDataToggle</code> computed property<br> <li> Applied <code>v-if="showStoreOriginalDataToggle"</code> to toggle<br> <li> Re-indented and reformatted tabs & icon tooltip blocks<br> <li> Cleaned up watchers and trailing commas </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/7526/files#diff-9196be2ccae4054a00b0b1aa9d1e87b366c10920d6eaf9ef8c6e6293d50bcf46">+88/-69</a>  </td> </tr> </table></td></tr><tr><td><strong>Formatting</strong></td><td><table> <tr> <td> <details> <summary><strong>Index.vue</strong><dd><code>Clean traces index code formatting</code>                                              </dd></summary> <hr> web/src/plugins/traces/Index.vue <li>Removed commented-out AST parser code<br> <li> Broke long ternary expressions onto multiple lines<br> <li> Reformatted query range assignment for readability </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/7526/files#diff-952e26660e4d6aadd292ea2ef7b314e139a4f516d0b3931e20d42d6394700d07">+8/-14</a>    </td> </tr> </table></td></tr><tr><td><strong>Bug fix</strong></td><td><table> <tr> <td> <details> <summary><strong>SearchResult.vue</strong><dd><code>Ensure scatter chart redraw</code>                                                            </dd></summary> <hr> web/src/plugins/traces/SearchResult.vue <li>Imported <code>onMounted</code> and invoked <code>reDrawChart()</code> on mount<br> <li> Removed <code>v-show="searchObj.meta.showHistogram"</code> guard<br> <li> Ensured scatter chart always redraws after mount </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/7526/files#diff-7fc8153d64d38cf0945757bad8ab5e95ceae7e1c7daaeb300edbbfb484314e50">+11/-2</a>    </td> </tr> </table></td></tr></tr></tbody></table> ___ > <details> <summary> Need help?</summary><li>Type <code>/help how to ...</code> in the comments thread for any questions about PR-Agent usage.</li><li>Check out the <a href="https://qodo-merge-docs.qodo.ai/usage-guide/">documentation</a> for more information.</li></details>
2026-11-06 08:09:24 +00:00 · 2025-07-11 14:17:23 +05:30
parent a7bb438187
commit 2909d0cb98
3 changed files with 108 additions and 86 deletions
@@ -227,6 +227,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                >
              </div>
              <q-toggle
+                v-if="showStoreOriginalDataToggle"
                data-test="log-stream-store-original-data-toggle-btn"
                v-model="storeOriginalData"
                :label="t('logStream.storeOriginalData')"
@@ -237,61 +238,66 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            </div>
            <div class="q-mb-md">
              <div class="flex justify-between items-center full-width">
-              <div class="flex items-center">
-                <app-tabs
-                  v-if="isSchemaUDSEnabled"
-                  class="schema-fields-tabs"
-                  style="
-                    border: 1px solid #8a8a8a;
-                    border-radius: 4px;
-                    overflow: hidden;
-                  "
-                  data-test="schema-fields-tabs"
-                  :tabs="tabs"
-                  :active-tab="activeTab"
-                  @update:active-tab="updateActiveTab"
-                />
-                <div v-if="hasUserDefinedSchema" class="q-ml-sm">
-                  <q-icon name="info" class="q-mr-xs " size="16px" style="color: #F5A623; cursor: pointer;">
-                    <q-tooltip 
-                    style="font-size: 14px; width: 250px;"
+                <div class="flex items-center">
+                  <app-tabs
+                    v-if="isSchemaUDSEnabled"
+                    class="schema-fields-tabs"
+                    style="
+                      border: 1px solid #8a8a8a;
+                      border-radius: 4px;
+                      overflow: hidden;
+                    "
+                    data-test="schema-fields-tabs"
+                    :tabs="tabs"
+                    :active-tab="activeTab"
+                    @update:active-tab="updateActiveTab"
+                  />
+                  <div v-if="hasUserDefinedSchema" class="q-ml-sm">
+                    <q-icon
+                      name="info"
+                      class="q-mr-xs"
+                      size="16px"
+                      style="color: #f5a623; cursor: pointer"
                    >
-                    Other fields show only the schema fields that existed before the stream was configured to use a user-defined schema.
-                    </q-tooltip>
-                  </q-icon>
+                      <q-tooltip style="font-size: 14px; width: 250px">
+                        Other fields show only the schema fields that existed
+                        before the stream was configured to use a user-defined
+                        schema.
+                      </q-tooltip>
+                    </q-icon>
+                  </div>
+                </div>
+
+                <div class="flex items-center tw-gap-4">
+                  <q-input
+                    data-test="schema-field-search-input"
+                    v-model="filterField"
+                    data-cy="schema-index-field-search-input"
+                    filled
+                    borderless
+                    dense
+                    debounce="1"
+                    :placeholder="t('search.searchField')"
+                  >
+                    <template #prepend>
+                      <q-icon name="search" />
+                    </template>
+                  </q-input>
+                  <q-btn
+                    v-if="isSchemaUDSEnabled"
+                    color="primary"
+                    data-test="schema-add-fields-title"
+                    @click="openDialog"
+                    class="q-my-sm text-bold no-border"
+                    padding="sm md"
+                    no-caps
+                    dense
+                    :disable="isDialogOpen"
+                  >
+                    Add Field(s)
+                  </q-btn>
                </div>
              </div>
-
-              <div class="flex items-center tw-gap-4">
-                <q-input
-                  data-test="schema-field-search-input"
-                  v-model="filterField"
-                  data-cy="schema-index-field-search-input"
-                  filled
-                  borderless
-                  dense
-                  debounce="1"
-                  :placeholder="t('search.searchField')"
-                >
-                  <template #prepend>
-                    <q-icon name="search" />
-                  </template>
-                </q-input>
-                <q-btn
-                  v-if="isSchemaUDSEnabled"
-                  color="primary"
-                  data-test="schema-add-fields-title"
-                  @click="openDialog"
-                  class="q-my-sm text-bold no-border"
-                  padding="sm md"
-                  no-caps
-                  dense
-                  :disable="isDialogOpen"
-                >
-                  Add Field(s)
-                </q-btn>
-              </div>
-            </div>
            </div>

            <div class="q-mb-md" v-if="isDialogOpen">
@@ -561,7 +567,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          <!-- floating footer for the table -->

          <div
-            :class="store.state.theme === 'dark' ? 'dark-theme-floating-buttons' : 'light-theme-floating-buttons'"
+            :class="
+              store.state.theme === 'dark'
+                ? 'dark-theme-floating-buttons'
+                : 'light-theme-floating-buttons'
+            "
            class="floating-buttons q-px-md q-py-xs"
          >
            <div
@@ -796,11 +806,12 @@ export default defineComponent({
    //here we are setting the active tab based on the user defined schema
    //1. if there is UDS then it should be schemaFields
    //2. if there is no UDS then it should be allFields
-    const activeTab = ref(hasUserDefinedSchema.value ? "schemaFields" : "allFields");
-
+    const activeTab = ref(
+      hasUserDefinedSchema.value ? "schemaFields" : "allFields",
+    );

    const tabs = computed(() => [
-    {
+      {
        value: "schemaFields",
        label: `User Defined Schema (${indexData.value.defined_schema_fields.length})`,
        disabled: !hasUserDefinedSchema.value,
@@ -811,8 +822,7 @@ export default defineComponent({
        label: `${computedSchemaFieldsName.value} (${indexData.value.schema.length})`,
        disabled: false,
        hide: false,
-      }
-
+      },
    ]);
    const mainTabs = computed(() => [
      {
@@ -826,15 +836,15 @@ export default defineComponent({
        disabled: false,
      },
    ]);
-    //here we are making the schema field name dynamic based on the user defined schema 
-    //1. if there is UDS the it should be other fields 
+    //here we are making the schema field name dynamic based on the user defined schema
+    //1. if there is UDS the it should be other fields
    //2. if there is no UDS then it should be all fields
-    const computedSchemaFieldsName = computed(()=>{
-      if(!hasUserDefinedSchema.value){
-        return 'All Fields'
+    const computedSchemaFieldsName = computed(() => {
+      if (!hasUserDefinedSchema.value) {
+        return "All Fields";
      }
-      return 'Other Fields'
-    })
+      return "Other Fields";
+    });

    const streamIndexType = [
      { label: "Full text search", value: "fullTextSearchKey" },
@@ -857,13 +867,17 @@ export default defineComponent({
      storeOriginalData.value = false;
      approxPartition.value = false;
    });
-    //here we added a watcher to 
+
+    const showStoreOriginalDataToggle = computed(() => {
+      return modelValue.stream_type !== "traces";
+    });
+    //here we added a watcher to
    //1. if user defined schema is enabled then we need to show the schema fields tab and also need to make sure that it would be the active tab
    //2. if user defined schema is disabled then we need to show the all fields tab and also need to make sure that it would be the active tab
    watch(hasUserDefinedSchema, (newVal) => {
-      if(newVal){
+      if (newVal) {
        activeTab.value = "schemaFields";
-      }else{
+      } else {
        activeTab.value = "allFields";
      }
    });
@@ -1242,10 +1256,14 @@ export default defineComponent({
          modifiedSettings,
        )
        .then(async (res) => {
-          if(store.state.logs.logs.data.stream.selectedStream.includes(indexData.value.name)) {
+          if (
+            store.state.logs.logs.data.stream.selectedStream.includes(
+              indexData.value.name,
+            )
+          ) {
            store.dispatch("logs/setIsInitialized", false);
          }
-          
+
          await getStream(
            indexData.value.name,
            indexData.value.stream_type,
@@ -1686,6 +1704,7 @@ export default defineComponent({
      redDaysList,
      deleteDates,
      IsdeleteBtnVisible,
+      showStoreOriginalDataToggle,
    };
  },
  created() {
@@ -528,9 +528,6 @@ function buildSearch() {
      "[INDEX_NAME]",
      searchObj.data.stream.selectedStream.value,
    );
-    // const parsedSQL = parser.astify(req.query.sql);
-    // const unparsedSQL = parser.sqlify(parsedSQL);
-    // console.log(unparsedSQL);

    req.query.sql = b64EncodeUnicode(req.query.sql);

@@ -774,7 +771,8 @@ async function extractFields() {
      );
      searchObj.data.datetime.queryRangeRestrictionInHour = -1;
      if (
-        (stream.settings.max_query_range > 0 || store.state.zoConfig.max_query_range > 0) &&
+        (stream.settings.max_query_range > 0 ||
+          store.state.zoConfig.max_query_range > 0) &&
        (searchObj.data.datetime.queryRangeRestrictionInHour >
          stream.settings.max_query_range ||
          stream.settings.max_query_range == 0 ||
@@ -782,7 +780,9 @@ async function extractFields() {
        searchObj.data.datetime.queryRangeRestrictionInHour != 0
      ) {
        searchObj.data.datetime.queryRangeRestrictionInHour =
-          stream.settings.max_query_range > 0 ? stream.settings.max_query_range : store.state.zoConfig.max_query_range;
+          stream.settings.max_query_range > 0
+            ? stream.settings.max_query_range
+            : store.state.zoConfig.max_query_range;
        searchObj.data.datetime.queryRangeRestrictionMsg = t(
          "search.queryRangeRestrictionMsg",
          {
@@ -957,7 +957,7 @@ function generateHistogramData() {
    autosize: true,
  };

-  if (searchObj.data.queryResults.hits) {
+  if (searchObj.data?.queryResults?.hits?.length) {
    searchObj.data.queryResults.hits.forEach(
      (bucket: {
        zo_sql_timestamp: string | number | Date;
@@ -976,10 +976,7 @@ function generateHistogramData() {
    layout: layout,
  };

-  if (
-    searchObj.meta.showHistogram == true &&
-    searchResultRef.value?.reDrawChart
-  ) {
+  if (searchResultRef.value?.reDrawChart) {
    searchResultRef.value.reDrawChart();
  }
 }
@@ -1036,10 +1033,7 @@ onActivated(() => {
    loadPageData();
  }

-  if (
-    searchObj.meta.showHistogram == true &&
-    router.currentRoute.value.path.indexOf("/traces") > -1
-  ) {
+  if (router.currentRoute.value.path.indexOf("/traces") > -1) {
    setTimeout(() => {
      if (searchResultRef.value) searchResultRef.value.reDrawChart();
    }, 300);
@@ -23,7 +23,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        data-test="logs-search-result-bar-chart"
        id="traces_scatter_chart"
        :data="plotChart"
-        v-show="searchObj.meta.showHistogram"
        style="height: 150px"
        @updated:dataZoom="onChartUpdate"
        @click="onChartClick"
@@ -59,7 +58,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>

 <script lang="ts">
-import { defineAsyncComponent, defineComponent, nextTick, ref } from "vue";
+import {
+  defineAsyncComponent,
+  defineComponent,
+  nextTick,
+  onMounted,
+  ref,
+} from "vue";
 import { useQuasar } from "quasar";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
@@ -144,6 +149,10 @@ export default defineComponent({

    const plotChart: any = ref({});

+    onMounted(() => {
+      reDrawChart();
+    });
+
    const reDrawChart = () => {
      if (
        // eslint-disable-next-line no-prototype-builtins