Vue 3

[mzur]

Tasks:

• Install Vue 3 compat
• Set up Vite build
• Update uiv
• Test Vite hot reload
• Fix navbar dropdowns
• Find Vue Compat warnings and fix them
  • Use fake privacy page for default layout/code
  • Disable compat features to find source of warnings
  • Walk through all views and look for warnings
• Update slots to <template #slot> syntax
• Update use of v-model to new default modelValue variable name
• Define component events with emits: ['evt', ...]
• Make image annotation tool work
• Make video annotation tool work
  • Check annotation model if any properties must be reactive
  • Implement annotation session filter. Resolves Annotation session filter in the video annotation tool #281
• Replace use of $on, $once and $off.
• Replace use of inline-template.
• Update :disabled and v-bind:disabled attributes that expect the attribute to be removed if false. Use null instead.
• Rename beforeDestroy to beforeUnmount.
• Fix these locations:
  • Error Property "scollable" was accessed during render but is not defined on instance. on project overview.
  • The image/video annotation tab filter system. It uses Vue.extend, $mount(), $on() and $off(). Fix this once the image/video annotation tools are functional again with the compatibility build. Finally disable GLOBAL_EXTEND.
• Remove/replace Vue Resource. Afterwards, disable GLOBAL_PROTOTYPE. Maybe use a fetch wrapper.
  • We keep vue-resource for now, as it also can be used directly (not as Vue plugin).
• Replace Vue.Promise with native Promise
• Walk through all JS files and test their features in the UI. View routes:
  • /
  • admin
  • admin/announcements
  • admin/announcements/new
  • admin/export
    • uiv Tabs component produces warning
  • admin/federated-search
  • admin/import
  • admin/import/{token}
  • admin/label-trees
  • admin/logs
  • admin/logs/{file}
  • admin/users
  • admin/users/delete/{id}
  • admin/users/edit/{id}
  • admin/users/new
  • admin/users/{id}
  • image-annotations/{id}
  • images/{id}
  • images/{id}/annotations
  • imprint
  • label-trees
  • label-trees/create
  • label-trees/import
  • label-trees/{id}
    • uiv Tabs component produces warning
  • label-trees/{id}/members
  • label-trees/{id}/merge
  • label-trees/{id}/merge/{id2}
  • label-trees/{id}/projects
  • label-trees/{id}/versions/create
  • label-trees/{id}/versions/{id2}
  • manual
  • manual/documentation/{module}/{article?}
  • manual/tutorials/{module}/{article?}
  • notifications
  • pending-volumes/{id}
  • pending-volumes/{id}/annotation-labels
  • pending-volumes/{id}/file-labels
  • pending-volumes/{id}/finish
  • pending-volumes/{id}/label-map
  • pending-volumes/{id}/user-map
  • privacy
  • project-invitations/{uuid}
  • projects
  • projects/create
  • projects/{id}
  • projects/{id}/charts
  • projects/{id}/label-trees
  • projects/{id}/members
  • projects/{id}/reports
  • search
  • settings
  • settings/account
  • settings/authentication
  • settings/notifications
  • settings/profile
  • settings/tokens
  • terms
  • video-annotations/{id}
  • videos/{id}
  • videos/{id}/annotations
  • volumes/clone/{id}
  • volumes/create
  • volumes/edit/{id}
  • volumes/{id}
  • volumes/{id}/reports
