removed filtering option

headers.js

@@ -1,6 +1,6 @@
 // /etc/nginx/headers.js
 function headers_json(r) {
-    return JSON.stringify(r.headersIn)
-  }
+  return JSON.stringify(r.headersIn);
+}
 
-  export default {headers_json};
+export default { headers_json };

src/App.vue

@@ -5,13 +5,11 @@ export default {
 </script>
 <template>
   <div class="flex-container">
-
     <router-view class="view sidebar" name="SideBarView"></router-view>
 
     <div class="flex-child">
       <router-view class="view main-content"></router-view>
     </div>
-
   </div>
 </template>
 <style lang="scss">
@@ -35,12 +33,13 @@ body {
   height: 100%;
 }
 
-.flex-child {
-  flex: 1;
-  height: 100%;
-  border: 2px solid yellow;
-}
+// .flex-child {
+//   flex: 1;
+//   height: 100%;
+//   border: 2px solid yellow;
+// }
 
 // .flex-child:first-child {
 //     margin-right: 20px;
-// } </style>
+// }
+</style>

src/router/index.js

@@ -7,45 +7,52 @@ import SearchByReferenceView from "../views/SearchByReferenceView.vue";
 import InteractionsFlowView from "../views/InteractionsFlowView.vue";
 import CustomerAccountView from "../views/CustomerAccountView.vue";
 
-
 const routes = [
   {
     path: "/",
     name: "home",
     components: { default: HomeView, SideBarView: SideBarView },
-    props: { default: false, SideBarView: true }
+    props: { default: false, SideBarView: true },
   },
   {
     path: "/about",
     name: "about",
     components: { default: AboutView, SideBarView: SideBarView },
-    props: { default: false, SideBarView: true }
+    props: { default: false, SideBarView: true },
   },
   {
     path: "/referenceId",
     name: "referenceId",
     components: { default: SearchByReferenceView, SideBarView: SideBarView },
-    props: { default: route => ({ sessionIdentifier: route.query._sessionIdentifier }) }
+    props: {
+      default: (route) => ({
+        sessionIdentifier: route.query._sessionIdentifier,
+      }),
+    },
   },
   {
     path: "/interactionsFlow",
     name: "interactionsFlow",
     components: { default: InteractionsFlowView, SideBarView: SideBarView },
-    props: { default: route => ({ sessionIdentifier: route.query._sessionIdentifier }) }
+    props: {
+      default: (route) => ({
+        sessionIdentifier: route.query._sessionIdentifier,
+      }),
+    },
   },
   {
     path: "/customerAccount/:accountNumber",
     name: "customerAccount",
     component: CustomerAccountView,
     components: { default: CustomerAccountView, SideBarView: SideBarView },
-    props: { default: true, SideBarView: true }
+    props: { default: true, SideBarView: true },
   },
   {
     path: "/debug",
     name: "debug",
     component: DebugFrameView,
     components: { default: DebugFrameView },
-    props: { default: true }
+    props: { default: true },
   },
 ];
 

src/views/DebugFrameView.vue

@@ -6,13 +6,12 @@ export default {
   name: "DebugFrameView",
 
   data() {
-        
     return {
-            route : JSON.stringify(this.$route, null, 2),
-            cookies : JSON.stringify(cookies.keys(), null, 2),
-        }
-    }
-}
+      route: JSON.stringify(this.$route, null, 2),
+      cookies: JSON.stringify(cookies.keys(), null, 2),
+    };
+  },
+};
 </script>
 <template>
   <h1>Adaptive Frame Debug</h1>

src/views/InteractionsFlowView.vue

@@ -9,10 +9,16 @@ import ErrorMessage from "../components/ErrorMessage.vue";
 
 const props = defineProps({
   username: { type: String, default: "" },
-  sessionIdentifier: { type: String, default: "" }
+  sessionIdentifier: { type: String, default: "" },
 });
 
-const filterOptions = ["Channel", "SubChannel", "Queue", "Outcome"];
+const filterOptions = [
+  "Direction",
+  "Channel",
+  "SubChannel",
+  "Queue",
+  "Outcome",
+];
 const multiSelected = ref(filterOptions);
 
 const alignOptions = ["Left", "Center", "Right", "Justify"];
