### Development Workflow Commands (Bash)

Source: https://context7.com/labkey/tutorialmodules/llms.txt

This set of bash commands outlines the development workflow for the project, including installing dependencies, starting the development server with hot module replacement, building for development or production, running unit tests, and cleaning generated artifacts. It also lists example development server URLs and notes that Gradle builds the module on server startup.

```bash
# Development workflow commands

# Install dependencies
npm run setup

# Start development server with hot module reload at http://localhost:8080
npm start

# Build for development (unminified, faster compilation)
npm run build-dev

# Build for production (minified, source maps, optimized)
npm run build-prod

# Run Jest unit tests
npm run test

# Clean generated artifacts
npm run clean

# Development server URLs:
# http://localhost:8080/labkey/home/reactExamples-helloWorld.view
# http://localhost:8080/labkey/home/reactExamples-todoList.view
# http://localhost:8080/labkey/home/reactExamples-queryModel.view
# http://localhost:8080/labkey/home/reactExamples-fileAttachmentForm.view

# Gradle builds the module automatically on server startup
# Place module in: server/modules/tutorialModules/

```

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

### Configure LabKey Module Build with Gradle

Source: https://context7.com/labkey/tutorialmodules/llms.txt

Sets up the Gradle build configuration for a LabKey module using the file-based module plugin. It outlines the standard module directory structure and provides example commands for building and deploying modules, including automated handling of React projects.

```groovy
// build.gradle: Module build configuration
plugins {
    id 'org.labkey.build.fileModule'
}

// Module structure:
// ├── build.gradle
// ├── module.properties
// ├── resources/
// │   ├── assay/          # Assay definitions
// │   ├── data/           # Sample data
// │   ├── queries/        # SQL queries
// │   ├── reports/        # R reports
// │   ├── views/          # HTML views
// │   └── web/            # JavaScript/CSS
// └── src/                # Java source (if needed)

// Root gradle.properties defines module container
// moduleContainer=:server:modules:tutorialModules

// Build commands:
// ./gradlew :server:modules:tutorialModules:reactExamples:build
// ./gradlew deployModules  # Deploy to LabKey server

// For React modules, Gradle automatically:
// 1. Detects package.json
// 2. Runs npm install
// 3. Executes npm run build
// 4. Packages compiled resources into module
```

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

### NPM Build Configuration for React Modules (JSON)

Source: https://context7.com/labkey/tutorialmodules/llms.txt

This JSON object defines the package.json configuration for a React project utilizing TypeScript, Jest for testing, and webpack for building. It includes scripts for installation, development server, production builds, testing, and cleaning artifacts. Dependencies include `@labkey/components` and devDependencies include `@labkey/build`, `jest`, and related TypeScript and testing tools.

```json
{
  "name": "reactExamples",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "setup": "npm ci",
    "build": "npm run build-dev",
    "start": "cross-env NODE_ENV=development webpack serve --config node_modules/@labkey/build/webpack/watch.config.js",
    "build-dev": "npm run clean && cross-env NODE_ENV=development webpack --config node_modules/@labkey/build/webpack/dev.config.js --color",
    "build-prod": "npm run clean && cross-env NODE_ENV=production PROD_SOURCE_MAP=source-map webpack --config node_modules/@labkey/build/webpack/prod.config.js --color --progress --profile",
    "clean": "rimraf resources/views/gen && rimraf resources/web/gen && rimraf resources/web/reactExamples/gen",
    "test": "cross-env NODE_ENV=test jest"
  },
  "dependencies": {
    "@labkey/components": "4.0.0"
  },
  "devDependencies": {
    "@labkey/build": "7.3.0",
    "@types/jest": "29.2.0",
    "@types/react": "16.14.34",
    "jest": "29.2.2",
    "jest-environment-jsdom": "29.2.2",
    "jest-teamcity-reporter": "0.9.0",
    "ts-jest": "29.0.3"
  },
  "jest": {
    "globals": {
      "LABKEY": {}
    },
    "moduleFileExtensions": ["tsx", "ts", "js"],
    "preset": "ts-jest",
    "setupFilesAfterEnv": ["<rootDir>/test/jest.setup.ts"],
    "testEnvironment": "jsdom",
    "testMatch": null,
    "testRegex": "(\.(test))\.(ts|tsx)$",
    "testResultsProcessor": "jest-teamcity-reporter",
    "transform": {
      "^.+\.tsx?$": [
        "ts-jest",
        {
          "isolatedModules": true,
          "tsconfig": "node_modules/@labkey/build/webpack/tsconfig.json"
        }
      ]
    }
  }
}

```

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

