From e0b11e7c73c263ece36ea67c39ffd3b83822a5d7 Mon Sep 17 00:00:00 2001
From: Mikhail-iontsev <mikhail_iontsev@icloud.com>
Date: Thu, 8 Aug 2024 22:31:30 +0700
Subject: [PATCH 1/2] feat: added data quality delta

---
 .../components/DataSourcesList.vue            | 54 ++++++++++-
 .../components/ResultsTable.vue               | 60 +++++++++++-
 .../DataQualityHistory/DataQualityHistory.vue |  2 +
 .../DataQualityDelta/DataQualityDelta.vue     | 82 ++++++++++++++++
 .../DataQualityDelta/specDataQualityDelta.ts  | 94 +++++++++++++++++++
 .../exploreReports/config/dataLoadConfig.ts   |  6 +-
 .../model/store/preprocessing/index.ts        |  2 +
 src/shared/api/axios/files.ts                 |  3 +-
 src/shared/config/files.ts                    |  1 +
 .../lib/mixins/methods/getValuesArray.ts      |  1 +
 10 files changed, 299 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue
 create mode 100644 src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/specDataQualityDelta.ts

diff --git a/src/pages/reports/network/NetworkOverview/components/DataSourcesList.vue b/src/pages/reports/network/NetworkOverview/components/DataSourcesList.vue
index 86e19d17..6a65fe7a 100644
--- a/src/pages/reports/network/NetworkOverview/components/DataSourcesList.vue
+++ b/src/pages/reports/network/NetworkOverview/components/DataSourcesList.vue
@@ -3,7 +3,7 @@
     <DataTable
       size="small"
       showGridlines
-      :value="store.getters.getSources"
+      :value="augmentedData"
       v-model:filters="newFilters"
       :globalFilterFields="['cdm_source_name', 'releases[0].release_name', '']"
       paginator
@@ -67,7 +67,28 @@
         header="Data Quality Issues"
       >
         <template #body="slotProps">
-          {{ slotProps.data.releases[0].count_data_quality_issues }}
+          <div class="flex items-center justify-end">
+            {{ slotProps.data.releases[0].count_data_quality_issues }}
+
+            <svg-icon
+              v-if="slotProps.data.issue_delta === 1"
+              class="text-red-600 text-lg"
+              type="mdi"
+              :path="mdiArrowUp"
+            ></svg-icon>
+            <svg-icon
+              v-if="slotProps.data.issue_delta === -1"
+              class="text-green-600 text-lg"
+              type="mdi"
+              :path="mdiArrowDown"
+            ></svg-icon>
+            <svg-icon
+              v-if="slotProps.data.issue_delta === 0"
+              class="text-gray-600 text-lg"
+              type="mdi"
+              :path="mdiMinus"
+            ></svg-icon>
+          </div>
         </template>
       </Column>
       <Column
@@ -106,7 +127,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useStore } from "vuex";
 import { debounce } from "lodash";
 import Panel from "primevue/panel";
@@ -118,11 +139,38 @@ import InputGroup from "primevue/inputgroup";
 import { useRoute, useRouter } from "vue-router";
 import { FilterMatchMode } from "primevue/api";
 import { helpers } from "@/shared/lib/mixins";
+import { mdiArrowDown, mdiArrowLeft, mdiArrowUp, mdiMinus } from "@mdi/js";
+import SvgIcon from "@jamescoyle/vue-icon";
 
 const store = useStore();
 const route = useRoute();
 const router = useRouter();
 
+const data = ref(store.getters.getSources);
+
+const augmentedData = computed(() => {
+  return data.value.map((source) => {
+    const releases = source.releases;
+    let status;
+    if (releases.length > 1) {
+      const moreIssues =
+        releases[0].count_data_quality_issues >
+        releases[1].count_data_quality_issues;
+
+      const noChanges =
+        releases[0].count_data_quality_issues ===
+        releases[1].count_data_quality_issues;
+      status = moreIssues ? 1 : noChanges ? 0 : -1;
+    } else {
+      status = 0;
+    }
+    return {
+      ...source,
+      issue_delta: status,
+    };
+  });
+});
+
 const newFilters = computed(() => ({
   global: { value: route.query.search, matchMode: FilterMatchMode.CONTAINS },
 }));
