implemeted functionlaity to empty taglist internally on cancel

src/views/components/ConditionTags.vue

@@ -16,10 +16,7 @@ limitations under the License. -->
   <div class="flex-h" :class="{ light: theme === 'light' }">
     <div class="flex-h items-center mr-5">
       <span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
-      <span
+      <span v-if="tagsList.length" class="trace-tags">
-        v-if="tagsList.length"
-        class="trace-tags"
-      >
         <!-- :style="type === 'LOG' ? `min-width: 122px;` : ''" -->
         <span class="selected" v-for="(item, index) in tagsList" :key="index">
           <span>{{ item }}</span>
@@ -62,11 +59,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, defineExpose } from "vue";
 import { useI18n } from "vue-i18n";
 
 /*global defineEmits, defineProps */
 const emit = defineEmits(["update"]);
+
 defineProps({
   type: { type: String, default: "TRACE" },
 });
@@ -75,6 +73,13 @@ const theme = ref<string>("dark");
 const tags = ref<string>("");
 const tagsList = ref<string[]>([]);
 
+defineExpose({
+  tagsList,
+  emptyTags
+})
+function emptyTags (){
+  tagsList.value = []
+}
 function removeTags(index: number) {
   tagsList.value.splice(index, 1);
   updateTags();
@@ -99,7 +104,7 @@ function updateTags() {
 }
 </script>
 <style lang="scss" scoped>
-.items-center{
+.items-center {
   align-items: center;
 }
 .trace-tags {

src/views/dashboard/related/trace/Filter.vue

@@ -61,7 +61,13 @@ limitations under the License. -->
           @change="changeField('instance', $event)"
         />
       </div>
-      <div class="filter" v-if="dashboardStore.entity !== EntityType[2].value && activeFilter === 'endpoints'">
+      <div
+        class="filter"
+        v-if="
+          dashboardStore.entity !== EntityType[2].value &&
+          activeFilter === 'endpoints'
+        "
+      >
         <span class="grey mr-5">{{ t("endpoint") }}:</span>
         <Selector
           size="small"
@@ -93,10 +99,11 @@ limitations under the License. -->
         <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
         <span class="grey mr-5">-</span>
         <el-input size="small" class="inputs" v-model="maxTraceDuration" />
-      </div>
+      </div>        
       <keep-alive>
         <ConditionTags
           v-if="activeFilter === 'tags'"
+          ref="tagComponent"
           :type="'TRACE'"
           @update="updateTags"
         />
@@ -202,6 +209,8 @@ const state = reactive<any>({
   service: { value: "", label: "" },
 });
 
+const tagComponent = ref<InstanceType<typeof ConditionTags> | null>(null)
+
 // const dateTime = computed(() => [
 //   appStore.durationRow.start,
 //   appStore.durationRow.end,
@@ -272,6 +281,8 @@ function cancelSearch() {
     case "tags":
       tagsList.value = [];
       tagsMap.value = [];
+      updateTags({ tagsMap: [], tagsList: [] });
+      tagComponent.value?.emptyTags()
       break;
     case "traceId":
       traceId.value = "";
@@ -353,6 +364,7 @@ function changeField(type: string, opt: any) {
   }
 }
 function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
+  console.log(data, tagComponent.value)
   tagsList.value = data.tagsList;
   tagsMap.value = data.tagsMap;
 }