feat(*): update finjs dock manager sample by igdmdimitrov · Pull Request #4012 · IgniteUI/igniteui-angular-samples

igdmdimitrov · 2026-08-07T08:35:13Z

No description provided.

Copilot

Pull request overview

This PR modernizes the FinJS Dock Manager sample by upgrading to igniteui-dockmanager v2 and replacing the previous dynamic/live-data Dock Manager demo with a redesigned “SignalDesk”-style workspace composed of new standalone panels (watchlist, charts, order ticket, positions, news).

Changes:

Upgraded Dock Manager to igniteui-dockmanager@^2.1.3 and switched initialization from defineCustomElements to defineComponents(IgcDockManagerComponent).
Rebuilt the FinJS Dock Manager sample UI and layout (new app shell + Dock Manager layout builder + new panel components).
Updated related live-editing config generation and internal reference docs for the new Dock Manager initialization approach.

Reviewed changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/main.ts	Switches Dock Manager registration to `defineComponents` for v2.
projects/app-lob/src/main.ts	Same Dock Manager registration change for app-lob entrypoint.
projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts	Replaces the old sample logic with the new app-shell state + Dock Manager layout builder.
projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html	Introduces the new “SignalDesk” shell markup and Dock Manager slots for new panels.
projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss	Adds a full redesign theme and Dock Manager part styling.
projects/app-lob/src/app/grid-finjs-dock-manager/app-data-store.ts	Adds a small root-provided store for nav items and market indices used by the shell.
projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.ts	New Watchlist panel with signals-based filtering/movers logic.
projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.html	New Watchlist grid + movers UI.
projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.scss	Styling for the watchlist grid and movers panel.
projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.ts	New chart panel generating sample candle data and range selection.
projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.html	Financial chart template with range buttons and stats.
projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.scss	Styling for the chart header, range buttons, and chart area.
projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.ts	New reactive-form order ticket panel.
projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.html	Order ticket UI with buy/sell toggle and estimate total.
projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.scss	Styling for order ticket layout and actions.
projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.ts	New positions grid panel with sample P&L data.
projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.html	Positions grid markup plus total bar.
projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.scss	Styling for positions grid and total P&L bar.
projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.ts	New news/alerts panel with simple state toggle.
projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.html	News/alerts template using conditional rendering.
projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.scss	Styling for tab headers and list items.
projects/app-lob/src/app/grid-finjs-dock-manager/dock-slot.component.ts	Removes the old Dock Slot dynamic component infrastructure.
projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts	Updates Dock Manager element typing/imports for v2.
projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss	Updates Dock Manager themes import path for v2.
package.json	Upgrades `igniteui-dockmanager` dependency to v2.1.3.
package-lock.json	Locks Dock Manager v2.1.3 and its new dependency set/engine constraints.
live-editing/configs/DockManagerConfigGenerator.ts	Updates generated Dock Manager setup snippets to use `defineComponents`.
live-editing/configs/app-dv-configs/DVGridConfig.ts	Updates generated Dock Manager setup snippets + DockSlot path mapping.
.claude/skills/igniteui-angular-components/references/layout-manager.md	Updates internal reference doc to match `defineComponents(IgcDockManagerComponent)` guidance.

Suppressed comments (4)

projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.html:90

With role="tab"/aria-selected removed from the container, these buttons should also avoid tab roles. aria-pressed communicates the selected state for toggle/filter buttons without implying missing tabpanel behavior.

      role="tab"
      [attr.aria-selected]="activeMoverTab() === tab"
      (click)="setActiveMoverTab(tab)"

projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.html:9

After switching the header container away from a tablist, this button should not keep role="tab"/aria-selected. aria-pressed is a better fit for a toggle state.

      role="tab"
      [attr.aria-selected]="activeTab() === 'news'"
      (click)="setActiveTab('news')"

projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.html:19

Same as the News button: with tab semantics removed, avoid role="tab"/aria-selected and express the selected state with aria-pressed.

      role="tab"
      [attr.aria-selected]="activeTab() === 'alerts'"
      (click)="setActiveTab('alerts')"

projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.html:25

role="tabpanel" should only be used when the corresponding tabs wire up aria-controls/aria-labelledby. With the proposed switch to toggle buttons, this container should be a generic region instead.

  <div class="news-content" role="tabpanel">

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

 bootstrapApplication(AppComponent, AppConfig).catch(err => console.log(err));

-defineCustomElements(window);
+defineComponents(IgcDockManagerComponent);


 bootstrapApplication(AppComponent, AppConfig).catch(err => console.error(err));

-defineCustomElements(window);
+defineComponents(IgcDockManagerComponent);


+
+    <igx-column field="sharesAction" header="Shares" [sortable]="false" width="80px">
+      <ng-template igxCell let-cell="cell">
+        <button type="button" class="shares-link">{{ cell.value }}</button>


+</div>
+
+<section class="movers-panel" aria-label="Market movers">
+  <div class="movers-tabs" role="tablist" aria-label="Mover categories">