• Update modules:
  • biigle/largo Vue 3 largo#206
  • biigle/metadata-ifdo
  • biigle/user-storage Vue 3 user-storage#55
  • biigle/user-disks Vue 3 user-disks#23
  • biigle/newsletter Remove boilerplate JS/CSS assets from bigle/module newsletter#18
  • biigle/module Vue 3 module#25
  • biigle/metadata-coco
  • biigle/maia Vue 3 maia#182
  • biigle/magic-sam Vue 3 magic-sam#49
  • biigle/laserpoints Vue 3 laserpoints#92
  • biigle/kpis
  • biigle/geo Vue 3 geo#65
  • biigle/denbi-service
  • biigle/demo
  • biigle/color-sort Vue 3 color-sort#56
  • biigle/auth-nfdi
  • biigle/auth-lslogin
  • biigle/ananas Vue 3 ananas#44
  • Checklist
    • Migrate from Mix to Vite.
    • Fix errors returned by npm run build
    • Change <script type="text/javascript"> to <script type="module"> for inline scripts.
    • Update use of Vue Resource.
    • Update <control-button> component to use scoped slot event instead of $on listener (689106d50).
    • Update slots <template slot="xxx"> to <template #xxx> syntax.
    • Update use of v-model to new default modelValue variable name.
    • Define component events with emits: ['evt', ...].
    • Replace use of $on, $once and $off.
    • Replace use of inline-template.
    • Update :disabled and v-bind:disabled attributes that expect the attribute to be removed if false. Use null instead.
    • Rename beforeDestroy to beforeUnmount.
    • Replace Vue.Promise with native Promise.
    • Fix all warnings of Vue Compat.
    • Fix import of handleErrorResponse.
    • Test all features.
• Update Docker build process (if necessary) Update build process for Vue 3 biigle#34
• Maybe remove cachebust_asset() (still useful)
• Consider to share OpenLayers similar to Vue between core and modules (e.g. magic-sam, reports, ananas, geo, ...)
  • This can't be done the way OpenLayers is built. First, there are no "dev" and "production" builds of OpenLayers. These could be created manually but: OpenLayers components are imported via specifiers such as ol/Map. With an importmap, all specifies would need to be defined, not only one as with Vue. This is just not practical, so OL will be imported individually in modules and critical components (such as styles) will be shared with the import/export system of BIIGLE.
• TEST EVERYTHING with compat MODE: 3
  • Change <script type="text/javascript"> to <script type="module"> for inline scripts that were added in the meantime
  • Check all view routes again.
  • Check if date picker components behave correctly
  • Check if echarts charts work correctly
• Invite everyone to test the UI and find errors
• Remove Vue Compat (configureCompat and TODOs), including all uses of compatConfig (also in modules)
• Test Vue2 vs Vue3 performance on huge video/image with lots of annotations
• Merge the current master/main of core and modules and check the updated code for compatibility.
• Delete dev-modules-vue3 branch.
• Check if NPM run prod silently fails when using Node 23 #984 is resolved
• Follow up with Improve annotation performance #249 (unify image and video annotation tools with composition API)

Resolves #455
Resolves #515

[dbrembilla]

When trying to dismiss an annotation in Largo, it gets stuck on loading. Tested on Firefox and Brave.
This happens also if I try to relabel something.
In some cases, the annotation gets cancelled, but it does not go back to the normal largo view and stays in loading.
No errors appear in the console

Screencast.From.2025-04-10.10-05-09.mp4

[mzur]

Another configuration issue with the instance... Please try again.

[dbrembilla]

When I open the chart page sometimes it is quite slow to load. IDK if it is because it is just a testing environment or any unrelated reason.

[dbrembilla]

The API Documentation is also not accessible, but I guess this could also be because of settings.

[dbrembilla]

In the testing instance, it appears that the imprint/privacy/Terms part of the menu is absent

In BIIGLE:

In the Vue3

[mzur]

@dbrembilla thanks for the feedback!

• Chart page: The slow loading is probably a result of the staging server having few resources. As long as it loads at all and the charts are displayed correctly, the JS is working as expected.
• I didn't bother to generate the API docs for the staging instance.
• I also didn't implement the legal pages for the staging instance.

Maybe at some point we set up an actual staging instance for testing. Then I'll use the same setup than the production instance and there will be fewer differences.

[lehecht]

The color adjustment doesn't work for the TIFF image. I'm not sure if this is a bug or if the tab should be disabled.

[mzur]

@lehecht Thanks you found the first bug there 😉 The tab should now be correctly disabled again.

[aneust]

After creating an invitation for joining a project, the button to copy the link does not work. Additionally, the expiration time of the link changes after the page is reloaded.

[mzur]

@aneust Thanks! The clipboard button does not work because the site is not served via https. There is nothing we can do about it. If people want to share links, they should operate their BIIGLE instance with https anyway.

The date change after page reload will be fixed by #1131.