zForDevelopers – Create a New View

Here is your cleaned-up Markdown document, preserving all formatting and removing any diff markers:

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

Let me know if you'd like this exported to a `.md` file.