### React Hello World Component for LabKey

Source: https://context7.com/labkey/tutorialmodules/llms.txt

A simple React class-based component demonstrating basic integration with LabKey HTML views. It includes a component definition and entry point configuration for rendering a 'Hello World' message. Accessible via a LabKey view path.

```typescript
import React, { PureComponent } from 'react';

export class App extends PureComponent {
    render() {
        return (
            <p>
                <span className="world-highlight">Hello World!</span>
                This is a simple test page to show a LabKey HTML view built with React.
            </p>
        )
    }
}

// Entry point configuration in entryPoints.js
module.exports = {
    apps: [{
        name: 'helloWorld',
        title: 'Hello World Page',
        permissionClasses: ['org.labkey.api.security.permissions.ReadPermission'],
        path: './src/client/HelloWorldPage'
    }]
};

// Access at: /labkey/home/reactExamples-helloWorld.view
```

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

### QueryModel API with React Grid and Detail Panels (TypeScript)

Source: https://context7.com/labkey/tutorialmodules/llms.txt

This snippet showcases setting up a React application to interact with LabKey's QueryModel API. It configures a query to fetch container data, specifying filters and omitted columns, and renders this data using `ExampleGridPanel` and `ExampleDetailPanel` components. It requires `@labkey/api` and `@labkey/components`.

```typescript
import React, { FC } from 'react';
import { Query, getServerContext } from '@labkey/api';
import {
    SchemaQuery,
    ServerContextProvider,
    withAppUser,
    AppContextProvider
} from '@labkey/components';
import { ExampleDetailPanel } from "./ExampleDetailPanel";
import { ExampleGridPanel } from "./ExampleGridPanel";

export const App: FC = (() => {
    const serverContext = withAppUser(getServerContext());

    // Configure query to fetch all containers user has access to
    const queryConfigs = {
        containersModel: {
            schemaQuery: new SchemaQuery('core', 'Containers'),
            containerFilter: Query.containerFilter.allFolders,
            omittedColumns: [
                'SortOrder', 'Searchable', 'Type',
                'Title', 'ContainerType', 'Workbook',
                'IdPrefixedName'
            ],
            includeTotalCount: true,
        }
    };

    return (
        <ServerContextProvider initialContext={serverContext}>
            <AppContextProvider>
                <ExampleDetailPanel asPanel={true} />
                <ExampleGridPanel
                    title="LabKey Server Containers"
                    queryConfigs={queryConfigs}
                    asPanel={true}
                    autoLoad
                />
            </AppContextProvider>
        </ServerContextProvider>
    )
});

// GridPanel supports: sorting, filtering, paging, exporting data
// DetailPanelWithModel shows detailed view of selected record
// Access at: /labkey/home/reactExamples-queryModel.view

```

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

### Configure React Application Entry Points with Permissions

Source: https://context7.com/labkey/tutorialmodules/llms.txt

Defines entry points for React applications and webparts, specifying titles, permission classes for access control, and client-side paths. It details how Webpack processes these definitions to generate bundles, view definitions, and HTML templates.

