diff --git a/index.html b/index.html index 5fa6ce98..a1dfb25c 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,11 @@ - - - - +
- diff --git a/src/app/providers/store/index.ts b/src/app/providers/store/index.ts index a41646cc..a3c238c6 100755 --- 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 index 637a0637..0ba09263 100644 --- a/src/entities/contextMenu/contextMenu.vue +++ b/src/entities/contextMenu/contextMenu.vue @@ -13,8 +13,7 @@ diff --git a/src/entities/contextMenu/model/store/actions.type.ts b/src/entities/contextMenu/model/store/actions.type.ts deleted file mode 100644 index b426ec93..00000000 --- a/src/entities/contextMenu/model/store/actions.type.ts +++ /dev/null @@ -1 +0,0 @@ -export const OPEN_MENU = "openMenu"; diff --git a/src/entities/contextMenu/model/store/contextMenu.module.ts b/src/entities/contextMenu/model/store/contextMenu.module.ts deleted file mode 100644 index d1e23268..00000000 --- a/src/entities/contextMenu/model/store/contextMenu.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { SET_LOCATION } from "@/entities/contextMenu/model/store/mutations.type"; -import { SET_CONTEXT_MENU_VISIBILITY } from "@/entities/contextMenu/model/store/mutations.type"; -import { OPEN_MENU } from "@/entities/contextMenu/model/store/actions.type"; - -const state = { - visible: false, - location: {}, -}; - -const getters = { - getContextMenuVisibility: function (state) { - return state.visible; - }, - getContextMenuLocation: function (state) { - return state.location; - }, -}; - -const actions = { - [OPEN_MENU]({ commit }, payload) { - commit(SET_LOCATION, payload.location); - commit(SET_CONTEXT_MENU_VISIBILITY, payload.visibility); - }, -}; - -const mutations = { - [SET_LOCATION](state, payload) { - state.location = payload; - }, - [SET_CONTEXT_MENU_VISIBILITY](state, payload) { - state.visible = payload; - }, -}; - -export default { - state, - getters, - actions, - mutations, -}; diff --git a/src/entities/contextMenu/model/store/mutations.type.ts b/src/entities/contextMenu/model/store/mutations.type.ts deleted file mode 100644 index dc436d3b..00000000 --- a/src/entities/contextMenu/model/store/mutations.type.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const SET_LOCATION = "setLocation"; -export const SET_CONTEXT_MENU_VISIBILITY = "setContextMenuVisibility"; diff --git a/src/main.ts b/src/main.ts index a08b9ba7..b34835d1 100644 --- 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 index aea96618..33ddf032 100644 --- 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 index 69743b0b..d639ad90 100644 --- a/src/pages/reports/network/NetworkConceptDashboard/NetworkConceptDashboard.vue +++ b/src/pages/reports/network/NetworkConceptDashboard/NetworkConceptDashboard.vue @@ -1,7 +1,7 @@ @@ -81,7 +74,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specRecordProportionByMonth } from "./specRecordProportionByMonth"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; @@ -89,24 +81,23 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: []; } const props = defineProps(); - const store = useStore(); -const route = useRoute(); const reportId = "viz-networkrecordproportionbymonth"; -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.PREVALENCE_BY_MONTH?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstDiagnosis/AgeAtFirstDiagnosis.vue b/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstDiagnosis/AgeAtFirstDiagnosis.vue index c589728f..276ba72c 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstDiagnosis/AgeAtFirstDiagnosis.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstDiagnosis/AgeAtFirstDiagnosis.vue @@ -149,17 +149,10 @@ @iconClicked="router.push({ name: 'help' })" /> @@ -171,7 +164,7 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specAgeAtFirstDiagnosis } from "./specAgeAtFirstDiagnosis"; import { useStore } from "vuex"; -import { useRoute, useRouter } from "vue-router"; +import { useRouter } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { DistributionType } from "@/processes/exploreReports/model/interfaces/reportTypes/DistributionType"; @@ -179,10 +172,10 @@ import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); const router = useRouter(); interface Props { @@ -191,11 +184,13 @@ interface Props { const props = defineProps(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = computed(() => { + return links.getSqlQueryLink( + store.getters.getQueryIndex.AGE_AT_FIRST_DIAGNOSIS?.[0] + ); +}); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstExposure/AgeAtFirstExposure.vue b/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstExposure/AgeAtFirstExposure.vue index 43cdea60..e0f9d937 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstExposure/AgeAtFirstExposure.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstExposure/AgeAtFirstExposure.vue @@ -146,17 +146,10 @@ @iconClicked="router.push({ name: 'help' })" /> @@ -169,14 +162,16 @@ import { links } from "@/shared/config/links"; import { specAgeAtFirstExposure } from "./specAgeAtFirstExposure"; import { useStore } from "vuex"; -import { useRoute, useRouter } from "vue-router"; +import { useRouter } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; +import Panel from "primevue/panel"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: []; @@ -185,14 +180,13 @@ interface Props { const props = defineProps(); const store = useStore(); -const route = useRoute(); const router = useRouter(); - -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); +const sqlLink = computed(() => { + return links.getSqlQueryLink( + store.getters.getQueryIndex.AGE_AT_FIRST_EXPOSURE?.[0] + ); +}); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstOccurrence/AgeAtFirstOccurrence.vue b/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstOccurrence/AgeAtFirstOccurrence.vue index 7db4e6bc..f72dd051 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstOccurrence/AgeAtFirstOccurrence.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/ageAtFirstOccurrence/AgeAtFirstOccurrence.vue @@ -146,17 +146,10 @@ @iconClicked="router.push({ name: 'help' })" /> @@ -169,7 +162,7 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specAgeAtFirstOccurrence } from "./specAgeAtFirstOccurrence"; import { useStore } from "vuex"; -import { useRoute, useRouter } from "vue-router"; +import { useRouter } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { DistributionType } from "@/processes/exploreReports/model/interfaces/reportTypes/DistributionType"; @@ -178,7 +171,8 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: DistributionType[]; @@ -186,14 +180,13 @@ interface Props { const props = defineProps(); const store = useStore(); -const route = useRoute(); const router = useRouter(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.AGE_AT_FIRST_OCCURRENCE?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/conditionsByType/ConditionsByType.vue b/src/pages/reports/network/NetworkConceptReport/charts/conditionsByType/ConditionsByType.vue index fcd1a487..5cab7756 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/conditionsByType/ConditionsByType.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/conditionsByType/ConditionsByType.vue @@ -51,17 +51,10 @@ " /> @@ -73,7 +66,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specConditionsByType } from "./specConditionsByType"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { RecordsCountType } from "@/processes/exploreReports/model/interfaces/reportTypes/RecordsCountType"; @@ -82,21 +74,20 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); interface Props { data: RecordsCountType[]; } const props = defineProps(); +const { showTable, toggleTable } = useChartControls(); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.CONDITIONS_BY_TYPE?.[0] +); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/daysSupply/DaysSupply.vue b/src/pages/reports/network/NetworkConceptReport/charts/daysSupply/DaysSupply.vue index 0c2a4deb..a69a3bd2 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/daysSupply/DaysSupply.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/daysSupply/DaysSupply.vue @@ -141,17 +141,10 @@ @iconClicked="router.push({ name: 'help' })" /> @@ -164,7 +157,7 @@ import { links } from "@/shared/config/links"; import { specDaysSupply } from "./specDaysSupply"; import { useStore } from "vuex"; -import { useRoute, useRouter } from "vue-router"; +import { useRouter } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { DistributionType } from "@/processes/exploreReports/model/interfaces/reportTypes/DistributionType"; @@ -173,7 +166,8 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: DistributionType[]; @@ -182,14 +176,13 @@ interface Props { const props = defineProps(); const store = useStore(); -const route = useRoute(); const router = useRouter(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DAYS_SUPPLY_DISTRIBUTION?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/drugsByType/DrugsByType.vue b/src/pages/reports/network/NetworkConceptReport/charts/drugsByType/DrugsByType.vue index d1a7ad62..7255dc60 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/drugsByType/DrugsByType.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/drugsByType/DrugsByType.vue @@ -45,17 +45,10 @@ @iconClicked="helpers.openNewTab(links.getDocsLink('DRUG_EXPOSURE'))" /> @@ -67,7 +60,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specDrugsByType } from "./specDrugsByType"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -77,7 +69,8 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: RecordsCountType[]; @@ -86,12 +79,11 @@ interface Props { const props = defineProps(); const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DRUGS_BY_TYPE?.[0] +); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/lengthOfEra/LengthOfEra.vue b/src/pages/reports/network/NetworkConceptReport/charts/lengthOfEra/LengthOfEra.vue index 273c9d4e..4e90bf52 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/lengthOfEra/LengthOfEra.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/lengthOfEra/LengthOfEra.vue @@ -136,17 +136,10 @@ @@ -158,7 +151,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specLengthOfEra } from "./specLengthOfEra"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { DistributionType } from "@/processes/exploreReports/model/interfaces/reportTypes/DistributionType"; @@ -167,7 +159,8 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: DistributionType[]; @@ -175,13 +168,12 @@ interface Props { const props = defineProps(); const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.LENGTH_OF_ERA?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/measurementValueDistributionChart/MeasurementValueDistributionChart.vue b/src/pages/reports/network/NetworkConceptReport/charts/measurementValueDistributionChart/MeasurementValueDistributionChart.vue index 3ca78af3..0ab495ce 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/measurementValueDistributionChart/MeasurementValueDistributionChart.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/measurementValueDistributionChart/MeasurementValueDistributionChart.vue @@ -181,17 +181,10 @@ @iconClicked="router.push({ name: 'help' })" /> @@ -214,6 +207,7 @@ import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const router = useRouter(); @@ -224,6 +218,10 @@ interface Props { const props = defineProps(); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.MEASUREMENT_VALUE_DISTRIBUTION?.[0] +); + const getMeasurementUnits = computed(function () { return [...new Set(props.data.chart.map((value) => value.CATEGORY))]; }); @@ -246,11 +244,7 @@ const getSelectedMeasurementUnitsTable = computed(function () { : props.data.table; }); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); diff --git a/src/pages/reports/network/NetworkConceptReport/charts/measurementsByType/MeasurementsByType.vue b/src/pages/reports/network/NetworkConceptReport/charts/measurementsByType/MeasurementsByType.vue index 82955c06..7fb1a070 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/measurementsByType/MeasurementsByType.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/measurementsByType/MeasurementsByType.vue @@ -50,17 +50,10 @@ @iconClicked="helpers.openNewTab(links.getDocsLink('MEASUREMENT'))" /> @@ -72,7 +65,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specMeasurementsByType } from "./specMeasurementsByType"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { RecordsCountType } from "@/processes/exploreReports/model/interfaces/reportTypes/RecordsCountType"; @@ -81,7 +73,8 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: RecordsCountType[]; @@ -90,13 +83,12 @@ interface Props { const props = defineProps(); const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.MEASUREMENTS_BY_TYPE?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/quantityDistribution/QuantityDistribution.vue b/src/pages/reports/network/NetworkConceptReport/charts/quantityDistribution/QuantityDistribution.vue index 2e4973b3..c653349b 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/quantityDistribution/QuantityDistribution.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/quantityDistribution/QuantityDistribution.vue @@ -142,17 +142,10 @@ @iconClicked="router.push({ name: 'help' })" /> @@ -174,6 +167,7 @@ import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; import { computed, ref } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const route = useRoute(); @@ -185,11 +179,11 @@ interface Props { const props = defineProps(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.QUANTITY_DISTRIBUTION?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/recordsByUnit/RecordsByUnit.vue b/src/pages/reports/network/NetworkConceptReport/charts/recordsByUnit/RecordsByUnit.vue index dd111b9c..cc11a846 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/recordsByUnit/RecordsByUnit.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/recordsByUnit/RecordsByUnit.vue @@ -40,17 +40,10 @@ @@ -62,7 +55,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specRecordsByUnit } from "./specRecordsByUnit"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { RecordsCountType } from "@/processes/exploreReports/model/interfaces/reportTypes/RecordsCountType"; @@ -71,7 +63,8 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: RecordsCountType[]; @@ -80,13 +73,12 @@ interface Props { const props = defineProps(); const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.RECORDS_BY_UNIT?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkConceptReport/charts/visitDurationByType/VisitDurationByType.vue b/src/pages/reports/network/NetworkConceptReport/charts/visitDurationByType/VisitDurationByType.vue index f432a5bc..b1675766 100644 --- a/src/pages/reports/network/NetworkConceptReport/charts/visitDurationByType/VisitDurationByType.vue +++ b/src/pages/reports/network/NetworkConceptReport/charts/visitDurationByType/VisitDurationByType.vue @@ -139,17 +139,10 @@ @@ -161,7 +154,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specVisitDurationByType } from "./specVisitDurationByType"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { DistributionType } from "@/processes/exploreReports/model/interfaces/reportTypes/DistributionType"; @@ -170,7 +162,8 @@ import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; interface Props { data: DistributionType[]; @@ -179,13 +172,12 @@ interface Props { const props = defineProps(); const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.VISIT_DURATION_BY_TYPE?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return props.data; diff --git a/src/pages/reports/network/NetworkDataFeasibilityReport/components/DesiredDomains.vue b/src/pages/reports/network/NetworkDataFeasibilityReport/components/DesiredDomains.vue index ef3fe15c..1c9545c0 100644 --- a/src/pages/reports/network/NetworkDataFeasibilityReport/components/DesiredDomains.vue +++ b/src/pages/reports/network/NetworkDataFeasibilityReport/components/DesiredDomains.vue @@ -117,7 +117,7 @@ const items = ref([ { value: "observation_period", text: "Observation" }, ]); -const domainMap = ref({ +const domainMap = { condition_occurrence: "1000000", drug_exposure: "0100000", device_exposure: "0010000", @@ -125,75 +125,48 @@ const domainMap = ref({ death: "0000100", procedure_occurrence: "0000010", observation_period: "0000001", -}); +}; const switchDomains = ref([]); + +const getDomainData = (domainKey, valueData) => { + return { + data: valueData.filter( + (bits) => domainMap[domainKey] === bits.DOMAIN_BITS + )[0]?.COUNT_VALUE, + show: switchDomains.value.includes(domainKey), + }; +}; + const getDomainsData = computed(function () { if (switchDomains.value.length) { return props.data.map((value) => ({ cdm_name: value.source, - condition_occurrence: { - data: value.data.filter( - (bits) => domainMap.value.condition_occurrence === bits.DOMAIN_BITS - )[0]?.COUNT_VALUE, - - show: switchDomains.value.includes("condition_occurrence"), - }, - drug_exposure: { - data: value.data.filter( - (bits) => domainMap.value.drug_exposure === bits.DOMAIN_BITS - )[0]?.COUNT_VALUE, - - show: switchDomains.value.includes("drug_exposure"), - }, - device_exposure: { - data: value.data.filter( - (bits) => domainMap.value.device_exposure === bits.DOMAIN_BITS - )[0]?.COUNT_VALUE, - - show: switchDomains.value.includes("device_exposure"), - }, - measurement: { - data: value.data.filter( - (bits) => domainMap.value.measurement === bits.DOMAIN_BITS - )[0]?.COUNT_VALUE, - - show: switchDomains.value.includes("measurement"), - }, - death: { - data: value.data.filter( - (bits) => domainMap.value.death === bits.DOMAIN_BITS - )[0]?.COUNT_VALUE, - - show: switchDomains.value.includes("death"), - }, - procedure_occurrence: { - data: value.data.filter( - (bits) => domainMap.value.procedure_occurrence === bits.DOMAIN_BITS - )[0]?.COUNT_VALUE, - - show: switchDomains.value.includes("procedure_occurrence"), - }, - observation_period: { - data: value.data.filter( - (bits) => domainMap.value.observation_period === bits.DOMAIN_BITS - )[0]?.COUNT_VALUE, - - show: switchDomains.value.includes("observation_period"), - }, + condition_occurrence: getDomainData("condition_occurrence", value.data), + drug_exposure: getDomainData("drug_exposure", value.data), + device_exposure: getDomainData("device_exposure", value.data), + measurement: getDomainData("measurement", value.data), + death: getDomainData("death", value.data), + procedure_occurrence: getDomainData("procedure_occurrence", value.data), + observation_period: getDomainData("observation_period", value.data), })); } else { return []; } }); -const getDesiredDomainsOverview = computed(function () { +const isAllDomainsPresent = (value) => { + return ( + Object.values(value).filter((domain) => domain.data && domain.show) + .length === switchDomains.value.length + ); +}; + +const getDesiredDomainsOverview = computed(() => { if (switchDomains.value.length && getDomainsData.value.length) { return getDomainsData.value.map((value) => ({ cdm_name: value.cdm_name, - allDomainsPresent: - Object.values(value).filter((domain) => domain.data && domain.show) - .length === switchDomains.value.length, + allDomainsPresent: isAllDomainsPresent(value), })); } else { return []; diff --git a/src/pages/reports/network/NetworkDataFeasibilityReport/components/DomainRequirements.vue b/src/pages/reports/network/NetworkDataFeasibilityReport/components/DomainRequirements.vue index 8865d8aa..4feff800 100644 --- a/src/pages/reports/network/NetworkDataFeasibilityReport/components/DomainRequirements.vue +++ b/src/pages/reports/network/NetworkDataFeasibilityReport/components/DomainRequirements.vue @@ -71,32 +71,27 @@ const items = ref([ const domainBits: Ref = ref("0000000"); -const getDomainsData = computed(function () { +const getDomainsData = computed(() => { if (domainBits.value === "0000000") { return []; - } else { - return props.data.map((value) => { - const data = value.data.filter((d) => d.DOMAIN_BITS === domainBits.value); - return { - cdm_name: value.source, - percentage: data[0]?.PERCENT_VALUE, - population: data[0]?.COUNT_VALUE, - }; - }); } + + return props.data.map(({ data, source }) => { + const filteredData = data.filter( + (d) => d.DOMAIN_BITS === domainBits.value + )[0]; + return { + cdm_name: source, + percentage: filteredData?.PERCENT_VALUE, + population: filteredData?.COUNT_VALUE, + }; + }); }); const updateBits = function (): void { - domainBits.value = ""; - domainBits.value = domainBits.value.concat( - switchDomains.value.includes("condition_occurrence") ? "1" : "0", - switchDomains.value.includes("drug_exposure") ? "1" : "0", - switchDomains.value.includes("device_exposure") ? "1" : "0", - switchDomains.value.includes("measurement") ? "1" : "0", - switchDomains.value.includes("death") ? "1" : "0", - switchDomains.value.includes("procedure_occurrence") ? "1" : "0", - switchDomains.value.includes("observation") ? "1" : "0" - ); + domainBits.value = items.value + .map((item) => (switchDomains.value.includes(item.value) ? "1" : "0")) + .join(""); }; const emit = defineEmits(["domainsDataChanged"]); diff --git a/src/pages/reports/network/NetworkDataFeasibilityReport/components/FinalEstimation.vue b/src/pages/reports/network/NetworkDataFeasibilityReport/components/FinalEstimation.vue index 20d439b7..dcbc5264 100644 --- a/src/pages/reports/network/NetworkDataFeasibilityReport/components/FinalEstimation.vue +++ b/src/pages/reports/network/NetworkDataFeasibilityReport/components/FinalEstimation.vue @@ -154,166 +154,93 @@ const formatComma = function (value) { return d3Format.format(",")(value); }; -const headers = computed(function () { - return [ - { - title: "Data Source", - align: "start", - sortable: false, - key: "cdm_name", - show: true, - }, - { - title: "Source population", - align: "end", - key: "population.data", - show: true, - }, - { - title: "% Required Domains", - align: "end", - key: "domain_percent.data", - show: getEstimations.value[0].domain_percent.isIncluded, - }, - { - title: "Desired Domains", - align: "end", - key: "desired_domain_value.data", - show: getEstimations.value[0].desired_domain_value.isIncluded, - }, - { - title: "% Cumulative Observation", - align: "end", - key: "cumulative_duration_percent.data", - show: getEstimations.value[0].cumulative_duration_percent.isIncluded, - }, - { - title: "% Population by age", - align: "end", - key: "population_age_percent.data", - show: getEstimations.value[0].population_age_percent.isIncluded, - }, - { - title: "% Observed", - align: "end", - key: "observation_percent.data", - show: getEstimations.value[0].observation_percent.isIncluded, - }, - { - title: "% Visit types", - align: "end", - key: "visit_types_percent.data", - show: getEstimations.value[0].visit_types_percent.isIncluded, - }, - { - title: "% Concepts", - align: "end", - key: "concepts_percent.data", - show: getEstimations.value[0].concepts_percent.isIncluded, - }, - { - title: "Estimated population", - align: "end", - key: "estimation", - show: true, - }, - ].filter((x) => x.show); -}); -const getEstimations = computed(function () { +const filterData = (data, cdm_name) => + data.filter((value) => value.cdm_name === cdm_name); + +const prepareData = computed(function () { const estimations = store.getters.getSources.map((data) => ({ cdm_name: data.cdm_source_abbreviation, })); - return estimations - .map((obj) => { - const domainData = props.data.domainData.filter( - (value) => obj.cdm_name === value.cdm_name - ); - const rangeData = props.data.rangeData.filter( - (value) => value.cdm_name === obj.cdm_name - ); - - const visitTypesData = props.data.visitTypes.filter( - (value) => obj.cdm_name === value.cdm_name - ); - - const sourcePopulation = props.data.sourcePopulation.filter( - (value) => obj.cdm_name === value.source.cdm_source_abbreviation - ); - - const requiredConcepts = props.data.requiredConcepts.filter( - (value) => value.cdm_name === obj.cdm_name - ); + return estimations.map((obj) => { + const domainData = filterData(props.data.domainData, obj.cdm_name); + const rangeData = filterData(props.data.rangeData, obj.cdm_name); + const visitTypesData = filterData(props.data.visitTypes, obj.cdm_name); + const sourcePopulation = props.data.sourcePopulation.filter( + (value) => obj.cdm_name === value.source.cdm_source_abbreviation + ); + const requiredConcepts = filterData( + props.data.requiredConcepts, + obj.cdm_name + ); + const desiredDomains = filterData(props.data.desiredDomains, obj.cdm_name); - const desiredDomains = props.data.desiredDomains.filter( - (value) => value.cdm_name === obj.cdm_name - ); - - return { - ...obj, - domain_percent: { - data: domainData[0]?.percentage, - isIncluded: props.data.domainData.length, - }, - cumulative_duration_percent: { - data: rangeData[0]?.cumulative_duration, - isIncluded: props.data.rangeData.length, - }, - population_age_percent: { - data: rangeData[0]?.population_age_percent, - isIncluded: props.data.rangeData.length, - }, - observation_percent: { - data: rangeData[0]?.average_population_percentage, - isIncluded: props.data.rangeData.length, - }, - visit_types_percent: { - data: visitTypesData[0]?.percentage, - isIncluded: props.data.visitTypes.length, - }, - population: { - data: sourcePopulation[0]?.data.SUMMARY[1].ATTRIBUTE_VALUE, - isIncluded: props.data.sourcePopulation.length, - }, - concepts_percent: { - data: requiredConcepts[0]?.concepts - .reduce( - (prevValue, current) => [...prevValue, current.percentage], - [] - ) - .sort((a, b) => a - b)[0], - isIncluded: props.data.requiredConcepts.length, - }, - desired_domain_value: { - data: desiredDomains[0]?.allDomainsPresent ? 1 : 0, - isIncluded: props.data.desiredDomains.length, - }, - }; - }) - .map((obj) => ({ + return { ...obj, - estimation: Math.floor( - obj.population.data * - (obj.domain_percent.isIncluded ? obj.domain_percent.data || 0 : 1) * - (obj.population_age_percent.isIncluded - ? obj.population_age_percent.data || 0 - : 1) * - (obj.cumulative_duration_percent.isIncluded - ? obj.cumulative_duration_percent.data || 0 - : 1) * - (obj.observation_percent.isIncluded - ? obj.observation_percent.data || 0 - : 1) * - (obj.visit_types_percent.isIncluded - ? obj.visit_types_percent.data || 0 - : 1) * - (obj.concepts_percent.isIncluded - ? obj.concepts_percent.data || 0 - : 1) * - (obj.desired_domain_value.isIncluded - ? obj.desired_domain_value.data || 0 - : 1) - ), - })); + domain_percent: { + data: domainData[0]?.percentage, + isIncluded: props.data.domainData.length, + }, + cumulative_duration_percent: { + data: rangeData[0]?.cumulative_duration, + isIncluded: props.data.rangeData.length, + }, + population_age_percent: { + data: rangeData[0]?.population_age_percent, + isIncluded: props.data.rangeData.length, + }, + observation_percent: { + data: rangeData[0]?.average_population_percentage, + isIncluded: props.data.rangeData.length, + }, + visit_types_percent: { + data: visitTypesData[0]?.percentage, + isIncluded: props.data.visitTypes.length, + }, + population: { + data: sourcePopulation[0]?.data.SUMMARY[1].ATTRIBUTE_VALUE, + isIncluded: props.data.sourcePopulation.length, + }, + concepts_percent: { + data: requiredConcepts[0]?.concepts + .reduce( + (prevValue, current) => [...prevValue, current.percentage], + [] + ) + .sort((a, b) => a - b)[0], + isIncluded: props.data.requiredConcepts.length, + }, + desired_domain_value: { + data: desiredDomains[0]?.allDomainsPresent ? 1 : 0, + isIncluded: props.data.desiredDomains.length, + }, + }; + }); +}); + +const getEstimations = computed(() => { + return prepareData.value.map((obj) => ({ + ...obj, + estimation: Math.floor( + obj.population.data * + (obj.domain_percent.isIncluded ? obj.domain_percent.data || 0 : 1) * + (obj.population_age_percent.isIncluded + ? obj.population_age_percent.data || 0 + : 1) * + (obj.cumulative_duration_percent.isIncluded + ? obj.cumulative_duration_percent.data || 0 + : 1) * + (obj.observation_percent.isIncluded + ? obj.observation_percent.data || 0 + : 1) * + (obj.visit_types_percent.isIncluded + ? obj.visit_types_percent.data || 0 + : 1) * + (obj.concepts_percent.isIncluded ? obj.concepts_percent.data || 0 : 1) * + (obj.desired_domain_value.isIncluded + ? obj.desired_domain_value.data || 0 + : 1) + ), + })); }); diff --git a/src/pages/reports/network/NetworkDataFeasibilityReport/components/Range.vue b/src/pages/reports/network/NetworkDataFeasibilityReport/components/Range.vue index 1ea50826..56e06007 100644 --- a/src/pages/reports/network/NetworkDataFeasibilityReport/components/Range.vue +++ b/src/pages/reports/network/NetworkDataFeasibilityReport/components/Range.vue @@ -152,7 +152,6 @@ import { timeParse } from "d3-time-format"; import * as d3Format from "d3-format"; import { computed, ref, watch, Ref, onMounted } from "vue"; -import { DataTableHeader } from "@/shared/interfaces/DataTableHeader"; import { ObservationPeriodType } from "@/processes/exploreReports/model/interfaces/files/ObservationPeriodType"; import { PersonData } from "@/processes/exploreReports/model/interfaces/files/Person"; import { MultipleFilesRawInterface } from "@/processes/exploreReports/model/interfaces/MultipleFilesRawInterface"; @@ -176,39 +175,63 @@ const rangeYear: Ref = ref([]); const continuousObservation: Ref = ref([]); +const getFilteredData = (value, rangeYear) => { + const timeparse = timeParse("%Y%m"); + return value.data.OBSERVED_BY_MONTH.filter((filtered) => { + const parsedYear = parseInt(timeparse(filtered.MONTH_YEAR).getFullYear()); + return parsedYear >= rangeYear.value[0] && parsedYear <= rangeYear.value[1]; + }); +}; + +const getReducedData = (filteredData) => { + const timeparse = timeParse("%Y%m"); + return filteredData.reduce((prevObj, current) => { + const parsedYear = parseInt(timeparse(current.MONTH_YEAR).getFullYear()); + return { + ...prevObj, + [parsedYear]: { + population: prevObj[parsedYear]?.population + ? prevObj[parsedYear].population + current.COUNT_VALUE + : 0 + current.COUNT_VALUE, + percent: prevObj[parsedYear]?.percent + ? prevObj[parsedYear].percent + current.PERCENT_VALUE + : 0 + current.PERCENT_VALUE, + }, + }; + }, {}); +}; + +const getObservationData = (value, rangeYear, continuousObservation) => { + const filteredData = getFilteredData(value, rangeYear); + const reducedData = getReducedData(filteredData); + const filteredDuration = value.data.CUMULATIVE_DURATION.filter( + (data) => data.YEARS <= continuousObservation.value[0] + ); + return { + cdm_name: value.source.cdm_source_abbreviation, + data: reducedData, + filtered_duration: filteredDuration, + }; +}; + +const getPersonData = (person, rangeAge) => { + return person.map((value) => { + const filteredPopulationCount = value.data.AGE_GENDER_DATA.filter( + (data) => data.AGE >= rangeAge.value[0] && data.AGE <= rangeAge.value[1] + ).reduce((prevValue, current) => prevValue + current.COUNT_VALUE, 0); + return { + cdm_name: value.source.cdm_source_abbreviation, + population_age: filteredPopulationCount, + population_age_percent: + filteredPopulationCount / value.data.SUMMARY[1].ATTRIBUTE_VALUE, + }; + }); +}; + const getRangeData = computed(function () { const person = props.person; - const timeparse = timeParse("%Y%m"); const observationData = props.observationPeriod - .map((value) => ({ - cdm_name: value.source.cdm_source_abbreviation, - data: value.data.OBSERVED_BY_MONTH.filter((filtered) => { - const parsedYear = parseInt( - timeparse(filtered.MONTH_YEAR).getFullYear() - ); - return ( - parsedYear >= rangeYear.value[0] && parsedYear <= rangeYear.value[1] - ); - }).reduce((prevObj, current) => { - const parsedYear = parseInt( - timeparse(current.MONTH_YEAR).getFullYear() - ); - return { - ...prevObj, - [parsedYear]: { - population: prevObj[parsedYear]?.population - ? prevObj[parsedYear].population + current.COUNT_VALUE - : 0 + current.COUNT_VALUE, - percent: prevObj[parsedYear]?.percent - ? prevObj[parsedYear].percent + current.PERCENT_VALUE - : 0 + current.PERCENT_VALUE, - }, - }; - }, {}), - filtered_duration: value.data.CUMULATIVE_DURATION.filter( - (data) => data.YEARS <= continuousObservation.value[0] - ), - })) + .map((value) => getObservationData(value, rangeYear, continuousObservation)) .map((value) => ({ cdm_name: value.cdm_name, population_observed: ( @@ -227,23 +250,12 @@ const getRangeData = computed(function () { ...value.filtered_duration.map((value) => value.PERCENT_PEOPLE) ), })); - const personData = person.map((value) => { - const filteredPopulationCount = value.data.AGE_GENDER_DATA.filter( - (data) => data.AGE >= rangeAge.value[0] && data.AGE <= rangeAge.value[1] - ).reduce((prevValue, current) => prevValue + current.COUNT_VALUE, 0); - return { - cdm_name: value.source.cdm_source_abbreviation, - population_age: filteredPopulationCount, - population_age_percent: - filteredPopulationCount / value.data.SUMMARY[1].ATTRIBUTE_VALUE, - }; - }); + const personData = getPersonData(person, rangeAge); return observationData.map((value) => ({ ...value, - ...personData.filter((data) => data.cdm_name === value.cdm_name)[0], + ...personData.find((data) => data.cdm_name === value.cdm_name), })); }); - const getAgeMinMax = computed(function () { const data = props.person.reduce( (prevValue, current) => [ diff --git a/src/pages/reports/network/NetworkDataFeasibilityReport/components/RequiredConcepts.vue b/src/pages/reports/network/NetworkDataFeasibilityReport/components/RequiredConcepts.vue index c223c8c6..0d156e2d 100644 --- a/src/pages/reports/network/NetworkDataFeasibilityReport/components/RequiredConcepts.vue +++ b/src/pages/reports/network/NetworkDataFeasibilityReport/components/RequiredConcepts.vue @@ -10,7 +10,7 @@ > @@ -126,9 +126,11 @@ import { DOMAIN_SUMMARY } from "@/shared/config/files"; import { useStore } from "vuex"; import { FETCH_MULTIPLE_FILES_BY_SOURCE } from "@/processes/exploreReports/model/store/actions.type"; import { helpers } from "@/shared/lib/mixins"; -import { computed, ref, watch, Ref, onBeforeMount } from "vue"; -import { ConceptSearchForm } from "@/widgets/conceptSearchForm"; -import { webApiActions } from "@/shared/api/webAPI"; +import { computed, ref, watch, onBeforeMount } from "vue"; +import { + ConceptSearchForm, + useConceptSearchForm, +} from "@/widgets/conceptSearchForm"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; import Message from "primevue/message"; @@ -138,14 +140,14 @@ import environment from "@/shared/api/environment"; import { CONCEPT_METADATA } from "@/shared/api/duckdb/files"; const store = useStore(); -const dialog: Ref = ref(false); const addedConcepts = ref({}); const conceptsData = ref([]); -const successMessage = ref([]); const expanded = ref([]); const sources = ref([]); const missingConcepts = ref([]); +const { closeForm, renderForm, showWebApiSearchForm } = useConceptSearchForm(); + const addedConceptsCount = computed(function () { return Object.keys(addedConcepts.value).filter( (key) => addedConcepts.value[key] === "Loaded" @@ -259,12 +261,6 @@ const getConceptsForRequest = (measurement = []) => { }; }); }; - -const close = function () { - dialog.value = false; - store.dispatch(webApiActions.RESET_API_STORAGE); - successMessage.value = []; -}; const save = function (item) { conceptsData.value = store.getters.getData.concept; addedConcepts.value = { ...addedConcepts.value, ...item }; diff --git a/src/pages/reports/network/NetworkDataFeasibilityReport/components/VisitTypes.vue b/src/pages/reports/network/NetworkDataFeasibilityReport/components/VisitTypes.vue index a1a444f3..633d05b0 100644 --- a/src/pages/reports/network/NetworkDataFeasibilityReport/components/VisitTypes.vue +++ b/src/pages/reports/network/NetworkDataFeasibilityReport/components/VisitTypes.vue @@ -88,41 +88,57 @@ const sourcesFilter = ref({ }); const getVisitTypes = computed(function () { - const data = props.data.reduce( - (prev, current) => [...prev, ...current.data], - [] - ); - return [ - ...new Set( - data.map((object) => - JSON.stringify({ - concept_id: object.CONCEPT_ID, - concept_name: object.CONCEPT_NAME, - }) - ) - ), - ].map((string) => JSON.parse(string)); + const flattenData = (data) => { + return data.reduce((prev, current) => [...prev, ...current.data], []); + }; + + const createUniqueObject = (data) => { + return { + concept_id: data.CONCEPT_ID, + concept_name: data.CONCEPT_NAME, + }; + }; + + const getUniqueObjects = (data) => { + const uniqueStrings = new Set(data.map(JSON.stringify)); + return Array.from(uniqueStrings).map(JSON.parse); + }; + + const data = flattenData(props.data); + const uniqueObjects = data.map(createUniqueObject); + return getUniqueObjects(uniqueObjects); }); -const filterSelectedVisitTypes = computed(function () { - const visitTypes = visitTypesSelected.value.map((obj) => obj.concept_id); - const filtered = props.data.map((source) => ({ - data: source.data.filter((value) => visitTypes.includes(value.CONCEPT_ID)), - source: source.source, - })); +const visitTypes = computed(() => + visitTypesSelected.value.map((obj) => obj.concept_id) +); - return filtered.filter((value) => value.data.length === visitTypes.length); +const filterSelectedVisitTypes = computed(function () { + return props.data + .map((source) => ({ + data: source.data.filter((value) => + visitTypes.value.includes(value.CONCEPT_ID) + ), + source: source.source, + })) + .filter((value) => + value.data.every((data) => visitTypes.value.includes(data.CONCEPT_ID)) + ); }); +const getSmallestPercentage = (data) => { + return data.map((data) => data.PERCENT_PERSONS).sort((a, b) => a - b)[0]; +}; + +const hasPercentage = (value) => value.percentage; + const getSmallestVisitTypeValue = computed(function () { return filterSelectedVisitTypes.value .map((value) => ({ cdm_name: value.source, - percentage: value.data - .map((data) => data.PERCENT_PERSONS) - .sort((a, b) => a - b)[0], + percentage: getSmallestPercentage(value.data), })) - .filter((value) => value.percentage); + .filter(hasPercentage); }); const emit = defineEmits(["visitTypesChanged"]); diff --git a/src/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCategory/NetworkDataQualityIssuesByCategory.vue b/src/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCategory/NetworkDataQualityIssuesByCategory.vue index 35d567e3..ed6f7690 100644 --- a/src/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCategory/NetworkDataQualityIssuesByCategory.vue +++ b/src/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCategory/NetworkDataQualityIssuesByCategory.vue @@ -13,8 +13,6 @@ import { NETWORK_QUALITY_SUMMARY } from "@/shared/config/files"; import { Chart } from "@/widgets/chart"; import { specIssueStratificationByCategory } from "./specIssueStratificationByCategory"; import { useStore } from "vuex"; -import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; -import { specCumulativeObservation } from "@/pages/reports/network/NetworkPopulationReport/charts/cumulativeObservation/specCumulativeObservation"; import Panel from "primevue/panel"; const store = useStore(); diff --git a/src/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCdmTable/NetworkDataQualityIssuesByCdmTable.vue b/src/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCdmTable/NetworkDataQualityIssuesByCdmTable.vue index ef5b3abf..06884182 100644 --- a/src/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCdmTable/NetworkDataQualityIssuesByCdmTable.vue +++ b/src/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCdmTable/NetworkDataQualityIssuesByCdmTable.vue @@ -13,8 +13,6 @@ import { NETWORK_QUALITY_SUMMARY } from "@/shared/config/files"; import { Chart } from "@/widgets/chart"; import { specIssueStratificationByTable } from "./specIssueStratificationByTable"; import { useStore } from "vuex"; -import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; -import { specIssueStratificationByCategory } from "@/pages/reports/network/NetworkDataQualitySummary/charts/NetworkDataQualityIssuesByCategory/specIssueStratificationByCategory"; import Panel from "primevue/panel"; const store = useStore(); diff --git a/src/pages/reports/network/NetworkDatastrandReport/NetworkDatastrandReport.vue b/src/pages/reports/network/NetworkDatastrandReport/NetworkDatastrandReport.vue index 8659f6f9..e691d182 100644 --- a/src/pages/reports/network/NetworkDatastrandReport/NetworkDatastrandReport.vue +++ b/src/pages/reports/network/NetworkDatastrandReport/NetworkDatastrandReport.vue @@ -52,13 +52,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.DOMAIN_SUMMARY.RECORDS_BY_DOMAIN[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -67,17 +61,9 @@ diff --git a/src/pages/reports/network/NetworkDiversityReport/charts/raceChart/RaceChart.vue b/src/pages/reports/network/NetworkDiversityReport/charts/raceChart/RaceChart.vue index b9accc2f..243410bd 100644 --- a/src/pages/reports/network/NetworkDiversityReport/charts/raceChart/RaceChart.vue +++ b/src/pages/reports/network/NetworkDiversityReport/charts/raceChart/RaceChart.vue @@ -1,10 +1,6 @@ @@ -13,8 +9,13 @@ import Panel from "primevue/panel"; import { useStore } from "vuex"; import { specRace } from "@/pages/reports/network/NetworkDiversityReport/charts/raceChart/specRace"; import { Chart } from "@/widgets/chart"; +import { computed } from "vue"; const store = useStore(); + +const raceData = computed(() => { + return store.getters.getData.raceData; +}); diff --git a/src/pages/reports/network/NetworkOverview/components/DataNetworkOverview.vue b/src/pages/reports/network/NetworkOverview/components/DataNetworkOverview.vue index 0fa021d2..f7cc9abc 100644 --- a/src/pages/reports/network/NetworkOverview/components/DataNetworkOverview.vue +++ b/src/pages/reports/network/NetworkOverview/components/DataNetworkOverview.vue @@ -37,7 +37,6 @@ import { useStore } from "vuex"; import { computed } from "vue"; import * as d3 from "d3-format"; -import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { mdiAccount, mdiDatabase, mdiDatabaseAlert, mdiHistory } from "@mdi/js"; import SvgIcon from "@jamescoyle/vue-icon"; import Panel from "primevue/panel"; diff --git a/src/pages/reports/network/NetworkPerformance/NetworkPerformance.vue b/src/pages/reports/network/NetworkPerformance/NetworkPerformance.vue index 7da1a240..1317c180 100644 --- a/src/pages/reports/network/NetworkPerformance/NetworkPerformance.vue +++ b/src/pages/reports/network/NetworkPerformance/NetworkPerformance.vue @@ -50,16 +50,16 @@ const aggregateTime = function (formatter?) { }; }; const formatTime = (function () { - return function (x) { - let seconds = Math.floor((x / 1000) % 60), - minutes = Math.floor((x / (1000 * 60)) % 60), - hours = Math.floor((x / (1000 * 60 * 60)) % 24); + return function (x: number) { + let seconds: string | number = Math.floor((x / 1000) % 60), + minutes: string | number = Math.floor((x / (1000 * 60)) % 60), + hours: string | number = Math.floor((x / (1000 * 60 * 60)) % 24); hours = hours < 10 ? "0" + hours : hours; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; - return hours + ":" + minutes + ":" + seconds; + return `${hours}:${minutes}:${seconds}`; }; })(); diff --git a/src/pages/reports/network/NetworkPopulationReport/charts/ageAtFirstObservation/AgeAtFirstObservation.vue b/src/pages/reports/network/NetworkPopulationReport/charts/ageAtFirstObservation/AgeAtFirstObservation.vue index 5aa0ab6e..229a7d3c 100644 --- a/src/pages/reports/network/NetworkPopulationReport/charts/ageAtFirstObservation/AgeAtFirstObservation.vue +++ b/src/pages/reports/network/NetworkPopulationReport/charts/ageAtFirstObservation/AgeAtFirstObservation.vue @@ -46,14 +46,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD - .AGE_AT_FIRST_OBSERVATION[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -71,17 +64,18 @@ import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import Panel from "primevue/panel"; import { mdiCodeBraces } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD.AGE_AT_FIRST_OBSERVATION[0] +); const data = computed(() => { return store.getters.getData.allAgeAtFirstObservationData; diff --git a/src/pages/reports/network/NetworkPopulationReport/charts/cumulativeObservation/CumulativeObservation.vue b/src/pages/reports/network/NetworkPopulationReport/charts/cumulativeObservation/CumulativeObservation.vue index 15a8be12..0a8bdd19 100644 --- a/src/pages/reports/network/NetworkPopulationReport/charts/cumulativeObservation/CumulativeObservation.vue +++ b/src/pages/reports/network/NetworkPopulationReport/charts/cumulativeObservation/CumulativeObservation.vue @@ -46,14 +46,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD - .CUMULATIVE_DURATION[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -72,15 +65,16 @@ import { mdiCodeBraces } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD.CUMULATIVE_DURATION[0] +); const data = computed(() => { return store.getters.getData.allCumulativeDurationData; diff --git a/src/pages/reports/network/NetworkUnmappedSourceCodes/NetworkUnmappedSourceCodes.vue b/src/pages/reports/network/NetworkUnmappedSourceCodes/NetworkUnmappedSourceCodes.vue index fac7c06f..44fdd38b 100644 --- a/src/pages/reports/network/NetworkUnmappedSourceCodes/NetworkUnmappedSourceCodes.vue +++ b/src/pages/reports/network/NetworkUnmappedSourceCodes/NetworkUnmappedSourceCodes.vue @@ -9,7 +9,7 @@ currentPageReportTemplate="{first} to {last} of {totalRecords}" paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport" v-model:filters="newFilters" - :value="store.getters.getData.domainTable" + :value="domainTableData" :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" > @@ -69,7 +69,7 @@ { + return store.getters.getData.domainTable; +}); diff --git a/src/pages/reports/release/ConceptReport/ConceptReport.vue b/src/pages/reports/release/ConceptReport/ConceptReport.vue index 80adbfc0..0b80cc1e 100644 --- a/src/pages/reports/release/ConceptReport/ConceptReport.vue +++ b/src/pages/reports/release/ConceptReport/ConceptReport.vue @@ -41,20 +41,22 @@ :not-stationary="store.getters.getData.isNotStationary" /> - - - - - - - - - - - - - - + + + + + + + + + + + + + + @@ -87,6 +89,60 @@ const route = useRoute(); const router = useRouter(); const store = useStore(); +const hasMeasurementValueDistribution = computed( + () => store.getters.getData.conceptData.MEASUREMENT_VALUE_DISTRIBUTION +); +const hasLengthOfEra = computed( + () => store.getters.getData.conceptData.LENGTH_OF_ERA +); + +const hasConditionsByType = computed( + () => store.getters.getData.conceptData.CONDITIONS_BY_TYPE +); + +const hasMeasurementsByType = computed( + () => store.getters.getData.conceptData.MEASUREMENTS_BY_TYPE +); + +const hasVisitDurationByType = computed( + () => store.getters.getData.conceptData.VISIT_DURATION_BY_TYPE +); + +const hasRecordsByUnit = computed( + () => store.getters.getData.conceptData.RECORDS_BY_UNIT +); + +const hasDaysSupply = computed( + () => store.getters.getData.conceptData.DAYS_SUPPLY_DISTRIBUTION +); + +const hasAgeAtFirstDiagnosis = computed( + () => store.getters.getData.conceptData.AGE_AT_FIRST_DIAGNOSIS +); + +const hasAgeAtFirstExposure = computed( + () => store.getters.getData.conceptData.AGE_AT_FIRST_EXPOSURE +); + +const hasDrugsByType = computed( + () => store.getters.getData.conceptData.DRUGS_BY_TYPE +); + +const hasAgeAtFirstOccurrence = computed( + () => store.getters.getData.conceptData.AGE_AT_FIRST_OCCURRENCE +); + +const hasQuantityDistribution = computed( + () => store.getters.getData.conceptData.QUANTITY_DISTRIBUTION +); + +const hasRecordCountProportionByAgeSexYear = computed( + () => store.getters.getData.conceptData.PREVALENCE_BY_GENDER_AGE_YEAR +); + +const hasRecordCountProportionByMonth = computed( + () => store.getters.getData.conceptData.PREVALENCE_BY_MONTH +); const getPercentWithValues = computed((): string => { const missingData = store.getters.getData.domainSummary.filter( (data) => data.CONCEPT_ID === route.params.concept diff --git a/src/pages/reports/release/ConceptReport/charts/AgeAtFirstDiagnosis/AgeAtFirstDiagnosis.vue b/src/pages/reports/release/ConceptReport/charts/AgeAtFirstDiagnosis/AgeAtFirstDiagnosis.vue index 1c025543..a2ca86e0 100644 --- a/src/pages/reports/release/ConceptReport/charts/AgeAtFirstDiagnosis/AgeAtFirstDiagnosis.vue +++ b/src/pages/reports/release/ConceptReport/charts/AgeAtFirstDiagnosis/AgeAtFirstDiagnosis.vue @@ -1,5 +1,5 @@ @@ -123,17 +116,19 @@ import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); const router = useRouter(); -const showTable = ref(false); +const sqlLink = computed(() => { + return links.getSqlQueryLink( + store.getters.getQueryIndex.AGE_AT_FIRST_DIAGNOSIS?.[0] + ); +}); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return store.getters.getData.conceptData.AGE_AT_FIRST_DIAGNOSIS; diff --git a/src/pages/reports/release/ConceptReport/charts/AgeAtFirstExposure/AgeAtFirstExposure.vue b/src/pages/reports/release/ConceptReport/charts/AgeAtFirstExposure/AgeAtFirstExposure.vue index df9c5d5e..6f5ac6a5 100644 --- a/src/pages/reports/release/ConceptReport/charts/AgeAtFirstExposure/AgeAtFirstExposure.vue +++ b/src/pages/reports/release/ConceptReport/charts/AgeAtFirstExposure/AgeAtFirstExposure.vue @@ -1,5 +1,5 @@ @@ -110,25 +103,25 @@ import { links } from "@/shared/config/links"; import { specAgeAtFirstExposure } from "./specAgeAtFirstExposure"; import { useStore } from "vuex"; -import { useRoute, useRouter } from "vue-router"; +import { useRouter } from "vue-router"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); const router = useRouter(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.AGE_AT_FIRST_EXPOSURE?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return store.getters.getData.conceptData.AGE_AT_FIRST_EXPOSURE; diff --git a/src/pages/reports/release/ConceptReport/charts/AgeAtFirstOccurrence/AgeAtFirstOccurrence.vue b/src/pages/reports/release/ConceptReport/charts/AgeAtFirstOccurrence/AgeAtFirstOccurrence.vue index dfe3bb6f..a76d6159 100644 --- a/src/pages/reports/release/ConceptReport/charts/AgeAtFirstOccurrence/AgeAtFirstOccurrence.vue +++ b/src/pages/reports/release/ConceptReport/charts/AgeAtFirstOccurrence/AgeAtFirstOccurrence.vue @@ -1,5 +1,5 @@ @@ -110,25 +103,25 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specAgeAtFirstOccurrence } from "./specAgeAtFirstOccurrence"; import { useStore } from "vuex"; -import { useRoute, useRouter } from "vue-router"; +import { useRouter } from "vue-router"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); const router = useRouter(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.AGE_AT_FIRST_OCCURRENCE?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return store.getters.getData.conceptData.AGE_AT_FIRST_OCCURRENCE; diff --git a/src/pages/reports/release/ConceptReport/charts/ConditionsByType/ConditionsByType.vue b/src/pages/reports/release/ConceptReport/charts/ConditionsByType/ConditionsByType.vue index f3d76e6d..918c135f 100644 --- a/src/pages/reports/release/ConceptReport/charts/ConditionsByType/ConditionsByType.vue +++ b/src/pages/reports/release/ConceptReport/charts/ConditionsByType/ConditionsByType.vue @@ -1,5 +1,5 @@ @@ -72,7 +65,6 @@ import { links } from "@/shared/config/links"; import { specConditionsByType } from "./specConditionsByType"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -80,16 +72,16 @@ import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.CONDITIONS_BY_TYPE?.[0] +); const data = computed(() => { return store.getters.getData.conceptData.CONDITIONS_BY_TYPE; diff --git a/src/pages/reports/release/ConceptReport/charts/DaysSupply/DaysSupply.vue b/src/pages/reports/release/ConceptReport/charts/DaysSupply/DaysSupply.vue index 2620c5ce..27df536f 100644 --- a/src/pages/reports/release/ConceptReport/charts/DaysSupply/DaysSupply.vue +++ b/src/pages/reports/release/ConceptReport/charts/DaysSupply/DaysSupply.vue @@ -1,5 +1,5 @@ @@ -106,7 +99,7 @@ import { links } from "@/shared/config/links"; import { specDaysSupply } from "./specDaysSupply"; import { useStore } from "vuex"; -import { useRoute, useRouter } from "vue-router"; +import { useRouter } from "vue-router"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -114,17 +107,17 @@ import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); const router = useRouter(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DAYS_SUPPLY_DISTRIBUTION?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return store.getters.getData.conceptData.DAYS_SUPPLY_DISTRIBUTION; diff --git a/src/pages/reports/release/ConceptReport/charts/DrugsByType/DrugsByType.vue b/src/pages/reports/release/ConceptReport/charts/DrugsByType/DrugsByType.vue index f93cc0c0..c88e2077 100644 --- a/src/pages/reports/release/ConceptReport/charts/DrugsByType/DrugsByType.vue +++ b/src/pages/reports/release/ConceptReport/charts/DrugsByType/DrugsByType.vue @@ -1,5 +1,5 @@ @@ -65,7 +58,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specDrugsByType } from "./specDrugsByType"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -73,15 +65,15 @@ import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DRUGS_BY_TYPE?.[0] +); -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return store.getters.getData.conceptData.DRUGS_BY_TYPE; diff --git a/src/pages/reports/release/ConceptReport/charts/LengthOfEra/LengthOfEra.vue b/src/pages/reports/release/ConceptReport/charts/LengthOfEra/LengthOfEra.vue index 6ee3cb14..62f27076 100644 --- a/src/pages/reports/release/ConceptReport/charts/LengthOfEra/LengthOfEra.vue +++ b/src/pages/reports/release/ConceptReport/charts/LengthOfEra/LengthOfEra.vue @@ -1,5 +1,5 @@ @@ -62,7 +55,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { specRecordProportionByAgeSexYear } from "./specRecordProportionByAgeSexYear"; import { helpers } from "@/shared/lib/mixins"; @@ -72,16 +64,16 @@ import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.PREVALENCE_BY_GENDER_AGE_YEAR?.[0] +); const data = computed(() => { return store.getters.getData.conceptData.PREVALENCE_BY_GENDER_AGE_YEAR; diff --git a/src/pages/reports/release/ConceptReport/charts/RecordsByUnit/RecordsByUnit.vue b/src/pages/reports/release/ConceptReport/charts/RecordsByUnit/RecordsByUnit.vue index f2d21f56..37a0fbe5 100644 --- a/src/pages/reports/release/ConceptReport/charts/RecordsByUnit/RecordsByUnit.vue +++ b/src/pages/reports/release/ConceptReport/charts/RecordsByUnit/RecordsByUnit.vue @@ -1,5 +1,5 @@ @@ -107,7 +100,7 @@ import { specRecordProportionByMonth } from "./specRecordProportionByMonth"; import { useStore } from "vuex"; import { useRoute, useRouter } from "vue-router"; import * as listeners from "@/pages/model/lib/listeners"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import { specRecordProportionByMonthAnnotation } from "./specRecordProportionByMonthAnnotation"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; @@ -123,7 +116,7 @@ import { import Column from "primevue/column"; import DataTable from "primevue/datatable"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const route = useRoute(); const router = useRouter(); @@ -140,16 +133,20 @@ const getSourceConceptReportLink = function () { }; }; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.PREVALENCE_BY_MONTH?.[0] +); const data = computed(() => { return store.getters.getData.conceptData.PREVALENCE_BY_MONTH; diff --git a/src/pages/reports/release/ConceptReport/charts/VisitDurationByType/VisitDurationByType.vue b/src/pages/reports/release/ConceptReport/charts/VisitDurationByType/VisitDurationByType.vue index 1033d35b..45a0cc94 100644 --- a/src/pages/reports/release/ConceptReport/charts/VisitDurationByType/VisitDurationByType.vue +++ b/src/pages/reports/release/ConceptReport/charts/VisitDurationByType/VisitDurationByType.vue @@ -1,5 +1,5 @@ @@ -104,7 +97,6 @@ import { specAgeAtDeath } from "./specAgeAtDeath"; import { links } from "@/shared/config/links"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -112,16 +104,16 @@ import Panel from "primevue/panel"; import { mdiCodeBraces } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DEATH.AGE_AT_DEATH[0] +); const data = computed(() => { return store.getters.getData.AGE_AT_DEATH; diff --git a/src/pages/reports/release/DeathReport/charts/DeathByType/DeathByType.vue b/src/pages/reports/release/DeathReport/charts/DeathByType/DeathByType.vue index df693d33..86e27922 100644 --- a/src/pages/reports/release/DeathReport/charts/DeathByType/DeathByType.vue +++ b/src/pages/reports/release/DeathReport/charts/DeathByType/DeathByType.vue @@ -41,14 +41,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex[route.name.toUpperCase()] - .DEATH_BY_TYPE[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -60,7 +53,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specDeathByType } from "./specDeathByType"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -68,16 +60,16 @@ import Panel from "primevue/panel"; import { mdiCodeBraces } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DEATH.DEATH_BY_TYPE[0] +); const data = computed(() => { return store.getters.getData.DEATH_BY_TYPE; diff --git a/src/pages/reports/release/DeathReport/charts/RecordCountProportionByAgeSexYear/RecordCountProportionByAgeSexYear.vue b/src/pages/reports/release/DeathReport/charts/RecordCountProportionByAgeSexYear/RecordCountProportionByAgeSexYear.vue index 05e16cd8..edea00d5 100644 --- a/src/pages/reports/release/DeathReport/charts/RecordCountProportionByAgeSexYear/RecordCountProportionByAgeSexYear.vue +++ b/src/pages/reports/release/DeathReport/charts/RecordCountProportionByAgeSexYear/RecordCountProportionByAgeSexYear.vue @@ -38,14 +38,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex[route.name.toUpperCase()] - .PREVALENCE_BY_GENDER_AGE_YEAR[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -57,7 +50,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { specRecordProportionByAgeSexYear } from "./specRecordProportionByAgeSexYear"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -65,16 +57,16 @@ import Panel from "primevue/panel"; import { mdiCodeBraces } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DEATH.PREVALENCE_BY_GENDER_AGE_YEAR[0] +); const data = computed(() => { return store.getters.getData.PREVALENCE_BY_GENDER_AGE_YEAR; diff --git a/src/pages/reports/release/DeathReport/charts/RecordCountProportionByMonth/RecordCountProportionByMonth.vue b/src/pages/reports/release/DeathReport/charts/RecordCountProportionByMonth/RecordCountProportionByMonth.vue index 52058fc0..521d337f 100644 --- a/src/pages/reports/release/DeathReport/charts/RecordCountProportionByMonth/RecordCountProportionByMonth.vue +++ b/src/pages/reports/release/DeathReport/charts/RecordCountProportionByMonth/RecordCountProportionByMonth.vue @@ -59,14 +59,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex[route.name.toUpperCase()] - .PREVALENCE_BY_MONTH[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -77,13 +70,11 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { specRecordProportionByMonth } from "./specRecordProportionByMonth"; import * as listeners from "@/pages/model/lib/listeners"; import { specRecordProportionByMonthAnnotation } from "./specRecordProportionByMonthAnnotation"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; -import _ from "lodash"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -92,23 +83,26 @@ import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); const reportId = "viz-deathrecordproportionbymonth"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DEATH.PREVALENCE_BY_MONTH[0] +); const data = computed(() => { return store.getters.getData.PREVALENCE_BY_MONTH; diff --git a/src/pages/reports/release/DomainDensity/charts/DomainDensity/DomainDensity.vue b/src/pages/reports/release/DomainDensity/charts/DomainDensity/DomainDensity.vue index 442dafeb..340735b6 100644 --- a/src/pages/reports/release/DomainDensity/charts/DomainDensity/DomainDensity.vue +++ b/src/pages/reports/release/DomainDensity/charts/DomainDensity/DomainDensity.vue @@ -64,14 +64,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.DATA_DENSITY - .DATADENSITY_RECORDS_PER_PERSON[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -86,7 +79,7 @@ import { useStore } from "vuex"; import { defOverview } from "./defOverview"; import { defOverviewAnnotation } from "./defOverviewAnnotation"; import * as listeners from "@/pages/model/lib/listeners"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; @@ -96,22 +89,26 @@ import { mdiCodeBraces } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const reportId = "viz-densityOverview"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DATA_DENSITY.DATADENSITY_RECORDS_PER_PERSON[0] +); const data = computed(() => { return store.getters.getData.domainDensity; diff --git a/src/pages/reports/release/DomainDensity/charts/DomainRecordsPerPerson/DomainRecordsPerPerson.vue b/src/pages/reports/release/DomainDensity/charts/DomainRecordsPerPerson/DomainRecordsPerPerson.vue index 8062d0be..c8eb0b72 100644 --- a/src/pages/reports/release/DomainDensity/charts/DomainRecordsPerPerson/DomainRecordsPerPerson.vue +++ b/src/pages/reports/release/DomainDensity/charts/DomainRecordsPerPerson/DomainRecordsPerPerson.vue @@ -62,13 +62,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.DATA_DENSITY.DATADENSITY_TOTAL[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -81,7 +75,7 @@ import { links } from "@/shared/config/links"; import { useStore } from "vuex"; import { defRecordsPerPerson } from "./defRecordsPerPerson"; import { defRecordsPerPersonAnnotation } from "./defRecordsPerPersonAnnotation"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import * as listeners from "@/pages/model/lib/listeners"; @@ -92,22 +86,26 @@ import { mdiCodeBraces } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const reportId = "viz-recordsperperson"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DATA_DENSITY.DATADENSITY_TOTAL[0] +); const data = computed(() => { return store.getters.getData.domainRecords; diff --git a/src/pages/reports/release/DomainTable/components/DataStratificationByDrug/DataStratificationByDrug.vue b/src/pages/reports/release/DomainTable/components/DataStratificationByDrug/DataStratificationByDrug.vue index 0413eef3..7e340478 100644 --- a/src/pages/reports/release/DomainTable/components/DataStratificationByDrug/DataStratificationByDrug.vue +++ b/src/pages/reports/release/DomainTable/components/DataStratificationByDrug/DataStratificationByDrug.vue @@ -41,14 +41,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.DOMAIN_SUMMARY - .DOMAIN_DRUG_STRATIFICATION - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -68,16 +61,17 @@ import { mdiCodeBraces } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const route = useRoute(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DOMAIN_SUMMARY.DOMAIN_DRUG_STRATIFICATION +); const data = computed(() => { return store.getters.getData.drugStratification; diff --git a/src/pages/reports/release/DomainTable/components/DataStratificationByVisit/DataStratificationByVisit.vue b/src/pages/reports/release/DomainTable/components/DataStratificationByVisit/DataStratificationByVisit.vue index efbce865..ea494019 100644 --- a/src/pages/reports/release/DomainTable/components/DataStratificationByVisit/DataStratificationByVisit.vue +++ b/src/pages/reports/release/DomainTable/components/DataStratificationByVisit/DataStratificationByVisit.vue @@ -51,16 +51,13 @@ import { mdiHelpCircle } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const route = useRoute(); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return store.getters.getData.domainStratification; diff --git a/src/pages/reports/release/DomainTable/components/MainTable.vue b/src/pages/reports/release/DomainTable/components/MainTable.vue index f6b036e7..bff06ea5 100644 --- a/src/pages/reports/release/DomainTable/components/MainTable.vue +++ b/src/pages/reports/release/DomainTable/components/MainTable.vue @@ -278,15 +278,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.DOMAIN_SUMMARY[ - route.params.domain.toUpperCase() - ] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -465,6 +457,10 @@ const domainIssue = computed(function (): DomainIssues | [] { } }); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DOMAIN_SUMMARY[route.params.domain.toUpperCase()] +); + const issueCount = computed(function (): number { return domainIssue.value?.count_failed || 0; }); diff --git a/src/pages/reports/release/MetadataReport/tables/Metadata.vue b/src/pages/reports/release/MetadataReport/tables/Metadata.vue index 89a188e3..83ed580e 100644 --- a/src/pages/reports/release/MetadataReport/tables/Metadata.vue +++ b/src/pages/reports/release/MetadataReport/tables/Metadata.vue @@ -31,11 +31,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink(store.getters.getQueryIndex.METADATA[0]) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -53,6 +49,7 @@ import Column from "primevue/column"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; const store = useStore(); +const sqlLink = links.getSqlQueryLink(store.getters.getQueryIndex.METADATA[0]); diff --git a/src/pages/reports/release/MetadataReport/tables/SourceDetails.vue b/src/pages/reports/release/MetadataReport/tables/SourceDetails.vue index 8d510d1f..57a3e33f 100644 --- a/src/pages/reports/release/MetadataReport/tables/SourceDetails.vue +++ b/src/pages/reports/release/MetadataReport/tables/SourceDetails.vue @@ -23,11 +23,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink(store.getters.getQueryIndex.CDM_SOURCE[0]) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -43,6 +39,10 @@ import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; const store = useStore(); + +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.CDM_SOURCE[0] +); diff --git a/src/pages/reports/release/ObservationPeriodReport/charts/AgeAtFirstObservation/AgeAtFirstObservation.vue b/src/pages/reports/release/ObservationPeriodReport/charts/AgeAtFirstObservation/AgeAtFirstObservation.vue index 58081065..8c32a97b 100644 --- a/src/pages/reports/release/ObservationPeriodReport/charts/AgeAtFirstObservation/AgeAtFirstObservation.vue +++ b/src/pages/reports/release/ObservationPeriodReport/charts/AgeAtFirstObservation/AgeAtFirstObservation.vue @@ -77,14 +77,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD - .AGE_AT_FIRST_OBSERVATION[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -97,7 +90,7 @@ import { links } from "@/shared/config/links"; import { specAgeAtFirstObservation } from "./specAgeAtFirstObservation"; import { specAgeAtFirstObservationAnnotation } from "./specAgeAtFirstObservationAnnotation"; import { useStore } from "vuex"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; @@ -105,7 +98,7 @@ import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import Panel from "primevue/panel"; import { mdiCodeBraces } from "@mdi/js"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; @@ -113,16 +106,20 @@ const store = useStore(); const reportId = "viz-ageatfirstobservation"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD.AGE_AT_FIRST_OBSERVATION[0] +); -const { annotations, notes } = useAnnotations(reportId); - -const showTable = ref(false); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const { annotations, notes } = useAnnotations(reportId); const data = computed(() => { return store.getters.getData.observationPeriodData.AGE_AT_FIRST_OBSERVATION; diff --git a/src/pages/reports/release/ObservationPeriodReport/charts/AgeAtFirstObservationBySex/AgeAtFirstObservationBySex.vue b/src/pages/reports/release/ObservationPeriodReport/charts/AgeAtFirstObservationBySex/AgeAtFirstObservationBySex.vue index ca5382ef..a767fe94 100644 --- a/src/pages/reports/release/ObservationPeriodReport/charts/AgeAtFirstObservationBySex/AgeAtFirstObservationBySex.vue +++ b/src/pages/reports/release/ObservationPeriodReport/charts/AgeAtFirstObservationBySex/AgeAtFirstObservationBySex.vue @@ -80,13 +80,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD.AGE_BY_GENDER[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -106,15 +100,16 @@ import { mdiCodeBraces } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD.AGE_BY_GENDER[0] +); const data = computed(() => { return store.getters.getData.observationPeriodData.AGE_BY_GENDER; diff --git a/src/pages/reports/release/ObservationPeriodReport/charts/CumulativeObservation/CumulativeObservation.vue b/src/pages/reports/release/ObservationPeriodReport/charts/CumulativeObservation/CumulativeObservation.vue index b3f5551a..2ebc6bc5 100644 --- a/src/pages/reports/release/ObservationPeriodReport/charts/CumulativeObservation/CumulativeObservation.vue +++ b/src/pages/reports/release/ObservationPeriodReport/charts/CumulativeObservation/CumulativeObservation.vue @@ -62,14 +62,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD - .CUMULATIVE_DURATION[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -83,7 +76,7 @@ import { links } from "@/shared/config/links"; import { specCumulativeObservation } from "./specCumulativeObservation"; import { specCumulativeObservationAnnotation } from "./specCumulativeObservationAnnotation"; import { useStore } from "vuex"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; @@ -91,7 +84,7 @@ import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import Panel from "primevue/panel"; import { mdiCodeBraces } from "@mdi/js"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; @@ -99,16 +92,20 @@ const store = useStore(); const reportId = "viz-cumulativeobservation"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD.CUMULATIVE_DURATION[0] +); const data = computed(() => { return store.getters.getData.observationPeriodData.CUMULATIVE_DURATION; diff --git a/src/pages/reports/release/ObservationPeriodReport/charts/ObservationOverTime/ObservationOverTime.vue b/src/pages/reports/release/ObservationPeriodReport/charts/ObservationOverTime/ObservationOverTime.vue index 36949169..3354076f 100644 --- a/src/pages/reports/release/ObservationPeriodReport/charts/ObservationOverTime/ObservationOverTime.vue +++ b/src/pages/reports/release/ObservationPeriodReport/charts/ObservationOverTime/ObservationOverTime.vue @@ -90,14 +90,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD - .OBSERVED_BY_MONTH[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -112,7 +105,7 @@ import { specObservationByMonth } from "./specObservationByMonth"; import { specObservationByMonthAnnotation } from "./specObservationByMonthAnnotation"; import { useStore } from "vuex"; import * as listeners from "@/pages/model/lib/listeners"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; @@ -122,22 +115,26 @@ import { mdiCodeBraces } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const reportId = "viz-observationbymonth"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD.OBSERVED_BY_MONTH[0] +); const data = computed(() => { return store.getters.getData.observationPeriodData.OBSERVED_BY_MONTH; diff --git a/src/pages/reports/release/ObservationPeriodReport/charts/ObservationPeriodPerPerson/ObservationPeriodsPerPerson.vue b/src/pages/reports/release/ObservationPeriodReport/charts/ObservationPeriodPerPerson/ObservationPeriodsPerPerson.vue index 835db254..07abe42b 100644 --- a/src/pages/reports/release/ObservationPeriodReport/charts/ObservationPeriodPerPerson/ObservationPeriodsPerPerson.vue +++ b/src/pages/reports/release/ObservationPeriodReport/charts/ObservationPeriodPerPerson/ObservationPeriodsPerPerson.vue @@ -33,14 +33,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD - .PERSON_PERIODS_DATA[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -58,6 +51,10 @@ import Panel from "primevue/panel"; import { mdiCodeBraces } from "@mdi/js"; const store = useStore(); + +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD.PERSON_PERIODS_DATA[0] +); diff --git a/src/pages/reports/release/ObservationPeriodReport/charts/YearsOfObservationByAge/YearsOfObservationByAge.vue b/src/pages/reports/release/ObservationPeriodReport/charts/YearsOfObservationByAge/YearsOfObservationByAge.vue index 4d611f07..88a451fc 100644 --- a/src/pages/reports/release/ObservationPeriodReport/charts/YearsOfObservationByAge/YearsOfObservationByAge.vue +++ b/src/pages/reports/release/ObservationPeriodReport/charts/YearsOfObservationByAge/YearsOfObservationByAge.vue @@ -84,14 +84,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD - .OBSERVATION_PERIOD_LENGTH_BY_AGE[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -111,15 +104,17 @@ import { mdiCodeBraces } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD + .OBSERVATION_PERIOD_LENGTH_BY_AGE[0] +); const data = computed(() => { return store.getters.getData.observationPeriodData diff --git a/src/pages/reports/release/ObservationPeriodReport/charts/YearsOfObservationBySex/YearsOfObservationBySex.vue b/src/pages/reports/release/ObservationPeriodReport/charts/YearsOfObservationBySex/YearsOfObservationBySex.vue index 95f91bc5..285c968f 100644 --- a/src/pages/reports/release/ObservationPeriodReport/charts/YearsOfObservationBySex/YearsOfObservationBySex.vue +++ b/src/pages/reports/release/ObservationPeriodReport/charts/YearsOfObservationBySex/YearsOfObservationBySex.vue @@ -84,14 +84,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.OBSERVATION_PERIOD - .OBSERVATION_PERIOD_LENGTH_BY_GENDER[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -109,17 +102,19 @@ import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import Panel from "primevue/panel"; import { mdiCodeBraces } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.OBSERVATION_PERIOD + .OBSERVATION_PERIOD_LENGTH_BY_GENDER[0] +); const data = computed(() => { return store.getters.getData.observationPeriodData diff --git a/src/pages/reports/release/PerformanceReport/components/AchillesPerformance.vue b/src/pages/reports/release/PerformanceReport/components/AchillesPerformance.vue index 55d0965b..d7e78755 100644 --- a/src/pages/reports/release/PerformanceReport/components/AchillesPerformance.vue +++ b/src/pages/reports/release/PerformanceReport/components/AchillesPerformance.vue @@ -32,11 +32,7 @@ @@ -67,13 +63,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.ACHILLES_PERFORMANCE[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlPerformanceLink)" /> @@ -97,6 +87,13 @@ import { mdiCodeBraces, mdiHelpCircle, mdiOpenInNew } from "@mdi/js"; const store = useStore(); +const sqlAnalysisLink = (analysisId: number) => + links.getSqlQueryLink(`analyses/${analysisId}.sql`); + +const sqlPerformanceLink = links.getSqlQueryLink( + store.getters.getQueryIndex.ACHILLES_PERFORMANCE[0] +); + const filters = ref({}); const newFilters = ref({ global: { value: null, matchMode: FilterMatchMode.CONTAINS }, diff --git a/src/pages/reports/release/PersonReport/charts/PopulationByAgeSex/PopulationByAgeSex.vue b/src/pages/reports/release/PersonReport/charts/PopulationByAgeSex/PopulationByAgeSex.vue index 1b7d29aa..51544475 100644 --- a/src/pages/reports/release/PersonReport/charts/PopulationByAgeSex/PopulationByAgeSex.vue +++ b/src/pages/reports/release/PersonReport/charts/PopulationByAgeSex/PopulationByAgeSex.vue @@ -87,13 +87,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.PERSON.AGE_GENDER_DATA - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -105,7 +99,7 @@ import { Chart } from "@/widgets/chart"; import { specAgeSex } from "./specAgeSex"; import { links } from "@/shared/config/links"; import { useStore } from "vuex"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; @@ -116,21 +110,25 @@ import DataTable from "primevue/datatable"; import Column from "primevue/column"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; - -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.PERSON.AGE_GENDER_DATA +); + const femaleReportId = "viz-populationbyageandsexFemale"; const maleReportId = "viz-populationbyageandsexMale"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const notesMale = useAnnotations(maleReportId); diff --git a/src/pages/reports/release/PersonReport/charts/PopulationByEthnicity/PopulationByEthnicity.vue b/src/pages/reports/release/PersonReport/charts/PopulationByEthnicity/PopulationByEthnicity.vue index 8e880459..7809d035 100644 --- a/src/pages/reports/release/PersonReport/charts/PopulationByEthnicity/PopulationByEthnicity.vue +++ b/src/pages/reports/release/PersonReport/charts/PopulationByEthnicity/PopulationByEthnicity.vue @@ -46,13 +46,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.PERSON.ETHNICITY_DATA - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -71,15 +65,16 @@ import { mdiCodeBraces } from "@mdi/js"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.PERSON.ETHNICITY_DATA +); const data = computed(() => { return store.getters.getData.personData.ETHNICITY_DATA; diff --git a/src/pages/reports/release/PersonReport/charts/PopulationByRace/PopulationByRace.vue b/src/pages/reports/release/PersonReport/charts/PopulationByRace/PopulationByRace.vue index 9b57484e..7424bc98 100644 --- a/src/pages/reports/release/PersonReport/charts/PopulationByRace/PopulationByRace.vue +++ b/src/pages/reports/release/PersonReport/charts/PopulationByRace/PopulationByRace.vue @@ -41,13 +41,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.PERSON.RACE_DATA - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -67,15 +61,16 @@ import { mdiCodeBraces } from "@mdi/js"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; -import { computed, ref } from "vue"; +import { computed } from "vue"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const showTable = ref(false); +const { showTable, toggleTable } = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.PERSON.RACE_DATA +); const data = computed(() => { return store.getters.getData.personData.RACE_DATA; diff --git a/src/pages/reports/release/PersonReport/charts/PopulationByYearBirth/PopulationByYearBirth.vue b/src/pages/reports/release/PersonReport/charts/PopulationByYearBirth/PopulationByYearBirth.vue index 29ad2d26..e643e8a5 100644 --- a/src/pages/reports/release/PersonReport/charts/PopulationByYearBirth/PopulationByYearBirth.vue +++ b/src/pages/reports/release/PersonReport/charts/PopulationByYearBirth/PopulationByYearBirth.vue @@ -61,13 +61,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.PERSON.BIRTH_YEAR_DATA - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -91,21 +85,26 @@ import { mdiCodeBraces } from "@mdi/js"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const reportId = "viz-birthyearnote"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.PERSON.BIRTH_YEAR_DATA +); -const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); -function toggleTable(mode) { - showTable.value = mode; -} +const { annotations, notes } = useAnnotations(reportId); const data = computed(() => { return store.getters.getData.personData.BIRTH_YEAR_DATA; diff --git a/src/pages/reports/release/TemporalCharacterizationReport/TemporalCharacterization.vue b/src/pages/reports/release/TemporalCharacterizationReport/TemporalCharacterization.vue index f4cca2f1..fed047ee 100644 --- a/src/pages/reports/release/TemporalCharacterizationReport/TemporalCharacterization.vue +++ b/src/pages/reports/release/TemporalCharacterizationReport/TemporalCharacterization.vue @@ -68,13 +68,7 @@ " :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.TEMPORAL_CHARACTERIZATION[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -97,6 +91,10 @@ import { FilterMatchMode } from "primevue/api"; import { mdiCodeBraces } from "@mdi/js"; const store = useStore(); + +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.TEMPORAL_CHARACTERIZATION[0] +); const newFilters = ref({ global: { value: null, matchMode: FilterMatchMode.CONTAINS }, }); diff --git a/src/pages/reports/release/UnmappedSourceCodesReport/UnmappedSourceCodes.vue b/src/pages/reports/release/UnmappedSourceCodesReport/UnmappedSourceCodes.vue index 22f23b76..a46670d5 100644 --- a/src/pages/reports/release/UnmappedSourceCodesReport/UnmappedSourceCodes.vue +++ b/src/pages/reports/release/UnmappedSourceCodesReport/UnmappedSourceCodes.vue @@ -62,13 +62,7 @@ tooltip="This report identifies columns in tables within the CDM where values are mapped to 0 (unknown concept). It provides a listing of all unmapped source values to be reviewed for potential inclusion or remediation." - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.TEMPORAL_CHARACTERIZATION[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -108,6 +102,12 @@ import Pivot from "@/widgets/pivot/ui/Pivot.vue"; const store = useStore(); +const sqlLink = computed(() => { + return links.getSqlQueryLink( + store.getters.getQueryIndex.TEMPORAL_CHARACTERIZATION[0] + ); +}); + const filters = ref({}); const newFilters = ref({ global: { value: null, matchMode: FilterMatchMode.CONTAINS }, diff --git a/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQuality/HistoricalDataQuality.vue b/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQuality/HistoricalDataQuality.vue index ba9dab38..8aa25c53 100644 --- a/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQuality/HistoricalDataQuality.vue +++ b/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQuality/HistoricalDataQuality.vue @@ -123,23 +123,23 @@ import Panel from "primevue/panel"; import DataTable from "primevue/datatable"; import Column from "primevue/column"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const route = useRoute(); const reportId = "viz-dataqualityresults"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} - const data = computed(() => { return store.getters.getData[QUALITY_INDEX].dataQualityRecords; }); diff --git a/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByCategory/HistoricalDataQualityByCategory.vue b/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByCategory/HistoricalDataQualityByCategory.vue index 320d2ef3..f6927398 100644 --- a/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByCategory/HistoricalDataQualityByCategory.vue +++ b/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByCategory/HistoricalDataQualityByCategory.vue @@ -93,7 +93,7 @@ import Column from "primevue/column"; import DataTable from "primevue/datatable"; import { helpers } from "@/shared/lib/mixins"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; import { useRoute } from "vue-router"; const store = useStore(); @@ -102,17 +102,17 @@ const route = useRoute(); const reportId = "viz-sourcedataqualityresultsbycategory"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} - const data = computed(() => { return store.getters.getData[QUALITY_INDEX].dataQualityRecordsStratified; }); diff --git a/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByDomain/HistoricalDataQualityByDomain.vue b/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByDomain/HistoricalDataQualityByDomain.vue index 49c8b93c..bbde01d4 100644 --- a/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByDomain/HistoricalDataQualityByDomain.vue +++ b/src/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByDomain/HistoricalDataQualityByDomain.vue @@ -90,7 +90,7 @@ import { helpers } from "@/shared/lib/mixins"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; import { useRoute } from "vue-router"; const store = useStore(); @@ -98,17 +98,17 @@ const route = useRoute(); const reportId = "viz-sourcedataqualityresultsbydomain"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} - const data = computed(() => { return store.getters.getData[QUALITY_INDEX].dataQualityRecordsStratified; }); diff --git a/src/pages/reports/source/DomainContinuity/charts/domainRecords/DomainRecords.vue b/src/pages/reports/source/DomainContinuity/charts/domainRecords/DomainRecords.vue index c678c218..cbdd23bf 100644 --- a/src/pages/reports/source/DomainContinuity/charts/domainRecords/DomainRecords.vue +++ b/src/pages/reports/source/DomainContinuity/charts/domainRecords/DomainRecords.vue @@ -50,13 +50,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex.DOMAIN_SUMMARY.RECORDS_BY_DOMAIN[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -74,14 +68,18 @@ import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import Panel from "primevue/panel"; import { mdiCodeBraces, mdiHelpCircle } from "@mdi/js"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; -import { computed, ref } from "vue"; -import { QUALITY_INDEX } from "@/shared/config/files"; +import { computed } from "vue"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const router = useRouter(); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.DOMAIN_SUMMARY.RECORDS_BY_DOMAIN[0] +); + const navigate = function (route) { router.push(route); // hide tooltip otherwise it persists on navigation @@ -106,11 +104,7 @@ const eventListener = function (result, route: RouteLocation) { }); }; -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const { showTable, toggleTable } = useChartControls(); const data = computed(() => { return store.getters.getData.domainRecords; diff --git a/src/pages/reports/source/SourceConceptReport/charts/recordProportionByMonth/RecordProportionByMonth.vue b/src/pages/reports/source/SourceConceptReport/charts/recordProportionByMonth/RecordProportionByMonth.vue index 3f5be102..72129676 100644 --- a/src/pages/reports/source/SourceConceptReport/charts/recordProportionByMonth/RecordProportionByMonth.vue +++ b/src/pages/reports/source/SourceConceptReport/charts/recordProportionByMonth/RecordProportionByMonth.vue @@ -30,14 +30,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink( - store.getters.getQueryIndex[route.params.domain.toUpperCase()] - .PREVALENCE_BY_MONTH[0] - ) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -48,7 +41,6 @@ import { Chart } from "@/widgets/chart"; import { links } from "@/shared/config/links"; import { useStore } from "vuex"; -import { useRoute } from "vue-router"; import { specRecordProportionByMonth } from "./specRecordProportionByMonth"; import { specRecordProportionByMonthAnnotation } from "./specRecordProportionByMonthAnnotation"; import * as listeners from "@/pages/model/lib/listeners"; @@ -59,15 +51,18 @@ import ChartActionIcon from "@/entities/toggleIcon/ToggleIcon.vue"; import { mdiCodeBraces } from "@mdi/js"; import Panel from "primevue/panel"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); -const route = useRoute(); const reportId = "viz-sourcerecordproportionbymonth"; +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.PREVALENCE_BY_MONTH[0] +); + const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); + useChartControls(); const { annotations, notes } = useAnnotations(reportId); diff --git a/src/pages/reports/source/SourceOverview/charts/dataQualityIssuesHistory/DataQualityIssuesHistory.vue b/src/pages/reports/source/SourceOverview/charts/dataQualityIssuesHistory/DataQualityIssuesHistory.vue index 064aa842..a49132e4 100644 --- a/src/pages/reports/source/SourceOverview/charts/dataQualityIssuesHistory/DataQualityIssuesHistory.vue +++ b/src/pages/reports/source/SourceOverview/charts/dataQualityIssuesHistory/DataQualityIssuesHistory.vue @@ -62,11 +62,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink(store.getters.getQueryIndex.CDM_SOURCE[0]) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -79,7 +75,7 @@ import { links } from "@/shared/config/links"; import { useStore } from "vuex"; import { specIssuesByRelease } from "./specIssuesByRelease"; import { specIssuesByReleaseAnnotation } from "./specIssuesByReleaseAnnotation"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; import { helpers } from "@/shared/lib/mixins"; @@ -89,22 +85,26 @@ import { mdiCodeBraces } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const reportId = "issues_releases"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.CDM_SOURCE[0] +); const data = computed(() => { return store.getters.getSelectedSource.releases; diff --git a/src/pages/reports/source/SourceOverview/charts/populationHistory/PopulationHistory.vue b/src/pages/reports/source/SourceOverview/charts/populationHistory/PopulationHistory.vue index 84def9da..c000f6c3 100644 --- a/src/pages/reports/source/SourceOverview/charts/populationHistory/PopulationHistory.vue +++ b/src/pages/reports/source/SourceOverview/charts/populationHistory/PopulationHistory.vue @@ -60,11 +60,7 @@ v-if="store.getters.getQueryIndex" :icon="mdiCodeBraces" tooltip="View Export Query" - @iconClicked=" - helpers.openNewTab( - links.getSqlQueryLink(store.getters.getQueryIndex.CDM_SOURCE[0]) - ) - " + @iconClicked="helpers.openNewTab(sqlLink)" /> @@ -77,7 +73,7 @@ import { links } from "@/shared/config/links"; import { useStore } from "vuex"; import { specPopulationByRelease } from "./specPopulationByRelease"; import { specPopulationByReleaseAnnotation } from "./specPopulationByReleaseAnnotation"; -import { computed, ref } from "vue"; +import { computed } from "vue"; import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue"; import Panel from "primevue/panel"; import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue"; @@ -87,29 +83,33 @@ import { mdiCodeBraces } from "@mdi/js"; import Column from "primevue/column"; import DataTable from "primevue/datatable"; import useAnnotations from "@/shared/lib/composables/useAnnotations"; -import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls"; +import useChartControls from "@/shared/lib/composables/useChartControls"; const store = useStore(); const reportId = "population_releases"; -const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } = - useAnnotationControls(); +const { + notesMode, + annotationsMode, + toggleNotesMode, + toggleAnnotationsMode, + showTable, + toggleTable, +} = useChartControls(); const { annotations, notes } = useAnnotations(reportId); +const sqlLink = links.getSqlQueryLink( + store.getters.getQueryIndex.CDM_SOURCE[0] +); + const releases = computed(() => { return store.getters.getSelectedSource.releases.map((value) => ({ ...value, dateU: new Date(value.dqd_execution_date), })); }); - -const showTable = ref(false); - -function toggleTable(mode) { - showTable.value = mode; -} diff --git a/src/shared/config/links.ts b/src/shared/config/links.ts index 8624f6e3..e64f7a3d 100644 --- a/src/shared/config/links.ts +++ b/src/shared/config/links.ts @@ -1,5 +1,7 @@ const getSqlQueryLink = function (val: string): string { - return `https://github.com/OHDSI/Achilles/tree/main/inst/sql/sql_server/${val}`; + return val + ? `https://github.com/OHDSI/Achilles/tree/main/inst/sql/sql_server/${val}` + : undefined; }; const getAchillesLink = function (): string { return "https://github.com/ohdsi/achilles"; diff --git a/src/shared/lib/composables/useAnnotationControls.ts b/src/shared/lib/composables/useChartControls.ts similarity index 67% rename from src/shared/lib/composables/useAnnotationControls.ts rename to src/shared/lib/composables/useChartControls.ts index b5f4fc60..45648e15 100644 --- a/src/shared/lib/composables/useAnnotationControls.ts +++ b/src/shared/lib/composables/useChartControls.ts @@ -3,13 +3,20 @@ import { Ref, ref } from "vue"; interface AnnotationControlsComposable { annotationsMode: Ref; notesMode: Ref; + showTable: Ref; + toggleTable: (arg: boolean) => void; toggleAnnotationsMode: (arg: boolean) => void; toggleNotesMode: (arg: boolean) => void; } -export default function useAnnotationControls(): AnnotationControlsComposable { +export default function useChartControls(): AnnotationControlsComposable { const annotationsMode = ref(false); const notesMode = ref(false); + const showTable = ref(false); + + function toggleTable(mode) { + showTable.value = mode; + } function toggleAnnotationsMode(mode: boolean) { annotationsMode.value = mode; } @@ -20,7 +27,9 @@ export default function useAnnotationControls(): AnnotationControlsComposable { return { annotationsMode, notesMode, + showTable, toggleAnnotationsMode, toggleNotesMode, + toggleTable, }; } diff --git a/src/widgets/chart/model/themes.ts b/src/widgets/chart/lib/themes.ts similarity index 100% rename from src/widgets/chart/model/themes.ts rename to src/widgets/chart/lib/themes.ts diff --git a/src/widgets/chart/ui/Chart.vue b/src/widgets/chart/ui/Chart.vue index afded6bc..8fdf1044 100755 --- a/src/widgets/chart/ui/Chart.vue +++ b/src/widgets/chart/ui/Chart.vue @@ -1,17 +1,15 @@ - - diff --git a/src/widgets/conceptSearchForm/composables/index.ts b/src/widgets/conceptSearchForm/composables/index.ts new file mode 100644 index 00000000..83ec2de4 --- /dev/null +++ b/src/widgets/conceptSearchForm/composables/index.ts @@ -0,0 +1,43 @@ +import { Ref, ref } from "vue"; +import { webApiActions } from "@/shared/api/webAPI"; +import { useStore } from "vuex"; + +interface useConceptSearchForm { + showWebApiSearchForm: Ref; + errors: Ref; + successMessage: Ref; + renderForm: () => void; + closeForm: () => void; + clearMessages: () => void; +} + +export default function useConceptSearchForm(): useConceptSearchForm { + const store = useStore(); + const successMessage: Ref = ref([]); + const errors: Ref = ref(""); + const showWebApiSearchForm = ref(false); + + function renderForm() { + showWebApiSearchForm.value = true; + } + // + const clearMessages = function () { + errors.value = ""; + successMessage.value = []; + }; + // + const closeForm = function () { + showWebApiSearchForm.value = false; + store.dispatch(webApiActions.RESET_API_STORAGE); + successMessage.value = []; + }; + + return { + showWebApiSearchForm, + errors, + successMessage, + renderForm, + closeForm, + clearMessages, + }; +} diff --git a/src/widgets/conceptSearchForm/index.ts b/src/widgets/conceptSearchForm/index.ts index 0de4d02c..a2643faf 100644 --- a/src/widgets/conceptSearchForm/index.ts +++ b/src/widgets/conceptSearchForm/index.ts @@ -1,3 +1,4 @@ -import ConceptSearchForm from "@/widgets/conceptSearchForm/ui/ConceptSearchForm.vue"; +import ConceptSearchForm from "./ui/ConceptSearchForm.vue"; +import useConceptSearchForm from "./composables"; -export { ConceptSearchForm }; +export { ConceptSearchForm, useConceptSearchForm }; diff --git a/src/widgets/conceptSearchForm/ui/ConceptSearchForm.vue b/src/widgets/conceptSearchForm/ui/ConceptSearchForm.vue index b558be18..2ae4cc96 100644 --- a/src/widgets/conceptSearchForm/ui/ConceptSearchForm.vue +++ b/src/widgets/conceptSearchForm/ui/ConceptSearchForm.vue @@ -221,6 +221,7 @@ import getDuckDBTables from "@/shared/api/duckdb/conceptTables"; import webApiKeyMap from "@/shared/config/webApiKeyMap"; import { CONCEPT } from "@/shared/config/files"; import { mdiAlertCircleOutline } from "@mdi/js"; +import { useRouter } from "vue-router"; interface Props { addedConcepts: object; @@ -253,6 +254,7 @@ const loadedConcepts = ref({}); const form: Ref = ref(null); const props = defineProps(); const store = useStore(); +const router = useRouter(); const emit = defineEmits([ "inputChanged", "save", @@ -348,17 +350,7 @@ const searchApi = function () { } }); }; -const saveChanges = async (item) => { - if (props.addedConcepts[item.CONCEPT_ID] === "Loaded") { - errors.value = "This concept has already been loaded"; - return; - } - - loadingItem.value = item.CONCEPT_ID; - - const domain = webApiKeyMap.domains[item.DOMAIN_ID]; - const conceptId = item.CONCEPT_ID; - +const loadConcept = async (domain, conceptId) => { const files = environment.DUCKDB_ENABLED === "true" ? getDuckDBTables({ domain, concept: conceptId })[domain] @@ -375,9 +367,9 @@ const saveChanges = async (item) => { duckdb_supported: true, skipLoading: true, }); +}; - loadingItem.value = ""; - +const handleConceptData = (conceptId) => { const conceptData = toRaw(store.getters.getData.concept) || {}; if (!Object.keys(conceptData).length) { @@ -393,6 +385,34 @@ const saveChanges = async (item) => { successMessage.value = ["Concept loaded"]; } }; + +const navigateToNetworkConcept = function (domain, conceptId) { + router.push({ + params: { + domain, + concept: conceptId, + }, + }); +}; + +const saveChanges = async (item) => { + if (props.addedConcepts[item.CONCEPT_ID] === "Loaded") { + errors.value = "This concept has already been loaded"; + return; + } + + loadingItem.value = item.CONCEPT_ID; + + const domain = webApiKeyMap.domains[item.DOMAIN_ID]; + const conceptId = item.CONCEPT_ID; + navigateToNetworkConcept(domain, conceptId); + + await loadConcept(domain, conceptId); + + loadingItem.value = ""; + + handleConceptData(conceptId); +};