Circular inclusion of Pinia store. Is it wrong ?

[lchauvin]

Hello,

I'm working on a feature to 'synchronize' images (when they come from the same patient and are aligned) to scroll all images together.

I implemented it, and it works, but lint is complaining about a circular import when trying to commit. I talked to some people, and they told me it's okay if it's regarding the pinia store, as it handles the circular import as long as it's not calling getters and actions.

I added this code in datasets-images.ts:

toggleSyncImages() {
       this.isSync = !this.isSync;

      if (this.isSync) {
        // Synchronize all images when toggled
        useViewStore().viewIDs.forEach((viewID) => {
          const currentSlice = useCurrentSlice(viewID);
          this.idList.forEach((imageID) => {
            useViewSliceStore().updateConfig(viewID, imageID, { slice: currentSlice.value?.number });
          });
        });
      }
    }

Here, useCurrentSlice calls useCurrentImage which includes useImageStore which is the store toggleSyncImages is.
Is this implementation okay? Should I just add a comment to ignore this lint error message? Or is my implementation flawed?
I tried couple of different implementations (like put this code in datasets.ts instead), but I always end up with some circular import anyway.

[floryst]

Here are two ways you can avoid the circular dependency:

• move the toggle sync state + action to view-configs/slicing.ts.
• Put the sync state + action in a new store file.

[lchauvin]

Moving to slicing.ts still lead to some circular dependencies:

I need to get the views, so I import useViewStore (from views.ts), which itself import view-configs.ts which imports slicing.ts.

[floryst]

You should be able to drop the dependency on useViewStore() by getting the list of active views via Object.keys(configs) inside slicing.ts. If that doesn't work, then using a new store file should do the trick.

[lchauvin]

Perfect !! Thank you.

Also, should the sync state also be in slicing.ts or in datasets-images.ts ?

[floryst]

The most relevant store would be slicing.ts, since right now your flag controls synced slicing.

[lchauvin]

I redesigned everything to be in slicing.ts. I think it makes more sense now, and no more circular import !!

Thanks.