```javascript
// entryPoints.js: Define all React pages and webparts
module.exports = {
    apps: [{
        name: 'helloWorld',
        title: 'Hello World Page',
        permissionClasses: ['org.labkey.api.security.permissions.ReadPermission'],
        path: './src/client/HelloWorldPage'
    }, {
        name: 'todoList',
        title: 'To-Do List Page',
        permissionClasses: ['org.labkey.api.security.permissions.InsertPermission'],
        path: './src/client/ToDoListPage'
    }, {
        name: 'demoWebpart',
        title: 'To-Do List Webpart',
        path: './src/client/ToDoListPage/webpart',
        generateLib: true // Used for webpart embedding
    }, {
        name: 'queryModel',
        title: 'QueryModel Example Page',
        permissionClasses: ['org.labkey.api.security.permissions.ReadPermission'],
        path: './src/client/QueryModelPage'
    }, {
        name: 'fileAttachmentForm',
        title: 'File Attachment Example Page',
        permissionClasses: ['org.labkey.api.security.permissions.InsertPermission'],
        path: './src/client/FileAttachmentPage'
    }]
};

// Webpack processes each app and generates:
// - Bundle in resources/web/gen/{appName}/
// - View definition in resources/views/gen/{appName}.view.xml
// - HTML template in resources/views/gen/{appName}.html

// Permission classes control page access:
// - ReadPermission: Basic read access
// - InsertPermission: Ability to create/modify data
// - Other LabKey permissions can be specified as needed
```

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

### React To-Do List with Hooks for LabKey

Source: https://context7.com/labkey/tutorialmodules/llms.txt

An interactive to-do list application built with React Hooks for functional component state management. It demonstrates adding items, clearing all, and toggling item completion. Requires 'InsertPermission' and is accessible via a LabKey view path.

```typescript
import React, { FC, memo, useCallback, useState } from 'react';
import { Item } from './models';

// Model definition
interface Item {
    id: number;
    isComplete: boolean;
    label: string;
}

export const ToDoListPage: FC = memo(() => {
    const [items, setItems] = useState<Item[]>([]);
    const [label, setLabel] = useState<string>('');

    const addItem = useCallback(() => {
        if (label) {
            setItems(items.concat({
                id: items.length + 1,
                isComplete: false,
                label
            }));
            setLabel('');
        }
    }, [items, label]);

    const clearAll = useCallback(() => setItems([]), [setItems]);

    const onItemClick = useCallback((id) => {
        setItems(items.map(item => {
            if (id === item.id) {
                return { ...item, isComplete: !item.isComplete };
            }
            return item;
        }));
    }, [items]);

    return (
        <div className="todo-list-page">
            <ToDoForm
                addItem={addItem}
                clearAll={clearAll}
                label={label}
                setLabel={setLabel}
            />
            <ToDoList items={items} onItemClick={onItemClick} />
        </div>
    );
});

// Entry point requires InsertPermission
// Access at: /labkey/home/reactExamples-todoList.view
```

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

### Initialize and Save Batch Data

Source: https://github.com/labkey/tutorialmodules/blob/develop/exampleassay/resources/assay/example/views/upload.html

Initializes batch data and provides a function to save the batch, triggering UI updates. This code assumes the existence of LabKey JavaScript API functions like LABKEY.page.batch, LABKEY.setDirty, and a custom saveBatch function.

```javascript
function init() {
  LABKEY.page.batch = LABKEY.page.batch || {};
  LABKEY.page.batch.runs = LABKEY.page.batch.runs || [];
}

function saveBatch() {
  // Placeholder for actual save logic
  console.log("Batch saved.");
  LABKEY.setDirty(false);
}

init();
```

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

### Initialize Module Data and Styling

Source: https://github.com/labkey/tutorialmodules/blob/develop/sourdough/resources/views/overview.html

Initializes data import and styling configuration for the module. This function is typically called on module readiness.

```javascript
LABKEY.Utils.onReady(function() { document.getElementById('overview__button')['onclick'] = onInit; });
```

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

### Custom SQL Query Definition and Conditional Formatting (XML)

Source: https://context7.com/labkey/tutorialmodules/llms.txt

Defines a custom SQL query named 'RisesQuery' and applies conditional formatting rules using an accompanying XML file. This allows for visual highlighting of specific data points, such as 'starter1' values greater than 320, by setting text and background colors.

