### Configure ePlant Plant eFP via URL Parameters

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

Demonstrates how to configure the ePlant Plant eFP visualization using URL query parameters on the hosted demo page. It shows examples for specifying locus, compendium, and other display options. An implementation example in JavaScript illustrates how to parse these parameters and dynamically generate the SVG.

```html
<!-- Default display -->
https://bar.utoronto.ca/~asullivan/ePlant_Plant_eFP/

<!-- Specify locus -->
https://bar.utoronto.ca/~asullivan/ePlant_Plant_eFP/?locus=AT5G01020

<!-- Specify locus and compendium -->
https://bar.utoronto.ca/~asullivan/ePlant_Plant_eFP/?locus=AT1G01010&svgName=Klepikova

<!-- Full parameter example -->
https://bar.utoronto.ca/~asullivan/ePlant_Plant_eFP/?locus=AT3G24650&svgName=AbioticStress&includeDropdownAll=true
```

```javascript
<script>
function getURLParameters() {
  const params = new URLSearchParams(window.location.search);
  const locus = params.get('locus') || 'AT3G24650';
  const svgName = params.get('svgName') || 'default';
  const includeDropdown = params.get('includeDropdownAll') !== 'false';

  createSVGExpressionData.generateSVG(
    locus,
    'targetDiv',
    svgName,
    includeDropdown
  );
}

window.addEventListener('load', getURLParameters);
</script>
```

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

### Clone ePlant Plant eFP Repository

Source: https://github.com/bioanalyticresource/eplant_plant_efp/blob/master/README.md

This command clones the ePlant Plant eFP repository from GitHub. It is necessary for downloading the complete set of files, including the JavaScript library, compendiums, and data, for local usage. Ensure Git is installed on your system.

```bash
git clone https://github.com/BioAnalyticResource/ePlant_Plant_eFP.git
```

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

### Enable Drag-to-Pan on SVG with ePlantPlantEFPHandleMouseEvent

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

This function enables drag-to-pan functionality for SVG elements. It requires manual event listener setup for custom containers. The function takes the SVG container, event type ('down', 'move', 'up'), the mouse event object, and an optional sensitivity parameter 'moveBy'.

```javascript
const svgContainer = document.getElementById("customSVGContainer");

svgContainer.addEventListener("mousedown", (e) => {
  ePlantPlantEFPHandleMouseEvent(svgContainer, 'down', e);
});

svgContainer.addEventListener("mousemove", (e) => {
  ePlantPlantEFPHandleMouseEvent(svgContainer, 'move', e);
});

svgContainer.addEventListener("mouseup", (e) => {
  ePlantPlantEFPHandleMouseEvent(svgContainer, 'up', e);
});

svgContainer.addEventListener("mouseleave", (e) => {
  ePlantPlantEFPHandleMouseEvent(svgContainer, 'up', e);
});

// Adjust drag sensitivity with optional moveBy parameter (default: 1.5)
svgContainer.addEventListener("mousemove", (e) => {
  ePlantPlantEFPHandleMouseEvent(svgContainer, 'move', e, 2.0);
});
```

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

### Enable Zoom on SVG with ePlantPlantEFPHandleMouseWheel

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

This function enables zoom functionality on SVG elements using the mouse wheel. It requires manual event listener setup for custom containers. The function takes the SVG container and the wheel event object, with an optional sensitivity parameter 'changeBy'. To prevent default browser scrolling, set the 'passive' option to 'false'.

```javascript
const svgContainer = document.getElementById("customSVGContainer");

svgContainer.addEventListener("wheel", (e) => {
  ePlantPlantEFPHandleMouseWheel(svgContainer, e);
});

// Adjust zoom sensitivity with optional changeBy parameter (default: 3)
svgContainer.addEventListener("wheel", (e) => {
  ePlantPlantEFPHandleMouseWheel(svgContainer, e, 2.5);
});

// Example: Disable browser scroll and enable zoom
svgContainer.addEventListener("wheel", (e) => {
  e.preventDefault();
  ePlantPlantEFPHandleMouseWheel(svgContainer, e);
}, { passive: false });
```

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

