# State

This file's purpose is to explain the logic and role that the `State.svelte.ts` file plays within the project.

## Project State

The main state variable is the `Project` variable, this variable is of type: `{ current: Proyect | null }` this is because in a .svelte.ts file you can't directly change the value of a variable but you can change the value inside an object as a workaround.

The initial value of the project is null.

```ts
export const proyectState: { current: Proyect | null } = $state({
    current: null,
});
```

With the `current` element containing the entire project state, once initialized, according to the type:

```ts
export type Proyect = {
    name: string;
    rawData: CSVData;
    filteredData: CSVData;
    color: number,
    currentTab: Tab
};
```

Inside the `Start.svelte` component the project is initialized using the helper function:

```ts
export function newProyet(name: string, data: CSVData): Proyect {
    return {
        name,
        rawData: data,
        filteredData: data,
        color: -1,
        currentTab: "table",
    }
}
```

The object uses the helper type `Tab` to represent the available visualization tabs:

```ts
export type Tab = "table" | "twoplot" | "threeplot";
```

The `Nav.svelte` component has a toggle to switch the state of `proyectState.current!.currentTab` between the available options.

Additionally, the `TwoPlot` component contains a button to switch the tab to `table` with a defined height in the table; this state change will be covered later in this file.

Each tab also has its own state variable in this file, for two main purposes: first, to maintain the tabs' state even across switches so elements aren't reset when switching between tabs, and second, to allow the state to be changed between them, for example allowing `TwoPlot.svelte` to take you to the row of a predetermined star.

These are the states of the three tabs:

## Table State

The global state for the table tab is the simplest one; the only variable that can be changed is `currentRow`, which stores the number of the first row shown in the scroll window:

```ts
export const tableState: { currentRow: number } = $state({
    currentRow: 1,
});
```

This variable is used and modified inside the `Table.svelte` component. It's used to calculate row virtualization and is updated inside the table's `onScroll` to change it while scrolling. Additionally, the `TwoPlot.svelte` component uses it to select a point within the plot and jump directly to the row corresponding to the selected point.

> [!TIP]
> For more info, read TABLE.md

## Two Plot State

## Three Plot State