```sql
-- RisesQuery.sql: Query sourdough starter data
SELECT Rises.X,
       Rises.starter1,
       Rises.starter2,
       Rises.starter3
FROM Rises

```

```xml
<!-- RisesQuery.query.xml: Add conditional formatting -->
<query xmlns="http://labkey.org/query/xml">
    <metadata>
        <tables xmlns="http://labkey.org/data/xml">
            <table tableName="Rises" tableDbType="NOT_IN_DB">
                <columns>
                    <column columnName="starter1">
                        <conditionalFormats>
                            <conditionalFormat>
                                <filter column="starter1" operator="gt"
                                        value="320"/>
                                <textColor>dd0000</textColor>
                                <backgroundColor>ffeeee</backgroundColor>
                            </conditionalFormat>
                        </conditionalFormats>
                    </column>
                </columns>
            </table>
        </tables>
    </metadata>
</query>

<!-- Cells with starter1 > 320 display with red text on pink background -->

```

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

### Upload Files to Server using WebDAV API (TypeScript)

Source: https://context7.com/labkey/tutorialmodules/llms.txt

Handles the asynchronous upload of multiple files to the server using the `uploadWebDavFile` function from the LabKey API. It resolves with an array of uploaded file names or rejects with an error. Dependencies include `@labkey/api` and `@labkey/components`.

```typescript
import { ActionURL } from "@labkey/api";
import {
    uploadWebDavFile,
} from "@labkey/components";

const MY_ATTACHMENTS_DIR = '@files/myAttachments';

// Upload multiple files to server
export function uploadMyAttachmentsToServer(
    model: FileAttachmentModel
): Promise<any> {
    return new Promise((resolve, reject) => {
        if (model.filesToUpload?.size === 0) {
            resolve(model.filesToUpload);
        }

        const uploadedFiles = Array<string>();

        model.filesToUpload.map((fileToUpload) => {
            if (fileToUpload) {
                uploadWebDavFile(
                    fileToUpload,
                    ActionURL.getContainer(),
                    MY_ATTACHMENTS_DIR,
                    true
                )
                .then((name: string) => {
                    uploadedFiles.push(name);
                    if (uploadedFiles.length === model.filesToUpload.size) {
                        resolve(uploadedFiles);
                    }
                })
                .catch(reason => reject(reason));
            }
        });
    });
}
```

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

### XML Assay Configuration: Provider and Result Domain Definition

Source: https://context7.com/labkey/tutorialmodules/llms.txt

Defines the structure for a file-based assay in LabKey. Includes XML for the assay provider definition and the result domain schema, specifying typed properties like ParticipantId, Date, M1, Stim, and Weight. This configuration is used with the 'org.labkey.build.fileModule' plugin.

```xml
<!-- config.xml: Define assay provider -->
<ap:provider xmlns:exp="http://cpas.fhcrc.org/exp/xml"
             xmlns:ap="http://labkey.org/study/assay/xml">
    <ap:name>LabKey Example</ap:name>
    <ap:description>LabKey example file-based assay.</ap:description>
</ap:provider>

<!-- result.xml: Define result domain with typed properties -->
<ap:domain xmlns:exp="http://cpas.fhcrc.org/exp/xml"
           xmlns:ap="http://labkey.org/study/assay/xml">
    <exp:Description>Example Assay Results</exp:Description>

    <exp:PropertyDescriptor>
        <exp:Name>ParticipantId</exp:Name>
        <exp:Required>true</exp:Required>
        <exp:RangeURI>http://www.w3.org/2001/XMLSchema#int</exp:RangeURI>
    </exp:PropertyDescriptor>

    <exp:PropertyDescriptor>
        <exp:Name>Date</exp:Name>
        <exp:Required>true</exp:Required>
        <exp:RangeURI>http://www.w3.org/2001/XMLSchema#dateTime</exp:RangeURI>
        <exp:Label>Measurement Date</exp:Label>
        <exp:Format>EEE, MMM d, yyyy</exp:Format>
    </exp:PropertyDescriptor>

    <exp:PropertyDescriptor>
        <exp:Name>M1</exp:Name>
        <exp:Required>true</exp:Required>
        <exp:RangeURI>http://www.w3.org/2001/XMLSchema#int</exp:RangeURI>
        <exp:Label>Measure1</exp:Label>
    </exp:PropertyDescriptor>

    <exp:PropertyDescriptor>
        <exp:Name>Stim</exp:Name>
        <exp:Required>true</exp:Required>
        <exp:RangeURI>http://www.w3.org/2001/XMLSchema#boolean</exp:RangeURI>
        <exp:Label>Stimulated</exp:Label>
    </exp:PropertyDescriptor>

    <exp:PropertyDescriptor>
        <exp:Name>Weight</exp:Name>
        <exp:Required>true</exp:Required>
        <exp:RangeURI>http://www.w3.org/2001/XMLSchema#double</exp:RangeURI>
    </exp:PropertyDescriptor>
</ap:domain>

<!-- Module configuration in build.gradle -->
plugins {
    id 'org.labkey.build.fileModule'
}

// Place sample data files in /data directory:
// - Machines.xls
// - NewAssay_Run1.xls
// - NewAssay_Run2.xls
// Sample data includes ParticipantId, Date, M1, Stim, Weight columns

```

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

