[Platform]: Add FilterComponent on Profile and Association pages

apps/platform/src/components/AssociationsToolkit/components/DataSourcesFilter.tsx

@@ -0,0 +1,69 @@
+import { ReactElement, useEffect, useState } from "react";
+import FilterComponent from "../../FilterComponent";
+import dataSourcesAssoc from "../static_datasets/dataSourcesAssoc";
+import { isPartnerPreview, defaultDataSourcesFilter, getWightSourceDefault } from "../utils";
+import useAotfContext from "../hooks/useAotfContext";
+import { DataSource, columnAdvanceControl } from "../types";
+
+export default function DataSourcesFilter(): ReactElement {
+  const [alertVisibility, setAlertVisibility] = useState(false);
+  const {
+    dataSourcesFilter,
+    setDataSourcesFilter,
+    dataSourcesWeights,
+    updateDataSourceControls,
+    filterAffectOverallScore,
+    setFilterAffectOverallScore,
+    displayedTable,
+  } = useAotfContext();
+
+  const dataSources = dataSourcesAssoc.filter(
+    (e: DataSource) => !e.isPrivate || (e.isPrivate && e.isPrivate === isPartnerPreview)
+  );
+
+  useEffect(() => {
+    if (filterAffectOverallScore) {
+      dataSourcesWeights.map((dw: columnAdvanceControl) => {
+        const newDw = JSON.parse(JSON.stringify(dw));
+        if (dataSources.map((ds: DataSource) => ds.id).includes(dw.id)) {
+          if (!dataSourcesFilter.map((ds: DataSource) => ds.id).includes(dw.id)) {
+            newDw.weight = 0;
+          } else {
+            newDw.weight = dw.weight === 0 ? getWightSourceDefault(dw.id) : dw.weight;
+          }
+          updateDataSourceControls(newDw.id, newDw.weight, newDw.required, newDw.aggregation);
+        }
+      });
+    } else {
+      dataSourcesWeights.map((dw: columnAdvanceControl) => {
+        const newDw = JSON.parse(JSON.stringify(dw));
+        if (dw.weight === 0) {
+          updateDataSourceControls(
+            newDw.id,
+            getWightSourceDefault(dw.id),
+            newDw.required,
+            newDw.aggregation
+          );
+        }
+        return newDw;
+      });
+    }
+  }, [dataSourcesFilter.length, filterAffectOverallScore]);
+
+  return (
+    <FilterComponent
+      filterItems={dataSources}
+      selectedItems={dataSourcesFilter}
+      setSelectedItems={setDataSourcesFilter}
+      defaultItems={defaultDataSourcesFilter}
+      alertVisibility={alertVisibility}
+      setAlertVisibility={setAlertVisibility}
+      title="Filter data sources"
+      label="label"
+      isAssociations
+      isPrioritisation={displayedTable === "prioritisations"}
+      filterAffectOverallScore={filterAffectOverallScore}
+      setFilterAffectOverallScore={setFilterAffectOverallScore}
+    />
+  );
+}

apps/platform/src/components/AssociationsToolkit/components/Table/AggregationsRow.jsx

@@ -16,7 +16,6 @@ const HiddenCol = styled("div")({
   display: "flex",
 });
 
