From bd817237cbeee99c6b363d6df8d2df390ff49474 Mon Sep 17 00:00:00 2001
From: Ruben Thoms <ruben.thoms@ceetronsolutions.com>
Date: Mon, 16 Oct 2023 17:06:27 +0200
Subject: [PATCH] Improved ensemble selection dialog and added new table select
 component

---
 backend/src/config.py                         |   2 +-
 .../private-components/userAvatar.tsx         |   4 +-
 .../selectEnsemblesDialog.tsx                 |  51 ++-
 frontend/src/lib/components/Label/label.tsx   |   8 +-
 frontend/src/lib/components/Select/select.tsx |   8 +-
 .../src/lib/components/TableSelect/index.ts   |   2 +
 .../components/TableSelect/tableSelect.tsx    | 301 ++++++++++++++++++
 7 files changed, 358 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/lib/components/TableSelect/index.ts
 create mode 100644 frontend/src/lib/components/TableSelect/tableSelect.tsx

diff --git a/backend/src/config.py b/backend/src/config.py
index dec6095e4..b33374ac2 100644
--- a/backend/src/config.py
+++ b/backend/src/config.py
@@ -16,7 +16,7 @@
 SMDA_SUBSCRIPTION_KEY = os.environ["WEBVIZ_SMDA_SUBSCRIPTION_KEY"]
 SMDA_RESOURCE_SCOPE = os.environ["WEBVIZ_SMDA_RESOURCE_SCOPE"]
 SUMO_ENV = os.getenv("WEBVIZ_SUMO_ENV", "dev")
-GRAPH_SCOPES = ["User.ReadBasic.All"]
+GRAPH_SCOPES = ["User.Read", "User.ReadBasic.All"]
 
 RESOURCE_SCOPES_DICT = {
     "sumo": [f"api://{sumo_app_reg[SUMO_ENV]['RESOURCE_ID']}/access_as_user"],
diff --git a/frontend/src/framework/internal/components/SelectEnsemblesDialog/private-components/userAvatar.tsx b/frontend/src/framework/internal/components/SelectEnsemblesDialog/private-components/userAvatar.tsx
index f0982bb09..8e65c388c 100644
--- a/frontend/src/framework/internal/components/SelectEnsemblesDialog/private-components/userAvatar.tsx
+++ b/frontend/src/framework/internal/components/SelectEnsemblesDialog/private-components/userAvatar.tsx
@@ -18,7 +18,7 @@ function useUserInfoQuery(
 ): UseQueryResult<GraphUserPhoto_api> {
     return useQuery({
         queryKey: ["getUserInfo", userId],
-        queryFn: () => apiService.graph.userInfo(userId),
+        queryFn: () => apiService.graph.userInfo(`${userId.toUpperCase()}@equinor.com`),
         staleTime: STALE_TIME,
         cacheTime: CACHE_TIME,
         enabled: userId !== "",
@@ -42,5 +42,5 @@ export const UserAvatar: React.FC<UserAvatarProps> = (props) => {
             />
         );
     }
-    return <AccountCircle className="w-5 h-5 mr-1" />;
+    return <span title={props.userId}><AccountCircle className="w-5 h-5 mr-1" /></span>;
 }
\ No newline at end of file
diff --git a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
index 06729a6fa..90e07bc3d 100644
--- a/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
+++ b/frontend/src/framework/internal/components/SelectEnsemblesDialog/selectEnsemblesDialog.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { CaseInfo_api, EnsembleInfo_api } from "@api";
 import { apiService } from "@framework/ApiService";
+import { useAuthProvider } from "@framework/internal/providers/AuthProvider";
 import { ApiStateWrapper } from "@lib/components/ApiStateWrapper";
 import { Button } from "@lib/components/Button";
 import { CircularProgress } from "@lib/components/CircularProgress";
@@ -10,12 +11,15 @@ import { Dropdown } from "@lib/components/Dropdown";
 import { IconButton } from "@lib/components/IconButton";
 import { Label } from "@lib/components/Label";
 import { Select } from "@lib/components/Select";
+import { Switch } from "@lib/components/Switch";
+import { TableSelect, TableSelectOption } from "@lib/components/TableSelect";
+import { TagPicker } from "@lib/components/TagPicker";
 import { useValidState } from "@lib/hooks/useValidState";
 import { Add, Check, Remove } from "@mui/icons-material";
 import { useQuery } from "@tanstack/react-query";
 
 import { isEqual } from "lodash";
-import { Switch } from "@lib/components/Switch";
+
 import { UserAvatar } from "./private-components/userAvatar";
 
 export type EnsembleItem = {
@@ -47,6 +51,8 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
         users: [],
     });
 
+    const { userInfo } = useAuthProvider();
+
     React.useLayoutEffect(() => {
         setNewlySelectedEnsembles(props.selectedEnsembles);
     }, [props.selectedEnsembles]);
@@ -179,13 +185,23 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
             filteredCases = filteredCases.filter((c) => c.status === "keep");
         }
         if (casesFilteringOptions.onlyMyCases) {
-            filteredCases = filteredCases.filter((c) => c.user === "me");
+            filteredCases = filteredCases.filter((c) => c.user === userInfo?.username.replace("@equinor.com", ""));
+        } else if (casesFilteringOptions.users.length > 0) {
+            filteredCases = filteredCases.filter((c) => casesFilteringOptions.users.includes(c.user));
         }
         return filteredCases;
     }
 
     const fieldOpts = fieldsQuery.data?.map((f) => ({ value: f.field_identifier, label: f.field_identifier })) ?? [];
