Visualization Page Pagination

dashboard/src/App.js

@@ -87,11 +87,11 @@ const App = () => {
                       path={APP_ROUTES.OVERVIEW}
                       element={<OverviewComponent />}
                     />
-                    <Route
-                      path={APP_ROUTES.VISUALIZATION}
-                      element={<ComparisonComponent />}
-                    />
                   </Route>
+                  <Route
+                    path={APP_ROUTES.VISUALIZATION}
+                    element={<ComparisonComponent />}
+                  />
                   <Route
                     path={APP_ROUTES.TABLE_OF_CONTENT}
                     element={<TableOfContent />}

dashboard/src/actions/comparisonActions.js

@@ -6,7 +6,6 @@ import { DANGER, ERROR_MSG, WARNING } from "assets/constants/toastConstants";
 import API from "../utils/axiosInstance";
 import { START_PAGE_NUMBER } from "assets/constants/browsingPageConstants";
 import { fetchDatasets } from "actions/datasetListActions";
-import { getDatasets } from "actions/overviewActions";
 import { showToast } from "./toastActions";
 import { uriTemplate } from "../utils/helper";
 
@@ -279,18 +278,18 @@ export const setSearchValue = (value) => ({
   payload: value,
 });
 
-export const onDatasetTypeChange = (value, currPage, dispatch) => {
+export const onDatasetTypeChange = (value, dispatch) => {
   dispatch({
     type: TYPES.SET_DATASET_TYPE,
     payload: value,
   });
-  if (currPage === CONSTANTS.VISUALIZATION) {
-    dispatch(getDatasets());
-  } else {
-    dispatch({
-      type: TYPES.SET_RESULT_OFFSET,
-      payload: 0,
-    });
-    dispatch(fetchDatasets(START_PAGE_NUMBER));
-  }
+  resetList(dispatch);
+};
+
+export const resetList = (dispatch) => {
+  dispatch({
+    type: TYPES.SET_RESULT_OFFSET,
+    payload: 0,
+  });
+  dispatch(fetchDatasets(START_PAGE_NUMBER));
 };

dashboard/src/modules/components/ComparisonComponent/PanelContent.jsx

@@ -1,13 +1,18 @@
 import "./index.less";
 
+import * as CONSTANTS from "assets/constants/browsingPageConstants";
+
 import { Checkbox, List, ListItem } from "@patternfly/react-core";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { getQuisbyData, setSelectedId } from "actions/comparisonActions";
 import { useDispatch, useSelector } from "react-redux";
 
+import TablePagination from "../PaginationComponent";
+
 const PanelConent = () => {
   const dispatch = useDispatch();
-  const { datasets } = useSelector((state) => state.overview);
+
+  const { publicData } = useSelector((state) => state.datasetlist);
   const {
     activeResourceId,
     isCompareSwitchChecked,
@@ -24,10 +29,10 @@ const PanelConent = () => {
     [searchValue]
   );
   const filteredDatasets = useMemo(
-    () => datasets.filter(onFilter),
-    [datasets, onFilter]
+    () => publicData.filter(onFilter),
+    [publicData, onFilter]
   );
-
+  const [page, setPage] = useState(CONSTANTS.START_PAGE_NUMBER);
   return (
     <>
       {filteredDatasets.length > 0 && (
@@ -67,6 +72,7 @@ const PanelConent = () => {
           )}
         </div>
       )}
+      <TablePagination page={page} setPage={setPage} />
     </>
   );
 };

dashboard/src/modules/components/ComparisonComponent/common-components.jsx

@@ -40,6 +40,7 @@ export const MainContent = () => {
     ? "Benchmarks are of non-compatabile types!"
     : "Benchmark type is currently unsupported!";
   const data = isCompareSwitchChecked ? compareChartData : chartData;
+
   return (
     <>
       {isCompareSwitchChecked ? (
@@ -81,7 +82,7 @@ export const ViewOptions = (props) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const selected = useSelector((state) => state.comparison.datasetType);
   const onSelect = (_event, value) => {
-    onDatasetTypeChange(value, props.currPage, dispatch);
+    onDatasetTypeChange(value, dispatch);
     setIsOpen(false);
   };
   const onToggle = () => {

dashboard/src/modules/components/ComparisonComponent/index.jsx

@@ -15,14 +15,13 @@ import React, { useEffect } from "react";
 import {
   compareMultipleDatasets,
   getQuisbyData,
+  resetList,
   toggleCompareSwitch,
 } from "actions/comparisonActions";
 import { useDispatch, useSelector } from "react-redux";
 
 import Cookies from "js-cookie";
 import PanelConent from "./PanelContent";
-import { VISUALIZATION } from "assets/constants/compareConstants";
-import { getDatasets } from "actions/overviewActions";
 
 const ComparisonComponent = () => {
   const dispatch = useDispatch();
@@ -36,7 +35,7 @@ const ComparisonComponent = () => {
     if (datasets && datasets.length > 0) {
       dispatch(getQuisbyData(datasets[0]));
     } else {
-      dispatch(getDatasets());
+      resetList(dispatch);
     }
   }, [datasets, dispatch]);
   return (
@@ -68,7 +67,7 @@ const ComparisonComponent = () => {
               Compare Datasets
             </Button>
           )}
-          {loggedIn && <ViewOptions currPage={VISUALIZATION} />}
+          {loggedIn && <ViewOptions />}
 
           <SearchByName />
           <PanelConent />

dashboard/src/modules/components/TableComponent/index.jsx

@@ -26,7 +26,6 @@ import { useDispatch, useSelector } from "react-redux";
 
 import Cookies from "js-cookie";
 import DatePickerWidget from "../DatePickerComponent";
-import { RESULTS } from "assets/constants/compareConstants";
 import { RenderPagination } from "../OverviewComponent/common-component";
 import TablePagination from "../PaginationComponent";
 import { ViewOptions } from "../ComparisonComponent/common-components";
@@ -165,7 +164,7 @@ const TableWithFavorite = () => {
           {loggedIn && (
             <>
               <span className="runs-text">Datasets</span>
-              <ViewOptions currPage={RESULTS} />
+              <ViewOptions />
             </>
           )}
         </div>