<script lang="ts">

import {

defineComponent, ref, toRef, computed, Ref,

reactive, watch, inject, nextTick, onBeforeUnmount, PropType,

} from 'vue';

import type { Vue } from 'vue/types/vue';

import type Vuetify from 'vuetify/lib';

import { cloneDeep, debounce } from 'lodash';

/* VUE MEDIA ANNOTATOR */

import {

useAttributes,

useImageEnhancements,

useLineChart,

useTimeObserver,

useEventChart,

} from 'vue-media-annotator/use';

import {

Track, Group,

CameraStore,

StyleManager, TrackFilterControls, GroupFilterControls,

} from 'vue-media-annotator/index';

import { provideAnnotator } from 'vue-media-annotator/provides';

import {

ImageAnnotator,

VideoAnnotator,

LargeImageAnnotator,

LayerManager,

useMediaController,

} from 'vue-media-annotator/components';

import type { AnnotationId } from 'vue-media-annotator/BaseAnnotation';

import { getResponseError } from 'vue-media-annotator/utils';

/* DIVE COMMON */

import PolygonBase from 'dive-common/recipes/polygonbase';

import HeadTail from 'dive-common/recipes/headtail';

import EditorMenu from 'dive-common/components/EditorMenu.vue';

import ConfidenceFilter from 'dive-common/components/ConfidenceFilter.vue';

import UserGuideButton from 'dive-common/components/UserGuideButton.vue';

import DeleteControls from 'dive-common/components/DeleteControls.vue';

import ControlsContainer from 'dive-common/components/ControlsContainer.vue';

import Sidebar from 'dive-common/components/Sidebar.vue';

import { useModeManager, useSave } from 'dive-common/use';

import clientSettingsSetup, { clientSettings } from 'dive-common/store/settings';

import { useApi, FrameImage, DatasetType } from 'dive-common/apispec';

import { usePrompt } from 'dive-common/vue-utilities/prompt-service';

import context from 'dive-common/store/context';

import { MarkChangesPendingFilter } from 'vue-media-annotator/BaseFilterControls';

import GroupSidebarVue from './GroupSidebar.vue';

import MultiCamToolsVue from './MultiCamTools.vue';

import MultiCamToolbar from './MultiCamToolbar.vue';

import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';

export interface ImageDataItem {

url: string;

filename: string;

}

