### Start Gephi Lite with Docker Compose

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Starts the Gephi Lite application using a previously prebuilt Docker image, managed by Docker Compose for local development.

```bash
docker compose up
```

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

### Manage Graph Datasets with Gephi Lite SDK

Source: https://context7.com/gephi/gephi-lite/llms.txt

Demonstrates creating, serializing, deserializing, and managing graph datasets using the Gephi Lite SDK. Includes examples of defining field models and interacting with a driver to get and set datasets.

```typescript
import {
  GraphDataset,
  SerializedGraphDataset,
  getEmptyGraphDataset,
  serializeDataset,
  deserializeDataset,
  datasetToString,
  parseDataset,
  FieldModel
} from "@gephi/gephi-lite-sdk";
import { MultiGraph } from "graphology";

// Create an empty graph dataset
const dataset: GraphDataset = getEmptyGraphDataset({ graphType: "mixed" });

// GraphDataset structure includes:
// - fullGraph: MultiGraph instance for topology
// - nodeData: Record<string, ItemData> for node attributes
// - edgeData: Record<string, ItemData> for edge attributes
// - layout: Record<string, NodeCoordinates> for node positions
// - nodeFields: FieldModel[] describing node attribute schemas
// - edgeFields: FieldModel[] describing edge attribute schemas
// - metadata: { title?: string, description?: string }

// Define field models for attributes
const categoryField: FieldModel<"nodes"> = {
  id: "category",
  itemType: "nodes",
  type: "category",
  label: "Category"
};

const weightField: FieldModel<"edges"> = {
  id: "weight",
  itemType: "edges",
  type: "number",
  label: "Weight"
};

// Serialize dataset for storage or transmission
const serialized: SerializedGraphDataset = serializeDataset(dataset);
const jsonString = datasetToString(dataset);

// Deserialize back to working dataset
const restored = deserializeDataset(serialized);
const parsed = parseDataset(jsonString);

// Working with the driver to get/set datasets
async function manageDataset(driver: GephiLiteDriver) {
  // Get current dataset from Gephi Lite
  const currentDataset = await driver.getGraphDataset();

  console.log(`Nodes: ${currentDataset.fullGraph.order}`);
  console.log(`Edges: ${currentDataset.fullGraph.size}`);
  console.log(`Node fields: ${currentDataset.nodeFields.map(f => f.id).join(", ")}`);

  // Update the entire dataset
  await driver.setGraphDataset(currentDataset);

  // Merge partial updates (only change specified properties)
  await driver.mergeGraphDataset({
    metadata: { title: "My Network Analysis" }
  });
}
```

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

### Button Styles Hierarchy Example

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Demonstrates the recommended hierarchy for button styles: text buttons for common actions, and filled or outlined buttons for less frequent ones. Shows 'Don't', 'Do', and 'Shouldn't' examples for context.

```html
<div className="w-auto d-flex gl-gap-4 gl-text-section">
  <div className="w-33 d-flex flex-column">
    <div className="d-flex flex-column gl-gap-4 justify-content-start p-5 gl-container-highest-bg">
      <div className="d-flex flex-column gl-gap-1">
        <h6 className="gl-heading-3 ms-2">Open graph file</h6>
        <button className="gl-btn gl-btn-fill">Open a local file</button>
        <button className="gl-btn">Open an url</button>
        <button className="gl-btn gl-btn-outline">Open on Github</button>
      </div>
    </div>
    <div className="pt-3">
      <h6 className="gl-heading-3">
        <PiX className="me-1 gl-icon-size-text" />
        Don't
      </h6>
      <p>
        Text buttons don't work well when they are place next to other button style. In this context, their transparent
        padding can feel awkward.
      </p>
    </div>
  </div>
  <div className="w-33 d-flex flex-column">
    <div className="d-flex justify-content-start p-5 gl-container-highest-bg">
      <div className="d-flex flex-column gl-gap-1">
        <h6 className="gl-heading-3 ms-2">Open graph file</h6>
        <button className="gl-btn">Open a local file</button>
        <button className="gl-btn">Open an url</button>
        <button className="gl-btn">Open on Github</button>
      </div>
    </div>
    <div className="pt-3">
      <h6 className="gl-heading-3">
        <PiCheck className="me-1 gl-icon-size-text" />
        Do
      </h6>
      <p>
        In a group of buttons, using text style creates visual breathing room. This white space makes information more accessible and can sometimes help draw more attention. 
      </p>
    </div>
  </div>

  <div className="w-33 d-flex flex-column">
    <div className="d-flex justify-content-start p-5 gl-container-highest-bg">
      <div className="d-flex flex-column gl-gap-1">
        <h6 className="gl-heading-3 ms-2">Open graph file</h6>
        <button className="gl-btn gl-btn-fill">Open a local file</button>
        <button className="gl-btn gl-btn-outline">Open an url</button>
        <button className="gl-btn gl-btn-outline">Open on Github</button>
      </div>
    </div>
    <div className="pt-3">
      <h6 className="gl-heading-3">
        <PiX className="me-1 gl-icon-size-text" />
        Shouldn't
      </h6>
      <p>
        Here, hierarchy between the actions is shown. However, it clutters the interface. Balance what is most important between suggesting actions and letting the users understand the options. They can make their decision by themself after reading, note that the order of the list still creates hierarchy.
      </p>
    </div>
  </div>
</div>
```

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

