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`:

   ```ts
   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:

```html
<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.