### Install Dependencies and Start Development Server

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/documentation-guidelines.md

Navigate to the docs_website directory, install package dependencies using npm, and then run the development server to test changes locally. The site will automatically reload when files in the docs/ and api/ folders are modified.

```bash
cd docs_website
npm install
npm start
```

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

### Install Package Dependencies

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/unit-test-guidelines.md

Run this command to install all necessary package dependencies before building or testing.

```bash
npm install
```

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

### Prepare Git Hooks

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/developer-tips.md

Run the prepare script to install Git hooks if install scripts were skipped during installation (e.g., using `npm ci --ignore-scripts`).

```bash
npm run prepare
```

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

### Install Docs Website Dependencies

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/developer-tips.md

Install dependencies specifically for the docs website. Run this if you modify files under `docs_website/`.

```bash
npm --prefix docs_website install
```

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

### Initialize Submodules and Install Dependencies

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Run this command to initialize git submodules and install project dependencies using npm. This is a common first step for both Docker and non-Docker build processes.

```bash
git submodule update --init --recursive
npm install
```

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

### Install Production Frontend with NPM

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Installs the latest production version of the carta-frontend package using npm. The files are placed in the node_modules directory.

```bash
npm i carta-frontend
```

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

### Start Development Build Server

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Runs a development build server for the CARTA frontend. This command is used for both Docker and non-Docker development workflows.

```bash
npm run start
```

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

### Install Specific Frontend Version with NPM

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Installs a specific version of the carta-frontend package from npm. Use this to test beta versions or older releases.

```bash
npm i carta-frontend@4.1.0
```

```bash
npm i carta-frontend@5.0.0-beta.1c
```

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

### Add CARTA PPA and Install Frontend on Ubuntu

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Adds the CARTA Personal Package Archive (PPA) to your Ubuntu system and installs the carta-frontend package. This method is for Debian-based systems.

```bash
sudo add-apt-repository ppa:cartavis-team/carta
sudo apt-get update
sudo apt-get install carta-frontend
```

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

### Run CARTA Backend with Custom Frontend Folder

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Starts the CARTA backend, specifying a custom folder for the frontend component using the --frontend_folder flag. This is useful when using a downloaded TGZ archive or a custom build.

```bash
./carta-backend --frontend_folder $HOME/package/build
```

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

### Install Frontend with DNF/YUM on RHEL

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Installs the carta-frontend package on Red Hat Enterprise Linux (RHEL) or compatible systems using either dnf or yum package manager. Ensure the appropriate repository has been added first.

```bash
sudo dnf install carta-frontend
```

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

### Clone the CARTA-frontend Repository

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/github-workflow.md

Use this command to download the CARTA-frontend codebase to your local machine. Ensure you have Git installed.

```git
git clone git@github.com:CARTAvis/carta-frontend.git
```

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

### Colocate Test Files

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/unit-test-guidelines.md

Example of directory structure for unit tests. Test files should be placed in the same directory as the component or utility they are testing, with a .test.ts/tsx suffix.

```plaintext
.\n└── src\n    └── components\n        └── AComponent\n            ├── AComponent.tsx\n            ├── AComponent.scss\n            └── AComponent.test.tsx\n    └── utilities\n        └── math\n            ├── math.ts\n            └── math.test.ts
```

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

### Download Frontend TGZ Archive

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Downloads the carta-frontend package as a compressed TGZ archive directly from the npm registry. This can be used as an alternative to npm installation.

```bash
wget https://registry.npmjs.org/carta-frontend/-/carta-frontend-5.0.0.tgz
```

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

### Add CARTA RPM Repository for RHEL9

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Adds the CARTA RPM repository configuration for RHEL9 systems. This allows you to install CARTA packages using dnf or yum.

```bash
sudo curl https://packages.cartavis.org/cartavis-el9.repo --output /etc/yum.repos.d/cartavis.repo
```

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

### Add CARTA RPM Repository for RHEL8

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Adds the CARTA RPM repository configuration for RHEL8 systems. This allows you to install CARTA packages using dnf or yum.

```bash
sudo curl https://packages.cartavis.org/cartavis-el8.repo --output /etc/yum.repos.d/cartavis.repo
```

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

### Test Local Production Build

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/documentation-guidelines.md

Serve the locally built production version of the documentation website to test its functionality, including the search feature.

```bash
npm run serve
```

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

### Create Local Production Build

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/documentation-guidelines.md

Generate a local production build of the documentation website from the docs_website directory. The search feature is only available in production builds.

```bash
npm run build
```

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

### Checkout Frontend Branch

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/github-workflow.md