### Configure Visual Appearance with Gephi Lite SDK

Source: https://context7.com/gephi/gephi-lite/llms.txt

Illustrates how to configure visual styling for nodes and edges, including fixed values and dynamic mappings based on data attributes. Shows examples of ranking size, partition color, and ranking color configurations.

```typescript
import {
  AppearanceState,
  Size,
  Color,
  RankingSize,
  PartitionColor,
  RankingColor,
  FixedColor,
  StringAttr,
  LabelSize,
  FieldModel
} from "@gephi/gephi-lite-sdk";

// Define a field model for size ranking
const degreeField: FieldModel<"nodes", true> = {
  id: "degree",
  itemType: "nodes",
  type: "number",
  dynamic: true
};

// Size based on ranking (continuous attribute)
const rankingSize: RankingSize = {
  type: "ranking",
  field: degreeField,
  minSize: 5,
  maxSize: 50,
  missingSize: 10,
  transformationMethod: { pow: 0.5 }  // Square root scaling
};

// Fixed size
const fixedSize: Size = {
  type: "fixed",
  value: 15
};

// Color partition (categorical attribute)
const categoryField: FieldModel<"nodes"> = {
  id: "community",
  itemType: "nodes",
  type: "category"
};

const partitionColor: PartitionColor = {
  type: "partition",
  field: categoryField,
  colorPalette: {
    "community1": "#e41a1c",
    "community2": "#377eb8",
    "community3": "#4daf4a"
  },
  missingColor: "#999999"
};

// Color ranking (continuous attribute)
const rankingColor: RankingColor = {
  type: "ranking",
  field: degreeField,
  colorScalePoints: [
    { scalePoint: 0, color: "#ffffcc" },
    { scalePoint: 0.5, color: "#fd8d3c" },
    { scalePoint: 1, color: "#800026" }
  ],
  missingColor: "#cccccc"
};

// Full appearance state configuration
const appearance: Partial<AppearanceState> = {
  backgroundColor: "#ffffff",
  nodesSize: rankingSize,
  nodesColor: partitionColor,
  nodesLabel: {
    type: "field",
    field: { id: "label", itemType: "nodes", type: "text" },
    missingValue: null
  },
  nodesLabelSize: {
    type: "item",
    density: 1,
    zoomCorrelation: 0.5,
    sizeCorrelation: 0.8
  },
  edgesColor: { type: "source" },  // Edges colored by source node
  showEdges: { value: true }
};

// Apply appearance through driver
async function setAppearance(driver: GephiLiteDriver) {
  // Get current appearance
  const current = await driver.getAppearance();

  // Set complete appearance state
  await driver.setAppearance({ ...current, ...appearance });

  // Or merge partial updates
  await driver.mergeAppearance({
    nodesSize: fixedSize,
    backgroundColor: "#f5f5f5"
  });
}
```

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

### Run Gephi Lite Locally

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Starts the Gephi Lite application in development mode. Open http://localhost:5173/gephi-lite to view it in the browser. The page will reload on edits, and lint errors will appear in the console.

```bash
npm start
```

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

### Text Alignment Example

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Illustrates text alignment for titles and paragraphs when placed in a column. Ensures alignment with the button's label start for better readability.

```html
<div className="w- auto d-flex flex-column gl-gap-4 justify-content-start p-5 gl-container-highest-bg align-items-center">
  <div className="d-flex flex-column gl-gap-1">
    <h6 className="gl-heading-3 ms-2">Title</h6>
    <button className="gl-btn gl-btn-fill">Button</button>
    <button className="gl-btn gl-btn-outline">Button</button>
    <button className="gl-btn">Button</button>
    <p className="m-0 ms-2">Text section</p>
  </div>
</div>
```

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

