zForDevelopers – Assimilating MicrobeTrace

Assimilating MicrobeTrace

Audience: Developers and system administrators who want to embed MicrobeTrace within an existing bioinformatics pipeline or custom server.

MicrobeTrace is a fully client-side Angular application. The UI runs entirely in the browser, so you can host the compiled assets on any web server without needing a dedicated backend. This document outlines how to set up a local instance and how to feed your own network data into the application programmatically.

Setting Up

1. Install [Node.js](https://nodejs.org/) (version 16 or later).

2. Clone this repository and install dependencies:

   npm install

3. Launch the development server:

   npm start

   This runs ng serve and serves the app at http://localhost:4200/.

4. For production deployments run:

   ng build --configuration production

   The compiled assets appear under dist/MicrobeTrace/ and can be hosted by any static file server.

Integrating Your Data (Easy Way)

At runtime you can inject nodes and links using CommonService. The service exposes methods that mirror the older global app utilities.

import { CommonService } from 'path/to/common.service';

constructor(private commonService: CommonService) {}

loadData(foreignData: {
  nodes: any[];
  links: any[];
  nodeFields: string[];
  linkFields: string[];
}) {
  this.commonService.clearData();
  foreignData.nodes.forEach(n => this.commonService.addNode(n));
  foreignData.links.forEach(l => this.commonService.addLink(l));
  this.commonService.session.data.nodeFields = Array.from(new Set([
    ...this.commonService.session.data.nodeFields,
    ...foreignData.nodeFields,
  ]));
  this.commonService.session.data.linkFields = Array.from(new Set([
    ...this.commonService.session.data.linkFields,
    ...foreignData.linkFields,
  ]));
  this.commonService.finishUp();
}

Call loadData() after the app has bootstrapped to populate the session and display the network.

Integrating a Full Session (Advanced)

For complete control you may construct a full session object. Use CommonService.sessionSkeleton() as a template and populate its fields with your data and layout preferences. Once the session is prepared, load it with applySession:

const session = this.commonService.sessionSkeleton();
// populate session.data.nodes, session.data.links, etc.
this.commonService.applySession({ session });

The session structure includes:

• data: nodes, links, attribute lists, distance matrices, and filters.
• layout: the GoldenLayout configuration describing which views are open.
• style: widget values and color mappings for nodes, links, and polygons.
• network, meta, and other runtime state fields.

Refer to CommonService.dataSkeleton() and CommonService.sessionSkeleton() for exact property defaults.

Good Luck!

With these entry points you can script MicrobeTrace to initialize with your own datasets or integrate it as a visualization component in larger systems. Because the app is purely client-side, hosting the compiled files in any web environment is typically sufficient.