removed filtering option

headers.js

@@ -1,6 +1,6 @@
 // /etc/nginx/headers.js
 function headers_json(r) {
-    return JSON.stringify(r.headersIn)
-  }
-  
-  export default {headers_json};
+  return JSON.stringify(r.headersIn);
+}
+
+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>
+    <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

@@ -3,21 +3,20 @@ import { useCookies } from "vue3-cookies";
 const { cookies } = useCookies();
 
 export default {
-    name: "DebugFrameView",
+  name: "DebugFrameView",
 
-    data() {
-        
-        return {
-            route : JSON.stringify(this.$route, null, 2),
-            cookies : JSON.stringify(cookies.keys(), null, 2),
-        }
-    }
-}
+  data() {
+    return {
+      route: JSON.stringify(this.$route, null, 2),
+      cookies: JSON.stringify(cookies.keys(), null, 2),
+    };
+  },
+};
 </script>
 <template>
-    <h1>Adaptive Frame Debug</h1>
-    <h2>Route information</h2>
-    <div>{{ route }}</div>
-    <h2>Cookie information</h2>
-    <div>{{ cookies }}</div>
-</template>
+  <h1>Adaptive Frame Debug</h1>
+  <h2>Route information</h2>
+  <div>{{ route }}</div>
+  <h2>Cookie information</h2>
+  <div>{{ cookies }}</div>
+</template>

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
@@ -96,9 +104,9 @@ function generateSankey(data) {
       .nodeId((d) => d.name)
       .nodeAlign(
         align[
-        `sankey${alignSelected.value[0].toUpperCase()}${alignSelected.value.slice(
-          1
-        )}`
+          `sankey${alignSelected.value[0].toUpperCase()}${alignSelected.value.slice(
+            1
+          )}`
         ]
       ) // d3.sankeyLeft, etc.
       .nodeWidth(15)
@@ -170,10 +178,10 @@ function generateSankey(data) {
         linkColor === "source-target"
           ? (d) => `url(#${d.uid})`
           : linkColor === "source"
-            ? (d) => color(d.source.category)
-            : linkColor === "target"
-              ? (d) => color(d.target.category)
-              : linkColor
+          ? (d) => color(d.source.category)
+          : linkColor === "target"
+          ? (d) => color(d.target.category)
+          : linkColor
       )
       .attr("stroke-width", (d) => Math.max(1, d.width));
 
@@ -201,16 +209,16 @@ 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>
 
   <div id="chart"></div>
-    <ErrorMessage v-if="errorMessage" :message="errorMessage" />
+  <ErrorMessage v-if="errorMessage" :message="errorMessage" />
 </template>
 <style scoped>
 svg {

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

@@ -5,91 +5,95 @@ import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
 import { h, markRaw } from "vue";
 
 const separator = {
-    template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">',
-}
+  template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">',
+};
 
 const faIcon = (props) => {
-    return {
-        element: markRaw({
-            render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]),
-        }),
-    };
+  return {
+    element: markRaw({
+      render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]),
+    }),
+  };
 };
 
 export default {
-    name: "SideBarView",
-    components: {
-        SidebarMenu,
-    },
+  name: "SideBarView",
+  components: {
+    SidebarMenu,
+  },
 
-    // props: {
-    //     sidebar: {
-    //         type: Boolean,
-    //         required: false
-    //     }
-    // },
-    data() {
-        return {
-            menu: [
-                {
-                    header: "Services",
-                    hiddenOnCollapse: true,
-                },
-                {
-                    href: "/",
-                    title: "Home",
-                    icon: faIcon({ icon: "fa-solid fa-house" }),
-                },
-                {
-                    href: "/about",
-                    title: "About",
-                    icon: faIcon({ icon: "fa-solid fa-question" }),
-                },
-                {
-                    component: markRaw(separator),
-                },
-                {
-                    href: "/referenceId",
-                    title: "Contacts Lookup",
-                    icon: faIcon({ icon: "fa-solid fa-rectangle-list" }),
-                },
-                {
-                    href: "/interactionsFlow",
-                    title: "Interactions Flow",
-                    icon: faIcon({ icon: "fa-solid fa-route" }),
-                },
-                {
-                    href: "/customerAccount/12345",
-                    title: "Customer Account Example",
-                    icon: faIcon({ icon: "fa-solid fa-id-card" }),
-                },
-            ],
-            collapsed: false,
-        };
-    },
-
-    mounted() {
-        this.onResize();
-        window.addEventListener("resize", this.onResize);
-        console.log()
-    },
-    methods: {
-        onResize() {
-            if (window.innerWidth <= 767) {
-                this.isOnMobile = true;
-                this.collapsed = true;
-            } else {
-                this.isOnMobile = false;
-                this.collapsed = false;
-            }
+  // props: {
+  //     sidebar: {
+  //         type: Boolean,
+  //         required: false
+  //     }
+  // },
+  data() {
+    return {
+      menu: [
+        {
+          header: "Services",
+          hiddenOnCollapse: true,
         },
+        {
+          href: "/",
+          title: "Home",
+          icon: faIcon({ icon: "fa-solid fa-house" }),
+        },
+        {
+          href: "/about",
+          title: "About",
+          icon: faIcon({ icon: "fa-solid fa-question" }),
+        },
+        {
+          component: markRaw(separator),
+        },
+        {
+          href: "/referenceId",
+          title: "Contacts Lookup",
+          icon: faIcon({ icon: "fa-solid fa-rectangle-list" }),
+        },
+        {
+          href: "/interactionsFlow",
+          title: "Interactions Flow",
+          icon: faIcon({ icon: "fa-solid fa-route" }),
+        },
+        {
+          href: "/customerAccount/12345",
+          title: "Customer Account Example",
+          icon: faIcon({ icon: "fa-solid fa-id-card" }),
+        },
+      ],
+      collapsed: false,
+    };
+  },
+
+  mounted() {
+    this.onResize();
+    window.addEventListener("resize", this.onResize);
+    console.log();
+  },
+  methods: {
+    onResize() {
+      if (window.innerWidth <= 767) {
+        this.isOnMobile = true;
+        this.collapsed = true;
+      } else {
+        this.isOnMobile = false;
+        this.collapsed = false;
+      }
     },
-}
+  },
+};
 </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>
+  <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>