Use this command to switch to the relevant frontend branch before updating the protobuf submodule.

```bash
git checkout [the frontend branch]
```

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

### Complete Build Process (Singularity)

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Executes the full build process including WebAssembly wrappers, protocol buffer modules, and TypeScript compilation when using Singularity. Produces a production build in the 'build' folder.

```bash
npm run build-singularity
```

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

### Complete Build Process (Docker)

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Executes the full build process including WebAssembly wrappers, protocol buffer modules, and TypeScript compilation when using Docker. Produces a production build in the 'build' folder.

```bash
npm run build-docker
```

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

### Generate PV Image

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/pv-images.mdx

This snippet demonstrates how to open a file, create a region, and generate a PV image using the PvGeneratorWidgetStore. Ensure the app and necessary stores are initialized.

```javascript
// Open an image
const file = await app.openFile("[filename]");

// Create a line region
const region = await file.regionSet.addRegionAsync(1, [{x: [start x], y: [start y]}, {x: [end x], y: [end y]}]);

// Create a pv generator widget
app.widgetsStore.createFloatingPvGeneratorWidget();

// Get the PvGeneratorWidgetStore object
const pvGeneratorWidget = app.widgetsStore.pvGeneratorWidgets.get("pv-generator-0");

// Generate a pv image
pvGeneratorWidget.setFileId(file.frameInfo.fileId);
pvGeneratorWidget.setRegionId(file.frameInfo.fileId, region.regionId);
pvGeneratorWidget.requestPV();
```

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

### Build Protobuf and WebAssembly Libraries

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/unit-test-guidelines.md

Build the carta-protobuf and WebAssembly libraries. These commands are essential for preparing the project's core components.

```bash
npm run build-protobuf
```

```bash
npm run build-libs
```

```bash
npm run build-wrappers
```

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

### Using Async/Await in JavaScript

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/basics.md

Demonstrates how to use `await` with asynchronous functions like `delay` within an `async` function to handle operations sequentially.

```javascript
async function pauseForOneSecond() {
    await delay(1000);
    return true;
}
```

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

### Build WebAssembly Libraries (Singularity)

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Use this npm script to build WebAssembly libraries when using Singularity for compilation.

```bash
npm run build-libs-singularity
```

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

### Build WebAssembly Libraries (No Docker/Singularity)

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Use this npm script to build WebAssembly libraries when not using Docker or Singularity, assuming Emscripten is available in the environment.

```bash
npm run build-libs
```

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

### Check Documentation Formatting

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/documentation-guidelines.md

Run the npm script to check the markdown formatting consistency, including indentation, line length, and list numbering, from the docs_website directory.

```bash
npm run checkformat
```

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

### Build WebAssembly Libraries (Docker)

Source: https://github.com/cartavis/carta-frontend/blob/dev/README.md

Use this npm script to build WebAssembly libraries when using Docker for compilation.

```bash
npm run build-libs-docker
```

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

### Promise Syntax for Asynchronous Operations

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/basics.md

Shows how to use `.then()` and `.catch()` with Promises returned by asynchronous functions, demonstrating non-blocking execution.

```javascript
delay(100).then(() => console.log("Looks promising"));
delay(-100).catch(err => console.log(err));
```

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

### Reformat Documentation

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/documentation-guidelines.md

Automatically fix markdown formatting issues by running the npm script from the docs_website directory. This ensures consistent styling according to Prettier standards.

```bash
npm run reformat
```

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

### Fit Image with Multiple Gaussians

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-fitting.mdx

This snippet shows how to open an image, display the fitting widget, set the number of Gaussian components, and fit the image using either auto-generated initial values or manually set ones.

```javascript
// Open an image
const file = await app.openFile("[filename]");

// Display the fitting widget
app.dialogStore.showDialog("fitting-dialog");

// Set the number of Gaussian components
app.imageFittingStore.setComponents(2);

// Option 1: Fit the image with auto generated initial values
app.imageFittingStore.fitImage();

// Option 2: Fit the image without auto generated initial values
app.imageFittingStore.setIsAutoInitVal(false);

const component1 = app.imageFittingStore.components[0];
component1.setCenterX(128);
component1.setCenterY(129);
component1.setAmplitude(0.01);
component1.setFwhmX(10);
component1.setFwhmY(6);
component1.setPa(36);

const component2 = app.imageFittingStore.components[1];
component2.setCenterX(135);
component2.setCenterY(135);
component2.setAmplitude(0.01);
component2.setFwhmX(4);
component2.setFwhmY(9);
component2.setPa(40);

app.imageFittingStore.fitImage();
```

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

### Comparing Await vs. No Await in JavaScript

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/basics.md

