process

ui/src/core/extensions/extensions.ts

@@ -2,7 +2,8 @@ import { ArrayExtensions } from "./array";
 import { MapExtensions } from "./map";
 import { StringExtensions } from "./string";
 
-export type CallBackFunction = <T>(value: T) => void;
+export type CallBackVoidFunction = <T>(value: T) => void;
+export type CallBackStringVoidFunction = (value: string) => void;
 
 declare global {
   interface Array<T> {
@@ -17,7 +18,7 @@ declare global {
     isEmpty(): boolean;
   }
   interface Map<K, V> {
-    addValueOrMakeCallback(key: K, value: V, callBack: CallBackFunction): void;
+    addValueOrMakeCallback(key: K, value: V, callBack: CallBackVoidFunction): void;
   }
 }
 export const extensions = () => {

ui/src/core/model/ui_base_error.ts

@@ -0,0 +1,6 @@
+export class UiBaseError {
+  text: string;
+  constructor(text: string) {
+    this.text = text;
+  }
+}

ui/src/core/repository/http_repository.ts

@@ -16,18 +16,32 @@ export class HttpError extends Error {
 
 export class HttpRepository {
   private server = "http://localhost:4001";
+  public async formDataRequest<T>(method: HttpMethod, url: string, data?: any): Promise<Result<HttpError, T>> {
+    let formData = new FormData();
+    formData.append("file", data);
 
-  public async jsonRequest<T>(
-    method: HttpMethod,
-    url: string,
-    data?: any
-  ): Promise<Result<HttpError, T>> {
+    const reqInit = {
+      body: formData,
+      method: method,
+    };
+
+    if (data !== undefined) {
+      reqInit["body"] = data;
+    }
+    const response = await fetch(this.server + url, reqInit);
+    if (response.status !== 200) {
+      throw Result.error(new Error(await response.json()));
+    }
+    return Result.ok(response.text as T);
+  }
+  public async jsonRequest<T>(method: HttpMethod, url: string, data?: any): Promise<Result<HttpError, T>> {
     try {
       const reqInit = {
         body: data,
         method: method,
         headers: { "Content-Type": "application/json" },
       };
+      console.log(reqInit);
       if (data !== undefined) {
         reqInit["body"] = JSON.stringify(data);
       }
@@ -37,28 +51,25 @@ export class HttpRepository {
         return Result.error(new HttpError(this.server + url, response.status));
       }
 
-      return Result.ok(await  response.json());
+      return Result.ok(await response.json());
     } catch (error) {
       return Result.error(new HttpError(error, 0));
     }
   }
 
-  public async request<T>(
-    method: HttpMethod,
-    url: string,
-    data?: any
-  ): Promise<T> {
+  public async request<T>(method: HttpMethod, url: string, data?: any): Promise<Result<HttpError, T>> {
     const reqInit = {
       body: data,
       method: method,
     };
+
     if (data !== undefined) {
       reqInit["body"] = data;
     }
     const response = await fetch(this.server + url, reqInit);
     if (response.status !== 200) {
-      throw new Error(await response.json());
+      throw Result.error(new Error(await response.json()));
     }
-    return response.json();
+    return Result.ok(response.text as T);
   }
 }

ui/src/core/routers/routers.tsx

@@ -21,18 +21,17 @@ import {
   CreateProcessScreen,
   CreateProcessScreenPath,
 } from "../../features/create_process/presentation/create_process_screen";
-import { ProjectRepository } from "../../features/all_projects/data/project_repository";
 import {
   CreateProjectInstancePath,
   CreateProjectInstanceScreen,
 } from "../../features/create_project_instance/create_project_instance";
+import { SceneManger, SceneManagerPath } from "../../features/scene_manager/scene_manager";
 
 const idURL = ":id";
 
 export const router = createBrowserRouter([
   {
     path: AllProjectScreenPath,
-    loader: new ProjectRepository().loader,
     element: <AllProjectScreen />,
   },
   {
@@ -63,4 +62,8 @@ export const router = createBrowserRouter([
     path: CreateProjectInstancePath + idURL,
     element: <CreateProjectInstanceScreen />,
   },
+  {
+    path: SceneManagerPath + idURL,
+    element: <SceneManger />,
+  },
 ]);

ui/src/core/store/base_store.ts

@@ -1,22 +1,49 @@
 // TODO(IDONTSUDO): нужно переписать все  запросы под BaseStore
 
 import { Result } from "../helper/result";
+import { UiBaseError } from "../model/ui_base_error";
+import { HttpError } from "../repository/http_repository";
 
-export class BaseStore {
+export type CoreError = HttpError | Error;
+
+export abstract class UiLoader {
   isLoading = false;
-  isError = false;
-
   async loadingHelper<T>(callBack: Promise<Result<any, T>>) {
     this.isLoading = true;
 
     const result = await callBack;
     if (result.isFailure()) {
-      this.isError = true;
       this.isLoading = false;
+      this.errorHandingStrategy(result.error);
       return result.forward();
     }
 
     this.isLoading = false;
     return result;
   }
+  abstract errorHandingStrategy: (error?: any) => void;
+
+  mapOk = async <T>(property: string, callBack: Promise<Result<CoreError, T>>) => {
+    return (
+      (await this.loadingHelper(callBack))
+        // eslint-disable-next-line array-callback-return
+        .map((el) => {
+          // @ts-ignore
+          this[property] = el;
+        })
+    );
+  };
+}
+export class SimpleErrorState extends UiLoader {
+  errorHandingStrategy = () => {
+    this.isError = true;
+  };
+  isError = false;
+}
+
+export abstract class UiErrorState<T> extends UiLoader {
+  abstract errorHandingStrategy: (error: T) => void;
+  abstract init(): Promise<any>;
+  dispose() {}
+  errors: UiBaseError[] = [];
 }

ui/src/features/all_projects/data/project_repository.ts

@@ -1,27 +1,16 @@
-import { redirect } from "react-router-dom";
-import { ActivePipeline } from "../../../core/model/active_pipiline";
-import {
-  HttpMethod,
-  HttpRepository,
-} from "../../../core/repository/http_repository";
-import { PipelineInstanceScreenPath } from "../../pipeline_instance_main_screen/pipeline_instance_screen";
+import { ActivePipeline } from "../../../core/model/active_pipeline";
+import { HttpMethod, HttpRepository } from "../../../core/repository/http_repository";
 import { IProjectModel } from "../model/project_model";
 
 export class ProjectRepository extends HttpRepository {
   async getAllProject() {
-    return this.jsonRequest<IProjectModel[]>(HttpMethod.GET, "/project");
+    return this.jsonRequest<IProjectModel[]>(HttpMethod.GET, "/project_instance");
   }
-  
+
   async getActivePipeline() {
     return this.jsonRequest<ActivePipeline>(HttpMethod.GET, "/realtime");
   }
-  loader = async () => {
-    const result = await this.getActivePipeline();
-
-    // if (result.isSuccess() && result.value.projectUUID !== null) {
-    //   return redirect(PipelineInstanceScreenPath + result.value.projectUUID);
-    // }
-
-    return null;
-  };
+  async setActivePipeline(id: string) {
+    return this.jsonRequest(HttpMethod.POST, `/project_instance/set/active/project?id=${id}`);
+  }
 }

ui/src/features/all_projects/presentation/all_projects_screen.tsx

@@ -4,13 +4,18 @@ import { ProjectRepository } from "../data/project_repository";
 import { LoadPage } from "../../../core/ui/pages/load_page";
 import { observer } from "mobx-react-lite";
 import { SelectProjectScreenPath } from "../../select_project/presentation/select_project";
+import { useNavigate } from "react-router-dom";
+import { Button } from "antd";
+import { PipelineInstanceScreenPath } from "../../pipeline_instance_main_screen/pipeline_instance_screen";
 
 export const AllProjectScreenPath = "/";
- 
 export const AllProjectScreen: React.FunctionComponent = observer(() => {
-  const [allProjectStore] = React.useState(
-    () => new AllProjectStore(new ProjectRepository())
-  );
+  const [allProjectStore] = React.useState(() => new AllProjectStore(new ProjectRepository()));
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    allProjectStore.init();
+  }, [allProjectStore]);
 
   return (
     <>
@@ -23,8 +28,33 @@ export const AllProjectScreen: React.FunctionComponent = observer(() => {
         isLoading={allProjectStore.isLoading}
         children={
           <div>
+            <h1>Projects</h1>
+            <h5 style={{ backgroundColor: "ButtonShadow" }}>
+              <Button
+                onClick={() => {
+                  navigate(PipelineInstanceScreenPath + allProjectStore.activePipeline?.projectUUID ?? "");
+                }}
+              >
+                Project main panel
+              </Button>
+              {allProjectStore.activePipeline?.projectUUID ?? "loading"}
+            </h5>
             {allProjectStore.projectsModels?.map((el) => {
-              return <div>{el.description}</div>;
+              return (
+                <div style={{ margin: "10px", backgroundColor: "Highlight" }}>
+                  <Button
+                    onClick={() => {
+                      allProjectStore.setPipelineActive(el._id ?? "").then(() => {
+                        allProjectStore.init();
+                        navigate(PipelineInstanceScreenPath + el._id ?? "");
+                      });
+                    }}
+                  >
+                    set active project
+                  </Button>
+                  <div style={{ margin: "10px", display: "contents" }}> {el.description}</div>
+                </div>
+              );
             })}
           </div>
         }

ui/src/features/all_projects/presentation/all_projects_store.ts

@@ -1,24 +1,62 @@
 import makeAutoObservable from "mobx-store-inheritance";
 import { ProjectRepository } from "../data/project_repository";
 import { IProjectModel } from "../model/project_model";
-import { BaseStore } from "../../../core/store/base_store";
+import { SimpleErrorState } from "../../../core/store/base_store";
+import { ActivePipeline } from "../../../core/model/active_pipeline";
 
-export class AllProjectStore extends BaseStore {
+interface IProjectView {
+  isActive: boolean;
+  description: string;
+  id: string;
+}
+export class ProjectView {
+  isActive: boolean;
+  description: string;
+  id: string;
+  constructor(view: IProjectView) {
+    this.isActive = view.isActive;
+    this.description = view.description;
+    this.id = view.id;
+  }
+}
+export class AllProjectStore extends SimpleErrorState {
   projectsModels?: IProjectModel[];
   repository: ProjectRepository;
-  redirect = false;
+  activePipeline?: ActivePipeline;
   constructor(repository: ProjectRepository) {
     super();
     this.repository = repository;
     makeAutoObservable(this);
   }
-
-  async getProjects() {
-    const result = await this.loadingHelper(this.repository.getAllProject());
-    if (result.isSuccess()) {
-      this.projectsModels = result.value;
-    }
+  async getProjects(): Promise<void> {
+    await this.mapOk<IProjectModel[]>("projectsModels", this.repository.getAllProject());
   }
 
-   
+  async getActiveProject(): Promise<void> {
+    await this.mapOk<ActivePipeline>("activePipeline", this.repository.getActivePipeline());
+  }
+  async foo(): Promise<void> {
+    this.isLoading = true;
+    const result = await this.repository.getActivePipeline();
+    result.fold(
+      (success) => {
+        this.activePipeline = success;
+        this.isLoading = false;
+      },
+      (_error) => {
+        this.isError = true;
+      }
+    );
+  }
+
+  async init() {
+    await Promise.all([this.getProjects(), this.getActiveProject()]);
+    await this.projectViewGenerate();
+  }
+  projectViewGenerate() {
+    this.projectsModels = this.projectsModels?.filter((el) => el._id === this.activePipeline?.projectUUID);
+  }
+  async setPipelineActive(id: string) {
+    await this.loadingHelper(this.repository.setActivePipeline(id));
+  }
 }

ui/src/features/create_pipeline/presentation/create_pipeline_screen.tsx

@@ -29,9 +29,7 @@ export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
                 icon={Icon.add}
               />
               <div style={{ flexGrow: "1" }}>
-                <Button onClick={() => createPipelineStore.createPipeline()}>
-                  Save result
-                </Button>
+                <Button onClick={() => createPipelineStore.createPipeline()}>Save result</Button>
                 <List
                   headers="new pipeline"
                   values={createPipelineStore.pipelineViewModels}

ui/src/features/create_pipeline/presentation/create_pipeline_store.ts

@@ -3,7 +3,7 @@ import { CreatePipelineRepository } from "../data/create_pipeline_repository";
 import { ITriggerModel } from "../../../core/model/trigger_model";
 import { IProcess } from "../../create_process/model/process_model";
 import { message } from "antd";
-import { BaseStore } from "../../../core/store/base_store";
+import { SimpleErrorState } from "../../../core/store/base_store";
 
 enum Type {
   PROCESS,
@@ -16,7 +16,7 @@ export interface UnionView {
   uuid?: string;
 }
 
-export class CreatePipelineStore extends BaseStore {
+export class CreatePipelineStore extends SimpleErrorState {
   repository: CreatePipelineRepository;
   triggersModels: ITriggerModel[] = [];
   processModels: IProcess[] = [];
@@ -34,9 +34,7 @@ export class CreatePipelineStore extends BaseStore {
   }
 
   filterPipelineViewModel(index: number): void {
-    this.pipelineViewModels = this.pipelineViewModels.filter(
-      (_el, i) => i !== index
-    );
+    this.pipelineViewModels = this.pipelineViewModels.filter((_el, i) => i !== index);
   }
   addTrigger(e: string, id: string): void {
     const lastElement = this.pipelineViewModels.lastElement();
@@ -82,12 +80,8 @@ export class CreatePipelineStore extends BaseStore {
       message.error("not found pipelines process");
       return;
     }
-    const triggerId = this.pipelineViewModels.find(
-      (el) => el.type === Type.TRIGGER
-    )!.uuid as string;
-    const processId = this.pipelineViewModels.find(
-      (el) => el.type === Type.PROCESS
-    )!.uuid as string;
+    const triggerId = this.pipelineViewModels.find((el) => el.type === Type.TRIGGER)!.uuid as string;
+    const processId = this.pipelineViewModels.find((el) => el.type === Type.PROCESS)!.uuid as string;
 
     this.repository.savePipeline({
       process: processId,
@@ -96,33 +90,11 @@ export class CreatePipelineStore extends BaseStore {
   }
 
   async loadProcess() {
-    this.isLoading = true;
-    const result = await this.repository.getProcessed();
-    result.fold(
-      (s) => {
-        this.processModels = s;
-      },
-      (_e) => {
-        this.isError = true;
-      }
-    );
-    this.isLoading = false;
+    this.mapOk("processModels", this.repository.getProcessed());
   }
 
   async loadTriggers() {
-    this.isLoading = true;
-    const result = await this.repository.getTriggers(1);
-    result.fold(
-      (s) => {
-        this.triggersModels = s;
-      },
-      (_e) => {
-        this.isError = true;
-      }
-    );
-    this.isLoading = false;
+    this.mapOk("triggersModels", this.repository.getTriggers());
   }
 }
-export const createPipelineStore = new CreatePipelineStore(
-  new CreatePipelineRepository()
-);
+export const createPipelineStore = new CreatePipelineStore(new CreatePipelineRepository());

ui/src/features/create_process/presentation/logic/process_store.ts

@@ -8,8 +8,8 @@ class ProcessStore {
     this.repository = repository;
     makeAutoObservable(this);
   }
-  async saveResult(model:IProcess) {
-    await this.repository.save(model)
+  async saveResult(model: IProcess) {
+    await this.repository.save(model);
   }
 }
 

ui/src/features/create_project/create_project_screen.tsx

@@ -1,17 +1,23 @@
 import * as React from "react";
-import { LoadPage } from "../../core/ui/pages/load_page";
-import { createProjectStore } from "./create_project_store";
+import { LoadPage as MainPage } from "../../core/ui/pages/load_page";
 import { observer } from "mobx-react-lite";
 import { Col, Row, Input, Button } from "antd";
 import { ReactComponent as AddIcon } from "../../core/assets/icons/add.svg";
 import { CreatePipelineScreenPath } from "../create_pipeline/presentation/create_pipeline_screen";
+import { CreateProjectStore } from "./create_project_store";
+import { CreateProjectRepository } from "./create_project_repository";
 
 export const CreateProjectScreenPath = "/create_project";
 
 export const CreateProjectScreen: React.FunctionComponent = observer(() => {
+  const [createProjectStore] = React.useState(() => new CreateProjectStore(new CreateProjectRepository()));
+
+  React.useEffect(() => {
+    createProjectStore.init();
+  }, [createProjectStore]);
   return (
     <>
-      <LoadPage
+      <MainPage
         path={CreatePipelineScreenPath}
         largeText={"Create project"}
         minText={"add new pipelines?"}
@@ -48,21 +54,14 @@ export const CreateProjectScreen: React.FunctionComponent = observer(() => {
               })}
             </Col>
             <Col>
-            
               <Row>
                 <Input
                   style={{ width: "250px" }}
-                  onChange={(e) =>
-                    createProjectStore.setDescriptionToNewProject(
-                      e.target.value
-                    )
-                  }
+                  onChange={(e) => createProjectStore.setDescriptionToNewProject(e.target.value)}
                   placeholder="project description"
                 />
 
-                <Button onClick={() => createProjectStore.saveProject()}>
-                  save
-                </Button>
+                <Button onClick={() => createProjectStore.saveProject()}>save</Button>
               </Row>
 
               {createProjectStore.newProjectViews.map((el, index) => {
@@ -87,4 +86,3 @@ export const CreateProjectScreen: React.FunctionComponent = observer(() => {
     </>
   );
 });
- 

ui/src/features/create_project/create_project_store.ts

@@ -1,12 +1,9 @@
 import makeAutoObservable from "mobx-store-inheritance";
-import {
-  CreateProjectRepository,
-  PipelineModel,
-} from "./create_project_repository";
+import { CreateProjectRepository, PipelineModel } from "./create_project_repository";
 import { message } from "antd";
-import { BaseStore } from "../../core/store/base_store";
+import { SimpleErrorState } from "../../core/store/base_store";
 
-class CreateProjectStore extends BaseStore {
+export class CreateProjectStore extends SimpleErrorState {
   repository: CreateProjectRepository;
 
   pipelineModels?: PipelineModel[];
@@ -17,25 +14,16 @@ class CreateProjectStore extends BaseStore {
     super();
     this.repository = repository;
     makeAutoObservable(this);
-    this.loadPipelines();
   }
-
+  async init() {
+    await this.loadPipelines();
+  }
   async addPipeline(model: PipelineModel) {
     this.newProjectViews.push(model);
   }
 
   async loadPipelines() {
-    this.isLoading = true;
-    const result = await this.repository.getAllPipelines();
-    result.fold(
-      (s) => {
-        this.pipelineModels = s;
-      },
-      (_e) => {
-        this.isError = true;
-      }
-    );
-    this.isLoading = false;
+    this.mapOk("pipelineModels", this.repository.getAllPipelines());
   }
 
   setDescriptionToNewProject(value: string): void {
@@ -71,7 +59,3 @@ class CreateProjectStore extends BaseStore {
     );
   }
 }
-
-export const createProjectStore = new CreateProjectStore(
-  new CreateProjectRepository()
-);

ui/src/features/create_project_instance/create_project_instance.tsx

@@ -12,16 +12,17 @@ export const CreateProjectInstanceScreen = observer(() => {
     () => new CreateProjectInstanceStore(new CreateProjectInstanceRepository())
   );
   const id = useParams().id;
-  createProjectInstanceStore.getProjectById(id as string)
+  React.useEffect(() => {}, [id, createProjectInstanceStore]);
   return (
     <>
       <Upload
         onChange={(e) => {
-          console.log(e);
+          createProjectInstanceStore.file = e.file.originFileObj;
         }}
       >
         <Button>Upload root entity</Button>
       </Upload>
+      <Button onClick={() => createProjectInstanceStore.saveInstance()}>Save</Button>
     </>
   );
 });

ui/src/features/create_project_instance/create_project_instance_repository.ts

@@ -1,10 +1,13 @@
-import {
-  HttpMethod,
-  HttpRepository,
-} from "../../core/repository/http_repository";
+import { HttpMethod, HttpRepository } from "../../core/repository/http_repository";
 
+// this.subRoutes.push({
+//   method: "POST",
+//   subUrl: "upload
 export class CreateProjectInstanceRepository extends HttpRepository {
-  async getProjectInstance(id: string) {
-    return await this.jsonRequest(HttpMethod.GET, "");
+  async setProjectRootFile() {
+    return await this.formDataRequest(HttpMethod.POST, "/project_instance/upload/");
   }
+  // async getProjectInstance(id: string) {
+  //   return await this.jsonRequest(HttpMethod.GET, "");
+  // }
 }

ui/src/features/create_project_instance/create_project_instance_store.ts

@@ -1,18 +1,23 @@
 import makeAutoObservable from "mobx-store-inheritance";
-import { BaseStore } from "../../core/store/base_store";
+import { SimpleErrorState } from "../../core/store/base_store";
 import { CreateProjectInstanceRepository } from "./create_project_instance_repository";
+import { message } from "antd";
+import { HttpMethod } from "../../core/repository/http_repository";
 
-export class CreateProjectInstanceStore extends BaseStore {
+export class CreateProjectInstanceStore extends SimpleErrorState {
+  file?: File;
+
+  saveInstance(): void {
+    if (this.file === undefined) {
+      message.error("Need upload file");
+    } else {
+      // this.repository.formDataRequest(HttpMethod.POST, "", this.file);
+    }
+  }
   constructor(repository: CreateProjectInstanceRepository) {
     super();
     this.repository = repository;
     makeAutoObservable(this);
   }
   repository: CreateProjectInstanceRepository;
-   async getProjectById(id: string) {
-    const result =  await this.loadingHelper(this.repository.getProjectInstance(id))
-    if(result.isSuccess()){
-      
-    }
-  }
 }

ui/src/features/create_trigger/presentation/components/code_trigger_form.tsx

@@ -2,36 +2,40 @@ import * as React from "react";
 import Editor from "@monaco-editor/react";
 import { Button } from "antd";
 import { observer } from "mobx-react-lite";
-import { triggerStore } from "../trigger_store";
+import { CallBackStringVoidFunction } from "../../../../core/extensions/extensions";
 
-export const CodeTriggerForm: React.FunctionComponent = observer(() => {
-  return (
-    <>
-      <div style={{ width: "100%", backgroundColor: "black", height: "1px" }} />
+interface ICodeTriggerFormProps {
+  codeTriggerValue: string;
+  clearTriggerCode: VoidFunction;
+  saveCode: VoidFunction;
+  writeNewTrigger: CallBackStringVoidFunction;
+}
 
-      <Editor
-        height="40vh"
-        defaultLanguage="javascript"
-        value={triggerStore.codeTriggerValue}
-        onChange={(v) => {
-          triggerStore.writeNewTrigger(v);
-        }}
-        onValidate={(_m) => {}}
-      />
+export const CodeTriggerForm: React.FunctionComponent<ICodeTriggerFormProps> = observer(
+  (props: ICodeTriggerFormProps) => {
+    return (
+      <>
+        <div style={{ width: "100%", backgroundColor: "black", height: "1px" }} />
 
-      <div style={{ width: "100%", backgroundColor: "black", height: "1px" }} />
-      <div style={{ height: "10px" }} />
+        <Editor
+          height="40vh"
+          defaultLanguage="javascript"
+          value={props.codeTriggerValue}
+          onChange={(v) => {
+            props.writeNewTrigger(v ?? "");
+          }}
+          onValidate={(_m) => {}}
+        />
 
-      <Button
-        onClick={() => triggerStore.saveCode()}
-        style={{ marginLeft: "10px", marginRight: "10px" }}
-      >
-        Save code
-      </Button>
+        <div style={{ width: "100%", backgroundColor: "black", height: "1px" }} />
+        <div style={{ height: "10px" }} />
 
-      <Button onClick={() => triggerStore.clearTriggerCode()}>
-        Reset code
-      </Button>
-    </>
-  );
-});
+        <Button onClick={() => props.saveCode()} style={{ marginLeft: "10px", marginRight: "10px" }}>
+          Save code
+        </Button>
+
+        <Button onClick={() => props.clearTriggerCode()}>Reset code</Button>
+      </>
+    );
+  }
+);

ui/src/features/create_trigger/presentation/components/file_trigger_form.tsx

@@ -3,50 +3,49 @@ import { Formik } from "formik";
 import { SubmitButton, Input, ResetButton, Form, FormItem } from "formik-antd";
 import { Row, Col } from "antd";
 import { observer } from "mobx-react-lite";
-import { triggerStore } from "../trigger_store";
 import { TriggerType } from "../../../../core/model/trigger_model";
 import { validateRequired } from "../../../../core/helper/validate";
- 
-export const FileTriggerForm: React.FunctionComponent = observer(() => {
-  return (
-    <>
-      <div style={{ marginTop: 80 }}>
-        <Formik
-          initialValues={{
-            value: "",
-          }}
-          onSubmit={(values, actions) => {
-            triggerStore.pushTrigger(values.value, TriggerType.FILE);
-            actions.setSubmitting(false);
-            actions.resetForm();
-          }}
-          validate={(values) => {
-            if (values.value.length === 0) {
-              return false;
-            }
-            return {};
-          }}
-          render={() => (
-            <Form>
-              <div style={{ background: "white", flex: 1, padding: 40 }}>
-                <FormItem
-                  name="value"
-                  required={true}
-                  validate={validateRequired}
-                >
-                  <Input name="value" placeholder="regExp file" />
-                </FormItem>
-                <Row style={{ marginTop: 60 }}>
-                  <Col offset={8}>
-                    <ResetButton>Reset</ResetButton>
-                    <SubmitButton>Submit</SubmitButton>
-                  </Col>
-                </Row>
-              </div>
-            </Form>
-          )}
-        />
-      </div>
-    </>
-  );
-});
+export interface IFileTriggerFormProps {
+  pushTrigger: (value: string, type: TriggerType) => void;
+}
+export const FileTriggerForm: React.FunctionComponent<IFileTriggerFormProps> = observer(
+  (props: IFileTriggerFormProps) => {
+    return (
+      <>
+        <div style={{ marginTop: 80 }}>
+          <Formik
+            initialValues={{
+              value: "",
+            }}
+            onSubmit={(values, actions) => {
+              props.pushTrigger(values.value, TriggerType.FILE);
+              actions.setSubmitting(false);
+              actions.resetForm();
+            }}
+            validate={(values) => {
+              if (values.value.length === 0) {
+                return false;
+              }
+              return {};
+            }}
+            render={() => (
+              <Form>
+                <div style={{ background: "white", flex: 1, padding: 40 }}>
+                  <FormItem name="value" required={true} validate={validateRequired}>
+                    <Input name="value" placeholder="regExp file" />
+                  </FormItem>
+                  <Row style={{ marginTop: 60 }}>
+                    <Col offset={8}>
+                      <ResetButton>Reset</ResetButton>
+                      <SubmitButton>Submit</SubmitButton>
+                    </Col>
+                  </Row>
+                </div>
+              </Form>
+            )}
+          />
+        </div>
+      </>
+    );
+  }
+);

ui/src/features/create_trigger/presentation/create_trigger_screen.tsx

@@ -2,35 +2,20 @@ import * as React from "react";
 import { Button, Col, Row, Switch, Typography, Input } from "antd";
 import { CodeTriggerForm } from "./components/code_trigger_form";
 import { observer } from "mobx-react-lite";
-import { triggerStore } from "./trigger_store";
 import { FileTriggerForm } from "./components/file_trigger_form";
 import { ReactComponent as DeleteIcon } from "../../../core/assets/icons/delete.svg";
 import { Loader } from "../../../core/ui/loader/loader";
+import { TriggerRepository } from "../data/trigger_repository";
+import { TriggerStore } from "./trigger_store";
+import { TriggerViewModel } from "../model/trigger_form_view_model";
+import { CallBackStringVoidFunction } from "../../../core/extensions/extensions";
 
 const { Title } = Typography;
 
-const Header = observer(() => {
-  return (
-    <Row style={{ justifyItems: "center", alignItems: "center" }}>
-      <div style={{ height: "37px" }}>
-        <Switch
-          checked={triggerStore.getTriggerType()}
-          onChange={() => triggerStore.setTriggerType()}
-        />
-      </div>
-      <Title level={2}>
-        Trigger editor: {triggerStore.getTriggerDescription()}
-      </Title>
-      <div style={{ width: "10px" }}></div>
-      <Button onClick={() => triggerStore.saveResult()}>Save result</Button>
-    </Row>
-  );
-});
-
-const Bottom = observer(() => {
+const Bottom = observer((props: { triggers: TriggerViewModel[]; callBack: CallBackStringVoidFunction }) => {
   return (
     <Col>
-      {triggerStore.triggers.map((el) => {
+      {props.triggers.map((el) => {
         return (
           <Row
             style={{
@@ -38,40 +23,50 @@ const Bottom = observer(() => {
             }}
           >
             {el.value}
-            <DeleteIcon onClick={() => triggerStore.deleteItem(el.id)} />
+            <DeleteIcon onClick={() => props.callBack(el.id)} />
           </Row>
         );
       })}
     </Col>
   );
 });
-export const CreateTriggerScreenPath = '/create/trigger'
+export const CreateTriggerScreenPath = "/create/trigger";
+
 export const TriggerScreen: React.FunctionComponent = observer(() => {
+  const [triggerStore] = React.useState(() => new TriggerStore(new TriggerRepository()));
   return (
     <>
       <main>
         {!triggerStore.isLoading ? (
           <>
-            <Header />,
-            <Input
-              placeholder="trigger description"
-              onChange={() => triggerStore.changeTriggerDescription}
-            />
+            <Row style={{ justifyItems: "center", alignItems: "center" }}>
+              <div style={{ height: "37px" }}>
+                <Switch checked={triggerStore.getTriggerType()} onChange={() => triggerStore.setTriggerType()} />
+              </div>
+              <Title level={2}>Trigger editor: {triggerStore.getTriggerDescription()}</Title>
+              <div style={{ width: "10px" }}></div>
+              <Button onClick={() => triggerStore.saveResult()}>Save result</Button>
+            </Row>
+            <Input placeholder="trigger description" onChange={() => triggerStore.changeTriggerDescription} />
             {triggerStore.getTriggerType() ? (
               <>
-                <FileTriggerForm />
+                <FileTriggerForm pushTrigger={triggerStore.pushTrigger} />
               </>
             ) : (
               <>
-                <CodeTriggerForm />
+                <CodeTriggerForm
+                  codeTriggerValue={triggerStore.codeTriggerValue}
+                  clearTriggerCode={triggerStore.clearTriggerCode}
+                  saveCode={triggerStore.saveCode}
+                  writeNewTrigger={triggerStore.writeNewTrigger}
+                />
               </>
             )}
-            <Bottom />
+            <Bottom triggers={triggerStore.triggers} callBack={triggerStore.deleteItem} />
           </>
         ) : (
           <>
- 
-             <Loader/>
+            <Loader />
           </>
         )}
       </main>

ui/src/features/create_trigger/presentation/trigger_store.ts

@@ -3,9 +3,9 @@ import { v4 as uuidv4 } from "uuid";
 import { TriggerType } from "../../../core/model/trigger_model";
 import { TriggerRepository } from "../data/trigger_repository";
 import { TriggerViewModel } from "../model/trigger_form_view_model";
-import { BaseStore } from "../../../core/store/base_store";
+import { SimpleErrorState } from "../../../core/store/base_store";
 
-class TriggerStore extends BaseStore {
+export class TriggerStore extends SimpleErrorState {
   constructor(repository: TriggerRepository) {
     super();
     this.triggerType = TriggerType.FILE;
@@ -39,9 +39,7 @@ class TriggerStore extends BaseStore {
     this.triggerType = TriggerType.FILE;
   };
   getTriggerDescription = (): string => {
-    return this.triggerType === TriggerType.FILE
-      ? TriggerType.FILE
-      : TriggerType.PROCESS;
+    return this.triggerType === TriggerType.FILE ? TriggerType.FILE : TriggerType.PROCESS;
   };
   pushTrigger = (value: string, type: TriggerType): void => {
     this.triggers.push({
@@ -72,16 +70,15 @@ class TriggerStore extends BaseStore {
     }
   }
   async saveResult(): Promise<void> {
-    this.isLoading = true;
-    await this.repository.save({
-      type: this.getTriggerDescription(),
-      description: this.triggerDescription,
-      value: this.triggers.map((el) => {
-        return el.value;
-      }),
-    });
-    this.isLoading = false;
+    await this.loadingHelper(
+      this.repository.save({
+        type: this.getTriggerDescription(),
+        description: this.triggerDescription,
+        value: this.triggers.map((el) => {
+          return el.value;
+        }),
+      })
+    );
   }
 }
-
 export const triggerStore = new TriggerStore(new TriggerRepository());

ui/src/features/p.tsx

@@ -0,0 +1,68 @@
+export {};
+// import React from "react";
+// import { CoreError, UiErrorState } from "../core/store/base_store";
+// import { SelectProjectStore } from "./select_project/presentation/select_project_store";
+
+// export declare type ClassConstructor<T> = {
+//   new (...args: any[]): T;
+// };
+// interface MobxReactComponentProps<T extends UiErrorState<CoreError>, ClassConstructor> {
+//   store: ClassConstructor;
+//   children: (element: T) => React.ReactElement;
+// }
+
+// class UiStateErrorComponent<T extends UiErrorState<CoreError>, K> extends React.Component<
+//   MobxReactComponentProps<T, K>,
+//   { store: T | undefined }
+// > {
+//   async componentDidMount(): Promise<void> {
+//     const store = this.props.store as ClassConstructor<T>;
+//     console.log(store);
+//     const s = new store();
+//     this.setState({ store: s });
+//     if (this.state !== null) {
+//       await this.state.store?.init();
+//     }
+//   }
+//   componentWillUnmount(): void {
+//     if (this.state.store !== undefined) {
+//       this.state.store.dispose();
+//     }
+//   }
+
+//   render() {
+//     if (this.state !== null) {
+//       if (this.state.store?.isLoading) {
+//         return <>Loading</>;
+//       }
+//       if (this.state.store !== undefined) {
+//         return this.props.children(this.state.store);
+//       }
+//     }
+
+//     return (
+//       <div>
+//         <>{this.props.children}</>
+//       </div>
+//     );
+//   }
+// }
+
+// export const ExampleScreen: React.FC = () => {
+//   return (
+//     <div>
+//       <UiStateErrorComponent<SelectProjectStore, {}> store={SelectProjectStore}>
+//         {(store) => {
+//           console.log(store);
+//           return (
+//             <div>
+//               {store.projects.map((el) => {
+//                 return <>{el}</>;
+//               })}
+//             </div>
+//           );
+//         }}
+//       </UiStateErrorComponent>
+//     </div>
+//   );
+// };

ui/src/features/pipeline_instance_main_screen/pipeline_instance_screen.tsx

@@ -4,13 +4,12 @@ import { PipelineInstanceStore } from "./pipeline_instance_store";
 
 export const PipelineInstanceScreenPath = "/pipeline_instance/";
 export const PipelineInstanceScreen: React.FunctionComponent = () => {
-  const [pipelineInstanceStore] = React.useState(
-    () => new PipelineInstanceStore()
-  );
-
+  const [pipelineInstanceStore] = React.useState(() => new PipelineInstanceStore());
+  React.useEffect(() => {}, [pipelineInstanceStore]);
   return (
     <LoadPage
-      needBackButton={false}
+      needBackButton={true}
+      largeText={"Project instance active"}
       isError={pipelineInstanceStore.isError}
       isLoading={pipelineInstanceStore.isLoading}
       children={<div></div>}

ui/src/features/pipeline_instance_main_screen/pipeline_instance_store.ts

@@ -1,7 +1,7 @@
 import makeAutoObservable from "mobx-store-inheritance";
-import { BaseStore } from "../../core/store/base_store";
+import { SimpleErrorState } from "../../core/store/base_store";
 
-export class PipelineInstanceStore extends BaseStore {
+export class PipelineInstanceStore extends SimpleErrorState {
   constructor() {
     super();
     makeAutoObservable(this);

ui/src/features/scene_manager/scene_manager.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { SceneMangerStore, StaticAssetItemModel } from "./scene_manager_store";
 import { observer } from "mobx-react-lite";
 import { StaticAssetModelView } from "./components/static_asset_item_view";
+import { useParams } from "react-router-dom";
 
 // const useKeyLister = (fn: Function) => {
 //   const pressed = new Map();
@@ -26,21 +27,25 @@ import { StaticAssetModelView } from "./components/static_asset_item_view";
 
 //   return [];
 // };
-
+export const SceneManagerPath = "/scene/manager/";
 export const SceneManger = observer(() => {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
 
   const [sceneMangerStore] = React.useState(() => new SceneMangerStore());
+  const id = useParams().id as string;
 
   React.useEffect(() => {
-    sceneMangerStore.loadGl(canvasRef.current!);
+    if (id) {
+      sceneMangerStore.loadScene(id, canvasRef.current!);
+    }
     return () => {
       sceneMangerStore.dispose();
     };
-  });
+  }, [id, sceneMangerStore]);
 
   return (
     <div>
+      <div>{sceneMangerStore.errors.isNotEmpty() ? <>{sceneMangerStore.errors[0].text}</> : <></>}</div>
       <div style={{ position: "absolute" }}>
         {sceneMangerStore.sceneItems.map((el) => {
           if (el instanceof StaticAssetItemModel) {

ui/src/features/scene_manager/scene_manager_store.ts

@@ -1,8 +1,11 @@
 /* eslint-disable array-callback-return */
-import { makeAutoObservable } from "mobx";
+import makeAutoObservable from "mobx-store-inheritance";
 import { CoreThereRepository } from "../../core/repository/core_there_repository";
 import { v4 as uuidv4 } from "uuid";
 import { Vector2 } from "three";
+import { HttpError, HttpMethod, HttpRepository } from "../../core/repository/http_repository";
+import { UiErrorState } from "../../core/store/base_store";
+import { UiBaseError } from "../../core/model/ui_base_error";
 
 export class BaseSceneItemModel {
   id: string;
@@ -24,12 +27,35 @@ export class StaticAssetItemModel extends BaseSceneItemModel {
   }
 }
 
-export class SceneMangerStore {
+export enum RobossemblerFiles {
+  robossemblerAssets = "robossembler_assets.json",
+}
+
+export class SceneMangerStore extends UiErrorState<HttpError> {
+  async init(): Promise<any> {}
+  errorHandingStrategy = (error: HttpError) => {
+    if (error.status === 404) {
+      this.errors.push(new UiBaseError(`${RobossemblerFiles.robossemblerAssets} not found to project`));
+    }
+  };
+
+  async loadScene(sceneId: string, canvasRef: HTMLCanvasElement) {
+    (
+      await this.loadingHelper(
+        this.httpRepository.jsonRequest(HttpMethod.GET, "/" + sceneId + "/" + RobossemblerFiles.robossemblerAssets)
+      )
+    ).map((el) => {
+      this.loadGl(canvasRef);
+    });
+  }
   coreThereRepository: null | CoreThereRepository = null;
+  httpRepository: HttpRepository;
   sceneItems: BaseSceneItemModel[] = [];
 
   constructor() {
+    super();
     makeAutoObservable(this);
+    this.httpRepository = new HttpRepository();
   }
 
   loadGl(canvasRef: HTMLCanvasElement): void {

ui/src/features/select_project/data/select_project_repository.ts

@@ -1,11 +1,11 @@
 import { Result } from "../../../core/helper/result";
-import {
-  HttpMethod,
-  HttpRepository,
-} from "../../../core/repository/http_repository";
+import { HttpMethod, HttpRepository } from "../../../core/repository/http_repository";
 import { IProjectModel } from "../model/project_model";
 
 export class SelectProjectRepository extends HttpRepository {
+  async setActiveProject(id: string) {
+    return await this.jsonRequest(HttpMethod.POST, `/project?${id}`);
+  }
   async getAllProjects(page = 1): Promise<Result<Error, IProjectModel[]>> {
     return await this.jsonRequest(HttpMethod.GET, `/project?${page}`);
   }

ui/src/features/select_project/presentation/select_project.tsx

@@ -3,16 +3,16 @@ import { observer } from "mobx-react-lite";
 import { LoadPage } from "../../../core/ui/pages/load_page";
 import { CreateProjectScreenPath } from "../../create_project/create_project_screen";
 import { SelectProjectStore } from "./select_project_store";
-import { SelectProjectRepository } from "../data/select_project_repository";
 import { useNavigate } from "react-router-dom";
 import { CreateProjectInstancePath } from "../../create_project_instance/create_project_instance";
 import { Button } from "antd";
 export const SelectProjectScreenPath = "/select_project";
 
 export const SelectProjectScreen: React.FunctionComponent = observer(() => {
-  const [selectProjectStore] = React.useState(
-    () => new SelectProjectStore(new SelectProjectRepository())
-  );
+  const [selectProjectStore] = React.useState(() => new SelectProjectStore());
+  React.useEffect(() => {
+    selectProjectStore.init();
+  }, [selectProjectStore]);
   const navigate = useNavigate();
 
   return (
@@ -22,17 +22,13 @@ export const SelectProjectScreen: React.FunctionComponent = observer(() => {
         largeText={"Select project"}
         minText={"add new project?"}
         isLoading={selectProjectStore.isLoading}
-        isError={selectProjectStore.isError}
+        isError={selectProjectStore.errors.isNotEmpty()}
         children={selectProjectStore.projects.map((el) => {
           return (
             <>
               <div>{el.description}</div>
               <div>
-                <Button
-                  onClick={() => navigate(CreateProjectInstancePath + el._id)}
-                >
-                  create instance
-                </Button>
+                <Button onClick={() => navigate(CreateProjectInstancePath + el._id)}>create instance</Button>
               </div>
             </>
           );

ui/src/features/select_project/presentation/select_project_store.ts

@@ -1,33 +1,31 @@
 import makeAutoObservable from "mobx-store-inheritance";
 import { SelectProjectRepository } from "../data/select_project_repository";
 import { IProjectModel } from "../model/project_model";
-import { BaseStore } from "../../../core/store/base_store";
+import { CoreError, UiErrorState } from "../../../core/store/base_store";
+
+export class SelectProjectStore extends UiErrorState<CoreError> {
+  errorHandingStrategy = (error: CoreError) => {
+    console.log(error);
+  };
 
-export class SelectProjectStore extends BaseStore {
   repository: SelectProjectRepository;
- 
+  errors = [];
   page = 1;
   projects: IProjectModel[] = [];
 
-  constructor(repository: SelectProjectRepository) {
-    super()
-    this.repository = repository;
+  constructor() {
+    super();
+
+    this.repository = new SelectProjectRepository();
     makeAutoObservable(this);
-    this.getPipelines();
   }
-  
+  async setActiveProject(id: string): Promise<void> {
+    this.loadingHelper(this.repository.setActiveProject(id));
+  }
   async getPipelines(): Promise<void> {
-    this.isLoading = true;
-    const result = await this.repository.getAllProjects(this.page);
-    result.fold(
-      (s) => {
-        this.projects = s;
-      },
-      (_e) => {
-        this.isError = true;
-      }
-    );
-    this.isLoading = false;
+    await this.mapOk("projects", this.repository.getAllProjects(this.page));
+  }
+  async init() {
+    await this.getPipelines();
   }
 }
- 

ui/src/index.tsx

@@ -2,21 +2,19 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 
 import "antd/dist/antd.min.css";
-import { RouterProvider } from "react-router-dom";
 
-import { router } from "./core/routers/routers";
-import { SocketLister } from "./features/socket_lister/socket_lister";
 import { extensions } from "./core/extensions/extensions";
-import { SceneManger } from "./features/scene_manager/scene_manager";
+import { SocketLister } from "./features/socket_lister/socket_lister";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./core/routers/routers";
 
 extensions();
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
 root.render(
   <>
-    {/* <SocketLister>
+    <SocketLister>
       <RouterProvider router={router} />
-    </SocketLister> */}
-    <SceneManger />
+    </SocketLister>
   </>
 );