### Gephi Lite Button Styles Example

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Demonstrates various Gephi Lite button styles including filled, outlined, and icon buttons. Use filled buttons for primary actions and outlined for secondary actions. Icon buttons are suitable for concise actions.

```html
<div className="w-auto d-flex gl-gap-4 gl-text-section">
  <div className="w-50 d-flex flex-column">
    <div className="d-flex flex-column gl-gap-4 justify-content-start p-5 gl-container-highest-bg">
      <div className='d-flex gl-gap-2'> 
        <button className="gl-btn gl-btn-fill">Guess settings</button>
        <button className="gl-btn gl-btn-outline">Reset</button>
        <button className="gl-btn gl-btn-fill">
          <PiPlay className="" /> Start
        </button>
      </div>
      <div className='gl-border'> </div>
      <div className="d-flex flex-column gl-gap-3">
        <div className='d-flex gl-gap-2'>
        <button className="gl-btn gl-btn-fill">Guess settings</button>
        <button className="gl-btn gl-btn-outline">Reset</button>
      </div>
        <div>
          <button className="gl-btn gl-btn-fill ">
            <PiPlay className=""/> Start
          </button>
      </div>
    </div>
    </div>

    <div className="pt-3">
      <h6 className="gl-heading-3">
        <PiX className="me-1 gl-icon-size-text" />
        Don't
      </h6>
      <p>
        Don’t use more than one filled buttons in the same group, pannel or modale. Consider presenting low-priority actions in sub-menus or as icon buttons.
      </p>
    </div>

  </div>
  <div className="w-50 d-flex flex-column">
    <div className="d-flex flex-column gl-gap-4 justify-content-start p-5 gl-container-highest-bg">
      <div className='d-flex gl-gap-2'> 
        <button className="gl-btn gl-btn-outline gl-btn-icon"><PiMagicWand className="" /></button>
        <button className="gl-btn gl-btn-outline gl-btn-icon"><PiArrowCounterClockwise className="" /></button>
        <button className="gl-btn gl-btn-fill">
          <PiPlay className="" /> Start
        </button>
      </div>
      <div className='gl-border'> </div>
      <div className="d-flex flex-column gl-gap-3">
        <div className='d-flex gl-gap-2'>
        <button className="gl-btn gl-btn-outline ">Guess settings</button>
        <button className="gl-btn gl-btn-outline gl-btn-icon"><PiArrowCounterClockwise className="" /></button>
      </div>
        <div>
          <button className="gl-btn gl-btn-fill ">
            <PiPlay className=""/> Start
          </button>
        </div>
    </div>
    </div>

    <div className="pt-3">
      <h6 className="gl-heading-3">
        <PiCheck className="me-1 gl-icon-size-text" />
        Do
      </h6>
      <p>
        Chose the main action of your pannel and highlight it with the fill style. Then, depending of the complexity and number of actions, chose what works the best between icon buttons, the outline style or sub menus.<span className='gl-text-muted'> In case of emergency : dropdown.</span>
      </p>
    </div>

  </div>
</div>
```

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

### Run Gephi Lite Tests

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Launches the test runner in interactive watch mode. For end-to-end tests, first install browsers with 'npx playwright install' and then run 'npm run test:e2e'.

```bash
npm test
```

```bash
npx playwright install
```

```bash
npm run test:e2e
```

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

### Configure Topological Filter (K-Core)

Source: https://context7.com/gephi/gephi-lite/llms.txt

Applies a topological filter to identify nodes within a specific k-core of the graph. This example uses the 'k-core' filter with k=3.

```typescript
// Topological filter - based on graph structure
const kCoreFilter: TopologicalFilterType = {
  type: "topological",
  topologicalFilterId: "k-core",
  parameters: [3]  // k=3 core
};
```

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

### CSS Color Mix for Button States

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Example of using the CSS color-mix function to dynamically set button background colors for different states based on component and active color variables.

```css
background-color: color-mix(in hsl, var(--gl-component-bg), var(--gl-component-color) $gl-sys-proportion-component-active-color-mix);
```

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

### Build Gephi Lite for Production

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Builds the Gephi Lite application for production, optimizing it for performance. The output is placed in the 'build' folder with minified files and hash filenames.

```bash
npm run build
```

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

### Build Docker Image for Production

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Builds the Docker image for Gephi Lite production deployment. This involves setting the BASE_URL, building the project, and then building the Docker image.

```bash
> export BASE_URL="./"
> npm run build
```

```bash
docker build -f Dockerfile -t gephi-lite .
```

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

### Checkout Project Dev Branch

Source: https://github.com/gephi/gephi-lite/wiki/Working-with-I18N

Switch to the main 'dev' branch of the project. This is part of the process to rebase Weblate changes onto the project's development branch.