### HTML and JavaScript Integration for Gene Expression Viewer

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

This snippet shows a complete HTML page that integrates the ePlant Plant eFP library. It includes basic HTML structure, CSS for styling loading and error messages, and JavaScript to instantiate and use the `GeneExpressionViewer` class. The viewer handles displaying gene expression data, managing loading indicators, and reporting errors.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gene Expression Viewer</title>
  <style>
    #loading { display: none; color: #666; padding: 20px; }
    #error { display: none; color: #c00; padding: 20px; }
    .expression-wrapper { min-height: 600px; }
  </style>
</head>
<body>
  <div class="expression-wrapper">
    <div id="loading">Loading expression data...</div>
    <div id="error"></div>
    <div id="expressionContainer"></div>
  </div>

  <script src="https://raw.githubusercontent.com/BioAnalyticResource/ePlant_Plant_eFP/master/tissueExpressionBAR.min.js"></script>

  <script>
    class GeneExpressionViewer {
      constructor(containerId) {
        this.containerId = containerId;
        this.loadingEl = document.getElementById('loading');
        this.errorEl = document.getElementById('error');
      }

      async displayGene(locus, compendium = 'default') {
        // Validate locus
        if (!createSVGExpressionData.verifyLoci(locus)) {
          this.showError(`Invalid locus format: ${locus}`);
          return false;
        }

        // Show loading state
        this.loadingEl.style.display = 'block';
        this.errorEl.style.display = 'none';

        try {
          // Generate visualization
          await createSVGExpressionData.generateSVG(
            locus,
            this.containerId,
            compendium,
            true,
            '90vh'
          );

          this.loadingEl.style.display = 'none';
          return true;
        } catch (error) {
          this.showError(`Failed to load expression data: ${error.message}`);
          return false;
        }
      }

      showError(message) {
        this.errorEl.textContent = message;
        this.errorEl.style.display = 'block';
        this.loadingEl.style.display = 'none';
      }
    }

    // Initialize viewer
    function initializeViewer() {
      if (window.createSVGExpressionData) {
        const viewer = new GeneExpressionViewer('expressionContainer');
        viewer.displayGene('AT3G24650', 'AbioticStress');
      } else {
        setTimeout(initializeViewer, 100);
      }
    }

    window.addEventListener('load', initializeViewer);
  </script>
</body>
</html>
```

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

### JavaScript: Display eFP Content with Parameter Handling

Source: https://github.com/bioanalyticresource/eplant_plant_efp/blob/master/index.html

This JavaScript code defines parameters for displaying eFP data, retrieves parameters from the URL, and conditionally calls a function to generate an SVG expression visualization. It includes fallback logic using setTimeout if the primary generation function is not immediately available.

```javascript
let params = {
  locus: "AT3G24650",
  desiredDOMid: "exampleDOM",
  svgName: "default",
  includeDropdownAll: true,
  containerHeight: undefined,
};

function displayContent(params = params) {
  if (window?.createSVGExpressionData?.generateSVG) {
    createSVGExpressionData.generateSVG(
      params.locus,
      "exampleDOM",
      params.svgName,
      params.includeDropdownAll,
      params.containerHeight
    );
  } else {
    setTimeout(function () {
      createSVGExpressionData.generateSVG(
        params.locus,
        params.desiredDOMid,
        params.svgName,
        params.includeDropdownAll,
        params.containerHeight
      );
    }, 100);
  }
}

function getParams() {
  if (window.location.search) {
    let paramSearch = decodeURI(window.location.search.substring(1));
    let paramsURL = paramSearch.split("&");
    for (let i = 0; i < paramsURL.length; i++) {
      let paramOptions = paramsURL[i].split("=");
      for (const [key, value] of Object.entries(params)) {
        if (paramOptions[0].toLowerCase().trim() === key.toLowerCase().trim()) {
          params[key] = paramOptions[1];
          break;
        }
      }
    }
  }
  if (params) {
    displayContent(params);
  }
}