-    const caseOpts = filterCases(casesQuery.data)?.map((c) => ({ value: c.uuid, label: c.name, icon: <UserAvatar userId={`${c.user.toUpperCase()}@equinor.com`} /> })) ?? [];
+    const caseOpts: TableSelectOption[] =
+        filterCases(casesQuery.data)?.map((el) => ({
+            id: el.uuid,
+            values: [
+                { label: el.name },
+                { label: el.user, adornment: <UserAvatar userId={el.user} /> },
+                { label: el.status },
+            ],
+        })) ?? [];
     const ensembleOpts =
         ensemblesQuery.data?.map((e) => ({ value: e.name, label: `${e.name}  (${e.realization_count} reals)` })) ?? [];
 
@@ -199,6 +215,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                 title="Select ensembles"
                 modal
                 width={"75%"}
+                minWidth={800}
                 actions={
                     <div className="flex gap-4">
                         <Button onClick={handleClose} color="danger" disabled={!checkIfAnyChanges()}>
@@ -233,11 +250,25 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                 errorComponent={<div className="text-red-500">Error loading cases</div>}
                                 loadingComponent={<CircularProgress />}
                             >
-                                <div className="flex justify-end gap-4">
-                                    <Label position="right" text="Keep"><Switch checked={casesFilteringOptions.keep} onChange={handleKeepCasesSwitchChange} /></Label>
-                                    <Label position="right" text="My cases"><Switch checked={casesFilteringOptions.onlyMyCases} onChange={handleCasesByMeChange} /></Label>
-                                    </div>
-                                <Select
+                                <div className="flex justify-end gap-4 items-center">
+                                    <span className="flex-grow text-sm text-slate-500">
+                                        Select from {caseOpts.length} cases
+                                    </span>
+                                    <Label position="right" text="Keep" title="Show only cases marked as keep">
+                                        <Switch
+                                            checked={casesFilteringOptions.keep}
+                                            onChange={handleKeepCasesSwitchChange}
+                                        />
+                                    </Label>
+                                    <Label position="right" text="My cases" title="Show only cases that I created">
+                                        <Switch
+                                            checked={casesFilteringOptions.onlyMyCases}
+                                            onChange={handleCasesByMeChange}
+                                        />
+                                    </Label>
+                                </div>
+                                <TableSelect
+                                    headerLabels={["Name", "Author", "Status"]}
                                     options={caseOpts}
                                     value={[selectedCaseId]}
                                     onChange={handleCaseChanged}
@@ -245,6 +276,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                     size={5}
                                     width={400}
                                     filter
+                                    columnSizesInPercent={[60, 20, 20]}
                                 />
                             </ApiStateWrapper>
                         </Label>
@@ -280,7 +312,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                     </div>
                     <div className="flex flex-col flex-grow gap-4 p-4">
                         <Label text="Selected Ensembles">
-                            <table className="w-full border border-collapse table-fixed">
+                            <table className="w-full border border-collapse table-fixed  text-sm">
                                 <thead>
                                     <tr>
                                         <th className="min-w-1/2 text-left p-2 bg-slate-300">Case</th>
@@ -316,6 +348,7 @@ export const SelectEnsemblesDialog: React.FC<SelectEnsemblesDialogProps> = (prop
                                                         handleRemoveEnsemble(item.caseUuid, item.ensembleName)
                                                     }
                                                     color="danger"
+                                                    title="Remove ensemble from selection"
                                                 >
                                                     <Remove fontSize="small" />
                                                 </IconButton>{" "}
diff --git a/frontend/src/lib/components/Label/label.tsx b/frontend/src/lib/components/Label/label.tsx
index 170238b64..c39b888de 100644
--- a/frontend/src/lib/components/Label/label.tsx
+++ b/frontend/src/lib/components/Label/label.tsx
@@ -7,6 +7,7 @@ import { v4 } from "uuid";
 
 export type LabelProps = {
     text: string;
+    title?: string;
     children: React.ReactElement;
     wrapperClassName?: string;
     labelClassName?: string;
@@ -22,8 +23,9 @@ export const Label: React.FC<LabelProps> = (props) => {
             className={resolveClassNames(props.wrapperClassName ?? "", {
                 "flex flex-col": props.position === "above" && props.position === undefined,
                 "flex flex-row items-center gap-4": props.position === "left",
-                "flex items-center flex-row-reverse gap-4": props.position === "right"
+                "flex items-center flex-row-reverse gap-4": props.position === "right",
             })}
+            title={props.title}
         >
             <label
                 className={resolveClassNames(
@@ -47,7 +49,9 @@ export const Label: React.FC<LabelProps> = (props) => {
                 )}
                 {props.text}
             </label>
-            <div className={resolveClassNames({ "flex-grow": props.position === "left" || props.position === "right" })}>
+            <div
+                className={resolveClassNames({ "flex-grow": props.position === "left" || props.position === "right" })}
+            >
                 {props.children.props.id ? props.children : React.cloneElement(props.children, { id: id.current })}
             </div>
         </div>
diff --git a/frontend/src/lib/components/Select/select.tsx b/frontend/src/lib/components/Select/select.tsx
index 17099faa0..ce4288aca 100644
--- a/frontend/src/lib/components/Select/select.tsx
+++ b/frontend/src/lib/components/Select/select.tsx
@@ -232,6 +232,7 @@ export const Select = withDefaults<SelectProps>()(defaultProps, (props) => {
                                         "pl-2",
                                         "pr-2",
                                         "flex",
+                                        "gap-2",
                                         "items-center",
                                         "select-none",
                                         {
@@ -251,11 +252,10 @@ export const Select = withDefaults<SelectProps>()(defaultProps, (props) => {
                                         toggleValue(option, index);
                                     }}
                                     style={{ height: 24 }}
-                                    title={option.label}
                                 >
-                                    <span className="min-w-0 text-ellipsis overflow-hidden whitespace-nowrap flex flex-gap-2">
-                                        {option.icon}
-                                        {option.label}
+                                    {option.icon}
+                                    <span title={option.label} className="min-w-0 text-ellipsis overflow-hidden whitespace-nowrap">
+                                            {option.label}
                                     </span>
                                 </div>
                             );
diff --git a/frontend/src/lib/components/TableSelect/index.ts b/frontend/src/lib/components/TableSelect/index.ts
new file mode 100644
index 000000000..1c678e8f9
--- /dev/null
+++ b/frontend/src/lib/components/TableSelect/index.ts
@@ -0,0 +1,2 @@
+export { TableSelect } from "./tableSelect";
+export type { TableSelectOption, TableSelectProps } from "./tableSelect";
diff --git a/frontend/src/lib/components/TableSelect/tableSelect.tsx b/frontend/src/lib/components/TableSelect/tableSelect.tsx
new file mode 100644
index 000000000..094da329a
--- /dev/null
+++ b/frontend/src/lib/components/TableSelect/tableSelect.tsx
@@ -0,0 +1,301 @@
+import React, { Key } from "react";
+
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+
+import { isEqual } from "lodash";
+
+import { BaseComponent, BaseComponentProps } from "../BaseComponent";
+import { Input } from "../Input";
+import { Virtualization } from "../Virtualization";
+import { withDefaults } from "../_component-utils/components";
+
+export type TableSelectOption = {
+    id: string;
+    values: { label: string; adornment?: React.ReactNode }[];
+    disabled?: boolean;
+};
+
+export type TableSelectProps = {
+    id?: string;
+    wrapperId?: string;
+    headerLabels: string[];
+    options: TableSelectOption[];
+    value?: string[];
+    onChange?: (ids: string[]) => void;
+    placeholder?: string;
+    filter?: boolean;
+    size?: number;
+    multiple?: boolean;
+    width?: string | number;
+    columnSizesInPercent?: number[];
+} & BaseComponentProps;
+
+const defaultProps = {
+    value: [""],
+    filter: false,
+    size: 1,
+    multiple: false,
+};
+
+const noMatchingOptionsText = "No matching options";
+
+export const TableSelect = withDefaults<TableSelectProps>()(defaultProps, (props) => {
+    const [prevHeaderLabels, setPrevHeaderLabels] = React.useState<string[]>(props.headerLabels);
+    const [filters, setFilters] = React.useState<string[]>(props.headerLabels.map(() => ""));
+    const [hasFocus, setHasFocus] = React.useState<boolean>(false);
+    const [selected, setSelected] = React.useState<string[]>([]);
+    const [keysPressed, setKeysPressed] = React.useState<Key[]>([]);
+    const [startIndex, setStartIndex] = React.useState<number>(0);
+    const [lastShiftIndex, setLastShiftIndex] = React.useState<number>(-1);
+    const [currentIndex, setCurrentIndex] = React.useState<number>(0);
+
+    if (!isEqual(prevHeaderLabels, props.headerLabels)) {
+        setPrevHeaderLabels(props.headerLabels);
+        setFilters(props.headerLabels.map(() => ""));
+    }
+
+    if (props.columnSizesInPercent && props.columnSizesInPercent.reduce((a, b) => a + b, 0) !== 100) {
+        throw new Error("Column sizes must add up to 100");
+    }
+
+    const columnSizesPerc = props.columnSizesInPercent ?? props.headerLabels.map(() => 100 / props.headerLabels.length);
+
+    const ref = React.useRef<HTMLDivElement>(null);
+    const noOptionsText = props.placeholder ?? "No options";
+    const filteredOptions = React.useMemo(() => {
+        if (!props.filter) {
+            return props.options;
+        }
+        return props.options.filter((option) => {
+            return option.values.every((value, index) => {
+                return value.label.toLowerCase().includes(filters[index].toLowerCase());
+            });
+        });
+    }, [props.options, filters]);
+
+    const toggleValue = React.useCallback(
+        (option: TableSelectOption, index: number) => {
+            let newSelected = [...selected];
+            if (props.multiple) {
+                if (keysPressed.includes("Shift")) {
+                    const start = Math.min(lastShiftIndex, index);
+                    const end = Math.max(lastShiftIndex, index);
+                    newSelected = props.options
+                        .slice(start, end + 1)
+                        .filter((option) => !option.disabled)
+                        .map((option) => option.id);
+                } else if (!option.disabled) {
+                    if (keysPressed.includes("Control")) {
+                        if (!selected.includes(option.id)) {
+                            newSelected = [...selected, option.id];
+                        } else {
+                            newSelected = selected.filter((v) => v !== option.id);
+                        }
+                    } else {
+                        newSelected = [option.id];
+                    }
+                }
+            } else if (!option.disabled) {
+                newSelected = [option.id];
+            } else {
+                newSelected = [];
+            }
+            setCurrentIndex(index);
+            setSelected(newSelected);
+            if (props.onChange) {
+                if (props.multiple) {
+                    props.onChange(newSelected);
+                } else if (!option.disabled) {
+                    props.onChange([option.id]);
+                } else {
+                    props.onChange([]);
+                }
+            }
+        },
+        [props.multiple, props.options, selected, props.onChange, keysPressed, lastShiftIndex]
+    );
+
+    React.useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            setKeysPressed((keysPressed) => [...keysPressed, e.key]);
+
+            if (hasFocus) {
+                if (e.key === "Shift") {
+                    setLastShiftIndex(currentIndex);
+                }
+                if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    const newIndex = Math.max(0, currentIndex - 1);
+                    toggleValue(filteredOptions[newIndex], newIndex);
+                    if (newIndex < startIndex) {
+                        setStartIndex(newIndex);
+                    }
+                }
+                if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    const newIndex = Math.min(filteredOptions.length - 1, currentIndex + 1);
+                    toggleValue(filteredOptions[newIndex], newIndex);
+                    if (newIndex >= startIndex + props.size - 1) {
+                        setStartIndex(Math.max(0, newIndex - props.size + 1));
+                    }
+                }
+                if (e.key === "PageUp") {
+                    e.preventDefault();
+                    const newIndex = Math.max(0, currentIndex - props.size);
+                    toggleValue(filteredOptions[newIndex], newIndex);
+                    if (newIndex < startIndex) {
+                        setStartIndex(newIndex);
+                    }
+                }
+                if (e.key === "PageDown") {
+                    e.preventDefault();
+                    const newIndex = Math.min(filteredOptions.length - 1, currentIndex + props.size);
+                    toggleValue(filteredOptions[newIndex], newIndex);
+                    if (newIndex >= startIndex + props.size - 1) {
+                        setStartIndex(Math.max(0, newIndex - props.size + 1));
+                    }
+                }
+            }
+        };
+
+        const handleKeyUp = (e: KeyboardEvent) => {
+            setKeysPressed((keysPressed) => keysPressed.filter((key) => key !== e.key));
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [currentIndex, selected, filteredOptions, props.size, hasFocus, startIndex, toggleValue]);
+
+    React.useLayoutEffect(() => {
+        if (props.value) {
+            setSelected(props.value);
+        }
+    }, [props.value]);
+
+    const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, index: number) => {
+        setFilters((prev) => {
+            const newFilters = [...prev];
+            prev[index] = e.target.value;
+            return newFilters;
+        });
+        if (ref.current) {
+            ref.current.scrollTop = 0;
+        }
+    };
+
+    return (
+        <BaseComponent disabled={props.disabled}>
+            <div
+                id={props.wrapperId}
+                className={resolveClassNames("relative", {
+                    "no-select": props.disabled,
+                    "pointer-events-none": props.disabled,
+                    "opacity-30": props.disabled,
+                })}
+                style={{ width: props.width, minWidth: props.width }}
+            >
+                {props.filter && (
+                    <div
+                        className={resolveClassNames("flex", {
+                            "mr-3": filteredOptions.length > props.size,
+                        })}
+                    >
+                        {props.headerLabels.map((headerLabel, index) => (
+                            <div className="box-border" style={{ width: `${columnSizesPerc[index]}%` }}>
+                                {headerLabel}
+                                <br />
+                                <Input
+                                    id={props.id}
+                                    type="text"
+                                    value={filters[index]}
+                                    onChange={(e) => handleFilterChange(e, index)}
+                                    placeholder={`Filter ${headerLabel}...`}
+                                    title={`Filter ${headerLabel}...`}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                )}
+                <div
+                    className="overflow-y-auto border border-gray-300 rounded-md w-full bg-white"
+                    style={{ height: props.size * 24 + 2 }}
+                    ref={ref}
+                    onFocus={() => setHasFocus(true)}
+                    onBlur={() => setHasFocus(false)}
+                    tabIndex={0}
+                >
+                    {filteredOptions.length === 0 && (
+                        <div className="p-1 flex items-center text-gray-400 select-none">
+                            {props.options.length === 0 || filters.some((el) => el !== "")
+                                ? noMatchingOptionsText
+                                : noOptionsText}
+                        </div>
+                    )}
+                    <Virtualization
+                        containerRef={ref}
+                        items={filteredOptions}
+                        itemSize={24}
+                        renderItem={(option: TableSelectOption, index: number) => {
+                            return (
+                                <div
+                                    key={option.id}
+                                    className={resolveClassNames(
+                                        "cursor-pointer",
+                                        "flex",
+                                        "items-center",
+                                        "select-none",
+                                        {
+                                            "hover:bg-blue-100": !selected.includes(option.id),
+                                            "bg-blue-600 text-white box-border hover:bg-blue-700": selected.includes(
+                                                option.id
+                                            ),
+                                            "pointer-events-none": option.disabled,
+                                            "text-gray-400": option.disabled,
+                                            "bg-blue-300": option.disabled && index === currentIndex,
+                                        }
+                                    )}
+                                    onClick={() => {
+                                        if (option.disabled) {
+                                            return;
+                                        }
+                                        toggleValue(option, index);
+                                    }}
+                                    style={{ height: 24 }}
+                                >
+                                    {option.values.map((value, index) => {
+                                        return (
+                                            <div
+                                                key={index}
+                                                className={resolveClassNames("p-1 flex justify-center", {
+                                                    "border-l": index > 0,
+                                                })}
+                                                style={{ width: `${columnSizesPerc[index]}%` }}
+                                            >
+                                                {value.adornment}
+                                                <span
+                                                    className="min-w-0 text-ellipsis overflow-hidden whitespace-nowrap w-full block"
+                                                    title={value.label}
+                                                >
+                                                    {value.label}
+                                                </span>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            );
+                        }}
+                        direction="vertical"
+                        startIndex={startIndex}
+                    />
+                </div>
+            </div>
+        </BaseComponent>
+    );
+});
+
+TableSelect.displayName = "TableSelect";