Enable stacking multiple code panels in the tabs pane.

[CYX22222003]

What feature(s) would you like to see in RepoSense

Currently, the tabs-pane can only show one code panel and it is displayed when user clock on the relevant icon in a chart under the summary section.

To give a better way to compare a subset of file, we should give users the ability to stack over multiple code panel in the tabs pane section. With the global filter search key words specified in the summary, it will be much easier for users to visualize all files that contain the keyword at the tabs pane section.

Is the feature request related to a problem?

#2322

If applicable, describe alternatives you've considered

The current implementation to solve #2106 is passing the global filter globs to each individual filter glob keywords and files that matched the keyword will be displayed when users click on the icon to show code panel for each individual charts.

Additional context

This may require some significant change to the current frontend layout. We may need to work on this issue incrementally

[JadeCheah]

Hi, can i try to work on this issue?

[CYX22222003]

@JadeCheah

Thanks for your passion! This may be a challenging task. You can start investigating this issue first. We may need to create some sub-issues and implement this incrementally.

[JadeCheah]

Here’s my current understanding and plan for the stacked panels after a global glob filter (correct me if i am wrong):

• Currently, The global glob filter updates filteredFileName and triggers getFiltered() in c-summary.vue, which refreshes the left panel (this.filtered).

• The right panel is only populated when openTabAuthorship() is called (manually by clicking “view author’s contribution”).

• openTabAuthorship() builds an info object and commits it with updateTabAuthorshipInfo, but this is a single-panel flow because addSelectedTab() updates activeUser, activeRepo and activeTabType, overwriting the previous state.

• Therefore, simply calling openTabAuthorship() in a loop after getFiltered() won’t work for stacked panels, as each call overwrites the previous one.

I plan to:

• In c-home.vue, when a glob filter is present, render multiple c-authorship components, stacked vertically (instead of the current single panel).

• Add a new method openStackAuthorship() that loops over this.filtered and builds the same info objects as openTabAuthorship().

A couple of points I’d like to clarify before proceeding:

• Should I modify the existing tabAuthorshipInfo to become an array and update updateTabAuthorshipInfo accordingly, or should I introduce a new Vuex mutation and a new state array (e.g. stackedAuthorshipInfos) dedicated to the stacked view?

• If possible, could you give me some pointers on how I may approach breaking this problem down into sub-issues? That would be really helpful!