58 restructure network page test visualization tables tab

[bastiennerehor]

• Make Network Page more horizontal - less vertical -> add all tabular information (node/ edge rankings) and results to table tab so user can switch from network visualization to tabular representation and results
• Adapt Analysis and Connect Node panels, only show available options, upon click, functionality is contained and explained in a popup
• Switch to GNExT Table style (Shared Component/ Table Skeleton) add multi sort
• Add node and edge color selectors to Network Toolbar
• Adapt Style of Network Toolbar
• Provide User feedback, for analysis runs -> pop-up message when finished, and error messages when failed
• Unify Node and Edge details between pages -> shared components
• Unify Cosmograph and Toolbar between pages -> shared component, also Out-of-memory Duck db error should appear not as fast

[Copilot]

🟡 Changes recommended

The PR currently introduces at least one build-blocking dependency/import issue and includes an accidental development log file that should not be committed.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR restructures the Network/Differential Network UI to support a more horizontal workflow by moving ranking/results into dedicated table panels, sharing common graph/details components across pages, and improving styling/controls (multi-sort tables, toolbar options, and legends).

Changes:

• Introduces shared network UI components (CosmographGraph wrapper, gradient legends, unified node/edge identity/details blocks, and new tables/results panels).
• Updates multiple tables to PrimeVue multi-sort and aligns styling with the shared table skeleton/preset.
• Enhances graph toolbar and differential-network visualization (fit/reset view, color mode selectors, stable id-based selection).

File summaries

File	Description
src/pages/differential-network.vue	Switches to shared CosmographGraph + adds node/edge color modes, legends, and id-based selection.
src/main.js	Adds PrimeVue theme preset customization and new theme tokens.
src/components/plots/VariableCatalogTable.vue	Enables default sorting and multi-sort.
src/components/network/WholeNetworkSettings.vue	Adds disableSelections passthrough to test selector line.
src/components/network/ReactomeResultsTable.vue	Enables multi-sort.
src/components/network/NodeSetAnnotationResultsPanel.vue	New results panel for node-set annotation (Gemini).
src/components/network/NodeSetActionsPanel.vue	Removed legacy actions panel markup (replaced by new Analysis panel flow).
src/components/network/NodeRankingTable.vue	Refactors to table skeleton, adds multi-sort, selection checkboxes, row highlighting, and group chips.
src/components/network/NodeNeighborsPanel.vue	New “Neighbors of” panel with closable per-node subtabs.
src/components/network/NodeIdentityCard.vue	New shared node identity block used by node details components.
src/components/network/NodeEdgeTable.vue	Refactors neighbor-edge table to shared table skeleton and adds abs effect-size column.
src/components/network/NodeDetails.vue	Uses NodeIdentityCard + shared xref resolution + group color injection.
src/components/network/NetworkTablesPanel.vue	New top-level tables panel with tabbed ranking/results views and highlight dots.
src/components/network/NetworkRankingTabs.vue	Forwards preranked mode to both ranking tables.
src/components/network/networkData.js	Adds shared color/normalization utilities and xref resolution helpers.
src/components/network/GraphToolbar.vue	Toolbar UX refresh (icon buttons + tooltips + fit/reset view event).
src/components/network/GradientLegend.vue	New reusable gradient legend component.
src/components/network/GProfilerResultsTable.vue	Enables multi-sort.
src/components/network/EnrichmentResultsPanel.vue	Restructures enrichment results into closable subtabs (gProfiler/Reactome).
src/components/network/EdgeRankingTable.vue	Refactors to table skeleton, enables multi-sort, adds abs effect size, supports preranked mode.
src/components/network/EdgeNodesTable.vue	New shared 2-endpoint edge “nodes” details table.
src/components/network/EdgeDetails.vue	Uses EdgeNodesTable to unify edge endpoint display.
src/components/network/CosmographGraph.vue	New shared Cosmograph lifecycle + safe upload + capture utilities.
src/components/network/ConnectNodesPanel.vue	New connect-nodes UI with dialogs and action selection.
src/components/network/CommunityAnnotationPanel.vue	Extracted community annotation results into its own panel/tab.
src/components/network/ClosableTab.vue	New shared closable tab component for result subtabs.
src/components/network/AnalysisPanel.vue	New dialog-based analysis UI (community, enrichment, node-set annotation).
src/components/modina/NodeRankPanel.vue	Enables multi-sort and adds group color chips + node metric value column.
src/components/modina/EdgeRankPanel.vue	Enables multi-sort and updates header tooltip slot usage.
src/components/modina/DiffNodeDetails.vue	Uses shared NodeIdentityCard + group color + shared xref resolution.
src/components/modina/DiffEdgeDetails.vue	Uses shared EdgeNodesTable + group color for endpoint chips.
src/components/modina/ContextComparisonPicker.vue	Removes refresh button from picker toolbar.
src/components/DownloadableDataTable.vue	Upgrades table skeleton (multi-sort UX hint, download menu in paginator, rowClass, sticky header styling, pagination reset + scroll height lock).
src/components/contexts/ContextSetup.vue	Escapes CSV output values properly when exporting variable lists.
src/components/AnalysisDialog.vue	New shared dialog wrapper used by analysis/connect panels.
dev.log	Adds a development log file to the repo.
.gitignore	Adds a workspace file ignore entry.

Review details

• Files reviewed: 35/38 changed files
• Comments generated: 4
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🔵 Needs a closer look

It introduces a committed dev log artifact and includes a few concrete security/accessibility issues (e.g., missing rel on target=_blank links and missing aria-labels on icon-only buttons).

Review details

Suppressed comments (6)

Previously missed (3) — in code that hasn't changed since the last review.

src/components/network/NodeIdentityCard.vue:39

• Links opened with target="_blank" should include rel="noopener noreferrer" to prevent reverse-tabnabbing and to avoid giving the new page access to window.opener.
  src/components/DownloadableDataTable.vue:39
• The download control is an icon-only button; add an aria-label so assistive technologies can announce what it does.
  src/components/network/GraphToolbar.vue:34
• Icon-only toolbar buttons rely on tooltips for their label; add an aria-label so screen readers can announce the control even when tooltips aren't exposed.

This issue also appears in the following locations of the same file:

• line 41
• line 52
• line 59

src/components/network/GraphToolbar.vue:47

• Icon-only toolbar buttons should have an aria-label so the action is announced for assistive technology users.

        <v-btn
          icon
          variant="text"
          v-bind="props"
          class="mr-1"
          @click="$emit('update:physicsOn', !physicsOn)"
        >

src/components/network/GraphToolbar.vue:56

• Add an aria-label to this icon-only button so the purpose is clear to screen readers.

    <v-tooltip text="Reset view" location="bottom">
      <template v-slot:activator="{ props }">
        <v-btn icon variant="text" v-bind="props" class="mr-1" @click="$emit('fit-view')">
          <v-icon>mdi-fit-to-page-outline</v-icon>
        </v-btn>

src/components/network/GraphToolbar.vue:63

• Add an aria-label to this icon-only button so the purpose is clear to screen readers.

    <v-tooltip text="Download image" location="bottom">
      <template v-slot:activator="{ props }">
        <v-btn icon variant="text" v-bind="props" class="mr-1" @click="$emit('save-image')">
          <v-icon>mdi-camera</v-icon>
        </v-btn>

• Files reviewed: 35/38 changed files
• Comments generated: 0 new
• Review effort level: Lite