OHDSI · Mikhail-iontsev · Jun 24, 2024 · Jun 25, 2024 · Jun 25, 2024
diff --git a/index.html b/index.html
@@ -12,12 +12,11 @@
 </head>
 
 <body>
-<!--  <noscript>-->
-<!--    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.-->
-<!--        Please enable it to continue.</strong>-->
-<!--  </noscript>-->
+  <noscript>
+    <strong>We're sorry but Ares doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
   <div id="app"></div>
-
   <script type="module" src="/src/main.ts"></script>
 </body>
 

diff --git a/src/app/providers/store/index.ts b/src/app/providers/store/index.ts
@@ -7,7 +7,6 @@ import { settingsStore } from "@/widgets/settings";
 import { webApiStore, authStore } from "@/shared/api/webAPI";
 import { snackbarStore } from "@/widgets/snackbar";
 import notesStore from "@/widgets/notesPanel/model/store/notes.module";
-import contextMenuStore from "@/entities/contextMenu/model/store/contextMenu.module";
 export default new Store({
   modules: {
     explorerStore,
@@ -18,6 +17,5 @@ export default new Store({
     snackbarStore,
     authStore,
     notesStore,
-    contextMenuStore,
   },
 });
diff --git a/src/entities/contextMenu/contextMenu.vue b/src/entities/contextMenu/contextMenu.vue
@@ -13,21 +13,21 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, watch, ref, Ref } from "vue";
-import { useStore } from "vuex";
+import { computed, watch, ref, Ref, toRef } from "vue";
 
 interface Item {
   title: string;
   action: (a, b) => void;
 }
 interface Props {
   items: Item[];
+  location: object;
 }
 
 const props = defineProps<Props>();
 const context = ref(null);
 
-const store = useStore();
+const location = toRef(props, "location");
 
 function onClickOutside() {
   close();
@@ -44,10 +44,6 @@ const style = computed(() => {
   };
 });
 
-const coordinates = computed(() => {
-  return store.getters.getContextMenuLocation;
-});
-
 function clickAction(item) {
   item.action();
   close();
@@ -59,13 +55,13 @@ function close() {
   top.value = 0;
 }
 function open() {
-  const e = store.getters.getContextMenuLocation.event;
+  const e = location.value.location.event;
   left.value = e.pageX || e.clientX;
   top.value = (e.pageY || e.clientY) - window.pageYOffset;
   show.value = true;
 }
 
-watch(coordinates, () => {
+watch(location, () => {
   open();
 });
 </script>

diff --git a/src/entities/contextMenu/model/store/actions.type.ts b/src/entities/contextMenu/model/store/actions.type.ts
diff --git a/src/entities/contextMenu/model/store/contextMenu.module.ts b/src/entities/contextMenu/model/store/contextMenu.module.ts
diff --git a/src/entities/contextMenu/model/store/mutations.type.ts b/src/entities/contextMenu/model/store/mutations.type.ts
diff --git a/src/main.ts b/src/main.ts
@@ -10,7 +10,6 @@ import { authActions } from "@/shared/api/webAPI";
 import PrimeVue from "primevue/config";
 import ToastService from "primevue/toastservice";
 
-//todo: Think how to improve auth
 import { settingsActions } from "@/widgets/settings";
 import "primeicons/primeicons.css";
 import clickOutside from "@/shared/lib/directives/clickOutside";
@@ -21,37 +20,62 @@ import ConfirmationService from "primevue/confirmationservice";
 import resize from "@/shared/lib/directives/resize";
 import { errorActions } from "@/widgets/error";
 import errorMessages from "@/widgets/error/model/config/errorMessages";
-// adds reactive router module to global state
 
+// adds reactive router module to global state
 sync(store, router);
-environment.load().then(() => {
-  store
-    .dispatch(authActions.GET_AUTH_TOKEN)
-    .then(() => store.dispatch(authActions.GET_USER))
+
+async function initializeEnvironment() {
+  await environment.load();
+}
+
+async function initializeAuth() {
+  await store.dispatch(authActions.GET_AUTH_TOKEN);
+  await store.dispatch(authActions.GET_USER);
+}
+
+async function initializeSettings() {
+  await store.dispatch(settingsActions.LOAD_SETTINGS_FROM_STORAGE);
+}
+
+function initializeErrorHandler(app) {
+  app.config.errorHandler = (err) => {
+    // Handle the error globally
+    store.dispatch(errorActions.NEW_ERROR, {
+      userMessage: errorMessages.technicalError.codeError,
+      name: err.name,
+      details: err.message,
+      stack: err.stack,
+      type: "unexpected",
+    });
+  };
+}
+
+function initializeDirectives(app) {
+  app
+    .directive("click-outside", clickOutside)
+    .directive("resize", resize)
+    .directive("tooltip", Tooltip);
+}
+
+function initializePlugins(app) {
+  app
+    .use(store)
+    .use(router)
+    .use(PrimeVue, { pt: tailwindTheme })
+    .use(ConfirmationService)
+    .use(ToastService);
+}
+
+initializeEnvironment().then(() => {
+  initializeAuth()
     .catch()
     .finally(() => {
-      store.dispatch(settingsActions.LOAD_SETTINGS_FROM_STORAGE).then(() => {
+      initializeSettings().then(() => {
         const app = createApp(App);
-        app.config.errorHandler = (err) => {
-          // Handle the error globally
-          store.dispatch(errorActions.NEW_ERROR, {
-            userMessage: errorMessages.technicalError.codeError,
-            name: err.name,
-            details: err.message,
-            stack: err.stack,
-            type: "unexpected",
-          });
-        };
-        app
-          .directive("click-outside", clickOutside)
-          .directive("resize", resize)
-          .directive("tooltip", Tooltip)
-          .use(store)
-          .use(router)
-          .use(PrimeVue, { pt: tailwindTheme })
-          .use(ConfirmationService)
-          .use(ToastService)
-          .mount("#app");
+        initializeErrorHandler(app);
+        initializeDirectives(app);
+        initializePlugins(app);
+        app.mount("#app");
       });
     });
 });
diff --git a/src/pages/model/lib/listeners.ts b/src/pages/model/lib/listeners.ts
@@ -1,17 +1,17 @@
 export const setSelectionAreaSignal = function (
   view,
-  store,
-  annotationsParentElement,
-  brushParentElement,
-  createAnnotations,
-  makeAnnotations,
-  createTooltip,
-  createBrush
+  { annotationsParentElement, brushParentElement },
+  {
+    renderAnnotations,
+    initializeAnnotationsInstance,
+    initializeTooltip,
+    initializeBrush,
+  }
 ) {
   return view.addSignalListener("brush", () => {
-    const annotations = makeAnnotations(view);
-    createAnnotations(view, annotations, annotationsParentElement);
-    createTooltip(view);
-    createBrush(view, brushParentElement);
+    const annotations = initializeAnnotationsInstance(view);
+    renderAnnotations(annotations, annotationsParentElement);
+    initializeTooltip(view);
+    initializeBrush(view, brushParentElement);
   });
 };
diff --git a/src/pages/reports/network/NetworkConceptDashboard/NetworkConceptDashboard.vue b/src/pages/reports/network/NetworkConceptDashboard/NetworkConceptDashboard.vue
@@ -1,7 +1,7 @@
 <template>
   <Panel header="Network Concept Dashboard">
     <template #icons>
-      <Button @click="atClick">
+      <Button @click="renderForm">
         <span class="uppercase font-light text-white py-1 px-2"
           >Add concepts
         </span></Button
@@ -56,53 +56,33 @@
   </Panel>
   <ConceptSearchForm
     :added-concepts="selectedConcept"
-    :success-message="successMessage"
-    :errors="errors"
-    @close="close"
-    @inputChanged="clearMessages"
+    @close="closeForm"
     :show="showWebApiSearchForm"
   />
 </template>
 
 <script setup lang="ts">
-import { ConceptSearchForm } from "@/widgets/conceptSearchForm";
 import "./index.css";
+import {
+  ConceptSearchForm,
+  useConceptSearchForm,
+} from "@/widgets/conceptSearchForm";
 
-import { computed, Ref, ref } from "vue";
+import { computed, ref } from "vue";
 import { useStore } from "vuex";
 import Panel from "primevue/panel";
 import Button from "primevue/button";
-const store = useStore();
-
 import { helpers } from "@/shared/lib/mixins";
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
-import { webApiActions } from "@/shared/api/webAPI";
 
-const successMessage: Ref<string[]> = ref([]);
-const errors: Ref<string> = ref("");
-const showWebApiSearchForm = ref(false);
+const store = useStore();
 const selectedConcept = ref([]);
 const data = computed(() => {
   return store.getters.getData?.concept || [];
 });
-function atClick() {
-  showWebApiSearchForm.value = true;
-}
-const clearMessages = function () {
-  errors.value = "";
-  successMessage.value = [];
-};
-const close = function () {
-  showWebApiSearchForm.value = false;
-  store.dispatch(webApiActions.RESET_API_STORAGE);
-  successMessage.value = [];
-};
-</script>
-<script lang="ts">
-export default {
-  name: "NetworkConceptDashboard",
-};
+
+const { closeForm, renderForm, showWebApiSearchForm } = useConceptSearchForm();
 </script>
 
 <style scoped>