Illustrates the difference in output when using `await` versus not using it with an asynchronous function, highlighting the importance of proper handling.

```javascript
console.log("Awaiting properly:");
const resultWithAwait = await pauseForOneSecond();
console.log(resultWithAwait);
console.log();

console.log("No await:");
const resultWithoutAwait = pauseForOneSecond();
console.log(resultWithoutAwait);
console.log();
```

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

### Tag New Version for Documentation

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/documentation-guidelines.md

Append a new version number to versions.json and create versioned documentation and sidebars from the docs_website directory. Replace '1.2.3' with the desired version tag.

```bash
npm run docusaurus docs:version 1.2.3
npm run docusaurus api:version 1.2.3
```

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

### Generate Moment Image

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/moment-images.mdx

Use this snippet to open a file, create and configure a spectral profiler widget, select a moment, and request the generation of a moment image. Ensure the SpectralProfileWidgetStore is accessible and moments are selected before requesting generation.

```javascript
const file = await app.openFile("[filename]");
app.widgetsStore.createFloatingSpectralProfilerWidget();
app.widgetsStore.createFloatingSettingsWidget("", "spectral-profiler-0", "spectral-profiler");
const spectralProfileWidget = app.widgetsStore.spectralProfileWidgets.get("spectral-profiler-0");
spectralProfileWidget.setSettingsTabId(3);
spectralProfileWidget.clearSelectedMoments();
spectralProfileWidget.selectMoment(0);
spectralProfileWidget.requestMoment();
```

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

### Append Image Files

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/quick-start.mdx

Loads an initial image and appends two more images to the current session. Requires 'await' for asynchronous operations.

```javascript
const file1 = await app.openFile("testfile1.fits");
const file2 = await app.appendFile("testfile2.fits");
const file3 = await app.appendFile("testfile3.fits");
```

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

### Create and Checkout a New Branch

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/github-workflow.md

Before making changes, create a new branch following the specified naming convention. This helps in organizing contributions and linking them to issues.

```git
git checkout -b "[author]/[issue id]_[description_with_underscores]"
```

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

### Run Unit Tests

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/unit-test-guidelines.md

Execute unit tests using npm. By default, Jest runs tests related to changed files. Use the --verbose flag to display individual test results.

```bash
npm test
```

```bash
npm test --verbose
```

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

### List Image Frames

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/quick-start.mdx

Logs the array of all loaded frames, the first frame, and the currently active frame to the console.

```javascript
console.log(app.frames);
console.log(app.frames[0]);
console.log(app.activeFrame);
```

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

### Display and Hide Splash Screen

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/quick-start.mdx

Shows the welcome splash screen for a specified duration and then hides it.

```javascript
carta.showSplashScreen();
await carta.delay(1000);
app.hideSplashScreen();
```

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

### Run ESLint for TSDoc Formatting

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/documentation-guidelines.md

Execute ESLint from the repository root to check TSDoc formatting in the codebase. This ensures compliance with TSDoc standards for API documentation.

```bash
npm run check-eslint
```

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

### Structure Test Code with Describe Blocks

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/unit-test-guidelines.md

Organize unit tests using 'describe' blocks for structuring tests and 'test' for individual test cases. This pattern helps in grouping related tests and sub-tests.

```javascript
describe("[unit]", () => {\n    test("[expected behavior]", () => {});\n\n    describe("[sub unit]", () => {\n        test("[expected behavior]", () => {});\n    });\n});
```

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

### Open Image Files

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/quick-start.mdx

Opens image files using different argument formats. Each call closes previously loaded images before opening the new one.

```javascript
await app.openFile("test_directory", "testfile.fits", "0");
await app.openFile("test_directory", "testfile.fits");
await app.openFile("test_directory/testfile.fits");
```

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

### Load Image

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/regions.mdx

This code snippet demonstrates how to open an image file in CARTA. This is a prerequisite for most region operations.

```javascript
const file = await app.openFile("my_image.fits");
```

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

### JavaScript Comments

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/basics.md

Demonstrates single-line and multi-line comments in JavaScript. Use these to explain your code.

```javascript
// Lines starting with "//" are treated as comments.
/* you can also comment in
 * multiple lines using C-style comments
 */
```

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

### Update Protobuf Submodule

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/github-workflow.md

Navigate into the protobuf submodule directory, switch to the 'dev' branch, and pull the latest changes. This ensures the submodule is up-to-date.

```bash
cd protobuf
git checkout dev
git pull
cd ..
```

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

### Defining Functions in JavaScript

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/basics.md

Shows various ways to define functions: standard function declaration, arrow functions, and arrow functions with code blocks.

