Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
@robertbasti
robertbasti committed Dec 9, 2024
1 parent 46df104 commit ebd1f5f
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 224 deletions.
36 changes: 28 additions & 8 deletions Src/WitsmlExplorer.Frontend/components/ContentViews/CurveValuesPlot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -82,6 +85,8 @@ export const CurveValuesPlot = React.memo(
const { width: contentViewWidth } = useContext(
ContentViewDimensionsContext
);

const [expanded, setExpanded] = useState<boolean>(false);
const { logType } = useParams();
const isTimeLog = logType === RouterLogType.TIME;
const extraWidth = getExtraWidth(data, columns, dateTimeFormat, isTimeLog);
Expand Down Expand Up @@ -192,13 +197,14 @@ export const CurveValuesPlot = React.memo(
};
};

const openCredentialsModal = () => {
console.log("on click");
<>
<SettingCustomRanges table={undefined}
/>
</>
};
const iconColor = colors.interactive.primaryResting;

const openCredentialsModal = () => (


setExpanded(true)

);

const onLegendScroll = (params: { scrollDataIndex: number }) => {
scrollIndex.current = params.scrollDataIndex;
Expand All @@ -219,6 +225,8 @@ export const CurveValuesPlot = React.memo(
}
};

const handleExpandFiltersClick = () => setExpanded(!expanded);

const handleEvents = {
legendselectchanged: onLegendChange,
legendscroll: onLegendScroll,
Expand Down Expand Up @@ -293,7 +301,19 @@ export const CurveValuesPlot = React.memo(
<Icon name="person" />

</Button>


{expanded ? <Box
sx={{
zIndex: 10,
position: "absolute",
width: "inherit",
top: "6.3rem",
minWidth: "174px",
pr: "0.1em"
}}
>
<SettingCustomRanges table={undefined} />
</Box> : null}
</>
)}
</EdsProvider>
Expand Down
226 changes: 10 additions & 216 deletions Src/WitsmlExplorer.Frontend/components/ContentViews/SettingCustomRanges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, string>;

export const SettingCustomRanges
= (props: {
export const SettingCustomRanges = (props: {
table: Table<any>;
}): React.ReactElement => {
const {
table,
} = props;

const {
operationState: { colors, theme }
} = useOperationState();
const [draggedId, setDraggedId] = useState<string | null>();
const [draggedOverId, setDraggedOverId] = useState<string | null>();
const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
const [menuAnchor, setMenuAnchor] = useState<HTMLButtonElement | null>(null);
const [, saveOrderToStorage] = useLocalStorageState<string[]>(
STORAGE_CONTENTTABLE_ORDER_KEY
);
const [searchParams, setSearchParams] = useSearchParams();
const [filterValues, setFilterValues] = useState<FilterValues>({});
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<HTMLDivElement>) => {
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<HTMLInputElement>,
column: Column<any, unknown>
) => {
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<any, unknown>) => {
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 (
<>
<Button
variant={ "ghost"}

>
<Icon name="person" />

</Button>
<Button
variant="ghost_icon"
ref={setMenuAnchor}
id="anchor-default"
aria-haspopup="true"
aria-expanded={isMenuOpen}
aria-controls="menu-default"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<Icon name="filter" />
<Button variant={"ghost"}>
<Icon name="person" />
</Button>

<StyledMenu
open={isMenuOpen}
id="menu-default"
Expand All @@ -228,13 +57,11 @@ export const SettingCustomRanges
placement="left-end"
colors={colors}
>
<Typography style={{ paddingBottom: "16px" }}>

</Typography>
<Typography style={{ paddingBottom: "16px" }}></Typography>
<div style={{ display: "flex" }}>
<Checkbox
checked={table.getIsAllColumnsVisible()}
onChange={table.getToggleAllColumnsVisibilityHandler()}


/>
<Typography
style={{
Expand All @@ -255,45 +82,12 @@ export const SettingCustomRanges
e.preventDefault();
}}
style={{ padding: "0.125rem 0 0.25rem 0" }}
>

</div>
</StyledMenu>
></div>
</StyledMenu>
</>
);
};

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 {
Expand Down

0 comments on commit ebd1f5f

Please sign in to comment.