```bash
(weblate-dev $)> git checkout dev
```

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

### Build Docker Image for Development

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Builds or rebuilds the Docker image for Gephi Lite from your current git checkout, intended for local development.

```bash
docker compose build
```

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

### Create and Import a Social Network Graph

Source: https://context7.com/gephi/gephi-lite/llms.txt

Demonstrates creating a social network graph using graphology, adding nodes with attributes and weighted edges, and then importing it into Gephi Lite.

```typescript
// Example: Create and import a social network
async function createSocialNetwork(driver: GephiLiteDriver) {
  const graph = new Graph({ type: "undirected" });

  // Add nodes with attributes
  const people = [
    { id: "alice", label: "Alice", department: "Engineering", influence: 0.8 },
    { id: "bob", label: "Bob", department: "Marketing", influence: 0.6 },
    { id: "carol", label: "Carol", department: "Engineering", influence: 0.9 },
    { id: "dave", label: "Dave", department: "Sales", influence: 0.5 },
    { id: "eve", label: "Eve", department: "Marketing", influence: 0.7 }
  ];

  people.forEach(person => {
    graph.addNode(person.id, {
      label: person.label,
      department: person.department,
      influence: person.influence,
      x: Math.random() * 500,
      y: Math.random() * 500,
      size: person.influence * 20
    });
  });

  // Add edges with weights
  const connections = [
    ["alice", "bob", 3], ["alice", "carol", 5], ["bob", "carol", 2],
    ["bob", "dave", 4], ["carol", "eve", 3], ["dave", "eve", 1]
  ];

  connections.forEach(([source, target, weight]) => {
    graph.addEdge(source as string, target as string, { weight });
  });

  // Import into Gephi Lite
  await driver.importGraph(graph.toJSON());
}
```

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

### Initialize and Control Gephi Lite with GephiLiteDriver

Source: https://context7.com/gephi/gephi-lite/llms.txt

Use GephiLiteDriver to open Gephi Lite, establish communication, and import graph data. Ensure the baseUrl points to your Gephi Lite deployment. The driver handles asynchronous operations and communication over the Broadcast Channel API.

```typescript
import { GephiLiteDriver } from "@gephi/gephi-lite-broadcast";
import Graph from "graphology";

// Create a driver instance with optional channel name
const driver = new GephiLiteDriver();

// Open Gephi Lite in a new tab and wait for it to be ready
async function initializeGephiLite() {
  try {
    // Opens Gephi Lite and establishes communication channel
    const gephiLiteWindow = await driver.openGephiLite({
      baseUrl: "/gephi-lite",  // Path to Gephi Lite
      target: "_blank",        // Open in new tab
      timeout: 10000           // Wait up to 10 seconds
    });

    // Verify connection with ping
    await driver.ping();

    // Get Gephi Lite version
    const version = await driver.getVersion();
    console.log(`Connected to Gephi Lite version: ${version}`);

    return gephiLiteWindow;
  } catch (error) {
    console.error("Failed to connect to Gephi Lite:", error);
    throw error;
  }
}

// Import a graph into Gephi Lite
async function loadGraph() {
  // Create a sample graph using graphology
  const graph = new Graph();
  graph.addNode("node1", { label: "Alice", x: 0, y: 0, size: 10, color: "#ff0000" });
  graph.addNode("node2", { label: "Bob", x: 100, y: 0, size: 15, color: "#00ff00" });
  graph.addNode("node3", { label: "Carol", x: 50, y: 100, size: 12, color: "#0000ff" });
  graph.addEdge("node1", "node2", { weight: 1.0 });
  graph.addEdge("node2", "node3", { weight: 2.0 });
  graph.addEdge("node3", "node1", { weight: 1.5 });

  // Import the graph into Gephi Lite
  await driver.importGraph(graph.toJSON());
  console.log("Graph imported successfully");
}

// Clean up when done
function cleanup() {
  driver.destroy();
}
```

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

### Run Gephi Lite Container

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Creates and runs a Docker container for the Gephi Lite application, exposing port 80.

```bash
docker run -p 80:80 gephi-lite
```

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

### Switch to Weblate Development Branch

Source: https://github.com/gephi/gephi-lite/wiki/Working-with-I18N

Create and switch to a new local branch named 'weblate-dev' based on the 'dev' branch from the Weblate remote. This branch is used for managing Weblate-related changes.

```bash
$> git switch -c weblate-dev weblate/dev
```

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

### Default Button Types

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Demonstrates the basic structure for default and toggle button types. Use `gl-btn gl-btn-fill` for default and selected toggle buttons, and `gl-btn` for unselected toggle buttons.

