### Install and Run OpenAlgo Chart

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/CONTRIBUTING.md

Steps to clone the repository, install dependencies, and start the development server for OpenAlgo Chart.

```bash
git clone <repository-url>
cd openalgo-chart
npm install
npm run dev
```

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

### Start Docker Compose Services (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Starts all services defined in the 'docker-compose.yml' file in detached mode. This is used to bring up the entire OpenAlgo stack.

```bash
docker-compose up -d
```

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

### Clone Repository and Install Dependencies (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Clones the OpenAlgo Chart repository and installs project dependencies using npm. Requires Git and Node.js/npm to be installed.

```bash
git clone https://github.com/your-org/openalgo-chart.git
cd openalgo-chart
npm install
```

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

### Install Dependencies and Playwright

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/e2e/README.md

Installs project dependencies using npm and downloads the Chromium browser for Playwright. These are essential setup steps before running the E2E tests.

```bash
# Install dependencies
npm install

# Ensure Chromium is installed
npx playwright install chromium
```

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

### Development with Docker Hot-Reload (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Sets up a development Docker container with volume mounting for source code, enabling hot-reloading. Requires a separate 'Dockerfile.dev'.

```bash
# Create a development Dockerfile (Dockerfile.dev)
docker build -f Dockerfile.dev -t openalgo-chart-dev .

# Run with volume mount for hot-reload
docker run -d \
  -p 5001:5001 \
  -v $(pwd)/src:/app/src \
  -v $(pwd)/public:/app/public \
  --name openalgo-chart-dev \
  openalgo-chart-dev
```

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

### Open Vitest UI (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Launches the Vitest UI, providing a graphical interface for running, viewing, and debugging tests. Useful for complex test suites.

```bash
npm run test:ui
```

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

### Docker Compose Configuration (YAML)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Defines a multi-service Docker environment using Docker Compose, including the frontend and backend services for OpenAlgo. This is the recommended setup for full-stack development.

```yaml
version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "5001:80"
    depends_on:
      - backend
    networks:
      - openalgo-network

  backend:
    image: openalgo/backend:latest  # Replace with actual backend image
    ports:
      - "5000:5000"
      - "8765:8765"
    environment:
      - DATABASE_URL=your_database_url
    networks:
      - openalgo-network

networks:
  openalgo-network:
    driver: bridge
```

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

### Build Docker Image (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Builds a Docker image for the OpenAlgo Chart frontend from the Dockerfile in the project root. The image is tagged as 'openalgo-chart'.

```bash
# From the openalgo-chart directory
docker build -t openalgo-chart .
```

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

### Playwright Configuration for Mock Server

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/e2e-testing/E2E_TEST_IMPLEMENTATION_SUMMARY.md

Configures Playwright to use a global setup file that starts the mock OpenAlgo backend server. This ensures the mock server is available before tests begin.

```javascript
globalSetup: './e2e/global-setup.js',
```

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

### Install Dependencies - npm

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/README.md

Installs all the necessary project dependencies using npm (Node Package Manager). This command reads the package.json file to download and set up required libraries.

```bash
npm install
```

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

### Run Unit Tests (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Executes the project's unit tests using a test runner like Vitest. Assumes tests are configured and located in the appropriate directories.

```bash
npm run test
```

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

### Dynamic Command Building in JavaScript

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/testing/UI_TESTING_REPORT.md

Demonstrates how commands are dynamically built from handlers and predefined data structures. This example shows the creation of chart type commands, assigning unique IDs, titles, categories, keywords, and optional shortcuts based on their index.

```javascript
const buildCommands = (handlers) => {
    const commands = [];

    // Chart types
    chartTypes.forEach((chart, index) => {
        commands.push({
            id: `chart.${chart.id}`,
            title: chart.title,
            category: COMMAND_CATEGORIES.CHART,
            keywords: ['chart', 'type', ...chart.keywords],
            shortcut: index < 7 ? `${index + 1}` : undefined,
            action: () => handlers.onChartTypeChange?.(chart.id),
        });
    });

    // ... other command categories would follow ...
```

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

### Run E2E Tests with UI (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Runs end-to-end tests and provides a UI interface for visualization and debugging. This is helpful for understanding test execution flow.

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

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

### Run Development Server - npm

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/README.md

Starts the local development server. This allows you to view and interact with the application during development, often with hot-reloading capabilities.

```bash
npm run dev
```

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

### TypeScript Import Order Example

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/CONTRIBUTING.md

Demonstrates the recommended order for imports in TypeScript files, prioritizing React, third-party, absolute, and relative imports.

```typescript
// 1. React imports
import { useState, useEffect } from 'react';

// 2. Third-party imports
import { create } from 'zustand';

// 3. Absolute imports (aliases)
import { useWorkspaceStore } from '@/store';
import type { Order } from '@/types';

// 4. Relative imports
import { OrderRow } from './OrderRow';
import styles from './OrderList.module.css';
```

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

### Service Layer Abstraction Example (TypeScript)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/ARCHITECTURE.md

Demonstrates the recommended practice of using a service layer to abstract API calls within components. It shows a 'good' example where a service handles the API interaction and a 'bad' example of a component making direct fetch requests.

