Cardinality totals dashboard

packages/main/.eslintrc.cjs

@@ -1,6 +1,6 @@
 module.exports = {
     env: { browser: true, es2020: true },
-    extends: ["plugin:@typescript-eslint/recommended"],
+    extends: ["plugin:@typescript-eslint/recommended","prettier"],
     parser: "@typescript-eslint/parser",
     parserOptions: { ecmaVersion: "latest", sourceType: "module" },
     plugins: ["react-refresh"],

packages/main/package.json

@@ -72,8 +72,8 @@
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-basic-ssl": "^1.1.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-basic-ssl": "^1.0.2",
+    "@vitejs/plugin-react": "^4.2.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.5",

packages/main/plugins/Cardinality/Cardinality.tsx

@@ -2,16 +2,52 @@ import Configurator from "./Configurator";
 import { setIsCardinality } from "./store/setIsCardinality";
 import { useDispatch, useSelector } from "react-redux";
 import { useCardinalityData } from "./api/useCardinalityData";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import useTheme from "@ui/theme/useTheme";
 import CardinalitySeries from "./CardinalitySeries";
 import useCardinalityHistory from "./history/useCardinalityHistory";
+import CardinalityTotals from "./TotalsPanel/CardinalityTotals";
+
+export const setLocalTabsState = (value: number) => {
+    try {
+        const localTabs = JSON.parse(
+            localStorage.getItem("localCardinalityTabsState") || "{}"
+        );
+
+        localTabs["value"] = value;
+
+        localStorage.setItem("localTabsState", JSON.stringify(localTabs));
+    } catch (e) {
+        console.log(e);
+    }
+};
+
+export const getLocalTabsState = () => {
+    try {
+        const tabsState = JSON.parse(
+            localStorage.getItem("localCardinalityTabsState") || "{}"
+        );
+
+        return tabsState.value || 0;
+    } catch (e) {
+        console.log(e);
+        return 0;
+    }
+};
 
 export const Cardinality = () => {
     const dispatch: any = useDispatch();
     const theme = useTheme();
     const isCardinality = useSelector((store: any) => store.isCardinality);
 
+    const [activeTab, setActiveTab] = useState(getLocalTabsState());
+
+    const onTabChange = (event: any, newValue: any) => {
+        //   console.log(tab)
+        setActiveTab(() => newValue);
+        setLocalTabsState(newValue);
+    };
+
     useEffect(() => {
         dispatch(setIsCardinality(true));
         return () => {
@@ -26,7 +62,6 @@ export const Cardinality = () => {
         limitEntriesItems,
         historyManager,
     } = useCardinalityHistory();
-
 
     const { totalSeries, formattedSeries, isLoading } = useCardinalityData(
         historyManager,
@@ -48,15 +83,45 @@ export const Cardinality = () => {
                 focusLabelItems={focusLabelItems}
                 timeSeriesSelectorItems={timeSeriesSelectorItems}
                 limitEntriesItems={limitEntriesItems}
+                onTabChange={onTabChange}
+                activeTab={activeTab}
                 percent={35}
             />
             {!isLoading && (
-                <CardinalitySeries
+                <CardinalityDashboardContainer
                     formattedSeries={formattedSeries}
                     isCardinality={isCardinality}
                     isLoading={isLoading}
+                    activeTab={activeTab}
                 />
             )}
         </div>
     );
 };
+
+export type DarboardContainerProps = {
+    formattedSeries: any;
+    isCardinality: boolean;
+    isLoading: boolean;
+    activeTab: number;
+};
+
+export const CardinalityDashboardContainer = ({
+    formattedSeries,
+    isCardinality,
+    isLoading,
+    activeTab,
+}: DarboardContainerProps) => {
+    return (
+        <>
+            {activeTab === 0 && (
+                <CardinalitySeries
+                    formattedSeries={formattedSeries}
+                    isCardinality={isCardinality}
+                    isLoading={isLoading}
+                />
+            )}
+            {activeTab === 1 && <CardinalityTotals isLoading={isLoading} />}
+        </>
+    );
+};

packages/main/plugins/Cardinality/CardinalityDialog.tsx

@@ -16,7 +16,7 @@ import {
     Tooltip,
     Typography,
 } from "@mui/material";
-
+import ReplayIcon from "@mui/icons-material/Replay";
 import { ThemeProvider } from "@mui/styles";
 import styled from "@emotion/styled";
 import { DialogStyles } from "../settingsdialog/SettingsDialog";
@@ -29,6 +29,9 @@ const AlertCont = styled.div`
     background: ${({ theme }: any) => theme.shadow};
     #alert-dialog-title {
         color: ${({ theme }: any) => theme.contrast};
+        background: ${({theme}:any) => theme.deep};
+        border: 2px solid ${({theme}:any) => theme.shadow};
+        border-radius:8px;
         span {
             color: ${({ theme }: any) => theme.primary};
             padding: 2px 4px;
@@ -57,6 +60,13 @@ export type CardinalityDialogProps = {
     labelsRelated?: string[];
 };
 
+export type UndoCardinalityDialogProps = {
+    undoAction: (id: string) => void;
+    id: string;
+    query: string;
+    isLoading: boolean;
+};
+
 export type LabelRelatedProps = {
     label: string;
     theme: QrynTheme;
@@ -138,7 +148,6 @@ export default function CardinalityDialog({
     isLoading,
     isCustom = false,
     query = "",
-    labelsRelated = [],
 }: CardinalityDialogProps) {
     const [open, setOpen] = useState(false);
     const [confirmRemove, setConfirmRemove] = useState(false);
@@ -275,3 +284,129 @@ export default function CardinalityDialog({
         </ThemeProvider>
     );
 }
+
+export function UndoCardinalityDialog({
+    undoAction,
+    id,
+    isLoading,
+    query = "",
+}: UndoCardinalityDialogProps) {
+    const [open, setOpen] = useState(false);
+    const [confirmRemove, setConfirmRemove] = useState(false);
+    const theme = useTheme();
+
+    const handleClickOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const handleConfirm = () => {
+        setConfirmRemove((prev) => !prev);
+    };
+    async function handleUndoFingerprints() {
+        await undoAction(id);
+
+        // this should give a response from the server
+
+        setOpen(false);
+    }
+    return (
+        <ThemeProvider theme={theme}>
+            <div>
+                <Tooltip title={`Undo Delete fingerprints for ${query}`}>
+                    <div
+                        style={{
+                            display: "flex",
+                            flex: 1,
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }}
+                    >
+                        <ReplayIcon
+                            onClick={handleClickOpen}
+                            style={{
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                color: theme.primary,
+                                cursor: "pointer",
+                                height: "16px",
+                                width: "16px",
+                                // background:"#b8860b"
+                            }}
+                            fontSize={"small"}
+                        />
+                    </div>
+                </Tooltip>
+                <Dialog
+                    open={open}
+                    onClose={handleClose}
+                    aria-labelledby="alert-dialog-title"
+                    aria-describedby="alert-dialog-description"
+                    PaperProps={{
+                        classes: {
+                            root: DialogStyles,
+                        },
+                    }}
+                >
+                    <AlertCont>
+                        <DialogTitle id="alert-dialog-title">
+                            <>
+                                Are you sure you want to undo the delete action
+                                for the query{" "}
+                                <code
+                                    style={{
+                                        fontFamily: "monospace",
+                                        fontSize: ".75em",
+                                        padding: "4px 8px",
+                                        borderRadius: ".5em",
+                                        background: theme.shadow,
+                                    }}
+                                >
+                                    {query}
+                                </code>{" "}
+                                ?
+                            </>
+                        </DialogTitle>
+
+                        <DialogContent>
+                            <DialogContentText id="alert-dialog-description">
+                                <p style={{ marginTop: "10px" }}>
+                                    Click <em>Undo Delete Fingerprints</em> to
+                                    undo the delete fingerprints action.
+                                </p>
+
+                                <CheckboxWithLabel
+                                    checked={confirmRemove}
+                                    handleChange={handleConfirm}
+                                    theme={theme}
+                                    label={true}
+                                    text={
+                                        "I want to undo deletion of all fingerprints related to this labels."
+                                    }
+                                />
+                            </DialogContentText>
+                        </DialogContent>
+                        <DialogActions>
+                            <DialogCancelButton onClick={handleClose}>
+                                Cancel
+                            </DialogCancelButton>
+                            <DialogConfirmButton
+                                onClick={handleUndoFingerprints}
+                                active={!isLoading && confirmRemove}
+                                autoFocus
+                            >
+                                {!isLoading
+                                    ? "Undo Delete Fingerprints"
+                                    : "Undoing..."}
+                            </DialogConfirmButton>
+                        </DialogActions>
+                    </AlertCont>
+                </Dialog>
+            </div>
+        </ThemeProvider>
+    );
+}

packages/main/plugins/Cardinality/CardinalitySeries.tsx

@@ -10,6 +10,7 @@ type CardinalitySeriesProps = {
     formattedSeries: any;
     isCardinality: boolean;
     isLoading: boolean;
+
 };
 // This component is used to display the series data in the cardinality rows
 const CardinalitySeries: React.FC<CardinalitySeriesProps> = ({