```html
<button class="gl-btn gl-btn-fill">Default</button>
```

```html
<div class="d-flex gl-gap-x-3">
  <button class="gl-btn">Unselected</button>
  <button class="gl-btn gl-btn-fill">Selected</button>
</div>
```

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

### Set GitHub Proxy Environment Variable and Build

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Set the VITE_GITHUB_PROXY environment variable before building the application. This is crucial for enabling GitHub data synchronization by configuring the proxy domain.

```bash
$> VITE_GITHUB_PROXY=mydomain.for.github.auth.proxy.com
$> npm install
$> npm run build
```

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

### Toggle Button States with Icons

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Demonstrates states for toggle buttons that include leading icons. Note that the leading icon should be filled when the toggle button is selected/active. Text toggle buttons use `gl-btn` for unselected and `gl-btn gl-btn-fill` for selected. Filled toggle buttons use `gl-btn gl-btn-fill` for both states but with different icons.

```html
<div class='w-auto d-flex justify-content-evenly align-items-center'>
  <span class="gl-font-mono">1</span>

  <button class="gl-btn"><PiPolygon className="gl-icon-size-text"/>Enabled</button>

  <button class="gl-btn" disabled><PiPolygon className="gl-icon-size-text"/>Disabled</button>

  <button class="gl-btn gl-btn-hovered"><PiPolygon className="gl-icon-size-text"/>Hovered</button>

  <button class="gl-btn gl-btn-focused"><PiPolygon className="gl-icon-size-text"/>Focused</button>

  <button class="gl-btn gl-btn-pressed"><PiPolygon className="gl-icon-size-text"/>Pressed</button>

</div>
```

```html
<div class='w-auto d-flex justify-content-evenly align-items-center'>
  <span class="gl-font-mono">2</span>

  <button class="gl-btn gl-btn-fill"><PiPolygonFill className="gl-icon-size-text"/>Enabled</button>

  <button class="gl-btn gl-btn-fill" disabled><PiPolygonFill className="gl-icon-size-text"/>Disabled</button>

  <button class="gl-btn gl-btn-fill gl-btn-fill-hovered"><PiPolygonFill className="gl-icon-size-text"/>Hovered</button>

  <button class="gl-btn gl-btn-fill gl-btn-fill-focused"><PiPolygonFill className="gl-icon-size-text"/>Focused</button>

  <button class="gl-btn gl-btn-fill gl-btn-fill-pressed"><PiPolygonFill className="gl-icon-size-text"/>Pressed</button>

</div>
```

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

### Run Custom NPM Commands in Docker

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Executes custom npm commands within the Gephi Lite Docker container's shell environment.

```bash
docker compose run --entrypoint sh gephi-lite
```

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

### Add Weblate Git Remote

Source: https://github.com/gephi/gephi-lite/wiki/Working-with-I18N

Add the Weblate repository as a remote to your local project. This is necessary for synchronizing translations.

```bash
$> git remote add weblate https://hosted.weblate.org/git/gephi/gephi-lite/
```

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

### Listening to Gephi Lite Events with Broadcast API

Source: https://context7.com/gephi/gephi-lite/llms.txt

Use the GephiLiteDriver to set up event listeners for Gephi Lite instance creation and state changes. Ensure proper handling of asynchronous operations and cleanup.

```typescript
import { GephiLiteDriver } from "@gephi/gephi-lite-broadcast";

async function setupEventListeners() {
  const driver = new GephiLiteDriver();

  // Listen for new Gephi Lite instance creation
  driver.on("newInstance", () => {
    console.log("Gephi Lite instance is ready");
  });

  // Open Gephi Lite and wait for connection
  await driver.openGephiLite({
    baseUrl: "/gephi-lite",
    timeout: 15000
  });

  // Periodic polling for changes (events for graph updates coming soon)
  const pollInterval = setInterval(async () => {
    try {
      const graph = await driver.getGraph();
      console.log(`Current graph: ${graph.nodes.length} nodes`);
    } catch (error) {
      console.error("Connection lost:", error);
      clearInterval(pollInterval);
    }
  }, 5000);

  // Cleanup on page unload
  window.addEventListener("beforeunload", () => {
    clearInterval(pollInterval);
    driver.destroy();
  });
}
```

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

### Type Casting and Serialization with Gephi Lite SDK

Source: https://context7.com/gephi/gephi-lite/llms.txt

Utilize SDK functions for type casting, date parsing, string array manipulation, and custom JSON serialization/deserialization. Ensure proper imports and handle potential undefined return values.

