Client/attribute ui

client/platform/desktop/api/main.ts

@@ -51,6 +51,16 @@ async function getAttributes() {
   return Promise.resolve([] as Attribute[]);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function setAttribute({ addNew, data }: {addNew: boolean | undefined; data: Attribute}) {
+  return Promise.resolve();
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function deleteAttribute(data: Attribute) {
+  return Promise.resolve([] as Attribute[]);
+}
+
 async function getPipelineList(settings: Settings): Promise<Pipelines> {
   return ipcRenderer.invoke('get-pipeline-list', settings);
 }
@@ -139,6 +149,8 @@ async function runPipeline(itemId: string, pipeline: string, settings: Settings)
 export {
   /* Standard common APIs */
   getAttributes,
+  setAttribute,
+  deleteAttribute,
   getPipelineList,
   runPipeline,
   getTrainingConfigurations,

client/platform/web-girder/App.vue

@@ -10,6 +10,8 @@ import { DatasetMeta, provideApi } from 'viame-web-common/apispec';
 import { VIAMEDataset } from './store/Dataset';
 import {
   getAttributes,
+  setAttribute,
+  deleteAttribute,
   getPipelineList,
   runPipeline,
   getTrainingConfigurations,
@@ -32,6 +34,8 @@ export default defineComponent({
 
     provideApi({
       getAttributes,
+      setAttribute,
+      deleteAttribute,
       getPipelineList,
       runPipeline,
       getTrainingConfigurations,

client/platform/web-girder/api/viame.service.ts

@@ -10,6 +10,7 @@ interface ValidationResponse {
   message: string;
 }
 
+
 function makeViameFolder({
   folderId, name, fps, type,
 }: {
@@ -52,6 +53,23 @@ async function getAttributes(): Promise<Attribute[]> {
   const { data } = await girderRest.get('/viame/attribute');
   return data as Attribute[];
 }
+function setAttribute({ addNew, data }:
+   {addNew: boolean | undefined; data: Attribute}): Promise<Attribute[]> {
+  if (addNew) {
+    return girderRest.post('/viame/attribute', data);
+  }
+  return girderRest.put(
+    `/viame/attribute/${data._id}`,
+    data,
+  );
+}
+
+function deleteAttribute(data: Attribute): Promise<Attribute> {
+  return girderRest.delete(
+    `/viame/attribute/${data._id}`,
+  );
+}
+
 
 async function getPipelineList() {
   const { data } = await girderRest.get<Pipelines>('viame/pipelines');
@@ -100,6 +118,8 @@ async function getValidWebImages(folderId: string) {
 export {
   deleteResources,
   getAttributes,
+  setAttribute,
+  deleteAttribute,
   getPipelineList,
   makeViameFolder,
   postProcess,

client/src/components/TrackItem.vue

@@ -12,6 +12,10 @@ export default defineComponent({
   components: { TooltipBtn },
 
   props: {
+    solo: {
+      type: Boolean,
+      default: false,
+    },
     trackType: {
       type: String,
       required: true,
@@ -84,7 +88,7 @@ export default defineComponent({
 
     /* Sets styling for the selected track */
     const style = computed(() => {
-      if (props.selected) {
+      if (props.selected && !props.solo) {
         return {
           'background-color': `${vuetify.theme.themes.dark.accentBackground}`,
         };
@@ -212,7 +216,16 @@ export default defineComponent({
     :style="style"
   >
     <v-row class="px-3 pt-2 justify-center item-row">
+      <div
+        v-if="solo"
+        class="type-color-box"
+        :style="{
+          backgroundColor: color,
+        }"
+      />
+
       <v-checkbox
+        v-else
         class="my-0 ml-1 pt-0"
         dense
         hide-details
@@ -383,5 +396,14 @@ export default defineComponent({
     background-color: #1e1e1e;
     appearance: menulist;
   }
+  .type-color-box {
+  margin: 7px;
+  margin-top: 4px;
+  min-width: 15px;
+  max-width: 15px;
+  min-height: 15px;
+  max-height: 15px;
+}
+
 }
 </style>

client/src/components/TrackList.vue

@@ -113,6 +113,9 @@ export default defineComponent({
       Vue.nextTick(() => scrollToTrack(selectedTrackIdRef.value));
     }
 
+    //If we mount with selected we scroll to it automatically
+    scrollToSelectedTrack();
+
     function scrollPreventDefault(
       element: HTMLElement,
       keyEvent: KeyboardEvent,

client/src/use/useTrackStore.spec.ts

@@ -1,7 +1,7 @@
 /// <reference types="jest" />
 import Vue from 'vue';
 import CompositionApi, { watchEffect } from '@vue/composition-api';
-import useTrackStore from './useTrackStore';
+import useTrackStore, { getTrack } from './useTrackStore';
 
 Vue.use(CompositionApi);
 
@@ -50,9 +50,9 @@ describe('useTrackStore', () => {
   it('throws an error when you access a track that is missing', () => {
     const markChangesPending = () => null;
     const ts = useTrackStore({ markChangesPending });
-    expect(() => ts.getTrack(0)).toThrow('TrackId 0 not found in trackMap.');
+    expect(() => getTrack(ts.trackMap, 0)).toThrow('TrackId 0 not found in trackMap.');
     ts.addTrack(1000, 'foo');
-    expect(ts.getTrack(0)).toBeTruthy();
+    expect(getTrack(ts.trackMap, 0)).toBeTruthy();
   });
 
   it('updates a reactive list when member tracks change', async () => {

client/src/use/useTrackStore.ts

@@ -6,6 +6,16 @@ interface UseTrackStoreParams {
   markChangesPending: (type: 'upsert' | 'delete', track?: Track) => void;
 }
 
+export function getTrack(
+  trackMap: Readonly<Map<TrackId, Track>>, trackId: Readonly<TrackId>,
+): Track {
+  const track = trackMap.get(trackId);
+  if (track === undefined) {
+    throw new Error(`TrackId ${trackId} not found in trackMap.`);
+  }
+  return track;
+}
+
 /**
  * TrackStore performs operations on a collection of tracks, such as
  * add and remove.  Operations on individual tracks, such as setting
@@ -38,14 +48,6 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
     return canary.value;
   }
 
-  function getTrack(trackId: TrackId): Track {
-    const track = trackMap.get(trackId);
-    if (track === undefined) {
-      throw new Error(`TrackId ${trackId} not found in trackMap.`);
-    }
-    return track;
-  }
-
   function getNewTrackId() {
     return trackIds.value.length
       ? Math.max(...trackIds.value) + 1
@@ -87,7 +89,7 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
     if (trackId === null) {
       return;
     }
-    const track = getTrack(trackId);
+    const track = getTrack(trackMap, trackId);
     const range = [track.begin, track.end];
     if (!intervalTree.remove(range, trackId.toString())) {
       throw new Error(`TrackId ${trackId} with range ${range} not found in tree.`);
@@ -108,7 +110,7 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
    */
   async function removeTracksBelowConfidence(thresh: number) {
     trackIds.value.forEach((trackId) => {
-      const track = getTrack(trackId);
+      const track = getTrack(trackMap, trackId);
       const confidence = track.getType();
       if (confidence !== null && confidence[1] < thresh) {
         removeTrack(trackId);
@@ -119,7 +121,7 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
   const sortedTracks = computed(() => {
     _depend();
     return trackIds.value
-      .map((trackId) => getTrack(trackId))
+      .map((trackId) => getTrack(trackMap, trackId))
       .sort((a, b) => a.begin - b.begin);
   });
 
@@ -129,7 +131,6 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
     intervalTree,
     addTrack,
     insertTrack,
-    getTrack,
     getNewTrackId,
     removeTrack,
     removeTracksBelowConfidence,

client/viame-web-common/apispec.ts

@@ -58,6 +58,8 @@ interface DatasetMeta extends DatasetMetaMutable {
 
 interface Api {
   getAttributes(): Promise<Attribute[]>;
+  setAttribute({ addNew, data }: {addNew: boolean | undefined; data: Attribute}): Promise<unknown>;
+  deleteAttribute(data: Attribute): Promise<unknown>;
 
   getPipelineList(): Promise<Pipelines>;
   runPipeline(itemId: string, pipeline: string): Promise<unknown>;