@@ -35,11 +41,13 @@ function fetchData() {
   } else if (props.username.length > 0) {
     authKey = props.username;
   } else {
-    errorMessage.value = "_sessionIdentifier or username must be passed as query params."
+    errorMessage.value =
+      "_sessionIdentifier or username must be passed as query params.";
   }
   if (authKey) {
     fetch(
-      `${import.meta.env.VITE_EO_SERVICES_URL}/api/interactions-flow?filter=${multiSelected.value
+      `${import.meta.env.VITE_EO_SERVICES_URL}/api/interactions-flow?filter=${
+        multiSelected.value
       }&authKey=${authKey}`,
       {
         credentials: "include", // fetch won't send cookies unless you set credentials
@@ -201,10 +209,10 @@ function generateSankey(data) {
       <option v-for="item in alignOptions" :key="item">{{ item }}</option>
     </select>
 
-    <select v-model="multiSelected" multiple style="width: 200px; height: 90px">
+    <!-- <select v-model="multiSelected" multiple style="width: 200px; height: 90px">
       <option disabled value="">Please select nodes</option>
       <option v-for="item in filterOptions" :key="item">{{ item }}</option>
-    </select>
+    </select> -->
 
     <button @click="fetchData">Search Contacts</button>
   </div>

src/views/SearchByReferenceView.vue

@@ -7,7 +7,7 @@ import ErrorMessage from "../components/ErrorMessage.vue";
 
 const props = defineProps({
   username: { type: String, default: "" },
-  sessionIdentifier: { type: String, default: "" }
+  sessionIdentifier: { type: String, default: "" },
 });
 
 const referenceId = ref("");
@@ -30,12 +30,16 @@ function fetchData() {
   } else if (props.username.length > 0) {
     authKey = props.username;
   } else {
-    errorMessage.value = "_sessionIdentifier or username must be passed as query params."
+    errorMessage.value =
+      "_sessionIdentifier or username must be passed as query params.";
   }
   if (authKey) {
     fetch(
-      `${import.meta.env.VITE_EO_SERVICES_URL
-      }/api/unified-data-gateway?referenceId=${referenceId.value}&authKey=${authKey}`,
+      `${
+        import.meta.env.VITE_EO_SERVICES_URL
+      }/api/unified-data-gateway?referenceId=${
+        referenceId.value
+      }&authKey=${authKey}`,
       {
         credentials: "include", // fetch won't send cookies unless you set credentials
       }
@@ -63,14 +67,22 @@ function fetchData() {
     <h2>Search Criteria</h2>
     <div>
       <label for="referenceId">Reference ID: </label>
-      <input id="referenceId" :value="referenceId" placeholder="enter Reference ID here" @input="onInput" />
+      <input
+        id="referenceId"
+        :value="referenceId"
+        placeholder="enter Reference ID here"
+        @input="onInput"
+      />
       <button @click="fetchData">Search Contacts</button>
     </div>
 
     <h2>Results</h2>
     <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
     <div v-else>No Contacts Found</div>
-    <ContactTable v-if="contactData" :table-data="contactData.data.findContactsCompletedBetween.edges" />
+    <ContactTable
+      v-if="contactData"
+      :table-data="contactData.data.findContactsCompletedBetween.edges"
+    />
     <ErrorMessage v-if="errorMessage" :message="errorMessage" />
   </div>
 </template>

src/views/SideBarView.vue

@@ -6,7 +6,7 @@ import { h, markRaw } from "vue";
 
 const separator = {
   template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">',
-}
+};
 
 const faIcon = (props) => {
   return {
@@ -71,7 +71,7 @@ export default {
   mounted() {
     this.onResize();
     window.addEventListener("resize", this.onResize);
-        console.log()
+    console.log();
   },
   methods: {
     onResize() {
@@ -84,12 +84,16 @@ export default {
       }
     },
   },
-}
+};
 </script>
 <template>
-    <div v-if="this.$route.query.sidebar" id="sidebar">
-        <sidebar-menu v-model:collapsed="collapsed" :menu="menu" :show-one-child="true" :relative="true"/>
+  <div v-if="$route.query.sidebar" id="sidebar">
+    <sidebar-menu
+      v-model:collapsed="collapsed"
+      :menu="menu"
+      :show-one-child="true"
+      :relative="true"
+    />
   </div>
 </template>
-<style>
-</style>
+<style></style>