FastAPI Integration

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# dev
+.vscode

src/components/config/Config.tsx

@@ -1,16 +1,13 @@
 import { CacheEnum, selectCachedValue } from "@/src/reduxStore/states/cachedValues";
 import { selectOrganization, setOrganization } from "@/src/reduxStore/states/general";
 import { ConfigManager } from "@/src/services/base/config";
-import { GET_ORGANIZATION } from "@/src/services/gql/queries/organizations";
-import { CHANGE_ORGANIZATION, UPDATE_CONFIG } from "@/src/services/gql/mutations/organizations";
 import { Configuration, LocalConfig } from "@/src/types/components/config/config"
 import { snakeCaseToCamelCase } from "@/submodules/javascript-functions/case-types-parser";
 import Dropdown2 from "@/submodules/react-components/components/Dropdown2";
-import { useMutation } from "@apollo/client";
 import { IconPlus, IconTrash } from "@tabler/icons-react";
 import { useEffect, useState } from "react"
 import { useSelector, useDispatch } from "react-redux";
-import { useLazyQuery } from "@apollo/client";
+import { changeOrganization, getOrganization, updateConfig } from "@/src/services/base/organization";
 
 export default function Config() {
     const dispatch = useDispatch();
@@ -22,10 +19,6 @@ export default function Config() {
     const [prepareTokenizedValues, setPrepareTokenizedValues] = useState<any[]>([]);
     const [preparedOptions, setPreparedOptions] = useState<any[]>([]);
 
-    const [refetchOrganization] = useLazyQuery(GET_ORGANIZATION, { fetchPolicy: 'no-cache' });
-    const [changeOrganizationMut] = useMutation(CHANGE_ORGANIZATION);
-    const [updateConfigMut] = useMutation(UPDATE_CONFIG);
-
     useEffect(() => {
         if (!ConfigManager.isInit()) return;
         setLocalConfig({
@@ -79,19 +72,19 @@ export default function Config() {
             updateDict[key] = value;
         }
         if (subkey == 'max_rows' || subkey == 'max_cols' || subkey == 'max_char_count') {
-            changeOrganizationMut({ variables: { orgId: organization.id, changes: JSON.stringify(updateDict.limit_checks) } }).then((res) => {
+            changeOrganization(organization.id, JSON.stringify(updateDict.limit_checks), (res) => {
                 if (!res?.data?.changeOrganization) {
                     window.alert('something went wrong with the update');
                 } else {
-                    refetchOrganization().then((res) => {
+                    getOrganization((res) => {
                         if (res.data["userOrganization"]) {
                             dispatch(setOrganization(res.data["userOrganization"]));
                         }
                     });
                 }
             });
         } else {
-            updateConfigMut({ variables: { dictStr: JSON.stringify(updateDict) } }).then((res) => {
+            updateConfig(JSON.stringify(updateDict), (res) => {
                 if (!res?.data?.updateConfig) {
                     window.alert('something went wrong with the update');
                 }

src/components/models-download/AddModelDownloadModal.tsx

@@ -4,14 +4,13 @@ import { Tooltip } from "@nextui-org/react";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { selectModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { useDispatch, useSelector } from "react-redux";
-import { useMutation } from "@apollo/client";
-import { MODEL_PROVIDER_DOWNLOAD_MODEL } from "@/src/services/gql/mutations/projects";
 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 { CacheEnum, selectCachedValue } from "@/src/reduxStore/states/cachedValues";
 import Dropdown2 from "@/submodules/react-components/components/Dropdown2";
+import { modelProviderDownloadModel } from "@/src/services/base/misc";
 
 const ACCEPT_BUTTON = { buttonCaption: 'Accept', useButton: true };
 
@@ -52,10 +51,8 @@ export default function AddModelDownloadModal() {
         setLineSeparatorIndex(filteredList.findIndex((model: any) => !model.description));
     }, [modelsDownloaded, filteredList, modalAddModel, modelsList, modelName]);
 
-    const [downloadModelMut] = useMutation(MODEL_PROVIDER_DOWNLOAD_MODEL);
-
     const addModel = useCallback(() => {
-        downloadModelMut({ variables: { modelName: modelName } }).then((res) => {
+        modelProviderDownloadModel(modelName, (res) => {
             const newModel = {
                 "name": modelName,
                 "date": dateAsUTCDate(new Date()).toLocaleString(),

src/components/models-download/DeleteModelDownloadModal.tsx

@@ -2,10 +2,9 @@ import { ModalButton, ModalEnum } from "@/src/types/shared/modal";
 import Modal from "../shared/modal/Modal";
 import { useCallback, useEffect, useState } from "react";
 import { removeModelDownloadByName } from "@/src/reduxStore/states/pages/models-downloaded";
-import { useMutation } from "@apollo/client";
-import { MODEL_PROVIDER_DELETE_MODEL } from "@/src/services/gql/mutations/projects";
 import { useDispatch, useSelector } from "react-redux";
 import { selectModal } from "@/src/reduxStore/states/modal";
+import { modelProviderDeleteModel } from "@/src/services/base/misc";
 
 const ABORT_BUTTON = { buttonCaption: 'Delete', useButton: true, disabled: false };
 
@@ -16,10 +15,8 @@ export default function DeleteModelDownloadModal() {
 
     const [abortButton, setAbortButton] = useState<ModalButton>(ABORT_BUTTON);
 
-    const [deleteModelDownload] = useMutation(MODEL_PROVIDER_DELETE_MODEL);
-
     const deleteModel = useCallback(() => {
-        deleteModelDownload({ variables: { modelName: modalDeleteModel.modelName } }).then(() => {
+        modelProviderDeleteModel(modalDeleteModel.modelName, (res) => {
             dispatch(removeModelDownloadByName(modalDeleteModel.modelName));
         });
     }, [modalDeleteModel.modelName]);

src/components/models-download/ModelsDownload.tsx

@@ -1,7 +1,5 @@
 import { selectModelsDownloaded, setModelsDownloaded } from "@/src/reduxStore/states/pages/models-downloaded";
-import { GET_MODEL_PROVIDER_INFO } from "@/src/services/gql/queries/projects";
 import { ModelsDownloaded, ModelsDownloadedStatus } from "@/src/types/components/models-downloaded/models-downloaded";
-import { useLazyQuery } from "@apollo/client";
 import { Tooltip } from "@nextui-org/react";
 import { IconAlertTriangleFilled, IconArrowLeft, IconBan, IconCheckbox, IconCircleCheckFilled, IconExternalLink, IconLoader, IconPlus, IconTrash } from "@tabler/icons-react";
 import { useRouter } from "next/router";
@@ -17,6 +15,7 @@ import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import AddModelDownloadModal from "./AddModelDownloadModal";
 import DeleteModelDownloadModal from "./DeleteModelDownloadModal";
 import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
+import { getModelProviderInfo } from "@/src/services/base/project";
 
 export default function ModelsDownload() {
     const router = useRouter();
@@ -26,14 +25,12 @@ export default function ModelsDownload() {
     const isAdmin = useSelector(selectIsAdmin);
     const modelsDownloaded = useSelector(selectModelsDownloaded);
 
-    const [refetchModelsDownload] = useLazyQuery(GET_MODEL_PROVIDER_INFO, { fetchPolicy: 'network-only', nextFetchPolicy: 'cache-first' });
-
     useEffect(() => {
         refetchModels();
     }, []);
 
     function refetchModels() {
-        refetchModelsDownload().then((res) => {
+        getModelProviderInfo((res) => {
             dispatch(setModelsDownloaded(res.data['modelProviderInfo']));
         });
     }

src/components/projects/AdminDeleteProjectModal.tsx

@@ -4,9 +4,8 @@ import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectIsAdmin } from "@/src/reduxStore/states/general";
 import { closeModal, selectModal } from "@/src/reduxStore/states/modal";
-import { useMutation } from "@apollo/client";
-import { DELETE_PROJECT } from "@/src/services/gql/mutations/projects";
 import { removeFromAllProjectsById } from "@/src/reduxStore/states/project";
+import { deleteProjectPost } from "@/src/services/base/project";
 
 const ACCEPT_BUTTON = { buttonCaption: "Delete and never show again", useButton: true };
 const ABORT_BUTTON = { buttonCaption: "Delete", useButton: true };
@@ -17,13 +16,10 @@ export default function AdminDeleteProjectModal() {
     const isAdmin = useSelector(selectIsAdmin);
     const modal = useSelector(selectModal(ModalEnum.ADMIN_DELETE_PROJECT));
 
-    const [deleteProjectByIdMut] = useMutation(DELETE_PROJECT, { fetchPolicy: "no-cache" });
-
-
     const adminDeleteProject = useCallback(() => {
         if (!isAdmin) return;
         const projectId = modal.projectId;
-        deleteProjectByIdMut({ variables: { projectId: projectId } }).then(() => {
+        deleteProjectPost(projectId, (res) => {
             dispatch(closeModal(ModalEnum.ADMIN_DELETE_PROJECT));
             dispatch(removeFromAllProjectsById(projectId));
         })

src/components/projects/ProjectCard.tsx

@@ -9,9 +9,8 @@ import { useRouter } from "next/router";
 import { useDispatch, useSelector } from "react-redux";
 import { NOT_AVAILABLE, UNKNOWN_USER } from "@/src/util/constants";
 import { IconArrowRight, IconX } from "@tabler/icons-react";
-import { useMutation } from "@apollo/client";
-import { DELETE_PROJECT } from "@/src/services/gql/mutations/projects";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
+import { deleteProjectPost } from "@/src/services/base/project";
 
 export default function ProjectCard(props: ProjectCardProps) {
     const router = useRouter();
@@ -21,13 +20,11 @@ export default function ProjectCard(props: ProjectCardProps) {
     const isAdmin = useSelector(selectIsAdmin);
     const user = useSelector(selectUser);
 
-    const [deleteProjectByIdMut] = useMutation(DELETE_PROJECT, { fetchPolicy: "no-cache" });
-
     function adminOpenOrDeleteProject(project: Project) {
         if (!isAdmin) return;
         const deleteInstant = isStringTrue(localStorage.getItem("adminInstantDelete"));
         if (deleteInstant) {
-            deleteProjectByIdMut({ variables: { projectId: project.id } }).then(() => {
+            deleteProjectPost(project.id, (res) => {
                 dispatch(closeModal(ModalEnum.ADMIN_DELETE_PROJECT));
                 dispatch(removeFromAllProjectsById(project.id));
             })

src/components/projects/ProjectsList.tsx

@@ -1,24 +1,22 @@
 import { selectInactiveOrganization, selectIsDemo, selectIsManaged, selectUser, setComments } from "@/src/reduxStore/states/general"
 import { selectAllProjects, setAllProjects } from "@/src/reduxStore/states/project";
-import { GET_OVERVIEW_STATS, GET_PROJECT_LIST } from "@/src/services/gql/queries/projects";
 import { Project, ProjectStatistics } from "@/src/types/components/projects/projects-list";
 import { CurrentPage } from "@/src/types/shared/general";
 import { percentRoundString } from "@/submodules/javascript-functions/general";
-import { useLazyQuery, useMutation } from "@apollo/client";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import YoutubeIntroduction from "./YoutubeIntroduction";
 import ButtonsContainer from "./ButtonsContainer";
 import ProjectCard from "./ProjectCard";
-import { GET_CAN_CREATE_LOCAL_ORG } from "@/src/services/gql/queries/organizations";
-import { ADD_USER_TO_ORGANIZATION, CREATE_ORGANIZATION } from "@/src/services/gql/mutations/organizations";
 import style from "@/src/styles/components/projects/projects-list.module.css";
 import AdminDeleteProjectModal from "./AdminDeleteProjectModal";
 import { setAllAttributes, setAllEmbeddings, setLabelingTasksAll } from "@/src/reduxStore/states/pages/settings";
 import { setOverviewFilters } from "@/src/reduxStore/states/tmp";
 import { setDataSlices, setFullSearchStore, setSearchGroupsStore } from "@/src/reduxStore/states/pages/data-browser";
 import { SearchGroup } from "@/submodules/javascript-functions/enums/enums";
 import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
+import { getAllProjects } from "@/src/services/base/project";
+import { addUserToOrganization, createOrganization, getCanCreateLocalOrg, getOverviewStats } from "@/src/services/base/organization";
 
 export default function ProjectsList() {
     const dispatch = useDispatch();
@@ -33,12 +31,6 @@ export default function ProjectsList() {
     const [canCreateOrg, setCanCreateOrg] = useState(false);
     const [dataLoaded, setDataLoaded] = useState(false);
 
-    const [refetchProjects] = useLazyQuery(GET_PROJECT_LIST, { fetchPolicy: "no-cache" });
-    const [refetchStats] = useLazyQuery(GET_OVERVIEW_STATS, { fetchPolicy: "cache-and-network" });
-    const [refetchCanCreateOrg] = useLazyQuery(GET_CAN_CREATE_LOCAL_ORG, { fetchPolicy: "no-cache" });
-    const [createOrgMut] = useMutation(CREATE_ORGANIZATION);
-    const [addUserToOrgMut] = useMutation(ADD_USER_TO_ORGANIZATION);
-
     useEffect(() => {
         dispatch(setLabelingTasksAll(null));
         dispatch(setOverviewFilters(null));
@@ -61,16 +53,16 @@ export default function ProjectsList() {
     }, [organizationInactive, user]);
 
     function refetchProjectsAndPostProcess() {
-        refetchProjects().then((res) => {
+        getAllProjects((res) => {
             const projects = res.data["allProjects"].edges.map((edge: any) => edge.node);
             dispatch(setAllProjects(projects));
             setDataLoaded(true);
         });
     }
 
     function refetchStatsAndPostProcess() {
-        refetchStats().then((res) => {
-            const stats = JSON.parse(res.data["overviewStats"]);
+        getOverviewStats((res) => {
+            const stats = res.data["overviewStats"];
             const statsDict = {};
             if (stats == null) return;
             stats.forEach((stat: ProjectStatistics) => {
@@ -88,17 +80,17 @@ export default function ProjectsList() {
             setDataLoaded(true);
             return;
         }
-        refetchCanCreateOrg().then((res) => {
+        getCanCreateLocalOrg(res => {
             const canCreate = res.data["canCreateLocalOrg"]
             setCanCreateOrg(canCreate);
             if (!canCreate) return;
             const localhostOrg = "localhost";
-            createOrgMut({ variables: { name: localhostOrg } }).then((res) => {
-                addUserToOrgMut({ variables: { userMail: user.mail, organizationName: localhostOrg } }).then((res) => {
+            createOrganization(localhostOrg, () => {
+                addUserToOrganization(user.mail, localhostOrg, () => {
                     location.reload();
                     setDataLoaded(true);
                 });
-            });
+            })
         });
     }
 

src/components/projects/SampleProjectsDropdown.tsx

@@ -1,17 +1,16 @@
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectAllProjects } from '@/src/reduxStore/states/project';
 import { ModalButton, ModalEnum } from '@/src/types/shared/modal';
 import { closeModal, openModal } from '@/src/reduxStore/states/modal';
 import Modal from '../shared/modal/Modal';
 import { IconAlertTriangle, IconFishHook, IconMessageCircle, IconNews } from '@tabler/icons-react';
-import { CREATE_SAMPLE_PROJECT } from '@/src/services/gql/mutations/projects';
 import { setSearchGroupsStore } from '@/src/reduxStore/states/pages/data-browser';
 import { selectProjectIdSampleProject, setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
+import { createSampleProject } from '@/src/services/base/project';
 
 const ACCEPT_BUTTON = { buttonCaption: "Create", closeAfterClick: false, useButton: true, disabled: true };
 
@@ -26,8 +25,6 @@ export default function SampleProjectsDropdown() {
     const [projectTypeInput, setProjectTypeInput] = useState("");
     const [projectNameExists, setProjectNameExists] = useState(false);
 
-    const [createSampleProjectMut] = useMutation(CREATE_SAMPLE_PROJECT);
-
     const importSampleProject = useCallback((projectName?: string, projectType?: string) => {
         const checkIfProjectExists = projects.find((project) => project.name === projectName);
         if (checkIfProjectExists) {
@@ -41,7 +38,7 @@ export default function SampleProjectsDropdown() {
         const projectTypeFinal = projectType ? projectType : projectTypeInput;
         dispatch(closeModal(ModalEnum.SAMPLE_PROJECT_TITLE));
         dispatch(setSearchGroupsStore({}));
-        createSampleProjectMut({ variables: { name: projectNameFinal, projectType: projectTypeFinal } }).then((res) => {
+        createSampleProject({ name: projectNameFinal, projectType: projectTypeFinal }, (res) => {
             dispatch(closeModal(ModalEnum.SAMPLE_PROJECT_TITLE));
             const projectId = res['data']['createSampleProject']['project'].id;
             dispatch(setProjectIdSampleProject(projectId));

src/components/projects/new/NewProject.tsx

@@ -5,8 +5,7 @@ import { selectUploadData, setUploadFileType } from "@/src/reduxStore/states/upl
 import Upload from "../../shared/upload/Upload";
 import { CacheEnum, selectCachedValue } from "@/src/reduxStore/states/cachedValues";
 import { setAllProjects } from "@/src/reduxStore/states/project";
-import { useLazyQuery } from "@apollo/client";
-import { GET_PROJECT_LIST } from "@/src/services/gql/queries/projects";
+import { getAllProjects } from "@/src/services/base/project";
 
 const UPLOAD_OPTION = { deleteProjectOnFail: true, tokenizerValues: [] };
 const COMPONENT_FILE_TYPE = UploadFileType.RECORDS_NEW;
@@ -17,11 +16,9 @@ export default function NewProject() {
 
     const [uploadOptions, setUploadOptions] = useState<UploadOptions>(UPLOAD_OPTION);
 
-    const [refetchProjects] = useLazyQuery(GET_PROJECT_LIST, { fetchPolicy: "no-cache" });
-
     useEffect(() => {
         dispatch(setUploadFileType(COMPONENT_FILE_TYPE));
-        refetchProjects().then((res) => {
+        getAllProjects((res) => {
             const projects = res.data["allProjects"].edges.map((edge: any) => edge.node);
             dispatch(setAllProjects(projects));
         });

src/components/projects/projectId/admin/DeletePersonalTokenModal.tsx

@@ -1,10 +1,9 @@
 import Modal from "@/src/components/shared/modal/Modal";
 import { selectModal } from "@/src/reduxStore/states/modal";
 import { selectProjectId } from "@/src/reduxStore/states/project";
-import { DELETE_PERSONAL_ACCESS_TOKEN } from "@/src/services/gql/mutations/project-admin";
+import { deletePersonalToken } from "@/src/services/base/project";
 import { PersonalTokenModalProps } from "@/src/types/components/projects/projectId/project-admin";
 import { ModalButton, ModalEnum } from "@/src/types/shared/modal";
-import { useMutation } from "@apollo/client";
 import { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 
@@ -14,18 +13,16 @@ export default function DeletePersonalToken(props: PersonalTokenModalProps) {
     const projectId = useSelector(selectProjectId);
     const modalDeleteToken = useSelector(selectModal(ModalEnum.DELETE_PERSONAL_TOKEN));
 
-    const [deletePersonalTokenMut] = useMutation(DELETE_PERSONAL_ACCESS_TOKEN);
-
-    const deletePersonalToken = useCallback(() => {
-        deletePersonalTokenMut({ variables: { projectId: projectId, tokenId: modalDeleteToken.tokenId } }).then((res) => {
+    const deletePersonalAccessToken = useCallback(() => {
+        deletePersonalToken(projectId, modalDeleteToken.tokenId, (res) => {
             props.refetchTokens();
         });
     }, [modalDeleteToken.tokenId, projectId]);
 
     const [abortButton, setAbortButton] = useState<ModalButton>(ABORT_BUTTON);
 
     useEffect(() => {
-        setAbortButton({ ...ABORT_BUTTON, emitFunction: deletePersonalToken });
+        setAbortButton({ ...ABORT_BUTTON, emitFunction: deletePersonalAccessToken });
     }, [modalDeleteToken]);
 
     return (<Modal modalName={ModalEnum.DELETE_PERSONAL_TOKEN} abortButton={abortButton}>