```javascript
function squared(x) {
    return x * x;
}

// This is an arrow function
const cubed = x => x * x * x;

// This is an arrow function with a block of codes
const sqrt = x => {
    // You can use builtin JS library functions
    return Math.sqrt(x);
};
```

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

### Commit and Push Protobuf Changes

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/github-workflow.md

After updating the protobuf submodule, commit the changes to the main repository and push them. This step is crucial for reflecting the submodule updates.

```bash
git commit -a -m "update protobuf"
git push
```

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

### Set Active Image

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/quick-start.mdx

Demonstrates changing the active image using index, ID, and frame object. 'setActiveImageById' requires an image type and a stable store ID.

```javascript
app.setActiveImageByIndex(0);
// "setActiveImageById" takes an image type (enums.ImageType) and a stable store id.
// For a regular frame, use enums.ImageType.FRAME and the frame's fileId.
app.setActiveImageById(enums.ImageType.FRAME, file2.frameInfo.fileId);
app.updateActiveImageByFrame(file3);
```

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

### Fit Image to Widget

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Zooms the image to fit the current widget dimensions. This is useful for quickly viewing the entire image.

```javascript
file.fitZoom();
```

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

### Stage and Commit Changes

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/github-workflow.md

Stage all modified files and commit them with a descriptive message. Husky hooks will automatically run checks; fix any reported issues before proceeding.

```git
git add .
git commit -m "a short description of the change"
```

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

### Import Regions

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/regions.mdx

Import regions from a file into the active image using `app.importRegion`. Requires the file path, filename, and file type.

```javascript
await app.importRegion("[path]", "[filename]", 1); // File type: CRTF
```

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

### Logging to Console in JavaScript

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/basics.md

Use `console.log` to output messages to the development console. This is useful for debugging.

```javascript
console.log("hello world");
```

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

### Create Color Blended Image

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-blending.mdx

Opens multiple FITS images, matches their spatial references, and creates a new color blended image. Use this to combine multiple images into a single, multi-layered view.

```javascript
const file1 = await app.openFile("image_r.fits");
const file2 = await app.appendFile("image_g.fits");
const file3 = await app.appendFile("image_b.fits");

// Match images
file2.setSpatialReference(file1);
file3.setSpatialReference(file1);

// Create a color blended image
const colorBlendingStore = app.imageViewConfigStore.createColorBlending();
console.log(colorBlendingStore.frames.length); // 3
```

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

### Configure Color Blending Layers

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-blending.mdx

Manages layers within a color blended image, including adding new images and deleting existing ones. Use this to dynamically adjust the composition of your blended image.

```javascript
// Add a new layer
const file4 = await app.appendFile(path, "new_image.fits");
file4.setSpatialReference(file1);
colorBlendingStore.addSelectedFrame(file4);

// Delete a layer
colorBlendingStore.deleteSelectedFrame(2); // The fourth layer (the third selected layer)

// Set alpha
colorBlendingStore.setAlpha(0, 0.5); // The base layer
colorBlendingStore.setAlpha(1, 0.7); // The second layer
```

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

### Add Rectangle and Line Regions

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/regions.mdx

Use `addRegionAsync` to create new regions on the loaded image. Supports various region types like rectangles and lines, specified by type and coordinates.

```javascript
const regionSet = file.regionSet;
const region = await regionSet.addRegionAsync(3, [{x: [center x], y: [center y]}, {x: [width], y: [height]}]); // Add a rectangle region
const region2 = await regionSet.addRegionAsync(1, [{x: [start x], y: [start y]}, {x: [end x], y: [end y]}]); // Add a line region
```

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

### Set Custom Render Scale

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Defines a custom clipping range for image rendering using minimum and maximum values. This allows for fine-tuning contrast and brightness.

```javascript
file.renderConfig.setCustomScale([clip min], [clip max]);
```

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

### Set Image Center (Image Coordinates)

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Adjusts the center of the image display using pixel coordinates. Use this when you know the exact pixel location for the center.

```javascript
// image coordinate
file.setCenter([x position], [y position]);
```

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

### View Regions

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/regions.mdx

Access and view all regions associated with a loaded image, or inspect the currently selected region.

```javascript
console.log(file.regionSet.regions); // View all regions
console.log(file.regionSet.selectedRegion); // View the selected region
```

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

### Set Image Zoom to Specific Size (World Coordinates)

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Zooms the image to a specified world coordinate scale along the X and Y axes. Use this for controlling the displayed area in astronomical units (e.g., arcseconds).