-const associationGrouped = groupViewColumnsBy(associationsColumns, "aggregation");
 const prioritizationGrouped = groupViewColumnsBy(prioritizationColumns, "aggregation");
 
 function AggregationItem({
@@ -66,11 +65,14 @@ function AggregationItem({
 function AggregationsRow({
   table,
   active,
+  dataSourcesFilter,
   handleAggregationClick,
   activeHeadersControlls,
   setActiveHeadersControlls,
   columnsCount,
 }) {
+  const associationGrouped = groupViewColumnsBy(dataSourcesFilter, "aggregation");
+
   const dataset = table === "associations" ? associationGrouped : prioritizationGrouped;
   const aggregations = Object.keys(dataset);
 

apps/platform/src/components/AssociationsToolkit/components/Table/TableAssociations.jsx

@@ -3,7 +3,6 @@ import { useReactTable, getCoreRowModel, createColumnHelper } from "@tanstack/re
 
 import { styled, Typography, Box } from "@mui/material";
 
-import dataSourcesCols from "../../static_datasets/dataSourcesAssoc";
 import prioritizationCols from "../../static_datasets/prioritisationColumns";
 
 import AggregationsTooltip from "./AssocTooltip";
@@ -36,13 +35,12 @@ const TableDivider = styled("div")({
 const columnHelper = createColumnHelper();
 
 /* Build table columns bases on displayed table */
-function getDatasources({ displayedTable, colorScale }) {
+function getDatasources({ displayedTable, colorScale, dataSourcesFilter }) {
   const isAssociations = displayedTable === "associations";
-  const baseCols = isAssociations ? dataSourcesCols : prioritizationCols;
+  const baseCols = isAssociations ? dataSourcesFilter : prioritizationCols;
   const dataProp = isAssociations ? "dataSources" : "prioritisations";
   const datasources = [];
   baseCols.forEach(({ id, label, sectionId, description, aggregation, isPrivate, docsLink }) => {
-    if (isPrivate && isPrivate !== isPartnerPreview) return;
     const column = columnHelper.accessor(row => row[dataProp][id], {
       id,
       sectionId,
@@ -75,6 +73,7 @@ function TableAssociations() {
     data,
     count,
     loading: associationsLoading,
+    dataSourcesFilter,
     pagination,
     handlePaginationChange,
     displayedTable,
@@ -127,10 +126,10 @@ function TableAssociations() {
       columnHelper.group({
         header: "entities",
         id: "entity-cols",
-        columns: [...getDatasources({ displayedTable, colorScale })],
+        columns: [...getDatasources({ displayedTable, colorScale, dataSourcesFilter })],
       }),
     ],
-    [displayedTable, entityToGet, rowNameEntity]
+    [displayedTable, entityToGet, rowNameEntity, dataSourcesFilter]
   );
 
   /**

apps/platform/src/components/AssociationsToolkit/components/Table/TableHeader.jsx

@@ -23,6 +23,7 @@ function TableHeader({ table, cols }) {
   const {
     id,
     displayedTable,
+    dataSourcesFilter,
     handleAggregationClick,
     activeHeadersControlls,
     setActiveHeadersControlls,
@@ -98,6 +99,7 @@ function TableHeader({ table, cols }) {
         columnsCount={cols.length}
         table={displayedTable}
         active={activeAggregation}
+        dataSourcesFilter={dataSourcesFilter}
         activeHeadersControlls={activeHeadersControlls}
         setActiveHeadersControlls={setActiveHeadersControlls}
       />

apps/platform/src/components/AssociationsToolkit/context/AssociationsStateContext.jsx

@@ -14,6 +14,7 @@ import useAssociationsData from "../hooks/useAssociationsData";
 import { aotfReducer, createInitialState } from "./aotfReducer";
 import {
   aggregationClick,
+  dataSourcesFilterClick,
   facetFilterSelectAction,
   onPaginationChange,
   resetDataSourceControl,
@@ -43,6 +44,19 @@ function AssociationsStateProvider({ children, entity, id, query }) {
   const [enableIndirect, setEnableIndirect] = useState(initialIndirect(entity));
   const [sorting, setSorting] = useState(DEFAULT_TABLE_SORTING_STATE);
 
+  const setDataSourcesFilter = newDataSourcesFilter => {
+    dispatch(dataSourcesFilterClick(newDataSourcesFilter));
+  };
+  useEffect(() => {
+    const retrieved = JSON.parse(window.localStorage.getItem("dataSourcesFilter"));
+    retrieved && setDataSourcesFilter(retrieved);
+  }, []);
+
+  useEffect(() => {
+    window.localStorage.setItem("dataSourcesFilter", JSON.stringify(state.dataSourcesFilter));
+  }, [state.dataSourcesFilter]);
+  const [filterAffectOverallScore, setFilterAffectOverallScore] = useState(false);
+
   // Data controls UI
   const [activeHeadersControlls, setActiveHeadersControlls] = useState(false);
 
@@ -129,6 +143,7 @@ function AssociationsStateProvider({ children, entity, id, query }) {
 
   const resetDatasourceControls = () => {
     dispatch(resetDataSourceControl());
+    setFilterAffectOverallScore(false);
   };
 
   const resetToInitialPagination = () => {
@@ -159,6 +174,8 @@ function AssociationsStateProvider({ children, entity, id, query }) {
       enableIndirect,
       error,
       dataSourcesWeights: state.dataSourceControls,
+      dataSourcesFilter: state.dataSourcesFilter,
+      filterAffectOverallScore,
       displayedTable,
       pinnedData,
       sorting,
@@ -172,6 +189,8 @@ function AssociationsStateProvider({ children, entity, id, query }) {
       resetDatasourceControls,
       handleSortingChange,
       setDisplayedTable,
+      setDataSourcesFilter,
+      setFilterAffectOverallScore,
       handlePaginationChange,
       setEnableIndirect,
       setActiveHeadersControlls,
@@ -185,6 +204,7 @@ function AssociationsStateProvider({ children, entity, id, query }) {
       activeHeadersControlls,
       count,
       data,
+      filterAffectOverallScore,
       displayedTable,
       enableIndirect,
       entity,

apps/platform/src/components/AssociationsToolkit/context/aotfActions.ts

@@ -1,5 +1,5 @@
 import { Facet } from "../../Facets/facetsTypes";
-import { Action, ActionType, Pagination, RowInteractorsKey } from "../types";
+import { Action, ActionType, DataSource, Pagination, RowInteractorsKey } from "../types";
 
 export function onPaginationChange(pagination: Pagination): Action {
   return {
@@ -60,3 +60,10 @@ export function resetToInitialState(): Action {
     type: ActionType.SET_INITIAL_STATE,
   };
 }
+
+export function dataSourcesFilterClick(newDataSourcesFilter: Array<DataSource>): Action {
+  return {
+    type: ActionType.HANDLE_DATA_SOURCES_FILTER,
+    newDataSourcesFilter,
+  };
+}

apps/platform/src/components/AssociationsToolkit/context/aotfReducer.ts

@@ -3,6 +3,7 @@ import {
   defaulDatasourcesWeigths,
   DEFAULT_TABLE_PAGINATION_STATE,
   DEFAULT_TABLE_SORTING_STATE,
+  defaultDataSourcesFilter,
 } from "../utils";
 import { Action, ActionType, ENTITY, State, TABLE_VIEW } from "../types";
 import { isEqual } from "lodash";
@@ -31,6 +32,7 @@ export const initialState: State = {
   dataSourceControls: defaulDatasourcesWeigths,
   modifiedSourcesDataControls: false,
   facetFilters: [],
+  dataSourcesFilter: defaultDataSourcesFilter,
 };
 
 type InitialStateParams = {
@@ -143,6 +145,10 @@ export function aotfReducer(state: State = initialState, action: Action): State
         ...initialState,
       };
     }
+    case ActionType.HANDLE_DATA_SOURCES_FILTER: {
+      const newDataSourcesFilter = action.newDataSourcesFilter;
+      return { ...state, dataSourcesFilter: newDataSourcesFilter };
+    }
     default: {
       throw Error("Unknown action: " + action);
       return state;

apps/platform/src/components/AssociationsToolkit/index.ts

@@ -3,6 +3,7 @@ export { default as TableAssociations } from "./components/Table/TableAssociatio
 export { default as TargetPrioritisationSwitch } from "./components/TargetPrioritisationSwitch";
 export { default as DataDownloader } from "./components/DataDownloader";
 export { default as DataUploader } from "./components/DataUploader/DataUploader";
+export { default as DataSourcesFilter } from "./components/DataSourcesFilter";
 export { default as AotfApiPlayground } from "./components/AotfApiPlayground";
 export {
   default as AssociationsContext,

apps/platform/src/components/AssociationsToolkit/types.ts

@@ -24,6 +24,18 @@ export type Column = {
   private?: boolean;
 };
 
+export interface DataSource {
+  id: string;
+  sectionId: string;
+  label: string;
+  aggregation: string;
+  aggregationId: string;
+  weight: number;
+  isPrivate: boolean;
+  docsLink: string;
+  required: boolean;
+}
+
 /***************
  * STATE TYPES *
  ***************/
@@ -70,6 +82,7 @@ export interface State {
   dataSourceControls: Array<columnAdvanceControl>;
   modifiedSourcesDataControls: boolean;
   facetFilters: Array<string>;
+  dataSourcesFilter: Array<DataSource>;
 }
 
 /*****************
@@ -86,6 +99,7 @@ export enum ActionType {
   HANDLE_AGGREGATION_CLICK = "HANDLE_AGGREGATION_CLICK",
   FACETS_SEARCH = "FACETS_SEARCH",
   SET_INITIAL_STATE = "SET_INITIAL_STATE",
+  HANDLE_DATA_SOURCES_FILTER = "HANDLE_DATA_SOURCES_FILTER",
 }
 
 export type SetRowInteractorsPayload = {
@@ -103,4 +117,5 @@ export type Action =
   | { type: ActionType.RESET_DATA_SOURCE_CONTROL }
   | { type: ActionType.HANDLE_AGGREGATION_CLICK; aggregation: string }
   | { type: ActionType.FACETS_SEARCH; facetFilters: string[] }
-  | { type: ActionType.SET_INITIAL_STATE };
+  | { type: ActionType.SET_INITIAL_STATE }
+  | { type: ActionType.HANDLE_DATA_SOURCES_FILTER; newDataSourcesFilter: DataSource[] };

apps/platform/src/components/AssociationsToolkit/utils/index.js

@@ -92,6 +92,10 @@ export const defaulDatasourcesWeigths = dataSources.map(
   })
 );
 
+export const defaultDataSourcesFilter = dataSources.filter(
+  e => !e.isPrivate || (e.isPrivate && e.isPrivate === isPartnerPreview)
+);
+
 export const getWightSourceDefault = source => {
   const sourcesDetails = defaulDatasourcesWeigths.find(src => src.id === source);
   return sourcesDetails.weight;