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.

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

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

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:

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:

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:

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.

Two Plot State #

Three Plot State #