From ebd1f5f7260ba00dbaec83e2cd140cfe42e5a8ec Mon Sep 17 00:00:00 2001 From: Robert Basti Date: Mon, 9 Dec 2024 21:01:38 +0100 Subject: [PATCH] test --- .../ContentViews/CurveValuesPlot.tsx | 36 ++- .../ContentViews/SettingCustomRanges.tsx | 226 +----------------- 2 files changed, 38 insertions(+), 224 deletions(-) diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesPlot.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesPlot.tsx index e464d872c..752cb8389 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesPlot.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesPlot.tsx @@ -33,6 +33,9 @@ import { RouterLogType } from "routes/routerConstants"; import { Colors } from "styles/Colors"; import { normaliseThemeForEds } from "../../tools/themeHelpers.ts"; import { SettingCustomRanges } from "./SettingCustomRanges.tsx"; +import { Box } from "@mui/material"; +import FilterPanel from "components/Sidebar/FilterPanel.tsx"; + const COLUMN_WIDTH = 135; const MNEMONIC_LABEL_WIDTH = COLUMN_WIDTH - 10; @@ -82,6 +85,8 @@ export const CurveValuesPlot = React.memo( const { width: contentViewWidth } = useContext( ContentViewDimensionsContext ); + + const [expanded, setExpanded] = useState(false); const { logType } = useParams(); const isTimeLog = logType === RouterLogType.TIME; const extraWidth = getExtraWidth(data, columns, dateTimeFormat, isTimeLog); @@ -192,13 +197,14 @@ export const CurveValuesPlot = React.memo( }; }; - const openCredentialsModal = () => { - console.log("on click"); - <> - - - }; + const iconColor = colors.interactive.primaryResting; + + const openCredentialsModal = () => ( + + + setExpanded(true) + + ); const onLegendScroll = (params: { scrollDataIndex: number }) => { scrollIndex.current = params.scrollDataIndex; @@ -219,6 +225,8 @@ export const CurveValuesPlot = React.memo( } }; + const handleExpandFiltersClick = () => setExpanded(!expanded); + const handleEvents = { legendselectchanged: onLegendChange, legendscroll: onLegendScroll, @@ -293,7 +301,19 @@ export const CurveValuesPlot = React.memo( - + +{expanded ? + + : null} )} diff --git a/Src/WitsmlExplorer.Frontend/components/ContentViews/SettingCustomRanges.tsx b/Src/WitsmlExplorer.Frontend/components/ContentViews/SettingCustomRanges.tsx index c94a9e90a..a906a05ba 100644 --- a/Src/WitsmlExplorer.Frontend/components/ContentViews/SettingCustomRanges.tsx +++ b/Src/WitsmlExplorer.Frontend/components/ContentViews/SettingCustomRanges.tsx @@ -27,198 +27,27 @@ import { useSearchParams } from "react-router-dom"; import { checkIsUrlTooLong } from "routes/utils/checkIsUrlTooLong"; import styled from "styled-components"; import { Colors } from "styles/Colors"; -import { - STORAGE_CONTENTTABLE_ORDER_KEY, - removeLocalStorageItem -} from "tools/localStorageHelpers"; -const lastId = "dummyLastId"; type FilterValues = Record; -export const SettingCustomRanges - = (props: { +export const SettingCustomRanges = (props: { table: Table; }): React.ReactElement => { - const { - table, - } = props; + const { operationState: { colors, theme } } = useOperationState(); - const [draggedId, setDraggedId] = useState(); - const [draggedOverId, setDraggedOverId] = useState(); const [isMenuOpen, setIsMenuOpen] = useState(false); const [menuAnchor, setMenuAnchor] = useState(null); - const [, saveOrderToStorage] = useLocalStorageState( - STORAGE_CONTENTTABLE_ORDER_KEY - ); - const [searchParams, setSearchParams] = useSearchParams(); - const [filterValues, setFilterValues] = useState({}); - const isCompactMode = theme === UserTheme.Compact; - - useEffect(() => { - console.log(" in use effect") - const filterString = searchParams.get("filter"); - const initialFilter = JSON.parse(filterString); - const bothEmpty = - !initialFilter && Object.entries(filterValues).length === 0; - if (filterString !== JSON.stringify(filterValues) && !bothEmpty) { - setInitialFilter(initialFilter); - } - }, [searchParams]); - - const drop = (e: React.DragEvent) => { - e.preventDefault(); - if ( - draggedId != null && - draggedOverId != null && - draggedId != draggedOverId - ) { - const order = table.getAllLeafColumns().map((d) => d.id); - const dragItemIndex = order.findIndex((value) => value == draggedId); - order.splice(dragItemIndex, 1); - if (draggedOverId != lastId) { - const dragOverItemIndex = order.findIndex( - (value) => value == draggedOverId - ); - order.splice(dragOverItemIndex, 0, draggedId); - } else { - order.push(draggedId); - } - table.setColumnOrder(order); - saveOrderToStorage(order); - } - setDraggedId(null); - setDraggedOverId(null); - }; - - const onMoveUp = (columnId: string) => { - const order = table.getAllLeafColumns().map((d) => d.id); - const index = order.findIndex((value) => value == columnId); - { - order[index] = order[index - 1]; - order[index - 1] = columnId; - table.setColumnOrder(order); - ; - } - }; - - const onMoveDown = (columnId: string) => { - const order = table.getAllLeafColumns().map((d) => d.id); - const index = order.findIndex((value) => value == columnId); - if (index < order.length - 1) { - order[index] = order[index + 1]; - order[index + 1] = columnId; - table.setColumnOrder(order); - - } - }; - - const resizeColumns = () => { - table.setColumnSizing( - Object.assign( - {}, - ...table.getLeafHeaders().map((header) => ({ - [header.id]: calculateColumnWidth( - header.id, - isCompactMode, - (header.column.columnDef.meta as { type: ContentType })?.type - ) - })) - ) - ); - }; - - const resetFilter = () => { - table.getAllLeafColumns().map((column) => { - column.setFilterValue(null); - }); - setFilterValues({}); - searchParams.delete("filter"); - setSearchParams(searchParams); - }; - - const setInitialFilter = useCallback( - debounce((filterValues: FilterValues) => { - // Make sure we remove previous filters - table.getAllLeafColumns().map((column) => { - column.setFilterValue(null); - }); - if (!filterValues) { - setFilterValues({}); - } else { - Object.entries(filterValues).forEach(([key, value]) => { - const column = table - .getAllLeafColumns() - .find((col) => col.id === key); - column.setFilterValue(value); - }); - setFilterValues(filterValues); - } - }, 50), - [] - ); - - const onChangeColumnFilter = ( - e: ChangeEvent, - column: Column - ) => { - const newValue = e.target.value || null; // If the value is "", we use null instead. Otherwise, other filter functions will not be applied. - const newFilterValues = { - ...filterValues, - [column.id]: newValue - }; - if (!newValue) { - delete newFilterValues[column.id]; - } - setFilterValues(newFilterValues); - // Debounce updating the column filter and search params to reduce re-renders - updateColumnFilter(newValue, column); - updateFilterSearchParams(newFilterValues); - }; - - const updateColumnFilter = useCallback( - debounce((value: string, column: Column) => { - column.setFilterValue(value); - }, 500), - [] - ); - const updateFilterSearchParams = useCallback( - debounce((filterValues: FilterValues) => { - const newSearchParams = createColumnFilterSearchParams( - searchParams, - filterValues - ); - if (checkIsUrlTooLong(location.pathname, newSearchParams)) { - newSearchParams.delete("filter"); // Remove filter from the URL if it takes too much space. The filter will still be applied, but not in the URL. - } - setSearchParams(newSearchParams); - }, 500), - [] - ); return ( <> - - + - - - +
- -
- + > + ); }; -const OrderingRow = styled.div<{ disableFilters: boolean }>` - display: grid; - grid-template-columns: ${(props) => - props.disableFilters ? "20px 25px 25px 1fr" : "20px 25px 25px 1fr 1.5fr"}; - align-items: center; -`; - -const OrderingButton = styled(Button)` - width: 25px; - height: 25px; -`; - -const OrderingLabel = styled(Typography)` - margin-top: auto; - margin-bottom: auto; - margin-right: 1rem; - cursor: grab; - font-family: EquinorMedium; - font-size: 0.875rem; - white-space: nowrap; -`; - -const ResetContainer = styled.div` - display: flex; - gap: 0.25rem; -`; - -const ResetButton = styled(Button)` - width: 125px; -`; - const StyledMenu = styled(Menu)<{ colors: Colors }>` background: ${(props) => props.colors.ui.backgroundLight}; p {