export default defineComponent({

components: {

ControlsContainer,

DeleteControls,

Sidebar,

LayerManager,

VideoAnnotator,

ImageAnnotator,

LargeImageAnnotator,

ConfidenceFilter,

UserGuideButton,

EditorMenu,

MultiCamToolbar,

PrimaryAttributeTrackFilter,

},

// TODO: remove this in vue 3

props: {

id: {

type: String,

required: true,

},

revision: {

type: Number,

default: undefined,

},

readOnlyMode: {

type: Boolean,

default: false,

},

currentSet: {

type: String,

default: '',

},

comparisonSets: {

type: Array as PropType<string[]>,

default: () => [],

},

},

setup(props, { emit }) {

const { prompt } = usePrompt();

const loadError = ref('');

const baseMulticamDatasetId = ref(null as string | null);

const datasetId = toRef(props, 'id');

const multiCamList: Ref<string[]> = ref(['singleCam']);

const defaultCamera = ref('singleCam');

const playbackComponent = ref(undefined as Vue | undefined);

const readonlyState = computed(() => props.readOnlyMode

|| props.revision !== undefined || !!(props.comparisonSets && props.comparisonSets.length));

const sets: Ref<string[]> = ref([]);

const displayComparisons = ref(props.comparisonSets.length

? props.comparisonSets.slice(0, 1) : props.comparisonSets);

const selectedSet = ref('');

const {

aggregateController,

onResize,

clear: mediaControllerClear,

} = useMediaController();

const { time, updateTime, initialize: initTime } = useTimeObserver();

const imageData = ref({ singleCam: [] } as Record<string, FrameImage[]>);

const datasetType: Ref<DatasetType> = ref('image-sequence');

const datasetName = ref('');

const saveInProgress = ref(false);

const videoUrl: Ref<Record<string, string>> = ref({});

const {

loadDetections, loadMetadata, saveMetadata, getTiles, getTileURL,

} = useApi();

const progress = reactive({

// Loaded flag prevents annotator window from populating

// with stale data from props, for example if a persistent store

// like vuex is used to drive them.

loaded: false,

// Tracks loaded

progress: 0,

// Total tracks

total: 0,

});

const controlsRef = ref();

const controlsHeight = ref(0);

const controlsCollapsed = ref(false);

const sideBarCollapsed = ref(false);

const progressValue = computed(() => {

if (progress.total > 0 && (progress.progress !== progress.total)) {

return Math.round((progress.progress / progress.total) * 100);

}

return 0;

});

/**

* Annotation window style source based on value of timeline visualization

*/

const colorBy = computed(() => {

if (controlsRef.value?.currentView === 'Groups') {

return 'group';

}

return 'track';

});

const {

save: saveToServer,

markChangesPending,

discardChanges,

pendingSaveCount,

addCamera: addSaveCamera,

removeCamera: removeSaveCamera,

} = useSave(datasetId, readonlyState);

const {

imageEnhancements,

imageEnhancementOutputs,

isDefaultImage,

setImageEnhancements,

setSVGFilters,

} = useImageEnhancements();

const recipes = [

new PolygonBase(),

new HeadTail(),

];

const vuetify = inject('vuetify') as Vuetify;

const trackStyleManager = new StyleManager({ markChangesPending, vuetify });

const groupStyleManager = new StyleManager({ markChangesPending, vuetify });

const cameraStore = new CameraStore({ markChangesPending });

// This context for removal

const removeGroups = (id: AnnotationId) => {

cameraStore.removeGroups(id);

};

const setTrackType = (

id: AnnotationId,

newType: string,

confidenceVal?: number,

currentType?: string,

) => {

cameraStore.setTrackType(id, newType, confidenceVal, currentType);

};

const removeTypes = (id: AnnotationId, types: string[]) => cameraStore.removeTypes(id, types);

const getTracksMerged = (id: AnnotationId) => cameraStore.getTracksMerged(id);

const groupFilters = new GroupFilterControls({

sorted: cameraStore.sortedGroups,

markChangesPending: (markChangesPending as MarkChangesPendingFilter),

remove: removeGroups,

setType: setTrackType,

removeTypes,

});

// This context for removal

const removeTracks = (id: AnnotationId) => {

cameraStore.removeTracks(id);

};

const trackFilters = new TrackFilterControls({

sorted: cameraStore.sortedTracks,

remove: removeTracks,

markChangesPending: (markChangesPending as MarkChangesPendingFilter),

lookupGroups: cameraStore.lookupGroups,

getTrack: (track: AnnotationId, camera = 'singleCam') => (cameraStore.getTrack(track, camera)),

groupFilterControls: groupFilters,

setType: setTrackType,

removeTypes,

});

clientSettingsSetup(trackFilters.allTypes);

// Provides wrappers for actions to integrate with settings

const {

linkingTrack,

linkingCamera,

multiSelectList,

multiSelectActive,

selectedFeatureHandle,

selectedTrackId,

editingMultiTrack,

editingGroupId,

handler,

editingMode,

editingDetails,

visibleModes,

selectedKey,

selectedCamera,

editingTrack,

} = useModeManager({

recipes,

trackFilterControls: trackFilters,

groupFilterControls: groupFilters,

cameraStore,

aggregateController,

readonlyState,

});

const {

attributesList: attributes,

loadAttributes,

setAttribute,

deleteAttribute,

attributeFilters,

deleteAttributeFilter,

addAttributeFilter,

modifyAttributeFilter,

sortAndFilterAttributes,

setTimelineEnabled,

setTimelineFilter,

attributeTimelineData,

timelineFilter,

timelineEnabled,

} = useAttributes({

markChangesPending,

trackStyleManager,

selectedTrackId,

cameraStore,

});

const allSelectedIds = computed(() => {

const selected = selectedTrackId.value;

if (selected !== null) {

return multiSelectList.value.concat(selected);

}

return multiSelectList.value;

});

const { lineChartData } = useLineChart({

enabledTracks: trackFilters.enabledAnnotations,

typeStyling: trackStyleManager.typeStyling,

allTypes: trackFilters.allTypes,

getTracksMerged,

});

const { eventChartData } = useEventChart({

enabledTracks: trackFilters.enabledAnnotations,

selectedTrackIds: allSelectedIds,

typeStyling: trackStyleManager.typeStyling,

getTracksMerged,

});

const { eventChartData: groupChartData } = useEventChart({

enabledTracks: groupFilters.enabledAnnotations,

typeStyling: groupStyleManager.typeStyling,

selectedTrackIds: computed(() => {

if (editingGroupId.value !== null) {

return [editingGroupId.value];

}

return [];

}),

getTracksMerged,

});

async function trackSplit(trackId: AnnotationId | null, frame: number) {

if (typeof trackId === 'number') {

const track = cameraStore.getTrack(trackId, selectedCamera.value);

const groups = cameraStore.lookupGroups(trackId);

let newtracks: [Track, Track];

try {

newtracks = track.split(frame, cameraStore.getNewTrackId(), cameraStore.getNewTrackId() + 1);

} catch (err) {

await prompt({

title: 'Error while splitting track',

text: err as string,

positiveButton: 'OK',

});

return;

}

const result = await prompt({

title: 'Confirm',

text: 'Do you want to split the selected track?',

confirm: true,

});

if (!result) {

return;

}

const wasEditing = editingTrack.value;

handler.trackSelect(null);

const trackStore = cameraStore.camMap.value.get(selectedCamera.value)?.trackStore;

if (trackStore) {

trackStore.remove(trackId);

trackStore.insert(newtracks[0]);

trackStore.insert(newtracks[1]);

}

if (groups.length) {

// If the track belonged to groups, add the new tracks

// to the same groups the old tracks belonged to.

const groupStore = cameraStore.camMap.value.get(selectedCamera.value)?.groupStore;

if (groupStore) {

groupStore.trackRemove(trackId);

groups.forEach((group) => {

group.removeMembers([trackId]);

group.addMembers({

[newtracks[0].id]: { ranges: [[newtracks[0].begin, newtracks[0].end]] },

[newtracks[1].id]: { ranges: [[newtracks[1].begin, newtracks[1].end]] },

});

});

}

}

handler.trackSelect(newtracks[1].id, wasEditing);

}

}

// Remove a track from within a camera multi-track into it's own track

function unlinkCameraTrack(trackId: AnnotationId, camera: string) {

const track = cameraStore.getTrack(trackId, camera);

handler.trackSelect(null, false);

const newTrack = Track.fromJSON({

id: cameraStore.getNewTrackId(),

meta: track.meta,

begin: track.begin,

end: track.end,

features: track.features,

confidencePairs: track.confidencePairs,

attributes: track.attributes,

});

handler.removeTrack([trackId], true, camera);

const trackStore = cameraStore.camMap.value.get(camera)?.trackStore;

if (trackStore) {

trackStore.insert(newTrack, { imported: false });

}

handler.trackSelect(newTrack.trackId);

}

/**

* Takes a BaseTrack and a merge Track and will attempt to merge the existing track

* into the camera and baseTrack.

* Requires that baseTrack doesn't have a track for the camera already

* Also requires that the mergeTrack isn't a track across multiple cameras.

*/

function linkCameraTrack(baseTrack: AnnotationId, linkTrack: AnnotationId, camera: string) {

cameraStore.camMap.value.forEach((subCamera, key) => {

const { trackStore } = subCamera;

if (trackStore && trackStore.getPossible(linkTrack) && key !== camera) {

throw Error(`Attempting to link Track: ${linkTrack} to camera: ${camera} where there the track exists in another camera: ${key}`);

}

});

const track = cameraStore.getTrack(linkTrack, camera);

const selectedTrack = cameraStore.getAnyTrack(baseTrack);

handler.removeTrack([linkTrack], true, camera);

const newTrack = Track.fromJSON({

id: baseTrack,

meta: track.meta,

begin: track.begin,

end: track.end,

features: track.features,

confidencePairs: selectedTrack.confidencePairs,

attributes: track.attributes,

});

const trackStore = cameraStore.camMap.value.get(camera)?.trackStore;

if (trackStore) {

trackStore.insert(newTrack, { imported: false });

}

handler.trackSelect(newTrack.id);

}

watch(linkingTrack, () => {

if (linkingTrack.value !== null && selectedTrackId.value !== null) {

linkCameraTrack(selectedTrackId.value, linkingTrack.value, linkingCamera.value);

handler.stopLinking();

}

});

async function save(setVal?: string) {

// If editing the track, disable editing mode before save

saveInProgress.value = true;

if (editingTrack.value) {

handler.trackSelect(selectedTrackId.value, false);

}

const saveSet = setVal === 'default' ? undefined : setVal;

// Need to mark all items as updated for any non-default sets

if (saveSet && setVal !== props.currentSet) {

const singleCam = cameraStore.camMap.value.get('singleCam');

if (singleCam) {

singleCam.trackStore.annotationMap.forEach((track) => {

markChangesPending({ action: 'upsert', track });

});

}

}

try {

await saveToServer({

customTypeStyling: trackStyleManager.getTypeStyles(trackFilters.allTypes),

customGroupStyling: groupStyleManager.getTypeStyles(groupFilters.allTypes),

confidenceFilters: trackFilters.confidenceFilters.value,

imageEnhancements: imageEnhancements.value,

// TODO Group confidence filters are not yet supported.

}, saveSet);

} catch (err) {

let text = 'Unable to Save Data';

if (err.response && err.response.status === 403) {

text = 'You do not have permission to Save Data to this Folder.';

}

await prompt({

title: 'Error while Saving Data',

text,

positiveButton: 'OK',

});

saveInProgress.value = false;

throw err;

}

saveInProgress.value = false;

}

function saveThreshold() {

saveMetadata(datasetId.value, {

confidenceFilters: trackFilters.confidenceFilters.value,

});

}

function saveImageEnhancements() {

saveMetadata(datasetId.value, {

imageEnhancements: imageEnhancements.value,

});

}

const debouncedSaveImageEnhancements = debounce(saveImageEnhancements, 1000, { trailing: true });

watch(imageEnhancements, debouncedSaveImageEnhancements, { deep: true });

// Navigation Guards used by parent component

async function warnBrowserExit(event: BeforeUnloadEvent) {

if (pendingSaveCount.value === 0) return;

event.preventDefault();

// eslint-disable-next-line no-param-reassign

event.returnValue = '';

}

async function navigateAwayGuard(): Promise<boolean> {

let result = true;

if (pendingSaveCount.value > 0) {

result = await prompt({

title: 'Save Items',

text: 'There is unsaved data, would you like to continue or cancel and save?',

positiveButton: 'Discard and Leave',

negativeButton: 'Don\'t Leave',

confirm: true,

});

}

return result;

}

async function handleSetChange(set: string) {

const guard = await navigateAwayGuard();

if (guard) {

emit('update:set', set);

}

}

const selectCamera = async (camera: string, editMode = false) => {

if (linkingCamera.value !== '' && linkingCamera.value !== camera) {

await prompt({

title: 'In Linking Mode',

text: ['Currently in Linking Mode, please hit OK and Escape to exit',

'Linking mode or choose another Track in the highlighted Camera to Link'],

positiveButton: 'OK',

});

return;

}

// EditTrack is set false by the LayerMap before executing this

if (selectedTrackId.value !== null) {

// If we had a track selected and it still exists with

// a feature length of 0 we need to remove it

const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);

if (track && track.features.length === 0) {

handler.trackAbort();

}

}

selectedCamera.value = camera;

/**

* Enters edit mode if no track exists for the camera and forcing edit mode

* or if a track exists and are alrady in edit mode we don't set it again

* Remember trackEdit(number) is a toggle for editing mode

*/

if (selectedTrackId.value !== null && (editMode || editingTrack.value)) {

const track = cameraStore.getPossibleTrack(selectedTrackId.value, selectedCamera.value);

if (track === undefined || !editingTrack.value) {

//Stay in edit mode for the current track

handler.trackEdit(selectedTrackId.value);

}

}

emit('change-camera', camera);

};

// Handles changing camera using the dropdown or mouse clicks

// When using mouse clicks and right button it will remain in edit mode for the selected track

const changeCamera = (camera: string, event?: MouseEvent) => {

if (selectedCamera.value === camera) {

return;

}

if (event) {

event.preventDefault();

}

// Left click should kick out of editing mode automatically

if (event?.button === 0) {

editingTrack.value = false;

}

selectCamera(camera, event?.button === 2);

emit('change-camera', camera);

};

/** Trigger data load */

const loadData = async () => {

try {

// Close and reset sideBar

context.resetActive();

const meta = await loadMetadata(datasetId.value);

const defaultCameraMeta = meta.multiCamMedia?.cameras[meta.multiCamMedia.defaultDisplay];

baseMulticamDatasetId.value = datasetId.value;

if (defaultCameraMeta !== undefined && meta.multiCamMedia) {

/* We're loading a multicamera dataset */

const { cameras } = meta.multiCamMedia;

multiCamList.value = Object.keys(cameras);

defaultCamera.value = meta.multiCamMedia.defaultDisplay;

changeCamera(defaultCamera.value);

baseMulticamDatasetId.value = datasetId.value;

if (!selectedCamera.value) {

throw new Error('Multicamera dataset without default camera specified.');

}

}

/* Otherwise, complete loading of the dataset */

trackStyleManager.populateTypeStyles(meta.customTypeStyling);

groupStyleManager.populateTypeStyles(meta.customGroupStyling);

if (meta.customTypeStyling) {

trackFilters.importTypes(Object.keys(meta.customTypeStyling), false);

}

if (meta.customGroupStyling) {

groupFilters.importTypes(Object.keys(meta.customGroupStyling), false);

}

if (meta.attributes) {

loadAttributes(meta.attributes);

}

trackFilters.setConfidenceFilters(meta.confidenceFilters);

if (meta.imageEnhancements) {

setImageEnhancements(meta.imageEnhancements);

}

datasetName.value = meta.name;

initTime({

frameRate: meta.fps,

originalFps: meta.originalFps || null,

});

for (let i = 0; i < multiCamList.value.length; i += 1) {

const camera = multiCamList.value[i];

let cameraId = baseMulticamDatasetId.value;

if (multiCamList.value.length > 1) {

cameraId = `${baseMulticamDatasetId.value}/${camera}`;

}

// eslint-disable-next-line no-await-in-loop

const subCameraMeta = await loadMetadata(cameraId);

datasetType.value = subCameraMeta.type as DatasetType;

imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];

if (subCameraMeta.videoUrl) {

videoUrl.value[camera] = subCameraMeta.videoUrl;

}

cameraStore.addCamera(camera);

addSaveCamera(camera);

// eslint-disable-next-line no-await-in-loop

const {

tracks,

groups,

sets: foundSets,

// eslint-disable-next-line no-await-in-loop

} = await loadDetections(cameraId, props.revision, props.currentSet);

sets.value = foundSets.filter((item) => item);

if (props.currentSet !== '' || sets.value.length > 0) {

sets.value.push('default');

}

selectedSet.value = props.currentSet ? props.currentSet : 'default';

progress.total = tracks.length + groups.length;

const trackStore = cameraStore.camMap.value.get(camera)?.trackStore;

const groupStore = cameraStore.camMap.value.get(camera)?.groupStore;

if (trackStore && groupStore) {

// We can start sorting if our total tracks are less than 20000

// If greater we do one sort at the end instead to speed loading.

if (tracks.length < 20000) {

trackStore.setEnableSorting();

}

let baseSet: string | undefined;

if (props.comparisonSets.length) {

baseSet = selectedSet.value;

}

for (let j = 0; j < tracks.length; j += 1) {

if (j % 4000 === 0) {

/* Every N tracks, yeild some cycles for other scheduled tasks */

progress.progress = j;

// eslint-disable-next-line no-await-in-loop

await new Promise((resolve) => window.setTimeout(resolve, 500));

}

trackStore.insert(Track.fromJSON(tracks[j], baseSet), { imported: true });

}

for (let j = 0; j < groups.length; j += 1) {

if (j % 4000 === 0) {

/* Every N tracks, yeild some cycles for other scheduled tasks */

progress.progress = tracks.length + j;

// eslint-disable-next-line no-await-in-loop

await new Promise((resolve) => window.setTimeout(resolve, 500));

}

groupStore.insert(Group.fromJSON(groups[j]), { imported: true });

}

}

// Check if we load more data for comparions

if (props.comparisonSets.length) {

// Only compare one at a time

const firstSet = props.comparisonSets.slice(0, 1);

for (let setIndex = 0; setIndex < firstSet.length; setIndex += 1) {

const loadingSet = firstSet[setIndex] === 'default' ? undefined : firstSet[setIndex];

const {

tracks: setTracks,

groups: setGroups,

// eslint-disable-next-line no-await-in-loop

} = await loadDetections(cameraId, props.revision, loadingSet);

progress.total = setTracks.length + setGroups.length;

if (trackStore && groupStore) {

// We can start sorting if our total tracks are less than 20000

// If greater we do one sort at the end instead to speed loading.

if (tracks.length < 20000) {

trackStore.setEnableSorting();

}

for (let j = 0; j < setTracks.length; j += 1) {

if (j % 4000 === 0) {

/* Every N tracks, yeild some cycles for other scheduled tasks */

progress.progress = j;

// eslint-disable-next-line no-await-in-loop

await new Promise((resolve) => window.setTimeout(resolve, 500));

}

// We need to increment the trackIds for the new comparison sets

setTracks[j].id = trackStore.getNewId();

trackStore.insert(

Track.fromJSON(

setTracks[j],

firstSet[setIndex],

),

{ imported: true },

);

}

}

}

}

}

cameraStore.camMap.value.forEach((cam, key) => {

const { trackStore } = cam;

// Enable Sorting after loading is complete if it isn't enabled already

if (trackStore) {

trackStore.setEnableSorting();

}

if (!multiCamList.value.includes(key)) {

cameraStore.removeCamera(key);

removeSaveCamera(key);

}

});

// Needs to be done after the cameraMap is created

if (meta.attributeTrackFilters) {

trackFilters.loadTrackAttributesFilter(Object.values(meta.attributeTrackFilters));

}

progress.loaded = true;

// If multiCam add Tools and remove group Tools

if (cameraStore.camMap.value.size > 1) {

context.unregister({

description: 'Group Manager',

component: GroupSidebarVue,

});

context.register({

component: MultiCamToolsVue,

description: 'Multi Camera Tools',

});

} else {

context.unregister({

component: MultiCamToolsVue,

description: 'Multi Camera Tools',

});

context.register({

description: 'Group Manager',

component: GroupSidebarVue,

});

}

} catch (err) {

progress.loaded = false;

console.error(err);

const errorEl = document.createElement('div');

errorEl.innerHTML = getResponseError(err);

loadError.value = errorEl.innerText

.concat(". If you don't know how to resolve this, please contact the server administrator.");

throw err;

}

};

loadData();

const reloadAnnotations = async () => {

progress.loaded = false;

discardChanges();

cameraStore.clearAll();

mediaControllerClear();

await loadData();

displayComparisons.value = props.comparisonSets.length

? props.comparisonSets.slice(0, 1) : props.comparisonSets;

};

watch(datasetId, reloadAnnotations);

watch(readonlyState, () => handler.trackSelect(null, false));

function handleResize() {

if (controlsRef.value) {

controlsHeight.value = controlsRef.value.$el.clientHeight;

onResize();

}

}

const observer = new ResizeObserver(handleResize);

/* On a reload this will watch the controls element and add on observer

* so that once done loading the or if the controlsRef is collapsed it will resize all cameras

*/

watch(controlsRef, (previous) => {

if (previous) observer.unobserve(previous.$el);

if (controlsRef.value) observer.observe(controlsRef.value.$el);

});

watch([controlsCollapsed, sideBarCollapsed], async () => {

await nextTick();

handleResize();

});

onBeforeUnmount(() => {

if (controlsRef.value) observer.unobserve(controlsRef.value.$el);

});

const globalHandler = {

...handler,

save,

trackSplit,

setAttribute,

deleteAttribute,

reloadAnnotations,

setSVGFilters,

selectCamera,

linkCameraTrack,

unlinkCameraTrack,

setChange: handleSetChange,

};

const useAttributeFilters = {

attributeFilters,

addAttributeFilter,

deleteAttributeFilter,

modifyAttributeFilter,

sortAndFilterAttributes,

setTimelineEnabled,

setTimelineFilter,

attributeTimelineData,

timelineFilter,

timelineEnabled,

};

provideAnnotator(

{

annotatorPreferences: toRef(clientSettings, 'annotatorPreferences'),

attributes,

cameraStore,

datasetId,

editingMode,

groupFilters,

groupStyleManager,

multiSelectList,

pendingSaveCount,

progress,

revisionId: toRef(props, 'revision'),

annotationSet: toRef(props, 'currentSet'),

annotationSets: sets,

comparisonSets: toRef(props, 'comparisonSets'),

selectedCamera,

selectedKey,

selectedTrackId,

editingMultiTrack,

editingGroupId,

time,

trackFilters,

trackStyleManager,

visibleModes,

readOnlyMode: readonlyState,

imageEnhancements,

},

globalHandler,

useAttributeFilters,

);

const disableAnnotationFilters = computed(() => (

trackFilters.disableAnnotationFilters.value

));

return {

/* props */

aggregateController,

confidenceFilters: trackFilters.confidenceFilters,

cameraStore,

controlsRef,

controlsHeight,

controlsCollapsed,

sideBarCollapsed,

colorBy,

clientSettings,

datasetName,

datasetType,

editingTrack,

editingMode,

editingDetails,

eventChartData,

groupChartData,

imageData,

lineChartData,

loadError,

multiSelectActive,

pendingSaveCount,

progress,

progressValue,

saveInProgress,

playbackComponent,

recipes,

selectedFeatureHandle,

selectedTrackId,

editingGroupId,

selectedKey,

trackFilters,

videoUrl,

visibleModes,

frameRate: time.frameRate,

originalFps: time.originalFps,

context,

readonlyState,

imageEnhancementOutputs,

isDefaultImage,

disableAnnotationFilters,

/* large image methods */

getTiles,

getTileURL,

/* methods */

handler: globalHandler,

save,

saveThreshold,

updateTime,

// multicam

multiCamList,

defaultCamera,

selectedCamera,

changeCamera,

// For Navigation Guarding

navigateAwayGuard,

warnBrowserExit,

reloadAnnotations,

// Annotation Sets,

sets,

selectedSet,

displayComparisons,

annotationSetColor: trackStyleManager.typeStyling.value.annotationSetColor,

};

},

});