```typescript
import {
  toScalar,
  toNumber,
  toString,
  toStringArray,
  toDate,
  notEmpty,
  gephiLiteStringify,
  gephiLiteParse,
  Scalar
} from "@gephi/gephi-lite-sdk";
import { DateTime } from "luxon";

// Type casting utilities
const rawValue: unknown = "42";
const numValue: number | undefined = toNumber(rawValue);  // 42
const strValue: string | undefined = toString(42);         // "42"

// Handle date parsing with optional format
const dateStr = "2024-01-15";
const parsedDate: DateTime | undefined = toDate(dateStr);           // ISO format
const customDate = toDate("15/01/2024", "dd/MM/yyyy");              // Custom format

// Parse keywords/tags from string
const keywords = toStringArray("network,graph,visualization", ","); // ["network", "graph", "visualization"]

// Convert any value to Scalar (boolean | number | string | undefined | null)
const scalar: Scalar = toScalar({ complex: "object" });  // JSON stringified

// Filter out null/undefined values
const values = [1, null, 2, undefined, 3];
const filtered: number[] = values.filter(notEmpty);  // [1, 2, 3]

// Custom JSON serialization supporting Sets and Functions
const dataWithSet = {
  categories: new Set(["a", "b", "c"]),
  filter: (x: number) => x > 5,
  values: [1, 2, 3]
};

// Serialize to JSON string (Sets become ["<<SET", [...], "SET>>"])
const jsonString = gephiLiteStringify(dataWithSet);

// Parse back with full type restoration
const restored = gephiLiteParse<typeof dataWithSet>(jsonString);
console.log(restored.categories instanceof Set);  // true
console.log(typeof restored.filter);              // "function"
```

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

### Button Styles

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Illustrates the different styles for buttons: filled, outlined, and text. The filled style uses `gl-btn-fill`, outlined uses `gl-btn-outline`, and text uses the base `gl-btn` class.

```html
<button class="gl-btn gl-btn-fill">
  <PiGraph className="" /> Filled
</button>
```

```html
<button class="gl-btn gl-btn-outline">
  <PiGraph className="" /> Outlined
</button>
```

```html
<button class="gl-btn">
  <PiGraph className="" /> Text
</button>
```

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

### Import Graph into Gephi Lite

Source: https://github.com/gephi/gephi-lite/blob/main/packages/broadcast/README.md

Use this to open a Gephi Lite instance in a new tab and import a Graphology graph. Ensure Gephi Lite is accessible and the Broadcast Channel API is supported.

```typescript
import { GephiLiteDriver } from "@gephi/gephi-lite-broadcast";
import Graph from "graphology";

async function openGraphInGephiLite(graph: Graph) {
  const driver = new GephiLiteDriver();

  await driver.openGephiLite();

  await driver.importGraph(graph.toJSON());

  driver.destroy();
}
```

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

### Build and Apply Filters State

Source: https://context7.com/gephi/gephi-lite/llms.txt

Constructs a FiltersState object, defining a pipeline of filters. Filters can be individually disabled. The state is then applied to the Gephi Lite driver.

```typescript
// Build filters state with pipeline
const filtersState: FiltersState = {
  filters: [
    rangeFilter,
    termsFilter,
    { ...scriptFilter, disabled: false }  // Filters can be disabled
  ]
};

// Apply filters through driver
async function applyFilters(driver: GephiLiteDriver) {
  // Get current filters
  const currentFilters = await driver.getFilters();
  console.log(`Active filters: ${currentFilters.filters.length}`);

  // Set new filters (replaces all)
  await driver.setFilters(filtersState);
}
```

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

### Default Button States

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Displays various states for default buttons: enabled, disabled, hovered, focused, and pressed. Specific classes like `gl-btn-fill-hovered`, `gl-btn-fill-focused`, and `gl-btn-fill-pressed` are used for filled buttons, while `gl-btn-hovered`, `gl-btn-focused`, and `gl-btn-outline-pressed` are used for outlined buttons.

```html
<button class="gl-btn gl-btn-fill">Enabled</button>
```

```html
<button class="gl-btn gl-btn-fill" disabled>
  Disabled
</button>
```

```html
<button class="gl-btn gl-btn-fill gl-btn-fill-hovered">Hovered</button>
```

```html
<button class="gl-btn gl-btn-fill gl-btn-fill-focused">Focused</button>
```

```html
<button class="gl-btn gl-btn-fill gl-btn-fill-pressed">Pressed</button>
```

```html
<button class="gl-btn gl-btn-outline">Enabled</button>
```

```html
<button class="gl-btn gl-btn-outline" disabled>
  Disabled
</button>
```

