WebAPI integration

package.json

@@ -48,7 +48,6 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.8.3",
     "sass": "^1.58.0",
-    "sass-loader": "^13.0.2",
     "typescript": "~4.9.5",
     "yorkie": "^2.0.0",
     "vite": "4.0.4"

public/env/env.json

@@ -0,0 +1,4 @@
+{
+  "WEB_API_URL": "./",
+  "WEB_API_ENABLED": "true"
+}

src/app/App.vue

@@ -8,6 +8,7 @@
 
 <script setup lang="ts">
 import { errorActions } from "@/widgets/error";
+import { webApiActions } from "@/shared/api/webAPI";
 
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";
@@ -32,6 +33,7 @@ watch(darkMode, (): void => {
 
 watch(route, (): void => {
   store.dispatch(errorActions.RESET_ERRORS);
+  store.dispatch(webApiActions.RESET_API_STORAGE);
 });
 
 onBeforeMount((): void => {

src/app/providers/store/index.ts

@@ -4,12 +4,16 @@ import { explorerStore } from "@/widgets/explorer";
 import { errorStore } from "@/widgets/error";
 import { reportsDataStore } from "@/processes/exploreReports";
 import { settingsStore } from "@/widgets/settings";
-
+import { webApiStore, authStore } from "@/shared/api/webAPI";
+import { snackbarStore } from "@/widgets/snackbar";
 export default new Store({
   modules: {
     explorerStore,
     reportsDataStore,
     errorStore,
     settingsStore,
+    webApiStore,
+    snackbarStore,
+    authStore,
   },
 });

src/main.ts

@@ -6,11 +6,23 @@ import "@/main.scss";
 import store from "./app/providers/store";
 import router from "./app/providers/router";
 import sync from "./shared/lib/vuex-router-sync";
+import environment from "@/shared/api/environment";
+import { authActions } from "@/shared/api/webAPI";
+//todo: Think how to improve auth
 import { settingsActions } from "@/widgets/settings";
 // adds reactive router module to global state
 sync(store, router);
 
-//loads app settings from the local storage (if there are any saved)
-store.dispatch(settingsActions.LOAD_SETTINGS_FROM_STORAGE).then(() => {
-  createApp(App).use(store).use(router).use(vuetify).mount("#app");
+environment.load().then(() => {
+  store
+    .dispatch(authActions.GET_AUTH_TOKEN)
+    .then()
+    .catch()
+    .finally(() => {
+      store.dispatch(settingsActions.LOAD_SETTINGS_FROM_STORAGE).then(() => {
+        createApp(App).use(store).use(router).use(vuetify).mount("#app");
+      });
+    });
 });
+
+//loads app settings from the local storage (if there are any saved)

src/pages/info/WebApiInfo.vue

@@ -0,0 +1,91 @@
+<template>
+  <v-container>
+    <v-card
+      v-if="store.getters.getApiData.serviceDetails"
+      :loading="store.getters.getApiData.loading"
+      elevation="10"
+      class="ma-4 pa-2"
+    >
+      <v-card-title>WebAPI details</v-card-title>
+      <v-container v-if="store.getters.getApiData.serviceDetails" fluid>
+        <v-layout> </v-layout>
+        <v-layout
+          v-for="(value, propertyName) in getApiMetadata()"
+          :key="propertyName"
+          class="pl-8"
+        >
+          {{ propertyName }}: {{ value }}
+        </v-layout>
+      </v-container>
+      <v-card v-else
+        ><v-card-title
+          >WebAPI server is unavailabe at the time</v-card-title
+        ></v-card
+      >
+    </v-card>
+
+    <v-card
+      v-if="store.getters.getApiData.apiSources"
+      elevation="10"
+      class="ma-4 pa-2"
+    >
+      <v-data-table
+        :loading="store.getters.getApiData.loading"
+        :items="store.getters.getApiData.apiSources"
+        :headers="sourceHeaders"
+      ></v-data-table>
+    </v-card>
+    <h1 v-else class="text-center">No data available</h1>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useStore } from "vuex";
+import { VDataTable } from "vuetify/labs/VDataTable";
+
+const store = useStore();
+const sourceHeaders = [
+  {
+    title: "Source",
+    align: "start",
+    sortable: false,
+    key: "sourceKey",
+  },
+  {
+    title: "Source dialect",
+    align: "start",
+    sortable: false,
+    key: "sourceDialect",
+  },
+  {
+    title: "Source name",
+    align: "start",
+    sortable: false,
+    key: "sourceName",
+  },
+  {
+    title: "Source ID",
+    align: "start",
+    sortable: false,
+    key: "sourceId",
+  },
+];
+
+const getApiMetadata = function () {
+  const data = store.getters.getApiData.serviceDetails;
+  return {
+    "WebAPI version": data.version,
+    Timestamp: data.buildInfo.timestamp,
+    Branch: data.buildInfo.branch,
+    "Commit ID": data.buildInfo.commitId,
+  };
+};
+</script>
+
+<script lang="ts">
+export default {
+  name: "WebApiInfo",
+};
+</script>
+
+<style scoped></style>

src/pages/reports/network/NetworkConceptDashboard/NetworkConceptDashboard.vue

@@ -0,0 +1,180 @@
+<template>
+  <v-container fluid>
+    <v-card class="elevation-10 pa-3">
+      <v-card-actions class="flex justify-space-between">
+        <v-card-title>Network Concept Dashboard</v-card-title>
+        <v-dialog v-model="dialog" max-width="1000px">
+          <template #activator="{ props }">
+            <v-btn dark color="grey darken-4" class="mb-2" v-bind="props">
+              Add concepts
+            </v-btn>
+          </template>
+          <ConceptSearchForm
+            :added-concepts="addedConcepts"
+            :success-message="successMessage"
+            :errors="errors"
+            @close="close"
+            @save="(item) => save(item)"
+            @inputChanged="clearMessages"
+          />
+        </v-dialog>
+      </v-card-actions>
+      <v-row class="table-container">
+        <v-data-table
+          v-if="conceptData.length"
+          :group-by="[{ key: 'CONCEPT_NAME' }]"
+          density="compact"
+          :headers="headers"
+          :items="conceptData"
+        >
+        </v-data-table>
+        <v-card-text v-else class="placeholder table-placeholder"
+          >Add at least one concept to display the results</v-card-text
+        >
+      </v-row>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ConceptSearchForm } from "@/widgets/conceptSearchForm";
+import { FETCH_MULTIPLE_FILES_BY_SOURCE } from "@/processes/exploreReports/model/store/actions.type";
+import { CONCEPT } from "@/shared/config/files";
+import { VDataTable } from "vuetify/labs/VDataTable";
+import webApiKeyMap from "@/shared/config/webApiKeyMap";
+import "./index.css";
+
+import { computed, Ref, ref } from "vue";
+import { useStore } from "vuex";
+const store = useStore();
+
+const addedConcepts = ref({});
+const conceptData = ref([]);
+const successMessage: Ref<string[]> = ref([]);
+const errors: Ref<string> = ref("");
+const conceptsData = ref([]);
+const dialog: Ref<boolean> = ref(false);
+
+const getConceptsForRequest = function () {
+  return conceptsData.value.map((value) => {
+    return {
+      concept_id: value?.data.CONCEPT_ID[0],
+      concept_name: value?.data.CONCEPT_NAME[0],
+      countPeople: value?.data.NUM_PERSONS[0],
+      percentPeople: (value?.data.PERCENT_PERSONS[0] * 100).toFixed(2),
+      cdm_name: value?.source.cdm_source_abbreviation,
+    };
+  });
+};
+const clearMessages = function () {
+  errors.value = "";
+  successMessage.value = [];
+};
+
+const addConceptToList = function (concepts) {
+  conceptData.value = [
+    ...conceptData.value,
+
+    ...concepts.map((curr) => {
+      return {
+        CONCEPT_ID: curr.concept_id,
+        CONCEPT_NAME: curr.concept_name,
+        CDM_NAME: curr.cdm_name,
+        PEOPLE_COUNT: curr.countPeople,
+        PEOPLE_PERCENT: curr.percentPeople,
+      };
+    }, {}),
+  ];
+};
+
+const save = function (item) {
+  if (addedConcepts.value[item.CONCEPT_ID] === "Loaded") {
+    errors.value = "This concept has already been loaded";
+    return;
+  }
+  store
+    .dispatch(FETCH_MULTIPLE_FILES_BY_SOURCE, {
+      files: [
+        {
+          name: CONCEPT,
+          instanceParams: [
+            {
+              domain: webApiKeyMap.domains[item.DOMAIN_ID],
+              concept: item.CONCEPT_ID,
+            },
+          ],
+        },
+      ],
+      criticalError: false,
+    })
+    .then(() => {
+      conceptsData.value = store.getters.getData.concept;
+      if (!conceptsData.value.length) {
+        errors.value = "Requested concept is not found across data sources";
+        addedConcepts.value = {
+          ...addedConcepts.value,
+          [item.CONCEPT_ID]: "Not found",
+        };
+        return;
+      }
+
+      addConceptToList(getConceptsForRequest());
+
+      addedConcepts.value = {
+        ...addedConcepts.value,
+        [item.CONCEPT_ID]: "Loaded",
+      };
+      successMessage.value = ["Concept added"];
+    });
+};
+const close = function () {
+  dialog.value = false;
+};
+const headers = computed(function () {
+  return [
+    {
+      key: "CDM_NAME",
+      title: "Source",
+    },
+    {
+      key: "CONCEPT_ID",
+      title: "Concept ID",
+      align: "center",
+    },
+    {
+      key: `PEOPLE_COUNT`,
+      title: "# People",
+    },
+    {
+      key: "PEOPLE_PERCENT",
+      title: "% People",
+    },
+  ];
+});
+</script>
+<script lang="ts">
+export default {
+  name: "NetworkConceptDashboard",
+};
+</script>
+
+<style scoped>
+.table-card {
+  padding: 10px;
+  width: 100%;
+  height: 100%;
+}
+.table-container {
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+  min-height: 70vh;
+}
+.placeholder {
+  text-align: center;
+  align-self: center;
+}
+.table-placeholder {
+  font-size: 1.5rem !important;
+}
+</style>