</script>

<template>

<v-main class="viewer">

<v-app-bar app>

<slot name="title" />

<span

class="title pl-3 flex-row"

style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis;"

>

{{ datasetName }}

<v-tooltip

v-if="currentSet || sets.length > 0 || comparisonSets.length"

bottom

>

<template #activator="{ on }">

<v-chip

outlined

:color="annotationSetColor(currentSet || 'default')"

small

v-on="on"

@click="context.toggle('AnnotationSets')"

> {{ currentSet || 'default' }}</v-chip>

</template>

<span>Custom Annotation Set. Click to open the Annotation Set Settings</span>

</v-tooltip>

<span

v-if="displayComparisons && displayComparisons.length"

style="font-size:small"

class="px-2"

> Comparing: </span>

<v-tooltip

v-if="displayComparisons && displayComparisons.length"

bottom

>

<template #activator="{ on: onIcon }">

<v-chip

class="pl-2"

small

outlined

:color="annotationSetColor(displayComparisons[0] || 'default')"

v-on="onIcon"

> {{ displayComparisons[0] }}</v-chip>

</template>

Click on the {{ currentSet || 'default' }} chip to open the Comparison Menu

</v-tooltip>

<div

v-if="readonlyState"

class="mx-auto my-0 pa-0"

style="line-height:0.2em;"

>

<v-tooltip

bottom

>

<template #activator="{ on }">

<v-chip

class="warning pr-1"

style="white-space:nowrap;display:inline"

small

v-on="on"

>

Read Only Mode

<v-icon

class="pl-1"

small

>mdi-information-outline</v-icon>

</v-chip>

</template>

<span>Read Only Mode: Editing, Deleting and Importing actions are disabled</span>

</v-tooltip>

</div>

</span>

<v-spacer />

<template #extension>

<v-tooltip

bottom

>

<template #activator="{ on }">

<v-icon

v-on="on"

@click="sideBarCollapsed = !sideBarCollapsed"

>

{{ sideBarCollapsed ? 'mdi-chevron-right-box' : 'mdi-chevron-left-box' }}

</v-icon>

</template>

<span>Collapse Side Panel</span>

</v-tooltip>

<EditorMenu

v-bind="{

editingMode,

visibleModes,

editingTrack,

recipes,

multiSelectActive,

editingDetails,