addEventListener("load", getParams());
```

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

### Convert Expression Percentage to Color - JavaScript

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

The `percentageToColour` function maps expression percentage values (0-100) to a yellow-to-red hexadecimal color gradient. Values outside this range or invalid inputs are mapped to gray. This is useful for creating custom visualizations based on expression levels.

```javascript
// Convert expression percentages to colors (yellow to red gradient)
const color0 = createSVGExpressionData.percentageToColour(0);
console.log(color0); // "#ffff00" (yellow - lowest expression)

const color50 = createSVGExpressionData.percentageToColour(50);
console.log(color50); // "#ff7f00" (orange - medium expression)

const color100 = createSVGExpressionData.percentageToColour(100);
console.log(color100); // "#ff0000" (red - highest expression)

// Negative or undefined values return gray
const colorInvalid = createSVGExpressionData.percentageToColour(-5);
console.log(colorInvalid); // "#808080" (gray)

// Custom visualization using color mapping
const expressionData = [0, 25, 50, 75, 100];
expressionData.forEach(val => {
  const color = createSVGExpressionData.percentageToColour(val);
  console.log(`Expression ${val}% maps to color ${color}`);
});
```

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

### Add Tissue Metadata and Tooltips - JavaScript

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

Functions `addTissueMetadata` and `removeTissueMetadata` are used to enhance SVG tissue elements with interactive effects. While automatically applied by `generateSVG`, they can be manually triggered to add hover effects, visual emphasis (stroke changes), and display expression data tooltips for custom SVG elements.

```javascript
// Enhanced SVG interactivity is automatically applied
// but can be triggered manually for custom elements

// Example: Manual hover effect on custom SVG element
const tissueElement = document.getElementById("Root_tip");
tissueElement.addEventListener("mouseenter", (e) => {
  addTissueMetadata(e.target.id);
});

tissueElement.addEventListener("mouseleave", (e) => {
  removeTissueMetadata(e.target.id);
});

// The function automatically:
// - Increases stroke width for visual emphasis
// - Changes stroke color to black
// - Displays tooltip with expression data
// - Handles nested SVG path elements
```

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

### Generate Interactive Gene Expression SVG - JavaScript

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

The `generateSVG` function creates and displays interactive tissue expression visualizations for Arabidopsis genes. It takes the AGI locus ID, a target DOM element ID, an optional compendium name, and flags for dropdown selectors and container height. Data is fetched from BAR webservices and rendered as color-coded SVG diagrams.

```javascript
createSVGExpressionData.generateSVG("AT3G24650", "targetDiv");

createSVGExpressionData.generateSVG(
  "AT3G24650",           // AGI locus ID
  "expressionContainer", // DOM element ID for rendering
  "AbioticStress",      // Specific compendium name (or "default")
  true,                 // Include dropdown selector for all compendiums
  "95vh"                // Container height (CSS value or number in px)
);
```

```html
<script src="https://raw.githubusercontent.com/BioAnalyticResource/eplant_plant_efp/master/tissueExpressionBAR.min.js"></script>
<div id="expressionView"></div>
<script>
  function displayExpression() {
    if (window?.createSVGExpressionData?.generateSVG) {
      createSVGExpressionData.generateSVG(
        "AT1G01010",
        "expressionView",
        "default",
        true
      );
    } else {
      // Retry if library not yet loaded
      setTimeout(displayExpression, 100);
    }
  }
  window.addEventListener('load', displayExpression);
</script>
```

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

### Generate Tissue Expression SVG Visualization (JavaScript)

Source: https://github.com/bioanalyticresource/eplant_plant_efp/blob/master/README.md

This JavaScript code demonstrates how to generate an SVG visualization of tissue expression data for a given gene locus. It utilizes the `createSVGExpressionData.generateSVG` method, requiring the gene's AGI ID, a target DOM element ID, and optionally a specific SVG name and container height. The function can return the SVG as a string if no DOM ID is provided.

```javascript
// Assuming createSVGExpressionData is already instantiated or available globally
// Example: createSVGExpressionData = new CreateSVGExpressionData();