@@ -0,0 +1,49 @@
+<div class="news-tabs">
+  <div class="news-tab-headers" role="tablist" aria-label="News categories">


dobromirts · 2026-08-07T11:19:29Z

There is a difference in the Chart tab header -

In Andy`s sample and in the design picutre https://my.slingshotapp.io/openTask/e97e10ef_76771fd0-98b2-4a3e-81f5-0a82db8da888_tk - this header is darker . Currently it look like that -

dobromirts · 2026-08-07T11:21:56Z

The same applies for the Order type input group component. Current

Expected -

dobromirts · 2026-08-07T11:29:16Z

Is in intentional to drop the SingalR implementation and to show only static data. Previouslt the sample was updating the grid rows - https://www.infragistics.com/angular-demos-lob/grid-finjs-dock-manager/grid-finjs-dock-manager?nav=0 .
IMO this is one of the core feature in the sample

dobromirts · 2026-08-07T11:37:21Z

-        this.dataService.hasRemoteConnection ? this.dataService.broadcastParams(this.frequency, this.dataVolume, true, false) :
-            this.dataService.startConnection(this.frequency, this.dataVolume, true, false);
-        this.data = this.dataService.data;
+    public setStrategyTab(index: number): void {


setStrategyTab, setSymbolTab, onStrategyTabKeydown, onSymbolTabKeydown, and handleTabKeydown are not used the template, the only references to activeStrategyIndex/activeSymbolIndex are the hidden sr-only-panels sections, and there's no visible tab control wired to these handlers. Should we keep them or add //TODO comment above them for feature purpose

dobromirts · 2026-08-07T11:43:35Z

Missing Marker Heatmap from the design app -

Current state -

Not sure that we need it at all.
Also by the design app this section backgroud should be the same as the Watchlist

dobromirts · 2026-08-07T11:51:35Z

The background after removing split-pane elements should be changed - Currently -

Design Sample -

dobromirts · 2026-08-07T12:28:20Z

@@ -88,11 +87,11 @@ export class DVGridConfigGenerator implements IConfigGenerator {
                '/projects/app-lob/src/app/services/signal-r.service.ts',


The new components related to the imports shuld be included here -

'/projects/app-lob/src/app/grid-finjs-dock-manager/app-data-store.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.scss', '/projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.scss', '/projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.scss', '/projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.scss', '/projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.scss'

result -

.
Still additional changes should be done in the live-editing repository - SamplesAssetsGenerator - private _normalizePath function

feat(*): update finjs dock manager sample

b57cd11

igdmdimitrov requested a review from dobromirts August 7, 2026 08:35

igdmdimitrov added the status: awaiting-test label Aug 7, 2026

radomirchev assigned igdmdimitrov Aug 7, 2026

igdmdimitrov and others added 2 commits August 7, 2026 12:11

chore(*): update DVGridConfig.ts

11f9b98

Merge branch 'vnext' into dmdimitrov/update-finjs-dockmanager-sample

95418ed

igdmdimitrov removed their assignment Aug 7, 2026

dobromirts added status: in-test and removed status: awaiting-test labels Aug 7, 2026

dobromirts requested a review from Copilot August 7, 2026 10:46

Copilot started reviewing on behalf of dobromirts August 7, 2026 10:47 View session

Copilot AI reviewed Aug 7, 2026

View reviewed changes

dobromirts reviewed Aug 7, 2026

View reviewed changes

Navigation Menu

Uh oh!

feat(*): update finjs dock manager sample - #4012

feat(*): update finjs dock manager sample#4012
igdmdimitrov wants to merge 3 commits into
vnextfrom
dmdimitrov/update-finjs-dockmanager-sample

igdmdimitrov commented Aug 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

dobromirts commented Aug 7, 2026 •

edited

Loading

Uh oh!

dobromirts commented Aug 7, 2026

Uh oh!

dobromirts commented Aug 7, 2026 •

edited

Loading

Uh oh!

dobromirts Aug 7, 2026

Uh oh!

dobromirts commented Aug 7, 2026 •

edited

Loading

Uh oh!

dobromirts commented Aug 7, 2026

Uh oh!

dobromirts Aug 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -0,0 +1,49 @@
		<div class="news-tabs">
		<div class="news-tab-headers" role="tablist" aria-label="News categories">

		@@ -88,11 +87,11 @@ export class DVGridConfigGenerator implements IConfigGenerator {
		'/projects/app-lob/src/app/services/signal-r.service.ts',

Uh oh!

Conversation

igdmdimitrov commented Aug 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

dobromirts commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dobromirts commented Aug 7, 2026

Uh oh!

dobromirts commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dobromirts Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

dobromirts commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dobromirts commented Aug 7, 2026

Uh oh!

dobromirts Aug 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dobromirts commented Aug 7, 2026 •

edited

Loading

dobromirts commented Aug 7, 2026 •

edited

Loading

dobromirts commented Aug 7, 2026 •

edited

Loading