diff --git a/apps/class-solid/src/components/Experiment.tsx b/apps/class-solid/src/components/Experiment.tsx index 0e3e5ada..770e8c16 100644 --- a/apps/class-solid/src/components/Experiment.tsx +++ b/apps/class-solid/src/components/Experiment.tsx @@ -7,7 +7,7 @@ import { onCleanup, } from "solid-js"; import { unwrap } from "solid-js/store"; -import { Button, buttonVariants } from "~/components/ui/button"; +import { Button } from "~/components/ui/button"; import { createArchive, toConfigBlob } from "~/lib/download"; import { findPresetByName } from "~/lib/presets"; import { @@ -18,13 +18,19 @@ import { modifyExperiment, } from "~/lib/store"; import { ExperimentConfigForm } from "./ExperimentConfigForm"; +import { ObservationsList } from "./ObservationsList"; import { PermutationsList } from "./PermutationsList"; -import { MdiCog, MdiContentCopy, MdiDelete, MdiDownload } from "./icons"; +import { + MdiCog, + MdiContentCopy, + MdiDelete, + MdiDotsHorizontal, + MdiDownload, +} from "./icons"; import { Card, CardContent, CardDescription, - CardFooter, CardHeader, CardTitle, } from "./ui/card"; @@ -40,6 +46,10 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./ui/dropdown-menu"; @@ -202,27 +212,6 @@ function DownloadExperimentArchive(props: { experiment: Experiment }) { ); } -function DownloadExperiment(props: { experiment: Experiment }) { - return ( - - - - - - - - - - - - - - ); -} - export function ExperimentCard(props: { experiment: Experiment; experimentIndex: number; @@ -233,57 +222,92 @@ export function ExperimentCard(props: { const descriptionId = `${id}-description`; return ( - + + {/* Card title and buttons */} {experiment().config.reference.name} - +
+ + } + > + + + + + + + + + {" "} +
+ + Download{" "} +
{" "} + + + + + + + + + + + + + { + duplicateExperiment(experimentIndex()); + }} + > + + Duplicate experiment + + { + if ( + window.confirm( + "Are you sure you want to delete this experiment?", + ) + ) { + deleteExperiment(experimentIndex()); + } + }} + > + + Delete experiment + + + + +
+ + + {experiment().config.reference.description} - - + - - } - > - - - - - - ); } diff --git a/apps/class-solid/src/components/ObservationsList.tsx b/apps/class-solid/src/components/ObservationsList.tsx new file mode 100644 index 00000000..c3e0cc8d --- /dev/null +++ b/apps/class-solid/src/components/ObservationsList.tsx @@ -0,0 +1,23 @@ +import { For, Show } from "solid-js"; +import type { Observation } from "~/lib/experiment_config"; + +export function ObservationsList(props: { + observations: Observation[] | undefined; +}) { + return ( + +
+

Observations

+ +
+ + ); +} diff --git a/apps/class-solid/src/components/PermutationsList.tsx b/apps/class-solid/src/components/PermutationsList.tsx index 608d9302..c0f0df99 100644 --- a/apps/class-solid/src/components/PermutationsList.tsx +++ b/apps/class-solid/src/components/PermutationsList.tsx @@ -2,7 +2,7 @@ import type { Config } from "@classmodel/class/config"; import { pruneConfig } from "@classmodel/class/config_utils"; import { Form } from "@classmodel/form"; import { overwriteDefaultsInJsonSchema } from "@classmodel/form/utils"; -import { For, createMemo, createSignal, createUniqueId } from "solid-js"; +import { For, Show, createMemo, createSignal } from "solid-js"; import { unwrap } from "solid-js/store"; import { Button } from "~/components/ui/button"; import { findPresetByName } from "~/lib/presets"; @@ -19,8 +19,8 @@ import { MdiCog, MdiContentCopy, MdiDelete, + MdiDotsHorizontal, MdiLightVectorDifference, - MdiMenu, MdiRotateLeft, } from "./icons"; import { @@ -35,6 +35,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuSeparator, DropdownMenuTrigger, } from "./ui/dropdown-menu"; @@ -78,8 +79,8 @@ function AddPermutationButton(props: { } > + @@ -115,18 +116,11 @@ function EditPermutationButton(props: { experiment: Experiment; experimentIndex: number; permutationIndex: number; + open: boolean; + setOpen: (open: boolean) => void; }) { - const [open, setOpen] = createSignal(false); - return ( - - } - > - - + @@ -145,7 +139,7 @@ function EditPermutationButton(props: { props.permutationIndex, config, ); - setOpen(false); + props.setOpen(false); }} /> @@ -158,14 +152,14 @@ function EditPermutationButton(props: { ); } -function PermutationDifferenceButton(props: { +function PermutationDifferenceDialog(props: { reference: Config; permutation: Config; + open: boolean; + setOpen: (open: boolean) => void; }) { - const [open, setOpen] = createSignal(false); - const prunedReference = createMemo(() => { - if (!open()) { + if (!props.open) { return ""; // Don't compute anything if the dialog is closed } const { name, description, ...pruned } = pruneConfig( @@ -175,7 +169,7 @@ function PermutationDifferenceButton(props: { return JSON.stringify(pruned, null, 2); }); const prunedPermutation = createMemo(() => { - if (!open()) { + if (!props.open) { return ""; } const { name, description, ...pruned } = pruneConfig( @@ -185,25 +179,18 @@ function PermutationDifferenceButton(props: { return JSON.stringify(pruned, null, 2); }); return ( - - } - > - - + Differences between configurations -
+
- Reference configuration + Reference 
{prunedReference()}
- Permutation configuration + Permutation 
{prunedPermutation()}
@@ -218,75 +205,104 @@ function PermutationInfo(props: { permutationIndex: number; perm: Config; }) { - const id = createUniqueId(); - + const [openDifferenceDialog, setOpenDifferenceDialog] = createSignal(false); + const [openEditDialog, setOpenEditDialog] = createSignal(false); + console.log(props.perm.description); return ( -
- {props.perm.name} - - - - - - - - - deletePermutationFromExperiment( - props.experimentIndex, - props.permutationIndex, - ) - } - > - Delete permutation - - { - duplicatePermutation( - props.experimentIndex, - props.permutationIndex, - ); - }} - > - Duplicate permutation - - { - promotePermutationToExperiment( - props.experimentIndex, - props.permutationIndex, - ); - }} - > - Promote permutation to a new experiment - - { - swapPermutationAndReferenceConfiguration( - props.experimentIndex, - props.permutationIndex, - ); - }} - > - Swap permutation with reference configuration - - - -
+ <> +
+ +
+

{props.perm.name}

+ +

{props.perm.description}

+ +
+ + + + + + + setOpenEditDialog(true)} + > + + Edit permutation + + { + duplicatePermutation( + props.experimentIndex, + props.permutationIndex, + ); + }} + > + + Duplicate permutation + + setOpenDifferenceDialog(true)} + > + + View differences with reference configuration + + + { + promotePermutationToExperiment( + props.experimentIndex, + props.permutationIndex, + ); + }} + > + + Promote permutation to a new experiment + + { + swapPermutationAndReferenceConfiguration( + props.experimentIndex, + props.permutationIndex, + ); + }} + > + + Swap permutation with reference configuration + + + + deletePermutationFromExperiment( + props.experimentIndex, + props.permutationIndex, + ) + } + > + + Delete permutation + + + +
+ ); } @@ -295,15 +311,15 @@ export function PermutationsList(props: { experiment: Experiment; }) { return ( -
- +
+

Permutations - -
    +

+
    {(perm, permutationIndex) => (
  • @@ -317,6 +333,6 @@ export function PermutationsList(props: { )}
-
+ ); } diff --git a/apps/class-solid/src/components/icons.tsx b/apps/class-solid/src/components/icons.tsx index 02f34995..e92dfe83 100644 --- a/apps/class-solid/src/components/icons.tsx +++ b/apps/class-solid/src/components/icons.tsx @@ -319,3 +319,21 @@ export function MdiFileDocumentOutline(props: JSX.IntrinsicElements["svg"]) { ); } + +export function MdiDotsHorizontal(props: JSX.IntrinsicElements["svg"]) { + return ( + + More actions + + + ); +} diff --git a/apps/class-solid/src/components/ui/button.tsx b/apps/class-solid/src/components/ui/button.tsx index f615e120..6681508e 100644 --- a/apps/class-solid/src/components/ui/button.tsx +++ b/apps/class-solid/src/components/ui/button.tsx @@ -27,6 +27,7 @@ const buttonVariants = cva( sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "size-10", + tinyicon: "size-6", }, }, defaultVariants: { diff --git a/apps/class-solid/tests/config-with-observations.json b/apps/class-solid/tests/config-with-observations.json index dd404372..cda4836b 100644 --- a/apps/class-solid/tests/config-with-observations.json +++ b/apps/class-solid/tests/config-with-observations.json @@ -7,7 +7,7 @@ "permutations": [], "observations": [ { - "name": "2025-02-10_1916.sounding-2.csv", + "name": "2025-02-10_1916.sounding-2", "height": [ 20.0, 40.0, 60.0, 80.0, 100.0, 120.0, 140.0, 160.0, 180.0, 200.0, 220.0, 240.0, 260.0, 280.0, 300.0, 320.0, 340.0, 360.0, 380.0, 400.0, 420.0,