diff --git a/src/pages/reports/release/DataQualityResults/components/ResultsTable.vue b/src/pages/reports/release/DataQualityResults/components/ResultsTable.vue
index d453f7ad..b3864e8f 100644
--- a/src/pages/reports/release/DataQualityResults/components/ResultsTable.vue
+++ b/src/pages/reports/release/DataQualityResults/components/ResultsTable.vue
@@ -395,6 +395,53 @@
       header="Execution Duration"
     >
     </Column>
+    <Column
+      v-if="checks[0].Status"
+      style="text-align: end; min-width: 12rem"
+      :pt="{ headerContent: 'justify-end' }"
+      sortable
+      filter-field="Status"
+      field="Status"
+      :show-clear-button="false"
+      :show-filter-menu="false"
+    >
+      <template #header>
+        <svg-icon type="mdi" :path="mdiDelta"></svg-icon
+      ></template>
+      <template #filter="{ filterModel, filterCallback }">
+        <MultiSelect
+          :maxSelectedLabels="2"
+          filter
+          v-model="filterModel.value"
+          @change="filterCallback()"
+          :options="deltaOptions"
+          placeholder="Select One"
+          class="p-column-filter w-full"
+          style="min-width: 12rem"
+        >
+          <template #option="slotProps">
+            {{ slotProps.option }}
+          </template>
+        </MultiSelect>
+      </template>
+      <template #body="slotProps">
+        <div v-if="slotProps.data.Status === 'NEW'" class="text-red-600">
+          {{ slotProps.data.Status }}
+        </div>
+        <div
+          v-if="slotProps.data.Status === 'EXISTING'"
+          class="text-yellow-600"
+        >
+          {{ slotProps.data.Status }}
+        </div>
+        <div v-if="slotProps.data.Status === 'RESOLVED'" class="text-green-600">
+          {{ slotProps.data.Status }}
+        </div>
+        <div v-if="slotProps.data.Status === 'STABLE'" class="text-blue-600">
+          {{ slotProps.data.Status }}
+        </div>
+      </template>
+    </Column>
 
     <Column expander style="width: 5rem" />
 
@@ -551,7 +598,7 @@ import Dropdown from "primevue/dropdown";
 import InputGroup from "primevue/inputgroup";
 import InputGroupAddon from "primevue/inputgroupaddon";
 import MultiSelect from "primevue/multiselect";
-import { mdiTable } from "@mdi/js";
+import { mdiDelta, mdiTable } from "@mdi/js";
 import { UPDATE_COLUMN_SELECTION } from "@/widgets/settings/model/store/actions.type";
 
 const store = useStore();
