zForDevelopers – Create a New View

Create a New View

This guide explains how to add a custom visualization to the Angular version of MicrobeTrace.
A view in MicrobeTrace is an Angular component displayed in the Golden Layout workspace.

1. Start with an Existing Component

1. Browse the src/app/visualizationComponents/ folder and pick a component that is closest to the functionality you need.
2. Copy the .component.ts, .html, and .scss files of that component to a new folder for your view.
3. Rename the class and selector inside the copied files.

Typical components that can be used as a template are:

• TwoDComponent for network‑style visuals
• HeatmapComponent or BubbleComponent for Plotly‑based charts
• GanttComponent for D3‑driven layouts

2. Register the Component with the App

1. Define a constant named componentTypeName at the bottom of your new .component.ts file:

   export const componentTypeName = 'My New View';

2. Import the component in src/app/app.module.ts and add it to the declarations array.

3. Open src/app/golden-layout-host.component.ts and register the component in the constructor using GoldenLayoutComponentService:

   this.goldenLayoutComponentService.registerComponentType(MyNewView.componentTypeName, MyNewView);

4. Add a property for the component in src/app/microbe-trace-next-plugin-visuals.ts so other services can access it.

3. Expose the View in the Menu

Edit src/app/microbe-trace-next-plugin.component.html and add a button inside the View menu:

<button mat-menu-item (click)="Viewclick('My New View')">My New View</button>

This allows users to open the new view from the toolbar.

4. Implement Widget Logic

Use Angular templates and bindings to build settings panels or controls for your view. If the view should remember certain options, add default values to defaultWidgets() in src/app/contactTraceCommonServices/common.service.ts.

Views commonly listen for changes by subscribing to observables in CommonStoreService or by handling jQuery events such as node-selected or link-threshold-change. Emitters can be triggered with $(document).trigger('node-selected') or similar calls when user interactions occur.

5. Test and Commit

Run the Angular development server (npm start) and ensure the new component loads correctly. Once complete, commit your changes and open a pull request.