UI improvements (#58)

* Kern Table in refinery

* Heuristic statistics

* Updated heuristics statistics with tooltips

* Submodules updated

* Submodules updated

* Submodules update

* javascript

* PR comments

* Submodules merge

---------

Co-authored-by: LennartSchmidtKern <[email protected]>

Author: lumburovskalina

src/components/models-download/AddModelDownloadModal.tsx

@@ -7,11 +7,12 @@ import { useDispatch, useSelector } from "react-redux";
 import { useCallback, useEffect, useState } from "react";
 import { dateAsUTCDate } from "@/submodules/javascript-functions/date-parser";
 import { extentModelsDownloaded, selectModelsDownloaded } from "@/src/reduxStore/states/pages/models-downloaded";
-import { ModelsDownloaded, ModelsDownloadedStatus } from "@/src/types/components/models-downloaded/models-downloaded";
+import { ModelsDownloaded } from "@/src/types/components/models-downloaded/models-downloaded";
 import { CacheEnum, selectCachedValue } from "@/src/reduxStore/states/cachedValues";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import { modelProviderDownloadModel } from "@/src/services/base/misc";
 import { PlatformType } from "@/src/types/components/projects/projectId/settings/embeddings";
+import { ModelsDownloadedStatus } from "@/submodules/javascript-functions/enums/enums";
 
 const ACCEPT_BUTTON = { buttonCaption: 'Accept', useButton: true };
 

src/components/models-download/ModelsDownload.tsx

@@ -1,11 +1,10 @@
 import { selectModelsDownloaded, setModelsDownloaded } from "@/src/reduxStore/states/pages/models-downloaded";
-import { ModelsDownloaded, ModelsDownloadedStatus } from "@/src/types/components/models-downloaded/models-downloaded";
 import { Tooltip } from "@nextui-org/react";
 import { IconAlertTriangleFilled, IconArrowLeft, IconCircleCheckFilled, IconExternalLink, IconLoader, IconPlus, IconTrash } from "@tabler/icons-react";
 import { useRouter } from "next/router";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import LoadingIcon from "../shared/loading/LoadingIcon";
+import LoadingIcon from "../../../submodules/react-components/components/LoadingIcon";
 import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { selectIsAdmin, selectOrganizationId } from "@/src/reduxStore/states/general";
@@ -16,17 +15,30 @@ import DeleteModelDownloadModal from "./DeleteModelDownloadModal";
 import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
 import { getModelProviderInfo } from "@/src/services/base/project";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
+import { MODELS_DOWNLOAD_TABLE_COLUMNS, prepareTableBodyModelsDownload } from "@/src/util/table-preparations/models-download";
+import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
 
 export default function ModelsDownload() {
     const router = useRouter();
     const dispatch = useDispatch();
     const isAdmin = useSelector(selectIsAdmin);
     const modelsDownloaded = useSelector(selectModelsDownloaded);
 
+    const [preparedValues, setPreparedValues] = useState([]);
+
     useEffect(() => {
         refetchModels();
     }, []);
 
+    useEffect(() => {
+        if (!modelsDownloaded) return;
+        setPreparedValues(prepareTableBodyModelsDownload(modelsDownloaded, openDeleteModal, isAdmin));
+    }, [modelsDownloaded]);
+
+    function openDeleteModal(model) {
+        dispatch(setModalStates(ModalEnum.DELETE_MODEL_DOWNLOAD, { modelName: model.name, open: true }));
+    }
+
     function refetchModels() {
         getModelProviderInfo((res) => {
             dispatch(setModelsDownloaded(res));
@@ -58,79 +70,10 @@ export default function ModelsDownload() {
         <div className="mt-1">
             <div className="inline-block min-w-full align-middle">
                 <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                    <table className="min-w-full divide-y divide-gray-300">
-                        <thead className="bg-gray-50">
-                            <tr>
-                                <th scope="col"
-                                    className="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
-                                    Name</th>
-                                <th scope="col"
-                                    className="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
-                                    Revision</th>
-                                <th scope="col"
-                                    className="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
-                                    Link</th>
-                                <th scope="col"
-                                    className="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
-                                    Download date</th>
-                                <th scope="col"
-                                    className="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
-                                    Size</th>
-                                <th scope="col"
-                                    className="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
-                                    Status</th>
-                                <th scope="col"
-                                    className="px-3 py-2 text-center text-xs font-medium uppercase tracking-wide text-gray-500">
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody className="divide-y divide-gray-200">
-                            {modelsDownloaded && modelsDownloaded.map((model: ModelsDownloaded, index: number) => (
-                                <tr key={model.name} className={`${index % 2 != 0 ? 'bg-gray-50' : 'bg-white'}`}>
-                                    <td className="text-center px-3 py-2 text-sm text-gray-500">
-                                        <span className="inline-block mr-2">{model.name}</span>
-                                    </td>
-                                    <td className="text-center px-3 py-2 text-sm text-gray-500">
-                                        {model.revision ? model.revision : '-'}
-                                    </td>
-                                    <td className="text-center px-3 py-2 text-sm text-gray-500">
-                                        <div className="flex justify-center">
-                                            {model.link && <a href={model.link} target="_blank">
-                                                <IconExternalLink className="h-5 w-5" />
-                                            </a>}
-                                        </div>
-                                    </td>
-                                    <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
-                                        {model.date != '0' && (model.status === ModelsDownloadedStatus.FINISHED || model.status === ModelsDownloadedStatus.DOWNLOADING) ? model.parseDate : '-'}
-                                        {model.status === ModelsDownloadedStatus.INITIALIZING && <>{model.date}</>}
-                                    </td>
-                                    <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
-                                        {model.status === ModelsDownloadedStatus.FINISHED ? model.sizeFormatted : '-'}
-                                    </td>
-                                    <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
-                                        <div className="flex justify-center">
-                                            {model.status === ModelsDownloadedStatus.FINISHED && <Tooltip content={TOOLTIPS_DICT.GENERAL.SUCCESSFULLY_CREATED} color="invert" placement="top" className="cursor-auto">
-                                                <IconCircleCheckFilled className="h-6 w-6 text-green-500" />
-                                            </Tooltip>}
-                                            {model.status === ModelsDownloadedStatus.FAILED && <Tooltip content={TOOLTIPS_DICT.GENERAL.ERROR} color="invert" placement="top" className="cursor-auto">
-                                                <IconAlertTriangleFilled className="h-6 w-6 text-red-500" />
-                                            </Tooltip>}
-                                            {model.status === ModelsDownloadedStatus.DOWNLOADING && <Tooltip content={TOOLTIPS_DICT.GENERAL.DOWNLOADING} color="invert" placement="top" className="cursor-auto">
-                                                <LoadingIcon />
-                                            </Tooltip>}
-                                            {model.status === ModelsDownloadedStatus.INITIALIZING && <Tooltip content={TOOLTIPS_DICT.GENERAL.INITIALIZING} color="invert" placement="top" className="cursor-auto">
-                                                <IconLoader className="h-6 w-6 text-gray-500" />
-                                            </Tooltip>}
-                                        </div>
-                                    </td>
-                                    <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">
-                                        {isAdmin && <IconTrash onClick={() => dispatch(setModalStates(ModalEnum.DELETE_MODEL_DOWNLOAD, { modelName: model.name, open: true }))}
-                                            className="h-6 w-6 text-red-700 cursor-pointer" />}
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
+                    <KernTable
+                        headers={MODELS_DOWNLOAD_TABLE_COLUMNS}
+                        values={preparedValues}
+                    />
                 </div>
             </div>
         </div>

src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx

@@ -18,7 +18,7 @@ import { getPythonFunctionRegExMatch, toPythonFunctionName } from "@/submodules/
 import DangerZone from "@/src/components/shared/danger-zone/DangerZone";
 import { DangerZoneEnum } from "@/src/types/shared/danger-zone";
 import ContainerLogs from "@/src/components/shared/logs/ContainerLogs";
-import LoadingIcon from "@/src/components/shared/loading/LoadingIcon";
+import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
 import { debounceTime, distinctUntilChanged, fromEvent, timer } from "rxjs";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { selectAllUsers, selectOrganizationId, setComments } from "@/src/reduxStore/states/general";

src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx

@@ -1,4 +1,4 @@
-import LoadingIcon from "@/src/components/shared/loading/LoadingIcon";
+import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
 import { setModalStates } from "@/src/reduxStore/states/modal";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { ExecutionContainerProps, SampleRecord } from "@/src/types/components/projects/projectId/settings/attribute-calculation";

src/components/projects/projectId/data-browser/DataBrowserRecords.tsx

@@ -7,7 +7,7 @@ import { Slice } from '@/submodules/javascript-functions/enums/enums';
 import { Tooltip } from '@nextui-org/react';
 import { IconAdjustments, IconAlertTriangleFilled, IconChartCircles, IconFilter, IconFilterOff, IconTriangleFilled } from '@tabler/icons-react';
 import { useDispatch, useSelector } from 'react-redux';
-import LoadingIcon from '@/src/components/shared/loading/LoadingIcon';
+import LoadingIcon from '@/submodules/react-components/components/LoadingIcon';
 import { selectVisibleAttributesHeuristics } from '@/src/reduxStore/states/pages/settings';
 import RecordList from './RecordList';
 import { useRouter } from 'next/router';

src/components/projects/projectId/edit-records/SyncRecordsModal.tsx

@@ -1,4 +1,4 @@
-import LoadingIcon from "@/src/components/shared/loading/LoadingIcon";
+import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
 import Modal from "@/src/components/shared/modal/Modal";
 import { selectModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { selectProjectId } from "@/src/reduxStore/states/project";

src/components/projects/projectId/heuristics/heuristicId/active-learning/ActiveLearning.tsx

@@ -27,7 +27,7 @@ import { CommentDataManager } from "@/src/util/classes/comments";
 import { InformationSourceCodeLookup, InformationSourceExamples } from "@/src/util/classes/heuristics";
 import { getInformationSourceTemplate } from "@/src/util/components/projects/projectId/heuristics/heuristics-helper";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
-import LoadingIcon from "@/src/components/shared/loading/LoadingIcon";
+import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
 import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
 import { getAllComments } from "@/src/services/base/comment";
 import { getLabelingTasksByProjectId } from "@/src/services/base/project";

src/components/projects/projectId/heuristics/heuristicId/labeling-function/CalculationProgress.tsx

@@ -1,4 +1,4 @@
-import LoadingIcon from "@/src/components/shared/loading/LoadingIcon";
+import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
 import { selectHeuristic } from "@/src/reduxStore/states/pages/heuristics";
 import { Status } from "@/src/types/shared/statuses";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";

src/components/projects/projectId/heuristics/heuristicId/labeling-function/LabelingFunction.tsx

@@ -29,7 +29,7 @@ import { InformationSourceCodeLookup, InformationSourceExamples } from "@/src/ut
 import { getInformationSourceTemplate } from "@/src/util/components/projects/projectId/heuristics/heuristics-helper";
 import KernDropdown from "@/submodules/react-components/components/KernDropdown";
 import { Attribute } from "@/src/types/components/projects/projectId/settings/data-schema";
-import LoadingIcon from "@/src/components/shared/loading/LoadingIcon";
+import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
 import { parseContainerLogsData } from "@/submodules/javascript-functions/logs-parser";
 import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
 import { getAllComments } from "@/src/services/base/comment";

src/components/projects/projectId/heuristics/heuristicId/shared/HeuristicRunButtons.tsx

@@ -1,4 +1,4 @@
-import LoadingIcon from "@/src/components/shared/loading/LoadingIcon";
+import LoadingIcon from "@/submodules/react-components/components/LoadingIcon";
 import { selectHeuristic } from "@/src/reduxStore/states/pages/heuristics";
 import { selectProjectId } from "@/src/reduxStore/states/project";
 import { createTask } from "@/src/services/base/heuristic";