// To create your own visualized tissue expression, call generateSVG(). Documentation below:
/**
 * Create and generate an SVG based on the desired tissue expression locus
 * @param {String} locus The AGI ID (example: AT3G24650)
 * @param {String} desiredDOMid The desired DOM location or if kept empty, would not replace any DOM elements and just create the related HTML DOM elements within appendSVG
 * @param {String} svgName Name of the SVG file without the .svg at the end. Default is set to "default", when left this value, the highest expression value (if any) is chosen and if not, then Abiotic Stress is.
 * @param {Boolean} includeDropdownAll true = include a html dropdown/select of all available SVGs/samples, false = don't
 * @param {String | Number} containerHeight The height of the SVG container, default is 100vh
 * @returns {String} If no desiredDOMid is given, returns the string version of the output instead
 */
createSVGExpressionData.generateSVG("AT3G24650", "desiredDOM", "default");

// Alternatively, using the window object if createSVGExpressionData is globally scoped
window.createSVGExpressionData.generateSVG("AT3G24650", "desiredDOM", "default");

```

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

### Access Cached eFP Data

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

Provides methods to access expression data and compendium information stored in the browser's global scope or LocalStorage. It allows checking cached expression values, accessing available compendiums, and retrieving raw expression data for a specific compendium. Cache can be cleared by removing specific LocalStorage items.

```javascript
// Access global instance
const efpData = window.createSVGExpressionData;

// Check cached expression values for a locus
const locus = "AT3G24650";
if (efpData.topExpressionValues[locus]) {
  console.log("Cached top expression data:", efpData.topExpressionValues[locus]);
}

// Access available compendiums
console.log("Available compendiums:", efpData.sampleOptions);
console.log("Compendium readable names:", efpData.sampleReadableName);

// Access raw expression data for specific compendium
const compendium = "AbioticStress";
if (efpData.eFPObjects[compendium]) {
  console.log("Expression data:", efpData.eFPObjects[compendium]);
}

// LocalStorage keys used by the library
const topExpression = localStorage.getItem("bar_eplant-top-expression-values");
const sampleData = localStorage.getItem("bar_eplant-sample-data-storage");
const efpCache = localStorage.getItem("bar_eplant-efp-data");

// Clear cache to force refresh
localStorage.removeItem("bar_eplant-top-expression-values");
localStorage.removeItem("bar_eplant-sample-data-storage");
localStorage.removeItem("bar_eplant-efp-data");
```

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

### Validate Arabidopsis Gene Locus IDs - JavaScript

Source: https://context7.com/bioanalyticresource/eplant_plant_efp/llms.txt

The `verifyLoci` function checks if provided strings are valid Arabidopsis thaliana AGI locus identifiers. It supports standard formats, including those with isoform information, and recognizes mitochondrial and chloroplast loci. The validation is case-insensitive.

```javascript
const isValid1 = createSVGExpressionData.verifyLoci("AT3G24650");
console.log(isValid1); // true

const isValid2 = createSVGExpressionData.verifyLoci("AT3G24650.1");
console.log(isValid2); // true (with isoform)

const isValid3 = createSVGExpressionData.verifyLoci("ATMG01010");
console.log(isValid3); // true (mitochondrial)

const isValid4 = createSVGExpressionData.verifyLoci("ATCG00020");
console.log(isValid4); // true (chloroplast)

// Invalid formats
const isInvalid1 = createSVGExpressionData.verifyLoci("AT3G");
console.log(isInvalid1); // false

const isInvalid2 = createSVGExpressionData.verifyLoci("not-a-locus");
console.log(isInvalid2); // false

// Case-insensitive validation
const isValid5 = createSVGExpressionData.verifyLoci("at3g24650");
console.log(isValid5); // true
```

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