```html
<button class="gl-btn gl-btn-outline gl-btn-hovered">Hovered</button>
```

```html
<button class="gl-btn gl-btn-outline gl-btn-focused">Focused</button>
```

```html
<button class="gl-btn gl-btn-outline gl-btn-outline-pressed">Pressed</button>
```

```html
<button class="gl-btn">Enabled</button>
```

```html
<button class="gl-btn" disabled>
  Disabled
</button>
```

```html
<button class="gl-btn gl-btn-hovered">Hovered</button>
```

```html
<button class="gl-btn gl-btn-focused">Focused</button>
```

```html
<button class="gl-btn gl-btn-pressed">Pressed</button>
```

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

### Toggle Button Styles

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Shows combinations of text and outlined styles for toggle buttons. Use `gl-btn` for unselected and `gl-btn-fill` for selected text toggle buttons. For outlined toggle buttons, use `gl-btn gl-btn-outline` for unselected and `gl-btn gl-btn-fill` for selected.

```html
<div class="d-flex gl-gap-x-3">
  <button class="gl-btn">Unselected</button>
  <button class="gl-btn gl-btn-fill">Selected</button>
</div>
```

```html
<div class="d-flex gl-gap-x-3">
  <button class="gl-btn gl-btn-outline">Unselected</button>
  <button class="gl-btn gl-btn-fill">Selected</button>
</div>
```

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

### Rebase Weblate-dev onto Project Dev Branch

Source: https://github.com/gephi/gephi-lite/wiki/Working-with-I18N

Rebase the 'weblate-dev' branch onto the project's 'dev' branch. This integrates Weblate's translation updates into the main development line, helping to resolve conflicts.

```bash
git rebase weblate-dev
```

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

### Update Weblate Remote

Source: https://github.com/gephi/gephi-lite/wiki/Working-with-I18N

Fetch the latest changes from the Weblate remote repository. This ensures your local repository is up-to-date with Weblate's translations.

```bash
$> git remote update weblate
```

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

### Import Graph Data into Gephi Lite

Source: https://context7.com/gephi/gephi-lite/llms.txt

Imports a serialized graphology graph object into Gephi Lite. This function is asynchronous and requires a GephiLiteDriver instance.

```typescript
import { GephiLiteDriver } from "@gephi/gephi-lite-broadcast";
import Graph from "graphology";
import { SerializedGraph } from "graphology-types";

// Import a serialized graphology graph
async function importFromJSON(driver: GephiLiteDriver, graphData: SerializedGraph) {
  await driver.importGraph(graphData);
}
```

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

### Outlined Button States

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Demonstrates the different states of outlined buttons: enabled, disabled, hovered, focused, and pressed. These buttons have transparent backgrounds and use outline styling.

```html
<div className='w-auto d-flex flex-column gl-container-highest-bg gl-gap-4 p-5'>
  <div className='w-auto d-flex justify-content-evenly align-items-center'>
    <span className="gl-font-mono">1</span>
    <button className="gl-btn gl-btn-outline"><PiPolygon className="gl-icon-size-text"/>Enabled</button>
    <button className="gl-btn gl-btn-outline" disabled><PiPolygon className="gl-icon-size-text"/>Disabled</button>
    <button className="gl-btn gl-btn-outline gl-btn-outline-hovered"><PiPolygon className="gl-icon-size-text"/>Hovered</button>
    <button className="gl-btn gl-btn-outline gl-btn-outline-focused"><PiPolygon className="gl-icon-size-text"/>Focused</button>
    <button className="gl-btn gl-btn-outline gl-btn-outline-pressed"><PiPolygon className="gl-icon-size-text"/>Pressed</button>
  </div>
</div>
```

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

### Pull Latest Changes from Weblate-dev

Source: https://github.com/gephi/gephi-lite/wiki/Working-with-I18N

Update the 'weblate-dev' branch with the latest commits from the remote 'weblate-dev' branch. This is a step in resolving translation conflicts.

```bash
(weblate-dev $)> git pull
```

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

### Configure Terms Filter for Nodes

Source: https://context7.com/gephi/gephi-lite/llms.txt

Sets up a terms filter for categorical node attributes. Select specific terms to include and manage the inclusion of nodes with missing attribute values.

```typescript
// Terms filter - filter categorical attribute by selected values
const categoryField: FieldModel<"nodes"> = {
  id: "category",
  itemType: "nodes",
  type: "category"
};

const termsFilter: TermsFilterType = {
  type: "terms",
  itemType: "nodes",
  field: categoryField,
  terms: new Set(["research", "industry", "government"]),
  keepMissingValues: true
};
```

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

