### Run Development Server (Bash)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Provides the command to set up and run the Topola Viewer application locally for development purposes. This command installs all necessary project dependencies using npm.

```bash
# Install dependencies
npm install
```

--------------------------------

### Configure Chart Display Options (TypeScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Allows customization of the chart's appearance through a configuration object. This includes settings for color schemes (by generation, sex, or none), visibility of individual IDs, and visibility of sex indicators. Functions are provided to convert between configuration objects and URL query parameters.

```typescript
import { Config, argsToConfig, configToArgs, DEFALUT_CONFIG } from './sidepanel/config/config';
import { ChartColors, Ids, Sex } from './sidepanel/config/config';

// Default configuration
const config: Config = {
  color: ChartColors.COLOR_BY_GENERATION,  // NO_COLOR, COLOR_BY_SEX, COLOR_BY_GENERATION
  id: Ids.SHOW,                            // HIDE or SHOW
  sex: Sex.SHOW                            // HIDE or SHOW
};

// Convert URL query params to config
import queryString from 'query-string';
const params = queryString.parse('?c=g&i=s&s=s');
const configFromUrl = argsToConfig(params);

// Convert config back to URL params
const urlParams = configToArgs(config);
// Result: { c: 'g', i: 's', s: 's' }
```

--------------------------------

### Embed Topola Viewer using iframes and postMessage (HTML/JavaScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Demonstrates how to integrate the Topola Viewer into other web applications using an iframe. It utilizes the `postMessage` API for secure communication between the parent page and the viewer, allowing the parent page to send GEDCOM data and receive readiness notifications.

```html
<!-- Parent page embedding Topola -->
<iframe id="topola" src="https://topola.example.com/#/view?embedded=true"></iframe>

<script>
const iframe = document.getElementById('topola');

// Wait for viewer to be ready
window.addEventListener('message', (event) => {
  if (event.data.message === 'ready') {
    // Send GEDCOM data to the viewer
    iframe.contentWindow.postMessage({
      message: 'gedcom',
      gedcom: "\n        0 HEAD\n        0 @I1@ INDI\n        1 NAME John /Doe/\n        0 @F1@ FAM\n        1 HUSB @I1@\n      "
    }, '*');
  }
});

// Notify viewer that parent is ready
iframe.contentWindow.postMessage({ message: 'parent_ready' }, '*');
</script>
```

--------------------------------

### Configure Viewer via URL Parameters (URL)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Illustrates how to control the Topola Genealogy Viewer's behavior through URL query parameters. This is useful for embedding the viewer in iframes or creating deep links to specific views or data sources.

```url
# Basic GEDCOM URL loading
https://your-site.com/#/view?url=https://example.com/tree.ged

# WikiTree source with specific person
https://your-site.com/#/view?source=wikitree&indi=Hawking-7

# Embedded mode (hides file menus for iframe use)
https://your-site.com/#/view?url=...&embedded=true

# Custom chart type (hourglass, relatives, fancy, donatso)
https://your-site.com/#/view?url=...&view=relatives

# Configuration options
# c=n (no color), c=g (by generation), c=s (by sex)
# i=h (hide IDs), i=s (show IDs)
# s=h (hide sex indicators), s=s (show sex)
https://your-site.com/#/view?url=...&c=g&i=s&s=s

# Side panel visibility
https://your-site.com/#/view?url=...&sidePanel=false

# Disable CORS proxy (for same-origin URLs)
https://your-site.com/#/view?url=...&handleCors=false
```

--------------------------------

### Load GEDCOM from URL with CORS Handling (TypeScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Demonstrates loading a GEDCOM file from a remote URL using the `loadFromUrl` function. It includes an option to enable CORS handling via a proxy service, essential for cross-origin requests. The function returns chart data and the raw GEDCOM content.

```typescript
import { loadFromUrl } from './datasource/load_data';

// Load GEDCOM file from URL with CORS handling enabled
const topolaData = await loadFromUrl(
  'https://example.com/family-tree.ged',
  true  // handleCors: use proxy for cross-origin requests
);

// Access the chart data and raw GEDCOM
console.log(topolaData.chartData.indis);  // Array of individuals
console.log(topolaData.chartData.fams);   // Array of families
console.log(topolaData.gedcom.head);      // GEDCOM header entry
```

--------------------------------

### Load GEDCOM from Local File Upload (TypeScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Shows how to process GEDCOM files uploaded by the user. The `loadFile` function handles both `.ged` and `.gdz` (GEDCOM zip archives) formats, extracting GEDCOM content and associated images. The `loadGedcom` function then converts this data into the viewer's format, using an MD5 hash for caching.

```typescript
import { loadFile, loadGedcom } from './datasource/load_data';
import md5 from 'md5';

// Handle file input from user
async function handleFileUpload(file: File) {
  // Load and parse the file (handles both .ged and .gdz)
  const { gedcom, images } = await loadFile(file);

  // Create a hash for caching purposes
  const hash = md5(gedcom);

  // Convert to Topola data format
  const topolaData = await loadGedcom(hash, gedcom, images);

  // Data is ready for visualization
  return topolaData;
}
```

--------------------------------

### Load Genealogy Data from WikiTree API (TypeScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Explains how to fetch genealogy data directly from WikiTree using their public API. The `loadWikiTree` function retrieves ancestors, descendants, and spouse information for a given profile ID, utilizing React's internationalization context.

