Commit d85993bf authored by Webb, Jake's avatar Webb, Jake
Browse files

changed simulation replay to batch fetch

parent 8e0be611

src/components/simulations/details/gauges.tsx

+6 −22
Original line number Diff line number Diff line 
import { Dictionary } from "lodash";

import { GraphHeader } from "../../shared/plots/graphHeader";

import { CoolingCDU } from "../../../models/CoolingCDU.model";

import { Gauge } from "../../shared/plots/gauge";
@@ -11,14 +10,7 @@ function GaugeWrapper(props: { children: React.ReactNode }) { 
  );

}



export function SimulationGauges(props: {

  latestMetrics?: {

    data: Dictionary<CoolingCDU[]>;

    granularity: number;

    start: string;

    end: string;

  };

}) {

export function SimulationGauges({ metrics }: { metrics?: CoolingCDU[] }) {

  return (

    <>

      <GaugeWrapper>
@@ -27,11 +19,7 @@ export function SimulationGauges(props: { 
          minValue={0}

          maxValue={35000}

          value={

            Object.values(props.latestMetrics?.data || [])

              .map((timestamp) =>

                timestamp.reduce((prev, curr) => prev + curr.total_power, 0),

              )

              .reduce((prev, curr) => prev + curr, 0) || 0

            metrics?.reduce((prev, curr) => prev + curr.total_power, 0) ?? 0

          }

          labels={{

            tickLabels: {
@@ -61,14 +49,10 @@ export function SimulationGauges(props: { 
          minValue={0}

          maxValue={150}

          value={

            Object.values(props.latestMetrics?.data || [])

              .map((timestamp) =>

                timestamp.reduce(

            metrics?.reduce(

              (prev, curr) => prev + curr.htwr_htws_ctwr_ctws_temp,

              0,

                ),

              )

              .reduce((prev, curr) => prev + curr, 0) || 0

            ) ?? 0

          }

          labels={{

            tickLabels: {

src/components/simulations/details/intervalSelector.tsx

deleted100644 → 0
+0 −45
Original line number Diff line number Diff line 
import { Listbox, Transition } from "@headlessui/react";

import { Fragment } from "react";



const intervals = [1, 2, 5, 10, 20, 50, 100, 1000];



export function IntervalSelector(props: {

  value: number;

  onChange: (newValue: number) => void;

}) {

  return (

    <Listbox value={props.value} onChange={props.onChange}>

      <div className="relative">

        <Listbox.Button

          className={`w-[60px] rounded-md py-1 dark:text-neutral-200 dark:hover:bg-neutral-600`}

        >

          {props.value}x

        </Listbox.Button>

        <Transition

          as={Fragment}

          leave="transition ease-in duration-300"

          leaveFrom="opacity-100"

          leaveTo="opacity-0"

        >

          <Listbox.Options

            className={

              "absolute bottom-full right-0 z-10 mb-1 flex flex-col gap-1 rounded-md bg-white py-2 text-center dark:bg-neutral-700"

            }

          >

            {intervals.reverse().map((interval) => (

              <Listbox.Option

                key={interval}

                value={interval}

                className={({ selected }) =>

                  `cursor-pointer px-4 transition-colors duration-300 ease-in-out ${selected ? "text-blue-500" : "hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-600"}`

                }

              >

                {interval}x

              </Listbox.Option>

            ))}

          </Listbox.Options>

        </Transition>

      </div>

    </Listbox>

  );

}

src/components/simulations/details/playbackIntervalSelector.tsx

0 → 100644
+55 −0
Original line number Diff line number Diff line 
import { Listbox, Transition } from "@headlessui/react";

import { Fragment } from "react";

import { Tooltip } from "react-tooltip";



const intervals = [15, 30, 60, 90, 120, 300, 600];



export function PlaybackIntervalSelector({

  value,

  onChange,

}: {

  value: number;

  onChange: (newValue: number) => void;

}) {

  return (

    <>

      <Listbox value={value} onChange={onChange}>

        <div className="relative">

          <Listbox.Button

            className={`w-[60px] rounded-md py-1 dark:text-neutral-200 dark:hover:bg-neutral-600`}

            data-tooltip-id="playback-interval-selector"

            data-tooltip-content="Playback Interval in Seconds"

            data-tooltip-delay-show={750}

          >

            {value}

          </Listbox.Button>

          <Transition

            as={Fragment}

            leave="transition ease-in duration-300"

            leaveFrom="opacity-100"

            leaveTo="opacity-0"

          >

            <Listbox.Options

              className={

                "absolute bottom-full right-0 z-10 mb-1 flex flex-col gap-1 rounded-md bg-white py-2 text-center dark:bg-neutral-700"

              }

            >

              {intervals.reverse().map((interval) => (

                <Listbox.Option

                  key={interval}

                  value={interval}

                  className={({ selected }) =>

                    `cursor-pointer px-4 transition-colors duration-300 ease-in-out ${selected ? "text-blue-500" : "hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-600"}`

                  }

                >

                  {interval}

                </Listbox.Option>

              ))}

            </Listbox.Options>

          </Transition>

        </div>

      </Listbox>

      <Tooltip id="playback-interval-selector" />

    </>

  );

}

src/components/simulations/details/playbackRateSelector.tsx

0 → 100644
+52 −0
Original line number Diff line number Diff line 
import { Listbox, Transition } from "@headlessui/react";

import { Fragment } from "react";

import { Tooltip } from "react-tooltip";



const rates = [1, 2, 5, 10, 20];



export function PlaybackRateSelector(props: {

  value: number;

  onChange: (newValue: number) => void;

}) {

  return (

    <>

      <Listbox value={props.value} onChange={props.onChange}>

        <div className="relative">

          <Listbox.Button

            className={`w-[60px] rounded-md py-1 dark:text-neutral-200 dark:hover:bg-neutral-600`}

            data-tooltip-id="playback-rate-selector"

            data-tooltip-content="Playback Rate"

            data-tooltip-delay-show={750}

          >

            {props.value}x

          </Listbox.Button>

          <Transition

            as={Fragment}

            leave="transition ease-in duration-300"

            leaveFrom="opacity-100"

            leaveTo="opacity-0"

          >

            <Listbox.Options

              className={

                "absolute bottom-full right-0 z-10 mb-1 flex flex-col gap-1 rounded-md bg-white py-2 text-center dark:bg-neutral-700"

              }

            >

              {rates.reverse().map((rate) => (

                <Listbox.Option

                  key={rate}

                  value={rate}

                  className={({ selected }) =>

                    `cursor-pointer px-4 transition-colors duration-300 ease-in-out ${selected ? "text-blue-500" : "hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-600"}`

                  }

                >

                  {rate}x

                </Listbox.Option>

              ))}

            </Listbox.Options>

          </Transition>

        </div>

      </Listbox>

      <Tooltip id="playback-rate-selector" />

    </>

  );

}

src/components/simulations/details/timeline.tsx

+6 −2
Original line number Diff line number Diff line 
import { addSeconds } from "date-fns";

import ReactSlider from "react-slider";

import { Tooltip } from "react-tooltip";

import { IntervalSelector } from "./intervalSelector";

import { PlaybackRateSelector } from "./playbackRateSelector";

import { PlaybackIntervalSelector } from "./playbackIntervalSelector";



export interface TimelineProps {

  /**
@@ -12,7 +13,9 @@ export interface TimelineProps { 
  onChange: (value: number, index: number) => void;

  startDate: string;

  interval: number;

  rate: number;

  onIntervalChange: (newValue: number) => void;

  onRateChange: (newValue: number) => void;

}



export function Timeline(props: TimelineProps) {
@@ -38,7 +41,8 @@ export function Timeline(props: TimelineProps) { 
          />

        )}

      />

      <IntervalSelector

      <PlaybackRateSelector value={props.rate} onChange={props.onRateChange} />

      <PlaybackIntervalSelector

        value={props.interval}

        onChange={props.onIntervalChange}

      />