### Execute R Report and Display with QueryWebParts (JavaScript)

Source: https://context7.com/labkey/tutorialmodules/llms.txt

This JavaScript code demonstrates how to execute an R report named 'risesgraph' using the LABKEY.Report.execute function. It handles displaying the generated graph image, R console output, and initializes two QueryWebParts to display data from 'lists.Rises' and 'lists.RisesQuery'. Dependencies include the LABKEY JavaScript API.

```javascript
// Execute R report and display with QueryWebParts
const init = () => {
    LABKEY.Report.execute({
        reportName: 'risesgraph',
        schemaName: 'lists',
        queryName: 'Rises',
        success: r => {
            // Display R-generated graph image
            const img = document.createElement('img');
            if (r.errors.length > 0) {
                alert(r.errors[0]);
            }
            img.src = r.outputParams[0].value;
            img.className = 'dashboard__image';
            document.getElementById('dashboard').appendChild(img);

            // Display R console output
            const div = document.createElement('div');
            div.innerHTML = r.console[0];
            div.className = 'dashboard__output';
            document.getElementById('dashboard').appendChild(div);

            // Remove loading indicator
            document.getElementById('loading').remove();

            // Create QueryWebPart with raw data
            const qwp1 = new LABKEY.QueryWebPart({
                renderTo: 'myQWP1',
                schemaName: 'lists',
                queryName: 'Rises',
                title: 'Using Raw Data',
                frame: 'dialog',
                showDetailsColumn: false,
                showRecordSelectors: false,
                showExportButtons: false,
                showUpdateColumn: false,
                buttonBar: {
                    position: 'none',
                },
            });

            // Create QueryWebPart with custom query
            const qwp2 = new LABKEY.QueryWebPart({
                renderTo: 'myQWP2',
                schemaName: 'lists',
                queryName: 'RisesQuery',
                title: 'Using Module Query',
                frame: 'dialog',
                showDetailsColumn: false,
                showRecordSelectors: false,
                showExportButtons: false,
                showUpdateColumn: false,
                buttonBar: {
                    position: 'none',
                },
            });
        },
    });
};

// R report file (risesgraph.r) generates visualization
// Place in: resources/reports/schemas/lists/Rises/risesgraph.r

```

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

### Toggle UI Elements with JavaScript

Source: https://github.com/labkey/tutorialmodules/blob/develop/sourdough/resources/views/styling.html

This JavaScript code sets up click event listeners for buttons that toggle UI elements like the header/footer and login page. It relies on the LABKEY.Utils.onReady function to ensure the DOM is loaded before attaching event handlers.

```javascript
LABKEY.Utils.onReady(function(){
  document.getElementById('setHeaderFooterOn')['onclick'] = function() { setHeaderFooter(true) };
  document.getElementById('setHeaderFooterOff')['onclick'] = function() { setHeaderFooter(false) };
  document.getElementById('setLoginOn')['onclick'] = function() { setLogin(true) };
  document.getElementById('setLoginOff')['onclick'] = function() { setLogin(false) };
});
```

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