```typescript
import { loadWikiTree } from './datasource/wikitree';
import { useIntl } from 'react-intl';

// Load WikiTree profile and related family
const intl = useIntl();
const topolaData = await loadWikiTree(
  'Hawking-7',           // WikiTree profile ID
  intl,                  // Internationalization context
  'optional-authcode'    // Optional: for accessing private profiles
);

// Result includes converted individuals and families
console.log(topolaData.chartData.indis.length);  // Number of people loaded
// WikiTree profiles include links back to wikitree.com
```

--------------------------------

### Work with Individual GEDCOM Records (TypeScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Provides utility functions for accessing and manipulating individual person data extracted from GEDCOM records. This includes retrieving formatted names, extracting multi-line data fields (like notes), dereferencing pointers to other records, and converting GEDCOM pointer formats to simple IDs.

```typescript
import { getData, getName, dereference, pointerToId } from './util/gedcom_util';

// Get name from GEDCOM entry (handles married name detection)
const personEntry = topolaData.gedcom.indis['I1'];
const name = getName(personEntry);  // 'John Smith'

// Get multi-line data (handles CONT/CONC tags)
const noteEntry = personEntry.tree.find(e => e.tag === 'NOTE');
const noteLines = getData(noteEntry);  // string[]

// Dereference pointer to actual entry
const sourceRef = personEntry.tree.find(e => e.tag === 'SOUR');
const sourceEntry = dereference(sourceRef, topolaData.gedcom, g => g.other);

// Extract ID from GEDCOM pointer format
const id = pointerToId('@I123@');  // 'I123'
```

--------------------------------

### Export Charts to Various Formats (TypeScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Provides functions to export the current chart view into different formats suitable for printing or sharing. It supports SVG for high-quality vector graphics, PNG for raster images, and PDF. The PDF export is lazily loaded and requires an additional library.

```typescript
import { printChart, downloadPdf, downloadPng, downloadSvg } from './chart';

// Print the chart (opens browser print dialog)
printChart();

// Download as SVG (vector format, best quality)
await downloadSvg();  // Saves as 'topola.svg'

// Download as PNG (raster image at 2x scale)
await downloadPng();  // Saves as 'topola.png'

// Download as PDF (requires jspdf, lazy loaded)
await downloadPdf();  // Saves as 'topola.pdf'
```

--------------------------------

### Render Genealogy Charts with Interactivity (TypeScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Renders interactive SVG genealogy charts with features like zoom, pan, and click-to-navigate. It accepts chart data, selection information, chart type, and color/visibility configurations. The component is designed to be used within a React application.

```typescript
import { Chart, ChartType, ChartProps } from './chart';
import { ChartColors, Ids, Sex } from './sidepanel/config/config';

// Chart component props
const chartProps: ChartProps = {
  data: topolaData.chartData,  // JsonGedcomData from any data source
  selection: {
    id: 'I1',                  // Currently selected individual ID
    generation: 0              // Generation offset for positioning
  },
  chartType: ChartType.Hourglass,  // Hourglass, Relatives, Fancy, or Donatso
  onSelection: (indiInfo) => {
    // Handle when user clicks a different person
    console.log('Selected:', indiInfo.id);
  },
  colors: ChartColors.COLOR_BY_GENERATION,
  hideIds: Ids.SHOW,
  hideSex: Sex.SHOW,
  freezeAnimation: false
};

// Render in React component
<Chart {...chartProps} />
```

--------------------------------

### Convert GEDCOM Data to JSON Format (TypeScript)

Source: https://context7.com/pewu/topola-viewer/llms.txt

Converts raw GEDCOM file content into a structured JSON format that the Topola Viewer can use for rendering charts. It also provides utility functions for normalizing GEDCOM data and creating efficient ID-to-individual mappings. The conversion process takes the GEDCOM string and an image map as input.

```typescript
import { convertGedcom, normalizeGedcom, idToIndiMap } from './util/gedcom_util';

// Convert GEDCOM string to Topola data format
const gedcomString = "\n0 HEAD\n1 SOUR MyApp\n0 @I1@ INDI\n1 NAME John /Smith/\n1 BIRT\n2 DATE 1 JAN 1950\n0 @F1@ FAM\n1 HUSB @I1@\n";

const images = new Map<string, string>();  // filename -> blob URL mapping
const topolaData = convertGedcom(gedcomString, images);

// Result structure:
// topolaData.chartData: { indis: JsonIndi[], fams: JsonFam[] }
// topolaData.gedcom: { head, indis, fams, other }

// Create lookup maps for efficient access
const indiMap = idToIndiMap(topolaData.chartData);
const individual = indiMap.get('I1');
console.log(individual?.firstName);  // 'John'
```

--------------------------------

### Configure Google Analytics (gtag) for Topola Genealogy Viewer

Source: https://github.com/pewu/topola-viewer/blob/master/index.html

This snippet initializes the Google Data Layer and configures Google Analytics (gtag) with a specific tracking ID ('G-32GXR2WF6S'). It's essential for tracking user interactions and application usage. Ensure JavaScript is enabled for this to function.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
  dataLayer.push(arguments);
}

gtag('js', new Date());
gtag('config', 'G-32GXR2WF6S');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.