```typescript
// Good: Service handles API details
const funds = await accountService.getFunds();

// Bad: Component makes direct API calls
const response = await fetch('/api/v1/funds');
```

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

### Run Unit Tests with Coverage (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Executes unit tests and generates a code coverage report, indicating which parts of the codebase are covered by tests. Requires a coverage tool like Istanbul.

```bash
npm run test:coverage
```

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

### Repository Pattern Example (TypeScript)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/architecture/overview.md

Demonstrates the Repository pattern in OpenAlgo Chart, where services abstract data access details from the rest of the application. This example shows fetching position data.

```typescript
// Services hide API details
const positions = await accountService.getPositionBook();
```

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

### Console Log Examples for Indicator Cleanup Success and Failure

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/implementation/CLEANUP_TEST_RESULTS.md

These examples demonstrate the expected console output when the indicator cleanup process is working correctly versus when it fails. They cover scenarios where cleanup is triggered but fails due to missing type information, and where no cleanup logs appear at all.

```text
[CLEANUP] Detected indicators to remove: ['ind_12345']
[CLEANUP] Valid IDs: []
[CLEANUP] Series map keys: ['ind_12345']
[CLEANUP] Types map: [['ind_12345', 'sma']]
[CLEANUP] Calling cleanupIndicators with 1 indicators
[CLEANUP] Starting cleanup for sma (ID: ind_12345)
[CLEANUP] Metadata for sma: { cleanupType: 'simple', hasPane: false, ... }
[CLEANUP] Series exists: true, Pane exists: false
[CLEANUP] Removing series with type: simple
[CLEANUP] Single series removed for sma
[CLEANUP] Successfully cleaned up sma (ID: ind_12345)
[CLEANUP] Cleanup complete
```

```text
// No [CLEANUP] logs appear at all when you delete
```

```text
[CLEANUP] Detected indicators to remove: ['ind_12345']
[CLEANUP] Calling cleanupIndicators with 1 indicators
[CLEANUP] Starting cleanup for sma (ID: ind_12345)
Cannot cleanup indicator ind_12345: type is undefined
```

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

### Clone Repository - Git

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/README.md

Clones the openalgo-chart repository from GitHub. This is the first step to get the project code onto your local machine.

```bash
git clone https://github.com/crypt0inf0/openalgo-chart.git
```

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

### Implement Column Resizing (JavaScript)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/testing/UI_TESTING_REPORT.md

Handles the resizing of table columns by tracking mouse events. It captures the starting position and width, calculates the difference during mouse movement, and updates the column widths, ensuring a minimum width constraint.

```javascript
const handleResizeStart = useCallback((e, column) => {
    setResizing(column);
    startXRef.current = e.clientX;
    startWidthRef.current = columnWidths[column];
}, [columnWidths]);

useEffect(() => {
    if (!resizing) return;

    const handleMouseMove = (e) => {
        const diff = e.clientX - startXRef.current;
        const newWidth = Math.max(MIN_COLUMN_WIDTH, startWidthRef.current + diff);
        setColumnWidths(prev => ({ ...prev, [resizing]: newWidth }));
    };

    document.addEventListener('mousemove', handleMouseMove);
    return () => document.removeEventListener('mousemove', handleMouseMove);
}, [resizing]);
```

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

### CSV File Format Example

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/testing/UI_TESTING_REPORT.md

Illustrates the expected format for the CSV file used in watchlist import and export. It includes a header row 'symbol,exchange' followed by data rows, each containing a stock symbol and its exchange. This format is crucial for correct parsing and data integrity.

```csv
symbol,exchange
RELIANCE,NSE
TCS,NSE
INFY,NSE
HDFCBANK,NSE
```

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

### ObjectTreePanel Component Props in JavaScript

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/testing/UI_TESTING_REPORT.md

This example demonstrates the props passed to the ObjectTreePanel component, including arrays of indicators and drawings, symbol, and interval. It also shows the callback functions for handling user interactions like toggling visibility, removing items, and opening settings.

```javascript
<ObjectTreePanel
    indicators={chartIndicators}
    drawings={chartDrawings}
    onIndicatorVisibilityToggle={(id) => { /* toggle visible prop */ }}
    onIndicatorRemove={(id) => { /* remove from chart */ }}
    onIndicatorSettings={(id) => { /* open settings dialog */ }}
    onDrawingVisibilityToggle={(index) => { /* toggle visible */ }}
    onDrawingLockToggle={(index) => { /* toggle locked */ }}
    onDrawingRemove={(index) => { /* remove from chart */ }}
    symbol={currentSymbol}
    interval={currentInterval}
/>
```

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

### Get Change Color Helper Function (JavaScript)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/testing/UI_TESTING_REPORT.md

Determines the appropriate color for displaying stock performance based on its change percentage. It utilizes predefined green and red gradients, potentially returning a specific hex code or CSS class. The `isBackground` parameter might control whether to return a background color or a text color.

```javascript
function getChangeColor(change, isBackground) {
    // Implementation to return gradient color based on 'change'
    // Example logic for positive changes:
    // if (change > 4) return '#00C853';
    // else if (change > 3) return '#00B248';
    // ... and so on for other ranges and negative changes
}
```

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

