import { destroy, flow, types } from "mobx-state-tree";
|
import { Modal } from "../components/Common/Modal/Modal";
|
import {
|
FF_DEV_2887,
|
FF_DISABLE_GLOBAL_USER_FETCHING,
|
FF_LOPS_E_3,
|
FF_REGION_VISIBILITY_FROM_URL,
|
isFF,
|
} from "../utils/feature-flags";
|
import { History } from "../utils/history";
|
import { isDefined } from "../utils/utils";
|
import { Action } from "./Action";
|
import * as DataStores from "./DataStores";
|
import { DynamicModel, registerModel } from "./DynamicModel";
|
import { TabStore } from "./Tabs";
|
import { CustomJSON } from "./types";
|
import { User } from "./Users";
|
import { ActivityObserver } from "../utils/ActivityObserver";
|
|
/**
|
* @type {ActivityObserver | null}
|
*/
|
let networkActivity = null;
|
|
const PROJECTS_FETCH_PERIOD = 20 * 1000; // interaction timer for 20 sec fetch period for project api
|
|
export const AppStore = types
|
.model("AppStore", {
|
mode: types.optional(types.enumeration(["explorer", "labelstream", "labeling"]), "explorer"),
|
|
viewsStore: types.optional(TabStore, {
|
views: [],
|
}),
|
|
project: types.optional(CustomJSON, {}),
|
|
loading: types.optional(types.boolean, false),
|
|
loadingData: false,
|
|
users: types.optional(types.array(User), []),
|
|
taskStore: types.optional(
|
types.late(() => {
|
return DynamicModel.get("tasksStore");
|
}),
|
{},
|
),
|
|
annotationStore: types.optional(
|
types.late(() => {
|
return DynamicModel.get("annotationsStore");
|
}),
|
{},
|
),
|
|
availableActions: types.optional(types.array(Action), []),
|
|
serverError: types.map(CustomJSON),
|
|
crashed: false,
|
|
interfaces: types.map(types.boolean),
|
|
toolbar: types.string,
|
})
|
.views((self) => ({
|
/** @returns {import("../sdk/dm-sdk").DataManager} */
|
get SDK() {
|
return self._sdk;
|
},
|
|
/** @returns {import("../sdk/lsf-sdk").LSFWrapper} */
|
get LSF() {
|
return self.SDK.lsf;
|
},
|
|
/** @returns {import("../utils/api-proxy").APIProxy} */
|
get API() {
|
return self.SDK.api;
|
},
|
|
get apiVersion() {
|
return self.SDK.apiVersion;
|
},
|
|
get isLabeling() {
|
return !!self.dataStore?.selected || self.isLabelStreamMode || self.mode === "labeling";
|
},
|
|
get isLabelStreamMode() {
|
return self.mode === "labelstream";
|
},
|
|
get isExplorerMode() {
|
return self.mode === "explorer" || self.mode === "labeling";
|
},
|
|
get currentView() {
|
return self.viewsStore.selected;
|
},
|
|
get dataStore() {
|
switch (self.target) {
|
case "tasks":
|
return self.taskStore;
|
case "annotations":
|
return self.annotationStore;
|
default:
|
return null;
|
}
|
},
|
|
get target() {
|
return self.viewsStore.selected?.target ?? "tasks";
|
},
|
|
get labelingIsConfigured() {
|
return self.project?.config_has_control_tags === true;
|
},
|
|
get labelingConfig() {
|
return self.project.label_config_line ?? self.project.label_config;
|
},
|
|
get showPreviews() {
|
return self.SDK.showPreviews;
|
},
|
|
get currentSelection() {
|
return self.currentView.selected.snapshot;
|
},
|
|
get currentFilter() {
|
return self.currentView.filterSnapshot;
|
},
|
|
get usersMap() {
|
return new Map(self.users.map((user) => [user.id, user]));
|
},
|
}))
|
.volatile(() => ({
|
needsDataFetch: false,
|
projectFetch: false,
|
requestsInFlight: new Map(),
|
}))
|
.actions((self) => ({
|
startPolling() {
|
if (self._poll) return;
|
if (self.SDK.polling === false) return;
|
|
const poll = async (self) => {
|
if (networkActivity.active) await self.fetchProject({ interaction: "timer" });
|
self._poll = setTimeout(() => poll(self), PROJECTS_FETCH_PERIOD);
|
};
|
|
poll(self);
|
},
|
|
afterCreate() {
|
networkActivity?.destroy();
|
networkActivity = new ActivityObserver();
|
},
|
|
beforeDestroy() {
|
clearTimeout(self._poll);
|
window.removeEventListener("popstate", self.handlePopState);
|
networkActivity.destroy();
|
},
|
|
setMode(mode) {
|
self.mode = mode;
|
},
|
|
setActions(actions) {
|
if (!Array.isArray(actions)) throw new Error("Actions must be an array");
|
self.availableActions = actions;
|
},
|
|
removeAction(id) {
|
const action = self.availableActions.find((action) => action.id === id);
|
|
if (action) destroy(action);
|
},
|
|
interfaceEnabled(name) {
|
return self.interfaces.get(name) === true;
|
},
|
|
enableInterface(name) {
|
if (!self.interfaces.has(name)) {
|
console.warn(`Unknown interface ${name}`);
|
} else {
|
self.interfaces.set(name, true);
|
}
|
},
|
|
disableInterface(name) {
|
if (!self.interfaces.has(name)) {
|
console.warn(`Unknown interface ${name}`);
|
} else {
|
self.interfaces.set(name, false);
|
}
|
},
|
|
setToolbar(toolbarString) {
|
self.toolbar = toolbarString;
|
},
|
|
setTask: flow(function* ({ taskID, annotationID, pushState }) {
|
if (pushState !== false) {
|
History.navigate({
|
task: taskID,
|
annotation: annotationID ?? null,
|
interaction: null,
|
region: null,
|
});
|
} else if (isFF(FF_REGION_VISIBILITY_FROM_URL)) {
|
const { task, region, annotation } = History.getParams();
|
History.navigate(
|
{
|
task,
|
region,
|
annotation,
|
},
|
true,
|
);
|
}
|
|
if (!isDefined(taskID)) return;
|
|
self.setLoadingData(true);
|
|
if (self.mode === "labelstream") {
|
yield self.taskStore.loadNextTask({
|
select: !!taskID && !!annotationID,
|
});
|
}
|
|
if (annotationID !== undefined) {
|
self.annotationStore.setSelected(annotationID);
|
} else {
|
self.taskStore.setSelected(taskID);
|
}
|
|
const taskPromise = self.taskStore.loadTask(taskID, {
|
select: !!taskID && !!annotationID,
|
});
|
|
// wait for the task to be loaded and LSF to be initialized
|
yield taskPromise.then(async () => {
|
// wait for self.LSF to be initialized with currentAnnotation
|
let maxWait = 1000;
|
while (!self.LSF?.currentAnnotation && maxWait > 0) {
|
await new Promise((resolve) => setTimeout(resolve, 1));
|
maxWait -= 1;
|
}
|
|
if (self.LSF) {
|
const annotation = self.LSF?.currentAnnotation;
|
const id = annotation?.pk ?? annotation?.id;
|
|
self.LSF?.setLSFTask(self.taskStore.selected, id);
|
|
if (isFF(FF_REGION_VISIBILITY_FROM_URL)) {
|
const { annotation: annIDFromUrl, region: regionIDFromUrl } = History.getParams();
|
const annotationStore = self.LSF?.lsf?.annotationStore;
|
|
if (annIDFromUrl && annotationStore) {
|
const lsfAnnotation = [...annotationStore.annotations, ...annotationStore.predictions].find((a) => {
|
return a.pk === annIDFromUrl || a.id === annIDFromUrl;
|
});
|
|
if (lsfAnnotation) {
|
const annID = lsfAnnotation.pk ?? lsfAnnotation.id;
|
self.LSF?.setLSFTask(self.taskStore.selected, annID, undefined, lsfAnnotation.type === "prediction");
|
}
|
}
|
if (regionIDFromUrl) {
|
const currentAnn = self.LSF?.currentAnnotation;
|
// Focus on the region by hiding all other regions
|
currentAnn?.regionStore?.setRegionVisible(regionIDFromUrl);
|
// Select the region so outliner details are visible
|
currentAnn?.regionStore?.selectRegionByID(regionIDFromUrl);
|
}
|
}
|
} else {
|
console.error("LSF not initialized properly");
|
}
|
|
self.setLoadingData(false);
|
});
|
}),
|
|
setLoadingData(value) {
|
self.loadingData = value;
|
},
|
|
unsetTask(options) {
|
try {
|
self.annotationStore.unset();
|
self.taskStore.unset();
|
} catch (_e) {
|
/* Something weird */
|
}
|
|
if (options?.pushState !== false) {
|
History.navigate({ task: null, annotation: null });
|
}
|
},
|
|
unsetSelection() {
|
self.annotationStore.unset({ withHightlight: true });
|
self.taskStore.unset({ withHightlight: true });
|
},
|
|
createDataStores() {
|
const grouppedColumns = self.viewsStore.columns.reduce((res, column) => {
|
res.set(column.target, res.get(column.target) ?? []);
|
res.get(column.target).push(column);
|
return res;
|
}, new Map());
|
|
grouppedColumns.forEach((columns, target) => {
|
const dataStore = DataStores[target].create?.(columns);
|
|
if (dataStore) registerModel(`${target}Store`, dataStore);
|
});
|
},
|
|
startLabelStream(options = {}) {
|
if (!self.confirmLabelingConfigured()) return;
|
|
const nextAction = () => {
|
self.SDK.setMode("labelstream");
|
|
if (options?.pushState !== false) {
|
History.navigate({ labeling: 1 });
|
}
|
};
|
|
if (isFF(FF_DEV_2887) && self.LSF?.lsf?.annotationStore?.selected?.commentStore?.hasUnsaved) {
|
Modal.confirm({
|
title: "You have unsaved changes",
|
body: "There are comments which are not persisted. Please submit the annotation. Continuing will discard these comments.",
|
onOk() {
|
nextAction();
|
},
|
okText: "Discard and continue",
|
});
|
return;
|
}
|
|
nextAction();
|
},
|
|
startLabeling(item, options = {}) {
|
if (!self.confirmLabelingConfigured()) return;
|
|
if (self.dataStore.loadingItem) return;
|
|
const nextAction = () => {
|
self.SDK.setMode("labeling");
|
|
if (item?.id && !item.isSelected) {
|
const labelingParams = {
|
pushState: options?.pushState,
|
};
|
|
if (isDefined(item.task_id)) {
|
Object.assign(labelingParams, {
|
annotationID: item.id,
|
taskID: item.task_id,
|
});
|
} else {
|
Object.assign(labelingParams, {
|
taskID: item.id,
|
});
|
}
|
|
self.setTask(labelingParams);
|
} else {
|
self.closeLabeling();
|
}
|
};
|
|
if (isFF(FF_DEV_2887) && self.LSF?.lsf?.annotationStore?.selected?.commentStore?.hasUnsaved) {
|
Modal.confirm({
|
title: "You have unsaved changes",
|
body: "There are comments which are not persisted. Please submit the annotation. Continuing will discard these comments.",
|
onOk() {
|
nextAction();
|
},
|
okText: "Discard and continue",
|
});
|
return;
|
}
|
|
nextAction();
|
},
|
|
confirmLabelingConfigured() {
|
if (!self.labelingIsConfigured) {
|
Modal.confirm({
|
title: "You're almost there!",
|
body: "Before you can annotate the data, set up labeling configuration",
|
onOk() {
|
self.SDK.invoke("settingsClicked");
|
},
|
okText: "Go to setup",
|
});
|
return false;
|
}
|
return true;
|
},
|
|
closeLabeling(options) {
|
const { SDK } = self;
|
|
self.unsetTask(options);
|
|
let viewId;
|
const tabFromURL = History.getParams().tab;
|
|
if (isDefined(self.currentView)) {
|
viewId = self.currentView.tabKey;
|
} else if (isDefined(tabFromURL)) {
|
viewId = tabFromURL;
|
} else if (isDefined(self.viewsStore)) {
|
viewId = self.viewsStore.views[0]?.tabKey;
|
}
|
|
if (isDefined(viewId)) {
|
History.forceNavigate({ tab: viewId });
|
}
|
|
SDK.setMode("explorer");
|
SDK.destroyLSF();
|
},
|
|
handlePopState: (({ state }) => {
|
const { tab, task, annotation, labeling, region } = state ?? {};
|
|
if (tab) {
|
const tabId = Number.parseInt(tab);
|
|
self.viewsStore.setSelected(Number.isNaN(tabId) ? tab : tabId, {
|
pushState: false,
|
createDefault: false,
|
});
|
}
|
|
if (task) {
|
const params = {};
|
|
if (annotation) {
|
params.task_id = Number.parseInt(task);
|
params.id = Number.parseInt(annotation);
|
} else {
|
params.id = Number.parseInt(task);
|
}
|
if (region) {
|
params.region = region;
|
} else {
|
delete params.region;
|
}
|
|
self.startLabeling(params, { pushState: false });
|
} else if (labeling) {
|
self.startLabelStream({ pushState: false });
|
} else {
|
self.closeLabeling({ pushState: false });
|
}
|
}).bind(self),
|
|
resolveURLParams() {
|
window.addEventListener("popstate", self.handlePopState);
|
},
|
|
setLoading(value) {
|
self.loading = value;
|
},
|
|
fetchProject: flow(function* (options = {}) {
|
self.projectFetch = options.force === true;
|
|
const isTimer = options.interaction === "timer";
|
const params =
|
options && options.interaction
|
? {
|
interaction: options.interaction,
|
...(isTimer
|
? {
|
include: [
|
"task_count",
|
"task_number",
|
"annotation_count",
|
"num_tasks_with_annotations",
|
"queue_total",
|
].join(","),
|
}
|
: null),
|
}
|
: null;
|
|
try {
|
const newProject = yield self.apiCall("project", params);
|
const hasExistingProjectData = Object.entries(self.project ?? {}).length > 0;
|
const hasNewProjectData = Object.entries(newProject ?? {}).length > 0;
|
|
self.needsDataFetch =
|
options.force !== true && hasExistingProjectData && hasNewProjectData
|
? self.project.task_count !== newProject.task_count ||
|
self.project.task_number !== newProject.task_number ||
|
self.project.annotation_count !== newProject.annotation_count ||
|
self.project.num_tasks_with_annotations !== newProject.num_tasks_with_annotations
|
: false;
|
|
if (options.interaction === "timer") {
|
self.project = Object.assign(self.project ?? {}, newProject ?? {});
|
} else if (JSON.stringify(newProject ?? {}) !== JSON.stringify(self.project ?? {})) {
|
self.project = newProject;
|
}
|
if (isFF(FF_LOPS_E_3)) {
|
const itemType = self.SDK.type === "DE" ? "dataset" : "project";
|
|
self.SDK.invoke(`${itemType}Updated`, self.project);
|
}
|
} catch {
|
// When in timer (polling project counts) mode, we can still continue
|
// but we need to crash for non-polling interactions
|
// because we can't display the app without the project itself and will need to redirect
|
if (options.interaction !== "timer") {
|
self.crash({
|
error: `Project ID: ${self.SDK.projectId} does not exist or is no longer available`,
|
redirect: true,
|
});
|
}
|
return false;
|
}
|
self.projectFetch = false;
|
return true;
|
}),
|
|
/**
|
* @deprecated Use the useActions hook instead for better caching and performance
|
* This method is kept for backward compatibility but is no longer actively used
|
*/
|
fetchActions: flow(function* () {
|
try {
|
const serverActions = yield self.apiCall("actions");
|
|
const actions = (serverActions ?? []).map((action) => {
|
return [action, undefined];
|
});
|
|
self.SDK.updateActions(actions);
|
} catch (error) {
|
console.error("Error fetching actions:", error);
|
}
|
}),
|
|
fetchActionForm: flow(function* (actionId) {
|
const form = yield self.apiCall("actionForm", { actionId });
|
return form;
|
}),
|
|
fetchUsers: flow(function* () {
|
const list = yield self.apiCall("users", {
|
__useQueryCache: {
|
prefixKey: "organizationMembers",
|
staleTime: 60 * 1000,
|
},
|
});
|
|
self.users.push(...list);
|
}),
|
|
fetchData: flow(function* ({ isLabelStream } = {}) {
|
self.setLoading(true);
|
|
const { tab, task, labeling, query } = History.getParams();
|
|
self.viewsStore.fetchColumns();
|
|
const requests = [self.fetchProject()];
|
|
// Only fetch all users if not disabled globally
|
if (!isFF(FF_DISABLE_GLOBAL_USER_FETCHING)) {
|
requests.push(self.fetchUsers());
|
}
|
|
if (!isLabelStream || (self.project?.show_annotation_history && task)) {
|
if (self.SDK.settings?.onlyVirtualTabs && self.project?.show_annotation_history && !task) {
|
requests.push(
|
self.viewsStore.addView(
|
{
|
virtual: true,
|
projectId: self.SDK.projectId,
|
tab,
|
},
|
{ autosave: false, reload: false },
|
),
|
);
|
} else if (self.SDK.type === "labelops") {
|
requests.push(
|
self.viewsStore.addView(
|
{
|
virtual: false,
|
projectId: self.SDK.projectId,
|
tab,
|
},
|
{ autosave: false, autoSelect: true, reload: true },
|
),
|
);
|
} else {
|
requests.push(self.viewsStore.fetchTabs(tab, task, labeling));
|
}
|
} else if (isLabelStream && !!tab) {
|
const { selectedItems } = JSON.parse(decodeURIComponent(query ?? "{}"));
|
|
requests.push(self.viewsStore.fetchSingleTab(tab, selectedItems ?? {}));
|
}
|
|
const [projectFetched] = yield Promise.all(requests);
|
|
if (projectFetched) {
|
self.resolveURLParams();
|
|
self.setLoading(false);
|
|
self.startPolling();
|
}
|
}),
|
|
/**
|
* Main API calls provider for the whole application.
|
* `params` are used both for var substitution and query params if var is unknown:
|
* `{ project: 123, order: "desc" }` for method `"tasks": "/project/:pk/tasks"`
|
* will produce `/project/123/tasks?order=desc` url
|
* @param {string} methodName one of the methods in api-config
|
* @param {object} params url vars and query string params
|
* @param {object} body for POST/PATCH requests
|
* @param {{ errorHandler?: fn, headers?: object, allowToCancel?: boolean }} [options] additional options like errorHandler
|
*/
|
apiCall: flow(function* (methodName, params, body, options) {
|
const isAllowCancel = options?.allowToCancel;
|
const controller = new AbortController();
|
const signal = controller.signal;
|
const apiTransform = self.SDK.apiTransform?.[methodName];
|
const requestParams = apiTransform?.params?.(params) ?? params ?? {};
|
const requestBody = apiTransform?.body?.(body) ?? body ?? {};
|
const requestHeaders = apiTransform?.headers?.(options?.headers) ?? options?.headers ?? {};
|
const requestKey = `${methodName}_${JSON.stringify(params || {})}`;
|
|
if (isAllowCancel) {
|
requestHeaders.signal = signal;
|
if (self.requestsInFlight.has(requestKey)) {
|
/* if already in flight cancel the first in favor of new one */
|
self.requestsInFlight.get(requestKey).abort();
|
console.log(`Request ${requestKey} canceled`);
|
}
|
self.requestsInFlight.set(requestKey, controller);
|
}
|
const result = yield self.API[methodName](requestParams, {
|
headers: requestHeaders,
|
body: requestBody.body ?? requestBody,
|
options,
|
});
|
|
if (isAllowCancel) {
|
result.isCanceled = signal.aborted;
|
self.requestsInFlight.delete(requestKey);
|
}
|
// We don't want to show errors when loading data in polling mode
|
// we will just allow it to try again later
|
if (result.error && result.status !== 404 && !signal.aborted && params.interaction !== "timer") {
|
if (options?.errorHandler?.(result)) {
|
return result;
|
}
|
|
if (result.response) {
|
try {
|
self.serverError.set(methodName, {
|
error: "Something went wrong",
|
response: result.response,
|
});
|
} catch {
|
// ignore
|
}
|
}
|
|
console.warn({
|
message: "Error occurred when loading data",
|
description: result?.response?.detail ?? result.error,
|
});
|
|
self.SDK.invoke("error", result);
|
|
// notification.error({
|
// message: "Error occurred when loading data",
|
// description: result?.response?.detail ?? result.error,
|
// });
|
} else {
|
try {
|
self.serverError.delete(methodName);
|
} catch {
|
// ignore
|
}
|
}
|
|
return result;
|
}),
|
|
invokeAction: flow(function* (actionId, options = {}) {
|
const view = self.currentView ?? {};
|
const viewReloaded = view;
|
let projectFetched = self.project;
|
|
const needsLock = self.availableActions.findIndex((a) => a.id === actionId) >= 0;
|
|
const { selected } = view;
|
const actionCallback = self.SDK.getAction(actionId);
|
|
if (view && needsLock && !actionCallback) view.lock();
|
|
const labelStreamMode = localStorage.getItem("dm:labelstream:mode");
|
|
// @todo this is dirty way to sync across nested apps
|
// don't apply filters for "all" on "next_task"
|
const actionParams = {
|
ordering: view.ordering,
|
selectedItems: selected?.snapshot ?? { all: false, included: [] },
|
filters: {
|
conjunction: view.conjunction ?? "and",
|
items: view.serializedFilters ?? [],
|
},
|
};
|
|
if (actionId === "next_task") {
|
const isSelectAll = actionParams.selectedItems.all === true;
|
const isAllLabelStreamMode = labelStreamMode === "all";
|
const isFilteredLabelStreamMode = labelStreamMode === "filtered";
|
if (isAllLabelStreamMode && !isSelectAll) {
|
delete actionParams.filters;
|
|
if (actionParams.selectedItems.all === false && actionParams.selectedItems.included.length === 0) {
|
delete actionParams.selectedItems;
|
delete actionParams.ordering;
|
}
|
} else if (isFilteredLabelStreamMode) {
|
delete actionParams.selectedItems;
|
}
|
}
|
|
if (actionCallback instanceof Function) {
|
const result = actionCallback(actionParams, view);
|
self.SDK.invoke("actionDialogOkComplete", actionId, {
|
result,
|
view: viewReloaded,
|
project: projectFetched,
|
});
|
return result;
|
}
|
|
const requestParams = {
|
id: actionId,
|
};
|
|
if (isDefined(view.id) && !view?.virtual) {
|
requestParams.tabID = view.id;
|
}
|
|
if (options.body) {
|
Object.assign(actionParams, options.body);
|
}
|
|
const result = yield self.apiCall("invokeAction", requestParams, {
|
body: actionParams,
|
});
|
|
if (result.async) {
|
self.SDK.invoke("toast", { message: "Your action is being processed in the background.", type: "info" });
|
}
|
|
if (result.reload) {
|
self.SDK.reload();
|
self.SDK.invoke("actionDialogOkComplete", actionId, {
|
result,
|
view: viewReloaded,
|
project: projectFetched,
|
});
|
return;
|
}
|
|
if (options.reload !== false) {
|
yield view.reload();
|
yield self.fetchProject();
|
projectFetched = self.project;
|
view.clearSelection();
|
}
|
|
view?.unlock?.();
|
|
self.SDK.invoke("actionDialogOkComplete", actionId, {
|
result,
|
view: viewReloaded,
|
project: projectFetched,
|
});
|
return result;
|
}),
|
|
crash(options = {}) {
|
if (options.redirect !== true) {
|
self.destroy();
|
self.crashed = true;
|
}
|
self.SDK.invoke("crash", options);
|
},
|
|
destroy() {
|
if (self.taskStore) {
|
self.taskStore?.clear();
|
self.taskStore = undefined;
|
}
|
|
if (self.annotationStore) {
|
self.annotationStore?.clear();
|
self.annotationStore = undefined;
|
}
|
|
clearTimeout(self._poll);
|
},
|
}));
|
