Merge branch 'simulation-list' into 'main'

# React + TypeScript + Vite

## About The Project

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

User Interface for the ExaDigiT project that allows for running simulations and seeing the metrics that are produced.

Currently, two official plugins are available:

### Built With

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)](https://react.dev)

## Expanding the ESLint configuration

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

[![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)

- Configure the top-level `parserOptions` property like this:

[![Plotly](https://img.shields.io/badge/plotly-%233F4F75.svg?style=for-the-badge&logo=plotly&logoColor=white)](https://plotly.com/graphing-libraries/)

```js

export default {

  // other rules...

  parserOptions: {

    ecmaVersion: 'latest',

    sourceType: 'module',

    project: ['./tsconfig.json', './tsconfig.node.json'],

    tsconfigRootDir: __dirname,

  },

}

```

[Tanstack](https://tanstack.com/)

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`

- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`

- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

## Getting Started

To get the project up and running locally, you will want to start by cloning the project and running `npm install` in the projects directory.

After doing so you can navigate to `localhost:8080` to login to the application.

    "preview": "vite preview"

  },

  "dependencies": {

    "@headlessui/react": "^1.7.19",

    "@heroicons/react": "^2.1.1",

    "@tanstack/react-query": "^5.20.5",

    "@tanstack/react-query-devtools": "^5.20.5",

    "react": "^18.2.0",

    "react-datepicker": "^6.2.0",

    "react-dom": "^18.2.0",

    "react-gauge-component": "^1.2.2",

    "react-loader-spinner": "^6.1.6",

    "react-plotly.js": "^2.6.0",

    "react-slider": "^2.0.6",

    "react-tooltip": "^5.26.3",

    "use-debounce": "^10.0.0"

  },

    "@types/react-datepicker": "^6.0.3",

    "@types/react-dom": "^18.2.19",

    "@types/react-plotly.js": "^2.6.3",

    "@types/react-slider": "^1.3.6",

    "@typescript-eslint/eslint-plugin": "^6.21.0",

    "@typescript-eslint/parser": "^6.21.0",

    "@vitejs/plugin-react": "^4.2.1",

} from "@heroicons/react/24/outline";

import { Tooltip } from "react-tooltip";

import { Modal } from "../../shared/modal";

import { useState } from "react";

import { ColumnHeader } from "../../../models/dataGrid/columnHeader.model";

import { FilterSection } from "../../shared/list/filtering/FilterSection";

import { useListFilter } from "../../../util/hooks/useListFilter";

export function JobListFilterModal() {

  const [isOpen, setIsOpen] = useState(false);

export function JobListFilterModal({

  columns,

  setColumns,

}: {

  columns: ColumnHeader[];

  setColumns: (newColumns: ColumnHeader[]) => void;

}) {

  const {

    isOpen,

    openColumn,

    updatedColumns,

    onOpen,

    onClose,

    onColumnSelection,

    onColumnChange,

    onDeleteColumn,

    onAddColumn,

    onApplyFilters,

    onClearFilters,

  } = useListFilter({ columns, setColumns });

  const onClose = () => {

    setIsOpen(false);

  };

  const isActiveFilters = columns.some((column) =>

    column.activeFilters.some((filter) => filter.value),

  );

  return (

    <>

      <button

        className="hover:bg-neutral-300 dark:hover:bg-neutral-700 transition-colors duration-500 rounded-full px-2 py-2 dark:text-neutral-200"

        className={`rounded-full px-2 py-2 transition-colors duration-500 hover:bg-neutral-300 dark:hover:bg-neutral-700 ${isActiveFilters ? "text-blue-500" : "dark:text-neutral-200 "}`}

        data-tooltip-id="filter-tooltip"

        data-tooltip-content={"Open Filter Dialog"}

        data-tooltip-delay-show={500}

        onClick={(e) => {

          e.preventDefault();

          setIsOpen(true);

        }}

        onClick={onOpen}

      >

        <AdjustmentsHorizontalIcon className="h-6 w-6" />

      </button>

      <Tooltip id="filter-tooltip" />

      <Modal open={isOpen}>

        <header className="flex items-center justify-between px-4 py-2 border-b-2">

        <header className="flex items-center justify-between border-b-2 px-4 py-2">

          <span className="text-lg font-medium">Job List Filter Options</span>

          <button

            onClick={(e) => {

            <XMarkIcon className="h-6 w-6" />

          </button>

        </header>

        <section>

          <h1>W.I.P.</h1>

        </section>

        <FilterSection

          columns={columns}

          currentColumn={updatedColumns[openColumn]}

          onAddColumn={onAddColumn}

          onApplyFilters={onApplyFilters}

          onClose={onClose}

          onColumnChange={onColumnChange}

          onColumnSelection={onColumnSelection}

          onDeleteColumn={onDeleteColumn}

          openColumn={openColumn}

          onClearFilters={onClearFilters}

        />

      </Modal>

    </>

  );