```javascript
// world coordinate
file.zoomToSizeXWcs('[size in x direction, ex: 2.56"]');
file.zoomToSizeYWcs('[size in y direction, ex: 2.56"]');
```

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

### Set Color Map and Invert

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Changes the color map used for rendering the image and optionally inverts the color scheme. Select color maps from the COLOR_MAPS_ALL list.

```javascript
file.renderConfig.setColorMap("gray");
file.renderConfig.setInverted(true);
```

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

### Fix ESLint Errors

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/developer-tips.md

Automatically fix identified ESLint errors, particularly those related to import package formats. This command helps resolve common linting issues.

```bash
npm run fix-eslint
```

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

### Set Image Center (World Coordinates)

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Adjusts the center of the image display using world coordinates (e.g., Right Ascension and Declination). Use this for astronomical images where celestial coordinates are known.

```javascript
// world coordinate
file.setCenterWcs("[x position, ex: 0:00:00.0615838925]", "[y position, ex: 29:59:59.1999990820]");
```

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

### Close Other Images

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/quick-start.mdx

Closes all images except for the specified image file.

```javascript
app.closeOtherFiles(file2);
```

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

### Set Image Zoom to Specific Size (Image Coordinates)

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Zooms the image to a specified pixel dimension along the X and Y axes. Use this for precise control over the displayed image scale in pixels.

```javascript
// image coordinate
file.zoomToSizeX([size in x direction]);
file.zoomToSizeY([size in y direction]);
```

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

### Change Image Channel

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Selects a specific channel of the image to display. This is relevant for multi-channel images like FITS cubes.

```javascript
file.setChannel([channel]);
```

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

### Close Specific Image

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/quick-start.mdx

Closes a specific image file. An optional boolean argument controls whether user confirmation is required if other images are matched to the file. 'await' is needed for confirmation.

```javascript
await app.closeFile(file1);
app.closeFile(file1, false); // No user confirmation
```

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

### Asynchronous Function with Delay

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/basics.md

Creates an asynchronous function `delay` that returns a Promise, resolving after a specified time or rejecting on invalid input.

```javascript
function delay(time) {
    return new Promise((resolve, reject) => {
        if (time < 0) {
            reject("Invalid delay duration");
        } else {
            setTimeout(resolve, time);
        }
    });
}
```

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

### Set Percentile Rank for Rendering

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Adjusts the rendering range based on a percentile of pixel values. This is useful for automatically setting contrast for images with a wide dynamic range.

```javascript
file.renderConfig.setPercentileRank(90); // Change to 90%
```

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

### Push Changes to Remote Repository

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/contributing/github-workflow.md

Upload your committed changes to the remote repository. This makes your branch available for review and merging.

```git
git push
```

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

### Close Current Image

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/quick-start.mdx

Closes the currently active image. No user confirmation is prompted if the active image is a spatial reference for other images.

```javascript
app.closeCurrentFile();
```

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

### Modify Region Properties

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/regions.mdx

Update the properties of an existing region using its `RegionStore` object. Allows changing position, size, and color.

```javascript
// ex: a rectangle region
region.setCenter({x: 0, y: 0}); // Move the region to position (0, 0)
region.setSize({x: 100, y: 100}); // Resize to 100 x 100 pixels
region.setColor("#ffffff"); // Change the color to white
```

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

### Variable Declaration in JavaScript

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/basics.md

Declare mutable variables with `let` and immutable variables with `const`. Variables can be reassigned or modified.

```javascript
let x = 1;
const y = "hello world";
x += 15;
```

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

### Remove Color Blended Image

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-blending.mdx

Closes a previously created color blended image. Call this when you no longer need the blended image to free up resources.

```javascript
app.imageViewConfigStore.removeColorBlending(colorBlendingStore);
```

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

### Set Image Scaling Function

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Changes the mathematical function used to scale pixel values for display, such as linear, logarithmic, or arcsinh. Use the FrameScaling enum for selection.

```javascript
file.renderConfig.setScaling(1); // Log
```

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

### Set Layer Colormap

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-blending.mdx

Modifies the color map for a specific layer within a color blended image. This allows for fine-tuning the visual representation of individual layers.

```javascript
colorBlendingStore.frames[0].renderConfig.setColorMap("gray");
```

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

### Change Image Stokes

Source: https://github.com/cartavis/carta-frontend/blob/dev/docs_website/docs/code-snippet-tutorial/image-properties.mdx

Modifies the Stokes parameter of the image using either an integer index or a predefined polarization enum. Useful for analyzing polarized data.

```javascript
file.setStokes(2); // Stokes Q
file.setStokesByIndex(2); // The third polarization shown in the animator widget
```

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