Skip to content

Commit abf412b

Browse files
JWittmeyerJWittmeyer
authored
Merge pull request #9 from code-kern-ai/release-updates
Release updates
2 parents d503519 + 1a6a0a4 commit abf412b

File tree

105 files changed

+1242
-1080
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

105 files changed

+1242
-1080
lines changed

‎README.md

+4-35
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,7 @@
1-
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1+
# refinery-ui [![Build Status](https://drone.dev.onetask.ai/api/badges/code-kern-ai/refinery-ui/status.svg?ref=refs/heads/dev)](https://drone.dev.kern.ai/code-kern-ai/refinery-ui)
2+
[![refinery repository](https://uploads-ssl.webflow.com/61e47fafb12bd56b40022a49/62c2f30f935f4d37dc864eeb_Kern%20refinery.png)](https://github.com/code-kern-ai/refinery)
23

3-
## Getting Started
4+
UI for [refinery](https://github.com/code-kern-ai/refinery). Used to interact with the whole system; to find out how to best work with the UI, check out our [docs](https://docs.kern.ai)
45

5-
First, run the development server:
66

7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
```
14-
15-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16-
17-
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
18-
19-
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
20-
21-
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22-
23-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24-
25-
## Learn More
26-
27-
To learn more about Next.js, take a look at the following resources:
28-
29-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31-
32-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33-
34-
## Deploy on Vercel
35-
36-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37-
38-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
7+
If you like what we're working on, please leave a ⭐ for [refinery](https://github.com/code-kern-ai/refinery)!

‎src/components/models-download/ModelsDownload.tsx

+12-21
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@ import LoadingIcon from "../shared/loading/LoadingIcon";
1111
import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
1212
import { ModalEnum } from "@/src/types/shared/modal";
1313
import { selectIsManaged } from "@/src/reduxStore/states/general";
14-
import { WebSocketsService } from "@/src/services/base/web-sockets/WebSocketsService";
1514
import { CurrentPage } from "@/src/types/shared/general";
1615
import { timer } from "rxjs";
17-
import { unsubscribeWSOnDestroy } from "@/src/services/base/web-sockets/web-sockets-helper";
1816
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
1917
import AddModelDownloadModal from "./AddModelDownloadModal";
2018
import DeleteModelDownloadModal from "./DeleteModelDownloadModal";
19+
import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
2120

2221
export default function ModelsDownload() {
2322
const router = useRouter();
@@ -28,14 +27,8 @@ export default function ModelsDownload() {
2827

2928
const [refetchModelsDownload] = useLazyQuery(GET_MODEL_PROVIDER_INFO, { fetchPolicy: 'network-only', nextFetchPolicy: 'cache-first' });
3029

31-
useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.MODELS_DOWNLOAD]), []);
32-
3330
useEffect(() => {
3431
refetchModels();
35-
WebSocketsService.subscribeToNotification(CurrentPage.MODELS_DOWNLOAD, {
36-
whitelist: ['model_provider_download'],
37-
func: handleWebsocketNotification
38-
});
3932
}, []);
4033

4134
function refetchModels() {
@@ -53,11 +46,9 @@ export default function ModelsDownload() {
5346
}
5447
}, []);
5548

56-
useEffect(() => {
57-
WebSocketsService.updateFunctionPointer(null, CurrentPage.MODELS_DOWNLOAD, handleWebsocketNotification)
58-
}, [handleWebsocketNotification]);
49+
useWebsocket(CurrentPage.MODELS_DOWNLOAD, handleWebsocketNotification);
5950

60-
return (<div className="p-4 bg-gray-100 h-screen overflow-y-auto flex-1 flex flex-col">
51+
return (<div className="p-4 bg-gray-100 flex-1 flex flex-col h-[calc(100vh-4rem)] overflow-y-auto">
6152
<div className="flex flex-row items-center">
6253
<button onClick={() => router.back()} className="text-green-800 text-sm font-medium">
6354
<IconArrowLeft className="h-5 w-5 inline-block text-green-800" />
@@ -157,15 +148,15 @@ export default function ModelsDownload() {
157148
</table>
158149
</div>
159150
</div>
160-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-1 align-top">
161-
<div>
162-
<button onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
163-
disabled={!isManaged}
164-
className={`mr-1 inline-flex items-center px-2.5 py-2 border border-gray-300 shadow-sm text-xs font-semibold rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50`}>
165-
<IconPlus className="h-4 w-4 mr-1" />
166-
Add new model
167-
</button>
168-
</div>
151+
</div>
152+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-1 align-top">
153+
<div>
154+
<button onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
155+
disabled={!isManaged}
156+
className={`mr-1 inline-flex items-center px-2.5 py-2 border border-gray-300 shadow-sm text-xs font-semibold rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50`}>
157+
<IconPlus className="h-4 w-4 mr-1" />
158+
Add new model
159+
</button>
169160
</div>
170161
</div>
171162
<AddModelDownloadModal />

‎src/components/projects/ButtonsContainer.tsx

+3-15
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ import { useCallback, useEffect, useState } from "react";
99
import { useDispatch, useSelector } from "react-redux"
1010
import ModalUpload from "../shared/upload/ModalUpload";
1111
import SampleProjectsDropdown from "./SampleProjectsDropdown";
12-
import { WebSocketsService } from "@/src/services/base/web-sockets/WebSocketsService";
13-
import { CurrentPage } from "@/src/types/shared/general";
14-
import { unsubscribeWSOnDestroy } from "@/src/services/base/web-sockets/web-sockets-helper";
12+
import { CurrentPage, CurrentPageSubKey } from "@/src/types/shared/general";
13+
import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
1514

1615
const BASE_OPTIONS = { reloadOnFinish: false, deleteProjectOnFail: true, closeModalOnClick: true, isModal: true, navigateToProject: true, showBadPasswordMsg: null };
1716

@@ -24,15 +23,6 @@ export default function ButtonsContainer() {
2423
const [uploadOptions, setUploadOptions] = useState<UploadOptions>(BASE_OPTIONS);
2524
const [showBadPasswordMsg, setShowBadPasswordMsg] = useState(false);
2625

27-
useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.PROJECTS]), []);
28-
29-
useEffect(() => {
30-
WebSocketsService.subscribeToNotification(CurrentPage.PROJECTS, {
31-
whitelist: ['bad_password'],
32-
func: handleWebsocketNotification
33-
});
34-
}, []);
35-
3626
useEffect(() => {
3727
setUploadOptions({ ...BASE_OPTIONS, showBadPasswordMsg: showBadPasswordMsg });
3828
}, [showBadPasswordMsg]);
@@ -43,9 +33,7 @@ export default function ButtonsContainer() {
4333
}
4434
}, []);
4535

46-
useEffect(() => {
47-
WebSocketsService.updateFunctionPointer(null, CurrentPage.PROJECTS, handleWebsocketNotification)
48-
}, [handleWebsocketNotification]);
36+
useWebsocket(CurrentPage.PROJECTS, handleWebsocketNotification, null, CurrentPageSubKey.BUTTONS_CONTAINER);
4937

5038
return (
5139
user && user.role === UserRole.ENGINEER ? (<div>

‎src/components/projects/ProjectCard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { selectIsAdmin, selectIsDemo, selectUser } from "@/src/reduxStore/states/general";
22
import { closeModal, setModalStates } from "@/src/reduxStore/states/modal";
3-
import { removeFromAllProjectsById, setActiveProject } from "@/src/reduxStore/states/project";
3+
import { removeFromAllProjectsById } from "@/src/reduxStore/states/project";
44
import { Project, ProjectCardProps, ProjectStatus } from "@/src/types/components/projects/projects-list";
55
import { ModalEnum } from "@/src/types/shared/modal";
66
import { isStringTrue } from "@/submodules/javascript-functions/general";

‎src/components/projects/ProjectsList.tsx

+2-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { selectInactiveOrganization, selectIsDemo, selectIsManaged, selectUser, setComments } from "@/src/reduxStore/states/general"
22
import { selectAllProjects, setAllProjects } from "@/src/reduxStore/states/project";
3-
import { WebSocketsService } from "@/src/services/base/web-sockets/WebSocketsService";
43
import { GET_OVERVIEW_STATS, GET_PROJECT_LIST } from "@/src/services/gql/queries/projects";
54
import { Project, ProjectStatistics } from "@/src/types/components/projects/projects-list";
65
import { CurrentPage } from "@/src/types/shared/general";
@@ -15,14 +14,12 @@ import { GET_CAN_CREATE_LOCAL_ORG } from "@/src/services/gql/queries/organizatio
1514
import { ADD_USER_TO_ORGANIZATION, CREATE_ORGANIZATION } from "@/src/services/gql/mutations/organizations";
1615
import style from "@/src/styles/components/projects/projects-list.module.css";
1716
import { useRouter } from "next/router";
18-
import { unsubscribeWSOnDestroy } from "@/src/services/base/web-sockets/web-sockets-helper";
1917
import AdminDeleteProjectModal from "./AdminDeleteProjectModal";
2018
import { setAllAttributes, setAllEmbeddings, setLabelingTasksAll } from "@/src/reduxStore/states/pages/settings";
2119
import { setOverviewFilters } from "@/src/reduxStore/states/tmp";
2220
import { setDataSlices, setFullSearchStore, setSearchGroupsStore } from "@/src/reduxStore/states/pages/data-browser";
23-
import { closeModal } from "@/src/reduxStore/states/modal";
24-
import { ModalEnum } from "@/src/types/shared/modal";
2521
import { SearchGroup } from "@/submodules/javascript-functions/enums/enums";
22+
import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
2623

2724
export default function ProjectsList() {
2825
const router = useRouter();
@@ -44,13 +41,7 @@ export default function ProjectsList() {
4441
const [createOrgMut] = useMutation(CREATE_ORGANIZATION);
4542
const [addUserToOrgMut] = useMutation(ADD_USER_TO_ORGANIZATION);
4643

47-
useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.PROJECTS]), []);
48-
4944
useEffect(() => {
50-
WebSocketsService.subscribeToNotification(CurrentPage.PROJECTS, {
51-
whitelist: ['project_created', 'project_deleted', 'project_update', 'file_upload'],
52-
func: handleWebsocketNotification
53-
});
5445
dispatch(setLabelingTasksAll(null));
5546
dispatch(setOverviewFilters(null));
5647
dispatch(setSearchGroupsStore(null));
@@ -59,7 +50,6 @@ export default function ProjectsList() {
5950
dispatch(setAllEmbeddings([]));
6051
dispatch(setDataSlices([]));
6152
dispatch(setComments(null));
62-
dispatch(closeModal(ModalEnum.COMMENTS_SECTION));
6353
}, []);
6454

6555
useEffect(() => {
@@ -120,9 +110,7 @@ export default function ProjectsList() {
120110
}
121111
}, []);
122112

123-
useEffect(() => {
124-
WebSocketsService.updateFunctionPointer(null, CurrentPage.PROJECTS, handleWebsocketNotification)
125-
}, [handleWebsocketNotification]);
113+
useWebsocket(CurrentPage.PROJECTS, handleWebsocketNotification);
126114

127115
return (
128116
<div>

‎src/components/projects/projectId/admin/ProjectAdmin.tsx

+6-17
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@ import { useDispatch, useSelector } from "react-redux";
1313
import NewPersonalToken from "./NewPersonalTokenModal";
1414
import DeletePersonalToken from "./DeletePersonalTokenModal";
1515
import { CurrentPage } from "@/src/types/shared/general";
16-
import { WebSocketsService } from "@/src/services/base/web-sockets/WebSocketsService";
1716
import { useRouter } from "next/router";
1817
import { selectIsAdmin } from "@/src/reduxStore/states/general";
19-
import { unsubscribeWSOnDestroy } from "@/src/services/base/web-sockets/web-sockets-helper";
18+
import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
2019

2120
export default function ProjectAdmin() {
2221
const router = useRouter();
@@ -29,8 +28,6 @@ export default function ProjectAdmin() {
2928

3029
const [refetchAccessTokens] = useLazyQuery(GET_ALL_PERSONAL_ACCESS_TOKENS, { fetchPolicy: "network-only" });
3130

32-
useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.ADMIN_PAGE]), []);
33-
3431
useEffect(() => {
3532
if (!projectId) return;
3633
refetchAccessTokensAndProcess();
@@ -41,11 +38,6 @@ export default function ProjectAdmin() {
4138
return;
4239
}
4340

44-
WebSocketsService.subscribeToNotification(CurrentPage.ADMIN_PAGE, {
45-
projectId: projectId,
46-
whitelist: ['pat'],
47-
func: handleWebsocketNotification
48-
});
4941
}, [projectId]);
5042

5143
function refetchAccessTokensAndProcess() {
@@ -64,19 +56,16 @@ export default function ProjectAdmin() {
6456
}
6557
}, [accessTokens]);
6658

67-
useEffect(() => {
68-
if (!projectId) return;
69-
WebSocketsService.updateFunctionPointer(projectId, CurrentPage.ADMIN_PAGE, handleWebsocketNotification)
70-
}, [handleWebsocketNotification, projectId]);
59+
useWebsocket(CurrentPage.ADMIN_PAGE, handleWebsocketNotification, projectId);
7160

7261
return (<>
7362
{accessTokens && <div className="p-4 bg-gray-100 h-full overflow-y-auto flex-1 flex flex-col">
7463
<div className="text-lg leading-6 text-gray-900 font-medium inline-block w-full">
7564
<label>Personal Access Tokens</label>
7665
</div>
7766
<div className="mt-1">
78-
<div className="text-sm leading-5 font-medium text-gray-700 inline-block">Manage project-based personal access tokens used to interact with refineries commercial proxy.</div>
79-
<div className="inline-block min-w-full align-middle">
67+
<div className="text-sm leading-5 font-medium text-gray-700 inline-block">Manage project-based personal access tokens used to interact with Refinery’s commercial proxy.</div>
68+
<div className="mt-2 inline-block min-w-full align-middle">
8069
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
8170
<table className="min-w-full divide-y divide-gray-300">
8271
<thead className="bg-gray-50">
@@ -108,7 +97,7 @@ export default function ProjectAdmin() {
10897
{accessTokens.map((token: PersonalAccessToken, index: number) => (<tr key={token.id} className={`${index % 2 != 0 ? 'bg-gray-50' : 'bg-white'}`}>
10998
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.name}</td>
11099
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.scope}</td>
111-
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.createdAt}</td>
100+
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.createdBy}</td>
112101
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.createdAt}</td>
113102
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.expiresAt}</td>
114103
<td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.lastUsed}</td>
@@ -126,7 +115,7 @@ export default function ProjectAdmin() {
126115
<Tooltip content={TOOLTIPS_DICT.ADMIN_PAGE.NEW_ACCESS_TOKEN} color="invert" placement="right">
127116
<button onClick={() => dispatch(openModal(ModalEnum.NEW_PERSONAL_TOKEN))}
128117
className="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-semibold rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none cursor-pointer">
129-
<IconPlus size={20} />
118+
<IconPlus className="mr-1" size={20} />
130119
Add token
131120
</button>
132121
</Tooltip>

0 commit comments

Comments
 (0)