### Get Performance Bar Width Helper Function (JavaScript)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/testing/UI_TESTING_REPORT.md

Calculates the width percentage for a performance bar, likely used in the Sector View table. It takes the stock's change and the maximum change observed in the market to determine the relative visual representation of performance.

```javascript
function getBarWidth(change, maxChange) {
    // Implementation to calculate percentage width
    // Example: return (change / maxChange) * 100;
}
```

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

### Initialize Application with Authentication and Cloud Sync

Source: https://context7.com/crypt0inf0/openalgo-chart/llms.txt

This code illustrates the application's initialization process, including setting up user context, handling cloud workspace synchronization, performing authentication checks, and configuring API endpoints via localStorage. It ensures the application is ready before rendering main content.

```typescript
// App.tsx structure
import { useUser } from './context/UserContext';
import { useCloudWorkspaceSync } from './hooks/useCloudWorkspaceSync';
import { checkAuth } from './services/openalgo';

function App() {
  const { isAuthenticated, setIsAuthenticated } = useUser();

  // Cloud sync blocks until data is loaded
  const { isLoaded } = useCloudWorkspaceSync(isAuthenticated);

  if (!isLoaded) {
    return <WorkspaceLoader />;
  }

  return <AppContent isAuthenticated={isAuthenticated} />;
}

// Authentication check on mount
useEffect(() => {
  const verifyAuth = async () => {
    const authenticated = await checkAuth();
    setIsAuthenticated(authenticated);
  };
  verifyAuth();
}, []);

// API key configuration
localStorage.setItem('oa_apikey', 'your-api-key');
localStorage.setItem('oa_host_url', 'http://127.0.0.1:5000');
localStorage.setItem('oa_ws_url', '127.0.0.1:8765');
```

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

### Stop and Remove Docker Container (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Stops and removes the running 'openalgo-chart' Docker container. Use after the container is no longer needed.

```bash
docker stop openalgo-chart
docker rm openalgo-chart
```

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

### View Docker Compose Logs (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Streams logs from all services managed by Docker Compose, or specifically from the 'frontend' service. Useful for debugging.

```bash
# All services
docker-compose logs -f

# Frontend only
docker-compose logs -f frontend
```

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

### Debug E2E Tests (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Executes end-to-end tests in a debug mode, allowing for step-by-step execution and inspection of application state. Requires a debugger to be attached.

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

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

### Service Pattern Implementation (JavaScript)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/testing/SESSION_4_CODE_ANALYSIS_SUMMARY.md

Demonstrates the implementation of a service pattern for managing layout templates. It exports individual pure functions and aggregates them into a service object for convenient access. This pattern promotes testability and a clear API.

```javascript
// layoutTemplateService.js

// Pure functions (no internal state)
export const getAll = () => { /* ... */ };
export const getById = (id) => { /* ... */ };
export const save = (template) => { /* ... */ };
export const deleteTemplate = (id) => { /* ... */ };
export const toggleFavorite = (id) => { /* ... */ };
export const exportAll = () => { /* ... */ };
export const importTemplates = (jsonString) => { /* ... */ };
export const captureCurrentLayout = (appState, name, description) => { /* ... */ };
export const getAllSorted = () => { /* ... */ };

// Export as service object for convenience
export const layoutTemplateService = {
    getAll,
    getAllSorted,
    getById,
    save,
    delete: deleteTemplate,
    toggleFavorite,
    exportAll,
    exportOne,
    importTemplates,
    captureCurrentLayout,
    getCount,
    isAtMaxCapacity,
    getIndicatorSummary,
    MAX_TEMPLATES,
};

```

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

### Lint Code (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Lints the project's codebase to enforce coding standards and identify potential issues. Requires ESLint or a similar linter to be configured.

```bash
npm run lint
```

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

### Stop Docker Compose Services (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Stops and removes all containers, networks, and volumes defined in the 'docker-compose.yml' file. Use to shut down the entire OpenAlgo stack.

```bash
docker-compose down
```

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

### View E2E Test Report (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Generates and displays a report summarizing the results of the end-to-end tests. This report typically includes pass/fail status and execution details.

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

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

### Zustand Store for Global State (TypeScript)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/ARCHITECTURE.md

This example demonstrates a Zustand store for managing global workspace state. The `useWorkspaceStore` is created using the `create` function from Zustand, defining state properties like `layout` and actions like `setLayout` to modify the state. It utilizes a `set` function provided by Zustand to update the store.

```typescript
const useWorkspaceStore = create<WorkspaceStore>()((set) => ({
  layout: '1',
  setLayout: (layout) => set({ layout }),
}));
```

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

### Run Type Check (Bash)

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/docs/INSTALL.md

Performs a type check on the codebase without emitting any output files. Useful for ensuring code quality and catching type errors.

```bash
npm run type-check
```

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

### Preview Production Build - npm

Source: https://github.com/crypt0inf0/openalgo-chart/blob/main/README.md

Runs a local server to preview a production build of the application. This is useful for testing the optimized build before deploying.

```bash
npm run preview
```