### Retrieve Uploaded Files from Server using WebDAV API (TypeScript)

Source: https://context7.com/labkey/tutorialmodules/llms.txt

Fetches files from a specified directory on the server using the `getWebDavFiles` function. It processes the response to return an array of `SavedFileModel` objects, including file names and hrefs. Handles potential errors during file retrieval. Dependencies include `@labkey/api` and `@labkey/components`.

```typescript
import {
    getWebDavFiles,
    WebDavFile,
} from "@labkey/components";

// Retrieve uploaded files from server
export async function getUploadedFiles(
    container: string,
    directory?: string,
    includeSubdirectories?: boolean
): Promise<Array<SavedFileModel>> {
    return new Promise(async (resolve, reject) => {
        try {
            const webDavFilesResponse = await getWebDavFiles(
                container,
                directory,
                includeSubdirectories
            );

            const displayFiles = webDavFilesResponse
                .get('files')
                .valueSeq()
                .map((file: WebDavFile) => {
                    return new SavedFileModel({
                        fileName: file.name,
                        href: file.href
                    });
                });

            resolve(displayFiles.toArray());
        } catch (response) {
            let msg = `Unable to load files in ${directory || 'root'}`;
            if (response) {
                msg += `: ${response}`;
                reject(msg);
            } else {
                resolve(Array<SavedFileModel>());
            }
        }
    });
}
```

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

### Add Run to Batch in LabKey

Source: https://github.com/labkey/tutorialmodules/blob/develop/exampleassay/resources/assay/example/views/upload.html

Adds a new run object to the current batch in LabKey. It processes input values like 'm1', 'stim', and 'weight', converting 'stim' to a boolean and formatting 'm1' as an Excel value. The batch is marked as dirty after adding a run.

```javascript
function addRun(m1, stim, weight) {
  const run = {
    "M1": m1.value, // excel formatted value "M1": m1.value,
    "Stim": stim.value == "y", // convert Stim to a boolean
    "Weight": weight.value
  };
}
LABKEY.page.batch.runs = LABKEY.page.batch.runs || [];
LABKEY.page.batch.runs.push(run);
LABKEY.setDirty(true);
saveBatch();
```

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

### File Attachment Form React Component (TypeScript)

Source: https://context7.com/labkey/tutorialmodules/llms.txt

A React functional component that renders a file attachment form using the `FileAttachmentForm` component. It handles file selection changes and submission, updating the model and triggering callbacks. Dependencies include `react`, `immer`, and `@labkey/components`.

```typescript
import { FC, memo, useCallback } from 'react';
import {
    FileAttachmentForm,
    FileAttachmentModel
} from "@labkey/components";
import { Map } from 'immutable';
import { produce } from 'immer';

interface Props {
    model: FileAttachmentModel;
    onInputChange: (model: FileAttachmentModel) => void;
    onSaveBtnHandler: () => void;
}

// React component with file upload form
export const FileAttachmentPanel: FC<Props> = memo((props) => {
    const { model, onInputChange, onSaveBtnHandler } = props;

    const onFileChange = useCallback((files: Map<string, File>) => {
        const updatedModel = produce(model, (draft) => {
            draft['filesToUpload'] = files;
        });
        onInputChange(updatedModel);
    }, [model, onInputChange]);

    return (
        <div className='panel panel-default'>
            <div className='panel-heading'>My File Attachments</div>
            <div className='panel-body'>
                <FileAttachmentForm
                    acceptedFormats=".jpg, .pdf, .png"
                    allowDirectories
                    allowMultiple
                    includeDirectoryFiles
                    fileCountSuffix="included"
                    showLabel={false}
                    showButtons
                    onSubmit={onSaveBtnHandler}
                    onFileChange={onFileChange}
                />
            </div>
        </div>
    );
});

// Access at: /labkey/home/reactExamples-fileAttachmentForm.view
```

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