### NGINX Reverse Proxy Configuration for GitHub API

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Configure NGINX as a reverse proxy to manage GitHub API requests and handle CORS issues. Ensure to update server_name and ssl configurations to match your domain and certificate paths.

```nginx
server {
    listen 443 ssl;
    server_name githubapi.gephi.org;

    ssl_certificate /etc/letsencrypt/live/githubapi.gephi.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/githubapi.gephi.org/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

   location /login {
     add_header Access-Control-Allow-Origin "https://gephi.org";
     add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
     add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, user-agent";
     if ($request_method = OPTIONS) {
        return 204;
     }
     proxy_pass https://github.com/login;
   }

   location / {
     return 404;
   }
}
```

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

### Filled Button States

Source: https://github.com/gephi/gephi-lite/blob/main/packages/gephi-lite/src/designSystem/Buttons.mdx

Illustrates the various states of filled buttons: enabled, disabled, hovered, focused, and pressed. These buttons have a solid background color.

```html
<div className='w-auto d-flex flex-column gl-container-highest-bg gl-gap-4 p-5'>
  <div className='w-auto d-flex justify-content-evenly align-items-center'>
    <span className="gl-font-mono">2</span>
    <button className="gl-btn gl-btn-fill"><PiPolygonFill className="gl-icon-size-text"/>Enabled</button>
    <button className="gl-btn gl-btn-fill" disabled><PiPolygonFill className="gl-icon-size-text"/>Disabled</button>
    <button className="gl-btn gl-btn-fill gl-btn-fill-hovered"><PiPolygonFill className="gl-icon-size-text"/>Hovered</button>
    <button className="gl-btn gl-btn-fill gl-btn-fill-focused"><PiPolygonFill className="gl-icon-size-text"/>Focused</button>
    <button className="gl-btn gl-btn-fill gl-btn-fill-pressed"><PiPolygonFill className="gl-icon-size-text"/>Pressed</button>
  </div>
</div>
```

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

### Stop Gephi Lite Docker Container

Source: https://github.com/gephi/gephi-lite/blob/main/README.md

Stops the running Gephi Lite container and frees all resources obtained by it, when using Docker Compose.

```bash
docker compose down
```

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

### Configure Topological Filter (Largest Connected Component)

Source: https://context7.com/gephi/gephi-lite/llms.txt

Filters the graph to keep only the nodes belonging to the largest connected component. This filter requires no specific parameters.

```typescript
const largestComponentFilter: TopologicalFilterType = {
  type: "topological",
  topologicalFilterId: "largest-connected-component",
  parameters: []
};
```

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

### Configure Script Filter for Nodes

Source: https://context7.com/gephi/gephi-lite/llms.txt

Implements a custom script filter for nodes. The provided JavaScript function acts as a predicate, returning true to keep a node and false to discard it based on custom logic.

```typescript
// Script filter - custom JavaScript predicate
const scriptFilter: ScriptFilterType = {
  type: "script",
  itemType: "nodes",
  script: (nodeId, attributes, fullGraph) => {
    // Keep nodes with degree > 5 and positive score
    const degree = fullGraph.degree(nodeId);
    const score = attributes.score as number || 0;
    return degree > 5 && score > 0;
  }
};
```

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

### Export Graph Data from Gephi Lite

Source: https://context7.com/gephi/gephi-lite/llms.txt

Retrieves the current graph data from Gephi Lite as a serialized graphology object. Logs the number of nodes and edges exported.

```typescript
// Retrieve graph data from Gephi Lite
async function exportGraph(driver: GephiLiteDriver): Promise<SerializedGraph> {
  const graphData = await driver.getGraph();
  console.log(`Exported graph with ${graphData.nodes.length} nodes and ${graphData.edges.length} edges`);
  return graphData;
}
```

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

### Configure Range Filter for Edges

Source: https://context7.com/gephi/gephi-lite/llms.txt

Defines a range filter for numeric edge attributes like 'weight'. Specify min/max values and whether to include edges with missing values.

```typescript
import {
  FiltersState,
  FilterType,
  RangeFilterType,
  TermsFilterType,
  TopologicalFilterType,
  ScriptFilterType,
  FieldModel
} from "@gephi/gephi-lite-sdk";

// Range filter - filter numeric attribute by min/max
const weightField: FieldModel<"edges"> = {
  id: "weight",
  itemType: "edges",
  type: "number"
};

const rangeFilter: RangeFilterType = {
  type: "range",
  itemType: "edges",
  field: weightField,
  min: 0.5,
  max: 10.0,
  keepMissingValues: false
};
```

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