From 72aaa8d67a2c100b160a4588c27f0f88c32bf23b Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Mon, 10 Mar 2025 12:29:26 +0530
Subject: [PATCH] fix: pipeline query node improvements (#6188)

1.  validate and close  text instead of save button
2. when user selects stream name query wipes out if any previous query
is there
3.add the click event on whole expand bar
4. after opening the sidebar clicking on the SQL editor moves the focus
away from the SQL editor
5. remove the pipeline view on the row and introduce a eye icon in
actions section
6. when user clicks on edit the schema should auto populate respective
to the query
---
 .../alerts/PipelinesDestinationList.vue       |   2 +-
 .../components/common/sidebar/FieldList.vue   |  20 ++-
 .../functions/EnrichmentTableList.vue         |   1 +
 .../functions/FullViewContainer.vue           |   3 +-
 web/src/components/functions/FunctionList.vue |   1 +
 .../components/pipeline/NodeForm/Query.vue    |  23 ++-
 .../pipeline/NodeForm/ScheduledPipeline.vue   | 144 +++++++++++-------
 .../components/pipeline/PipelineEditor.vue    |   3 +-
 web/src/components/pipeline/PipelinesList.vue |  20 ++-
 web/src/locales/languages/en.json             |   3 +-
 web/src/plugins/pipelines/CustomNode.vue      |   5 -
 11 files changed, 153 insertions(+), 72 deletions(-)

diff --git a/web/src/components/alerts/PipelinesDestinationList.vue b/web/src/components/alerts/PipelinesDestinationList.vue
index af09f22225..6489d199df 100644
--- a/web/src/components/alerts/PipelinesDestinationList.vue
+++ b/web/src/components/alerts/PipelinesDestinationList.vue
@@ -90,7 +90,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <QTablePagination
             :scope="scope"
-            :pageTitle="t('alert_destinations.header')"
+            :pageTitle="t('pipeline_destinations.header')"
             :position="'top'"
             :resultTotal="resultTotal"
             :perPageOptions="perPageOptions"
diff --git a/web/src/components/common/sidebar/FieldList.vue b/web/src/components/common/sidebar/FieldList.vue
index a81046d17c..ca12fcfedd 100644
--- a/web/src/components/common/sidebar/FieldList.vue
+++ b/web/src/components/common/sidebar/FieldList.vue
@@ -79,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     <div class="field_label ellipsis">
                       {{ props.row.name }}
                     </div>
-                    <div class="field_overlay">
+                    <div v-if="!hideAddSearchTerm" class="field_overlay">
                       <q-btn
                         :data-test="`log-search-index-list-filter-${props.row.name}-field-btn`"
                         :icon="outlinedAdd"
@@ -90,6 +90,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         round
                       />
                     </div>
+                    <div v-if="!hideCopyValue" style="background-color: #E8E8E8;"  class="field_overlay">
+                      <q-btn
+                        :data-test="`log-search-index-list-filter-${props.row.name}-copy-btn`"
+                        icon="content_copy"
+                        size="10px"
+                        class="q-mr-sm"
+                        @click.stop="copyContentValue(props.row.name)"
+                        round
+                        flat
+                        dense
+                      />
+                    </div>
                   </div>
                 </template>
                 <q-card>
@@ -192,7 +204,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                               "
                             >
                               <q-btn
-                                class="q-ml-sm"
+                                class="q-ml-md"
                                 size="8px"
                                 title="Copy Value"
                                 round
@@ -285,6 +297,10 @@ export default defineComponent({
     hideCopyValue:{
       type: Boolean,
       default: true,
+    },
+    hideAddSearchTerm:{
+      type: Boolean,
+      default: false,
     }
   },
   emits: ["event-emitted"],
diff --git a/web/src/components/functions/EnrichmentTableList.vue b/web/src/components/functions/EnrichmentTableList.vue
index 281f83d222..aaa301d314 100644
--- a/web/src/components/functions/EnrichmentTableList.vue
+++ b/web/src/components/functions/EnrichmentTableList.vue
@@ -28,6 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :filter="filterQuery"
         :filter-method="filterData"
         style="width: 100%"
+        dense
       >
         <template #no-data>
           <NoData />
diff --git a/web/src/components/functions/FullViewContainer.vue b/web/src/components/functions/FullViewContainer.vue
index ef7e9cbd5f..3640ea2e36 100644
--- a/web/src/components/functions/FullViewContainer.vue
+++ b/web/src/components/functions/FullViewContainer.vue
@@ -7,7 +7,7 @@
       <div class="tw-flex tw-items-center">
         <q-icon
           name="keyboard_arrow_up"
-          @click="expanded = !expanded"
+          @click.stop="expanded = !expanded"
           class="tw-mr-1 tw-cursor-pointer tw-transition-all"
           :class="[
             store.state.theme === 'dark'
@@ -18,6 +18,7 @@
           size="20px"
         />
         <div
+          @click="expanded = !expanded"
           class="tw-text-[14px] tw-font-bold"
           :class="[
             store.state.theme === 'dark'
diff --git a/web/src/components/functions/FunctionList.vue b/web/src/components/functions/FunctionList.vue
index 105c542b94..0602cdd33e 100644
--- a/web/src/components/functions/FunctionList.vue
+++ b/web/src/components/functions/FunctionList.vue
@@ -28,6 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :filter="filterQuery"
         :filter-method="filterData"
         style="width: 100%"
+        dense
       >
         <template #no-data>
           <NoData />
diff --git a/web/src/components/pipeline/NodeForm/Query.vue b/web/src/components/pipeline/NodeForm/Query.vue
index 474ed0eb4b..bd297e4291 100644
--- a/web/src/components/pipeline/NodeForm/Query.vue
+++ b/web/src/components/pipeline/NodeForm/Query.vue
@@ -37,9 +37,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :disableVrlFunction="true"
             :isValidSqlQuery="isValidSqlQuery"
             :disableQueryTypeSelection="true"
+            :expandedLogs="expandedLogs"
+
             v-model:trigger="streamRoute.trigger_condition"
             v-model:sql="streamRoute.query_condition.sql"
             v-model:promql="streamRoute.query_condition.promql"
+            v-model:promql_condition="streamRoute.query_condition.promql_condition"
             v-model:query_type="streamRoute.query_condition.type"
             v-model:aggregation="streamRoute.query_condition.aggregation"
             v-model:stream_type="streamRoute.stream_type"
@@ -50,6 +53,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             @delete:node="openDeleteDialog"
             @update:fullscreen="updateFullscreenMode"
             @update:stream_type="updateStreamType"
+            @expandLog="toggleExpandLog"
             class="q-mt-sm"
           />
         </div>
@@ -80,11 +84,12 @@ import { useRouter } from "vue-router";
 import useStreams from "@/composables/useStreams";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import { useQuasar } from "quasar";
-import ScheduledPipeline from "@/components/pipeline/NodeForm/ScheduledPipeline.vue";
 import useQuery from "@/composables/useQuery";
 import searchService from "@/services/search";
 import useDragAndDrop from "@/plugins/pipelines/useDnD";
 
+import ScheduledPipeline from "@/components/pipeline/NodeForm/ScheduledPipeline.vue";
+
 const VariablesInput = defineAsyncComponent(
   () => import("@/components/alerts/VariablesInput.vue"),
 );
@@ -103,6 +108,11 @@ interface StreamRoute {
   query_condition: {
     sql: string;
     promql: string | null;
+    promql_condition: {
+      column: string;
+      operator: string;
+      value: any;
+    } | null;
     type: string;
     aggregation: {
       group_by: string[];
@@ -161,6 +171,7 @@ const filteredColumns: any = ref([]);
 
 const isValidSqlQuery = ref(true);
 
+const expandedLogs = ref([]);
 const validateSqlQueryPromise = ref<Promise<unknown>>();
 
 const scheduledPipelineRef = ref<any>(null);
@@ -212,6 +223,11 @@ const getDefaultStreamRoute: any = () => {
       sql: "",
       type: "sql",
       aggregation: null,
+      promql_condition: {
+        column: "",
+        operator: "",
+        value: "",
+      },
     },
     trigger_condition: {
       period: 15,
@@ -232,6 +248,7 @@ const getDefaultStreamRoute: any = () => {
 };
 
 onMounted(() => {
+  
   if (pipelineObj.isEditNode) {
     streamRoute.value = pipelineObj.currentSelectedNodeData
       ?.data as StreamRoute;
@@ -495,6 +512,10 @@ const updateQueryType = (val: string) => {
     streamRoute.value.query_condition.sql = "";
   }
 };
+
+const toggleExpandLog = (index: number) => {
+  expandedLogs.value = [];
+};
 </script>
 
 <style scoped>
diff --git a/web/src/components/pipeline/NodeForm/ScheduledPipeline.vue b/web/src/components/pipeline/NodeForm/ScheduledPipeline.vue
index 8193837a84..fd1a753636 100644
--- a/web/src/components/pipeline/NodeForm/ScheduledPipeline.vue
+++ b/web/src/components/pipeline/NodeForm/ScheduledPipeline.vue
@@ -110,12 +110,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
             <template #before>
                             <!-- fieldlist section -->
+                <span @click.stop="expandState.buildQuery = !expandState.buildQuery">
                 <FullViewContainer
                   name="query"
                   v-model:is-expanded="expandState.buildQuery"
                   label="Build Query"
                   class="tw-mt-1"
                 />
+              </span>
               <div class="q-pt-sm" v-show="expandState.buildQuery"  >
                 
               <div >
@@ -175,12 +177,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     }"
                     :hideIncludeExlcude="true"
                     :hideCopyValue="false"
+                    :hideAddSearchTerm="true"
                 />
                
                 
               </div>
             </template>
             <template #after>
+              <span @click.stop="expandState.setVariables = !expandState.setVariables">
+
               <!-- set variables part -->
               <FullViewContainer
                   name="query"
@@ -188,6 +193,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   label="Set Variables"
                   class="tw-mt-1"
                 />
+              </span>
               <div v-show="expandState.setVariables"  class="flex justify-between q-pl-sm full-height" style="overflow-y: auto !important;">
               <div>
               <div
@@ -888,43 +894,53 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
              
               <div class="full-width" style="height: calc(100vh - 140px) !important;" >
               <div class="query-editor-container scheduled-pipelines">
+                <span @click.stop="expandState.query = !expandState.query">
                 <FullViewContainer
                   name="query"
                   v-model:is-expanded="expandState.query"
                   :label="tab === 'sql' ? 'Sql Query' : 'PromQL Query'"
                   class="tw-mt-1"
                 />
+                </span>
                 <query-editor
-                v-show="expandState.query"
-                data-test="scheduled-pipeline-sql-editor"
-                ref="pipelineEditorRef"
-                editor-id="pipeline-query-editor"
-                class="monaco-editor"
-                v-model:query="query"
-                :class="query == '' && queryEditorPlaceholderFlag ? 'empty-query' : ''"
-                @update:query="updateQueryValue"
-                @focus="queryEditorPlaceholderFlag = false"
-                @blur="onBlurQueryEditor"
-                style="height: calc(100vh - 190px) !important;"
+                  v-show="expandState.query"
+                  data-test="scheduled-pipeline-sql-editor"
+                  ref="pipelineEditorRef"
+                  editor-id="pipeline-query-editor"
+                  :debounceTime="300"
+                  class="monaco-editor"
+                  v-model:query="query"
+                  :class="query == '' && queryEditorPlaceholderFlag ? 'empty-query' : ''"
+                  @update:query="updateQueryValue"
+                  @focus="focusQueryEditor"
+                  @blur="onBlurQueryEditor"
+                  style="height: calc(100vh - 190px) !important;"
               />
               
              
               </div>
+
               <div>
+                <span @click.stop="expandState.output = !expandState.output">
                 <FullViewContainer
                   name="output"
                   v-model:is-expanded="expandState.output"
                   label="Output"
                   class="tw-mt-1"
                 />
+                </span>
                   <TenstackTable
-                    v-if="rows.length > 0 && tab == 'sql'"
                     style="height: calc(100vh - 190px) !important;"
-                    v-show="expandState.output"
+                    v-show="expandState.output && rows.length > 0 && tab == 'sql'"
                     ref="searchTableRef"
                     :columns="getColumns"
                     :rows="rows"
                     :jsonpreviewStreamName="selectedStreamName"
+                    :expandedRows="expandedLogs"
+                    @expand-row="expandLog"
+                    @copy="copyLogToClipboard"
+
+
                   />
                   <div v-if="loading" style="height: calc(100vh - 190px) !important;" class="flex justify-center items-center" >
                     <q-spinner-hourglass color="primary" size="lg" />
@@ -980,7 +996,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
                 <q-btn
                   data-test="stream-routing-query-save-btn"
-                  :label="t('alerts.save')"
+                  :label="'Validate and Close'"
                   class="text-bold no-border q-ml-md"
                   color="secondary"
                   padding="sm xl"
@@ -1032,6 +1048,7 @@ import {
   defineAsyncComponent,
   nextTick,
   onMounted,
+  onBeforeMount,
 } from "vue";
 import FieldsInput from "@/components/alerts/FieldsInput.vue";
 import { useI18n } from "vue-i18n";
@@ -1050,7 +1067,7 @@ import {
 } from "@/utils/zincutils";
 import useQuery from "@/composables/useQuery";
 import searchService from "@/services/search";
-import { useQuasar } from "quasar";
+import { useQuasar, copyToClipboard } from "quasar";
 import cronParser from "cron-parser";
 import useDragAndDrop from "@/plugins/pipelines/useDnD";
 import IndexList from "@/plugins/logs/IndexList.vue";
@@ -1120,6 +1137,7 @@ const emits = defineEmits([
 const {  pipelineObj } = useDragAndDrop();
 const { searchObj } = useLogs();
 const { getStream, getStreams } = useStreams ();
+let parser: any;
 
 const selectedStreamName = ref("");
 
@@ -1193,6 +1211,7 @@ const functionEditorPlaceholderFlag = ref(true);
 
 const queryEditorPlaceholderFlag = ref(true);
 const  pipelineEditorRef : any = ref(null);
+const expandedLogs = ref<any[]>([]);
 const cursorPosition = ref(-1);
 const splitterModel = ref(30);
 const step = ref(1);
@@ -1231,38 +1250,35 @@ watch(()=> splitterModel.value ,  (val)=>{
 })
 
 watch(()=> selectedStreamName.value, (val)=>{
-  console.log(val, "selectedStreamName");
   searchObj.data.stream.pipelineQueryStream = [val];
 })
 
+onBeforeMount(async ()=>{
+  await importSqlParser();
+})
+
 
 
 
 onMounted(async ()=>{
-  getStreamList();
+  await getStreamList();
+
+  setTimeout(() => {
+    if(tab.value === 'sql' && query.value != ""){
+    const parsedQuery = parser?.parse(query.value);
+    selectedStreamName.value = parsedQuery.ast.from[0].table;
+
+    getStreamFields();
+  }
+  }, 200);
+  
 })
-const standardOutput = ref(`
-{
-  "data": {
-    "results": [
-      {
-        "event": {
-          "_timestamp": 1735128523652186,
-          "job": "test",
-          "level": "info",
-          "log": "test message for openobserve",
-        },
-      },
-      {
-        "event": {
-          "log": "test message for openobserve",
-        },
-        "message": "Error in event",
-      },
-    ],
-  },
-}
-`)
+
+const importSqlParser = async () => {
+    const useSqlParser: any = await import("@/composables/useParser");
+    const { sqlParser }: any = useSqlParser.default();
+    parser = await sqlParser();
+  };
 
 const filteredTimezone: any = ref([]);
 const expandState =ref( {
@@ -1376,7 +1392,7 @@ const currentTimezone =
 const browserTimezone = ref(currentTimezone);
 const streamTypes = ["logs", "metrics", "traces"];
 
-const rows = ref([ ])
+const rows = ref([])
 
 // @ts-ignore
 let timezoneOptions = Intl.supportedValuesOf("timeZone").map((tz: any) => {
@@ -1636,8 +1652,6 @@ const filterFunctionOptions = (val: string, update: any) => {
 
 const onBlurQueryEditor = () => {
   queryEditorPlaceholderFlag.value = true;
-
-  // emits("validate-sql");
 };
 
 const validateInputs = (notify: boolean = true) => {
@@ -1756,10 +1770,10 @@ const getStreamFields = () => {
         });
       })
       .finally(() => {
-        if(tab.value === 'sql'){
+        if(tab.value === 'sql' && query.value == ""){
           query.value = `SELECT * FROM "${selectedStreamName.value}"`;
         }
-        else if (tab.value === 'promql'){
+        else if (tab.value === 'promql' && query.value == ""){
           query.value = `${selectedStreamName.value}{}`;
         }
         expandState.value.query = true;
@@ -1856,7 +1870,6 @@ const handleSidebarEvent = (event: string, value: any) => {
       if(cursorPosition.value != -1){
         cursorPosition.value += valueToInsert.length;
       } 
-      console.log("newQuery Cursor Position", newQuery, cursorPosition.value);
 
     // Set the new value
     pipelineEditorRef.value.setValue(newQuery);
@@ -1907,16 +1920,7 @@ const runQuery = async () => {
 }
 else if(tab.value == 'promql'){
   previewPromqlQueryRef.value.refreshData();
-  // searchService.metrics_query_range({
-  //   org_identifier: store.state.selectedOrganization.identifier,
-  //   query: query.value,
-  //   start_time: dateTime.value.startTime,
-  //   end_time: dateTime.value.endTime,
-  // }).then((res: any) => {
-  //   console.log(res, 'res')
-  // }).catch((err: any) => {
-  //   console.log(err, 'err')
-  // })
+
 }
 }
 
@@ -1936,6 +1940,26 @@ watch(() => q.fullscreen.isActive, (val) => {
   emits('update:fullscreen', val);
 });
 
+const focusQueryEditor = () => {
+  queryEditorPlaceholderFlag.value = false;
+}
+
+const expandLog = (index: any) => {
+  if (expandedLogs.value.includes(index))
+    expandedLogs.value = expandedLogs.value.filter((item) => item != index);
+  else expandedLogs.value.push(index);
+}
+const copyLogToClipboard = (log: any, copyAsJson: boolean = true) => {
+  const copyData = copyAsJson ? JSON.stringify(log) : log;
+  copyToClipboard(copyData).then(() =>
+    q.notify({
+      type: "positive",
+      message: "Content Copied Successfully!",
+      timeout: 1000,
+    }),
+  );
+};
+
 defineExpose({
   tab,
   validateInputs,
@@ -1946,7 +1970,6 @@ defineExpose({
   collapseFieldList,
   collapseFields,
   expandState,
-  standardOutput,
   streamFields,
   getStreamFields,
   selectedStreamName,
@@ -1962,6 +1985,10 @@ defineExpose({
   sideBarSplitterModel,
   previewPromqlQueryRef,
   cursorPosition,
+  focusQueryEditor,
+  expandedLogs,
+  copyLogToClipboard,
+  copyToClipboard,
 });
 
 </script>
@@ -2028,6 +2055,11 @@ defineExpose({
       filter: none !important;
     }
   }
+  .empty-query .monaco-editor-background {
+    background-image: url("@/assets/images/common/query-editor.png");
+    background-repeat: no-repeat;
+    background-size: 115px;
+  }
 }
 .field-list-collapse-btn {
       z-index: 11;
diff --git a/web/src/components/pipeline/PipelineEditor.vue b/web/src/components/pipeline/PipelineEditor.vue
index bcb32640c0..9974045cc8 100644
--- a/web/src/components/pipeline/PipelineEditor.vue
+++ b/web/src/components/pipeline/PipelineEditor.vue
@@ -81,7 +81,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <q-separator class="q-mb-md" />
 
       <div class="flex q-mt-sm">
-        <NodeSidebar :nodeTypes="nodeTypes" />
+        <NodeSidebar v-show="!pipelineObj.dialog.show || pipelineObj.dialog.name != 'query'" :nodeTypes="nodeTypes"  />
       </div>
     </div>
     <div
@@ -89,6 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       ref="chartContainerRef"
       class="relative-position pipeline-chart-container o2vf_node"
       :class="store.state.theme === 'dark' ? '' : 'bg-grey-2'"
+      v-show="!pipelineObj.dialog.show || pipelineObj.dialog.name != 'query'"
     >
       <PipelineFlow />
     </div>
diff --git a/web/src/components/pipeline/PipelinesList.vue b/web/src/components/pipeline/PipelinesList.vue
index 82ca7f9e46..78cef12e01 100644
--- a/web/src/components/pipeline/PipelinesList.vue
+++ b/web/src/components/pipeline/PipelinesList.vue
@@ -38,9 +38,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           style="cursor: pointer"
           @click="triggerExpand(props)"
         >
-        <q-tooltip position="bottom">
-                <PipelineView :pipeline="props.row" />
-              </q-tooltip>
           <q-td v-if="activeTab == 'scheduled' "  >
             
             <q-btn
@@ -98,6 +95,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :title="t('alerts.delete')"
               @click.stop="openDeleteDialog(props.row)"
             ></q-btn>
+            <q-btn
+              :data-test="`pipeline-list-${props.row.name}-view-pipeline`"
+              :icon="outlinedVisibility"
+              class="q-ml-xs"
+              padding="sm"
+              unelevated
+              size="sm"
+              round
+              flat
+              :title="t('alerts.view')"
+            >
+            <q-tooltip position="bottom">
+              <PipelineView :pipeline="props.row" />
+            </q-tooltip>
+          </q-btn>
           </template>
         </q-td>
 
@@ -224,7 +236,7 @@ import { useQuasar, type QTableProps  } from "quasar";
 import type { QTableColumn } from 'quasar';
 
 import NoData from "../shared/grid/NoData.vue";
-import { outlinedDelete , outlinedPause , outlinedPlayArrow } from "@quasar/extras/material-icons-outlined";
+import { outlinedDelete , outlinedPause , outlinedPlayArrow, outlinedVisibility } from "@quasar/extras/material-icons-outlined";
 import QTablePagination from "@/components/shared/grid/Pagination.vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import useDragAndDrop from "@/plugins/pipelines/useDnD";
diff --git a/web/src/locales/languages/en.json b/web/src/locales/languages/en.json
index bbaecae3b4..477c54730a 100644
--- a/web/src/locales/languages/en.json
+++ b/web/src/locales/languages/en.json
@@ -916,7 +916,8 @@
     "lastRunAt":"Last Run At",
     "lastSuccessfulAt":"Last Successfull At",
     "status":"Status",
-    "numOfEvents": "Number of Events"
+    "numOfEvents": "Number of Events",
+    "view":"View"
   },
   "alert_templates": {
     "header": "Templates",
diff --git a/web/src/plugins/pipelines/CustomNode.vue b/web/src/plugins/pipelines/CustomNode.vue
index 947f6381c9..bd10f8db6e 100644
--- a/web/src/plugins/pipelines/CustomNode.vue
+++ b/web/src/plugins/pipelines/CustomNode.vue
@@ -57,9 +57,6 @@ const hanldeMouseOver = () => {
 
 
 const onFunctionClick = (data,event,id) =>{
-  console.log(data,"data")
-  console.log(id,"id")
-  console.log(event,"event")
   pipelineObj.userSelectedNode = data;
   const dataToOpen  =   {
     label: "Function",
@@ -77,7 +74,6 @@ const onFunctionClick = (data,event,id) =>{
 
 const onConditionClick = (data,event,id) =>{
   data.label = id;
-  console.log(data,"data")
   pipelineObj.userSelectedNode = data;
 
   const dataToOpen  =   {
@@ -149,7 +145,6 @@ const editNode = (id) => {
   const fullNode = pipelineObj.currentSelectedPipeline.nodes.find(
     (node) => node.id === id
   );
-  console.log(fullNode,'full node')
   pipelineObj.isEditNode = true;
   pipelineObj.currentSelectedNodeData = fullNode;
   pipelineObj.currentSelectedNodeID = id;