@@ -592,6 +639,9 @@ const checkLevelOptions = computed(() => {
 const notesExistOptions = computed(() => {
   return helpers.getValuesArray(checks.value, "notesExist", true);
 });
+const deltaOptions = computed(() => {
+  return helpers.getValuesArray(checks.value, "Status", true);
+});
 
 const filters = ref({
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
@@ -604,6 +654,7 @@ const filters = ref({
   context: { value: null, matchMode: FilterMatchMode.IN },
   checkLevel: { value: null, matchMode: FilterMatchMode.IN },
   notesExist: { value: null, matchMode: FilterMatchMode.IN },
+  Status: { value: null, matchMode: FilterMatchMode.IN },
 });
 
 const expanded = ref([]);
@@ -616,6 +667,13 @@ const headers = ref({
     show: true,
     default: true,
   },
+  delta: {
+    title: "Delta",
+    sortable: true,
+    key: "status",
+    show: true,
+    default: true,
+  },
   cdmTableName: {
     title: "Table",
     sortable: true,
diff --git a/src/pages/reports/source/DataQualityHistory/DataQualityHistory.vue b/src/pages/reports/source/DataQualityHistory/DataQualityHistory.vue
index 9942efdb..cc9677b5 100644
--- a/src/pages/reports/source/DataQualityHistory/DataQualityHistory.vue
+++ b/src/pages/reports/source/DataQualityHistory/DataQualityHistory.vue
@@ -3,6 +3,7 @@
     <HistoricalDataQuality />
     <HistoricalDataQualityByCategory />
     <HistoricalDataQualityByDomain />
+    <DataQualityDelta />
   </div>
 </template>
 
@@ -10,6 +11,7 @@
 import HistoricalDataQuality from "@/pages/reports/source/DataQualityHistory/charts/HistoricalDataQuality/HistoricalDataQuality.vue";
 import HistoricalDataQualityByCategory from "@/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByCategory/HistoricalDataQualityByCategory.vue";
 import HistoricalDataQualityByDomain from "@/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByDomain/HistoricalDataQualityByDomain.vue";
+import DataQualityDelta from "@/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue";
 </script>
 
 <style scoped></style>
diff --git a/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue b/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue
new file mode 100644
index 00000000..4671aaf4
--- /dev/null
+++ b/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue
@@ -0,0 +1,82 @@
+<template>
+  <Panel header="Data Quality Delta" elevation="2" class="ma-4">
+    <template #icons>
+      <ChartHeader
+        title="Historical Data Quality by Category"
+        :notes-count="notes.length"
+        :annotations-count="annotations.length"
+        @annotations-mode-toggled="toggleAnnotationsMode"
+        @notes-mode-toggled="toggleNotesMode"
+        table-toggle
+        @table-toggled="toggleTable"
+      />
+    </template>
+    <Chart
+      :id="reportId"
+      :data="data"
+      :chartSpec="specDataQualityDelta"
+      :annotations="annotations"
+      :annotation-mode="annotationsMode"
+      :annotations-config="{
+        chartSpec: specDataQualityResultsByCategoryAnnotation,
+        annotationsParentElement: 'g',
+        brushParentElement: 'g g',
+      }"
+    />
+    <div v-if="showTable" class="p-4">
+      <DataTable
+        size="small"
+        :value="data"
+        paginator
+        currentPageReportTemplate="{first} to {last} of {totalRecords}"
+        paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+        :rows="5"
+        :rowsPerPageOptions="[5, 10, 20, 50]"
+      >
+        <Column field="Release" header="Release"> </Column>
+        <Column field="NEW" header="New"> </Column>
+        <Column field="EXISTING" header="Existing"> </Column>
+        <Column field="RESOLVED" header="Resolved"> </Column>
+        <Column field="STABLE" header="Stable"> </Column>
+      </DataTable>
+    </div>
+    <NotesPanel v-if="notesMode" :notes="notes" />
+  </Panel>
+</template>
+
+<script setup lang="ts">
+import { QUALITY_DELTA } from "@/shared/config/files";
+import { Chart } from "@/widgets/chart";
+import { specDataQualityDelta } from "./specDataQualityDelta";
+import { useStore } from "vuex";
+import { computed, ref } from "vue";
+import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue";
+import { specDataQualityResultsByCategoryAnnotation } from "@/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByCategory/specDataQualityResultsByCategoryAnnotation";
+import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue";
+import Panel from "primevue/panel";
+import Column from "primevue/column";
+import DataTable from "primevue/datatable";
+import useAnnotations from "@/shared/lib/composables/useAnnotations";
+import useAnnotationControls from "@/shared/lib/composables/useAnnotationControls";
+
+const store = useStore();
+
+const reportId = "viz-sourcedataqualitydelta";
+
+const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } =
+  useAnnotationControls();
+
+const { annotations, notes } = useAnnotations(reportId);
+
+const showTable = ref(false);
+
+function toggleTable(mode) {
+  showTable.value = mode;
+}
+
+const data = computed(() => {
+  return store.getters.getData[QUALITY_DELTA] || [];
+});
+</script>
+
+<style scoped></style>
diff --git a/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/specDataQualityDelta.ts b/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/specDataQualityDelta.ts
new file mode 100644
index 00000000..f45a7829
--- /dev/null
+++ b/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/specDataQualityDelta.ts
@@ -0,0 +1,94 @@
+import { VEGA_SCHEMA } from "@/shared/config/links";
+import { TopLevelSpec } from "vega-lite";
+
+export function specDataQualityDelta(zeroBaseline = false) {
+  return {
+    $schema: VEGA_SCHEMA,
+    width: "container",
+    height: 150,
+    data: { name: "conceptData" },
+    encoding: {
+      x: { field: "Release", type: "nominal", title: "Release Name" },
+      y: { field: "value", type: "quantitative", title: "Count" },
+      color: {
+        field: "variable",
+        type: "nominal",
+        title: "Issue status",
+      },
+    },
+    transform: [
+      {
+        fold: ["NEW", "EXISTING", "RESOLVED", "STABLE"],
+        as: ["variable", "value"],
+      },
+      {
+        calculate: "datum.variable",
+        as: "copiedVariable",
+      },
+    ],
+    layer: [
+      {
+        mark: { type: "line", interpolate: "linear", point: true },
+        params: [
+          {
+            name: "source",
+            select: { type: "point", fields: ["variable"] },
+            bind: "legend",
+          },
+        ],
+        // encoding: {
+        //   opacity: {
+        //     condition: { param: "source", value: 1 },
+        //     value: 0.2,
+        //   },
+        // },
+        transform: [
+          {
+            filter: { param: "source" },
+          },
+        ],
+      },
+      // {
+      //   selection: {
+      //     release: {
+      //       type: "multi",
+      //       fields: ["copiedVariable"],
+      //       bind: "legend",
+      //     },
+      //     x: {
+      //       type: "single",
+      //       on: "mousemove",
+      //       fields: ["copiedVariable"],
+      //       nearest: true,
+      //     },
+      //   },
+      //   transform: [
+      //     {
+      //       filter: { selection: "release" },
+      //     },
+      //   ],
+      //   mark: { type: "point", tooltip: true },
+      // },
+      // {
+      //   transform: [
+      //     {
+      //       filter: {
+      //         and: ["x.Release", { selection: "x" }],
+      //       },
+      //     },
+      //     { filter: { selection: "release" } },
+      //   ],
+      //   layer: [
+      //     {
+      //       mark: "rule",
+      //       encoding: {
+      //         y: {
+      //           height: 1,
+      //         },
+      //       },
+      //     },
+      //   ],
+      // },
+    ],
+  };
+}
diff --git a/src/processes/exploreReports/config/dataLoadConfig.ts b/src/processes/exploreReports/config/dataLoadConfig.ts
index 71596529..9e5c55ab 100644
--- a/src/processes/exploreReports/config/dataLoadConfig.ts
+++ b/src/processes/exploreReports/config/dataLoadConfig.ts
@@ -23,6 +23,7 @@ import {
   OBSERVATION_PERIOD,
   PERSON,
   QUALITY_COMPLETENESS,
+  QUALITY_DELTA,
   QUALITY_INDEX,
   QUALITY_RESULTS,
   RECORDS_DOMAIN,
@@ -220,7 +221,10 @@ export default function getFilesByView(params = null) {
     dataQualityHistory: {
       loadMethod: FETCH_FILES,
       payload: {
-        files: [{ name: QUALITY_INDEX, required: true }],
+        files: [
+          { name: QUALITY_INDEX, required: true },
+          { name: QUALITY_DELTA, required: false },
+        ],
       },
     },
     domainContinuity: {
diff --git a/src/processes/exploreReports/model/store/preprocessing/index.ts b/src/processes/exploreReports/model/store/preprocessing/index.ts
index 065e6be6..de415df8 100644
--- a/src/processes/exploreReports/model/store/preprocessing/index.ts
+++ b/src/processes/exploreReports/model/store/preprocessing/index.ts
@@ -21,6 +21,7 @@ import {
   COHORT_INDEX_EVENT_BREAKDOWN,
   COHORT_TEMPORAL_COVARIATE_DISTRIBUTION,
   LOCATION,
+  QUALITY_DELTA,
 } from "@/shared/config/files";
 import csvParse from "@/processes/exploreReports/model/store/preprocessing/csvParse";
 
@@ -47,4 +48,5 @@ export default {
   [COHORT_INDEX_EVENT_BREAKDOWN]: csvParse,
   [COHORT_TEMPORAL_COVARIATE_DISTRIBUTION]: csvParse,
   [LOCATION]: csvParse,
+  [QUALITY_DELTA]: csvParse,
 };
diff --git a/src/shared/api/axios/files.ts b/src/shared/api/axios/files.ts
index 3373d340..7e94157b 100644
--- a/src/shared/api/axios/files.ts
+++ b/src/shared/api/axios/files.ts
@@ -12,7 +12,8 @@ export default function getFilePath(params: Params) {
     [files.INDEX]: "data/index.json",
     [files.CONCEPT]: `data/${params.cdm}/${params.release}/concepts/${params.domain}/concept_${params.concept}.json`,
     [files.QUALITY_INDEX]: `data/${params.cdm}/data-quality-index.json`,
-    [files.QUALITY_RESULTS]: `data/${params.cdm}/${params.release}/dq-result.json`,
+    [files.QUALITY_RESULTS]: `data/${params.cdm}/${params.release}/updated_dq-result.json`,
+    [files.QUALITY_DELTA]: `data/${params.cdm}/data-quality-delta.csv`,
     [files.DEATH]: `data/${params.cdm}/${params.release}/death.json`,
     [files.SOURCE_HISTORY_INDEX]: `data/${params.cdm}/data-source-history-index.json`,
     [files.DENSITY_RECORDS_PERSON]: `data/${params.cdm}/${params.release}/datadensity-records-per-person.csv`,
diff --git a/src/shared/config/files.ts b/src/shared/config/files.ts
index beb834ea..f43df288 100644
--- a/src/shared/config/files.ts
+++ b/src/shared/config/files.ts
@@ -2,6 +2,7 @@ export const INDEX = "index";
 export const CONCEPT = "concept";
 export const QUALITY_INDEX = "qualityIndex";
 export const QUALITY_RESULTS = "qualityResults";
+export const QUALITY_DELTA = "qualityDelta";
 
 export const NOTES = "notes";
 export const DEATH = "death";
diff --git a/src/shared/lib/mixins/methods/getValuesArray.ts b/src/shared/lib/mixins/methods/getValuesArray.ts
index 84d197f6..54ddc4f5 100644
--- a/src/shared/lib/mixins/methods/getValuesArray.ts
+++ b/src/shared/lib/mixins/methods/getValuesArray.ts
@@ -3,6 +3,7 @@ export const getValuesArray = function (
   val: string,
   unique?: boolean
 ): never[] {
+  if (!array) return [];
   if (unique) {
     return [...new Set(array.map((d) => d[val]))];
   } else {

From 12ba4296bfa66b16ab930df117bceef3f2dfed10 Mon Sep 17 00:00:00 2001
From: Mikhail-iontsev <mikhail_iontsev@icloud.com>
Date: Tue, 13 Aug 2024 06:50:37 +0700
Subject: [PATCH 2/2] feat: added data quality delta

---
 .../components/PivotDataTable.vue             |  1 +
 .../components/ResultsTable.vue               | 31 +++----
 .../DataQualityDelta/DataQualityDelta.vue     | 25 +-----
 .../DataQualityDelta/specDataQualityDelta.ts  | 88 +++++++++----------
 src/shared/api/axios/files.ts                 |  2 +-
 5 files changed, 61 insertions(+), 86 deletions(-)

diff --git a/src/pages/reports/release/DataQualityResults/components/PivotDataTable.vue b/src/pages/reports/release/DataQualityResults/components/PivotDataTable.vue
index e1b7bc6f..8cb5e9b2 100644
--- a/src/pages/reports/release/DataQualityResults/components/PivotDataTable.vue
+++ b/src/pages/reports/release/DataQualityResults/components/PivotDataTable.vue
@@ -13,6 +13,7 @@
         'subcategory',
         'cdmTableName',
         'failed',
+        'delta',
       ]"
       :aggregator-names-list="['Count']"
     >
diff --git a/src/pages/reports/release/DataQualityResults/components/ResultsTable.vue b/src/pages/reports/release/DataQualityResults/components/ResultsTable.vue
index b3864e8f..ae261359 100644
--- a/src/pages/reports/release/DataQualityResults/components/ResultsTable.vue
+++ b/src/pages/reports/release/DataQualityResults/components/ResultsTable.vue
@@ -396,12 +396,12 @@
     >
     </Column>
     <Column
-      v-if="checks[0].Status"
+      v-if="checks[0].delta"
       style="text-align: end; min-width: 12rem"
       :pt="{ headerContent: 'justify-end' }"
       sortable
-      filter-field="Status"
-      field="Status"
+      filter-field="delta"
+      field="delta"
       :show-clear-button="false"
       :show-filter-menu="false"
     >
@@ -425,20 +425,17 @@
         </MultiSelect>
       </template>
       <template #body="slotProps">
-        <div v-if="slotProps.data.Status === 'NEW'" class="text-red-600">
-          {{ slotProps.data.Status }}
+        <div v-if="slotProps.data.delta === 'NEW'" class="text-red-600">
+          {{ slotProps.data.delta }}
         </div>
-        <div
-          v-if="slotProps.data.Status === 'EXISTING'"
-          class="text-yellow-600"
-        >
-          {{ slotProps.data.Status }}
+        <div v-if="slotProps.data.delta === 'EXISTING'" class="text-yellow-600">
+          {{ slotProps.data.delta }}
         </div>
-        <div v-if="slotProps.data.Status === 'RESOLVED'" class="text-green-600">
-          {{ slotProps.data.Status }}
+        <div v-if="slotProps.data.delta === 'RESOLVED'" class="text-green-600">
+          {{ slotProps.data.delta }}
         </div>
-        <div v-if="slotProps.data.Status === 'STABLE'" class="text-blue-600">
-          {{ slotProps.data.Status }}
+        <div v-if="slotProps.data.delta === 'STABLE'" class="text-blue-600">
+          {{ slotProps.data.delta }}
         </div>
       </template>
     </Column>
@@ -640,7 +637,7 @@ const notesExistOptions = computed(() => {
   return helpers.getValuesArray(checks.value, "notesExist", true);
 });
 const deltaOptions = computed(() => {
-  return helpers.getValuesArray(checks.value, "Status", true);
+  return helpers.getValuesArray(checks.value, "delta", true);
 });
 
 const filters = ref({
@@ -654,7 +651,7 @@ const filters = ref({
   context: { value: null, matchMode: FilterMatchMode.IN },
   checkLevel: { value: null, matchMode: FilterMatchMode.IN },
   notesExist: { value: null, matchMode: FilterMatchMode.IN },
-  Status: { value: null, matchMode: FilterMatchMode.IN },
+  delta: { value: null, matchMode: FilterMatchMode.IN },
 });
 
 const expanded = ref([]);
@@ -670,7 +667,7 @@ const headers = ref({
   delta: {
     title: "Delta",
     sortable: true,
-    key: "status",
+    key: "delta",
     show: true,
     default: true,
   },
diff --git a/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue b/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue
index 4671aaf4..07424b68 100644
--- a/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue
+++ b/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/DataQualityDelta.vue
@@ -3,26 +3,11 @@
     <template #icons>
       <ChartHeader
         title="Historical Data Quality by Category"
-        :notes-count="notes.length"
-        :annotations-count="annotations.length"
-        @annotations-mode-toggled="toggleAnnotationsMode"
-        @notes-mode-toggled="toggleNotesMode"
         table-toggle
         @table-toggled="toggleTable"
       />
     </template>
-    <Chart
-      :id="reportId"
-      :data="data"
-      :chartSpec="specDataQualityDelta"
-      :annotations="annotations"
-      :annotation-mode="annotationsMode"
-      :annotations-config="{
-        chartSpec: specDataQualityResultsByCategoryAnnotation,
-        annotationsParentElement: 'g',
-        brushParentElement: 'g g',
-      }"
-    />
+    <Chart :id="reportId" :data="data" :chartSpec="specDataQualityDelta" />
     <div v-if="showTable" class="p-4">
       <DataTable
         size="small"
@@ -33,7 +18,7 @@
         :rows="5"
         :rowsPerPageOptions="[5, 10, 20, 50]"
       >
-        <Column field="Release" header="Release"> </Column>
+        <Column field="release" header="Release"> </Column>
         <Column field="NEW" header="New"> </Column>
         <Column field="EXISTING" header="Existing"> </Column>
         <Column field="RESOLVED" header="Resolved"> </Column>
@@ -51,7 +36,6 @@ import { specDataQualityDelta } from "./specDataQualityDelta";
 import { useStore } from "vuex";
 import { computed, ref } from "vue";
 import NotesPanel from "@/widgets/notesPanel/ui/NotesPanel.vue";
-import { specDataQualityResultsByCategoryAnnotation } from "@/pages/reports/source/DataQualityHistory/charts/HistoricalDataQualityByCategory/specDataQualityResultsByCategoryAnnotation";
 import ChartHeader from "@/widgets/chart/ui/ChartHeader.vue";
 import Panel from "primevue/panel";
 import Column from "primevue/column";
@@ -63,10 +47,9 @@ const store = useStore();
 
 const reportId = "viz-sourcedataqualitydelta";
 
-const { notesMode, annotationsMode, toggleNotesMode, toggleAnnotationsMode } =
-  useAnnotationControls();
+const { notesMode } = useAnnotationControls();
 
-const { annotations, notes } = useAnnotations(reportId);
+const { notes } = useAnnotations(reportId);
 
 const showTable = ref(false);
 
diff --git a/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/specDataQualityDelta.ts b/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/specDataQualityDelta.ts
index f45a7829..9e613a94 100644
--- a/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/specDataQualityDelta.ts
+++ b/src/pages/reports/source/DataQualityHistory/charts/DataQualityDelta/specDataQualityDelta.ts
@@ -36,59 +36,53 @@ export function specDataQualityDelta(zeroBaseline = false) {
             bind: "legend",
           },
         ],
-        // encoding: {
-        //   opacity: {
-        //     condition: { param: "source", value: 1 },
-        //     value: 0.2,
-        //   },
-        // },
         transform: [
           {
             filter: { param: "source" },
           },
         ],
       },
-      // {
-      //   selection: {
-      //     release: {
-      //       type: "multi",
-      //       fields: ["copiedVariable"],
-      //       bind: "legend",
-      //     },
-      //     x: {
-      //       type: "single",
-      //       on: "mousemove",
-      //       fields: ["copiedVariable"],
-      //       nearest: true,
-      //     },
-      //   },
-      //   transform: [
-      //     {
-      //       filter: { selection: "release" },
-      //     },
-      //   ],
-      //   mark: { type: "point", tooltip: true },
-      // },
-      // {
-      //   transform: [
-      //     {
-      //       filter: {
-      //         and: ["x.Release", { selection: "x" }],
-      //       },
-      //     },
-      //     { filter: { selection: "release" } },
-      //   ],
-      //   layer: [
-      //     {
-      //       mark: "rule",
-      //       encoding: {
-      //         y: {
-      //           height: 1,
-      //         },
-      //       },
-      //     },
-      //   ],
-      // },
+      {
+        selection: {
+          release: {
+            type: "multi",
+            fields: ["variable"],
+            bind: "legend",
+          },
+          x: {
+            type: "single",
+            on: "mousemove",
+            fields: ["Release"],
+            nearest: true,
+          },
+        },
+        transform: [
+          {
+            filter: { selection: "release" },
+          },
+        ],
+        mark: { type: "point", tooltip: true },
+      },
+      {
+        transform: [
+          {
+            filter: {
+              and: ["x.Release", { selection: "x" }],
+            },
+          },
+          { filter: { selection: "release" } },
+        ],
+        layer: [
+          {
+            mark: "rule",
+            encoding: {
+              y: {
+                height: 1,
+              },
+            },
+          },
+        ],
+      },
     ],
   };
 }
diff --git a/src/shared/api/axios/files.ts b/src/shared/api/axios/files.ts
index 7e94157b..56fc917e 100644
--- a/src/shared/api/axios/files.ts
+++ b/src/shared/api/axios/files.ts
@@ -12,7 +12,7 @@ export default function getFilePath(params: Params) {
     [files.INDEX]: "data/index.json",
     [files.CONCEPT]: `data/${params.cdm}/${params.release}/concepts/${params.domain}/concept_${params.concept}.json`,
     [files.QUALITY_INDEX]: `data/${params.cdm}/data-quality-index.json`,
-    [files.QUALITY_RESULTS]: `data/${params.cdm}/${params.release}/updated_dq-result.json`,
+    [files.QUALITY_RESULTS]: `data/${params.cdm}/${params.release}/dq-result.json`,
     [files.QUALITY_DELTA]: `data/${params.cdm}/data-quality-delta.csv`,
     [files.DEATH]: `data/${params.cdm}/${params.release}/death.json`,
     [files.SOURCE_HISTORY_INDEX]: `data/${params.cdm}/data-source-history-index.json`,