udp-react-enterprise-component-library 25.14.1-beta.9 → 25.16.1

package/dist/MttMainTimeline-Bme6LQZO.js

@@ -1,894 +0,0 @@
-import { apiMutate as apiMutate$1 } from "./useAxiosMutate-BNEb4J04.js";
-import { formatDataWithTimelineCategoryNameOrderedByDate } from "./mttFunctions-BFUthekm.js";
-import { IconRenderer } from "./IconRenderer-DiwGfDul.js";
-import { MttYearTag } from "./MttYearTag-Cb_oIUNq.js";
-import { DynamicRangeSlider, MultiDot, TimelineNode, TimelinePreloaderNode, TimelineWrapper, VisualizationDot } from "./DynamicRangeSlider-D8UVBHSs.js";
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Fade, IconButton, Slider, Typography, lighten, makeStyles, useTheme } from "@material-ui/core";
-import { ConfigService } from "udp-react-stencil-component-library";
-import { LineSpacingIcon, MinimumValueIcon } from "@fluentui/react-icons";
-import "react-range-slider-input/dist/style.css";
-
-//#region src/componentSystems/multiThreadTimeline/mttMainTimeline/HeightAdjust.jsx
-const HeightAdjuster = ({ verticalAdjuster, setVerticalAdjuster }) => {
-	const handleAdjusterChange = (event, newValue) => {
-		setVerticalAdjuster(newValue);
-	};
-	const handleDecreaseClick = () => {
-		setVerticalAdjuster(verticalAdjuster - 1);
-	};
-	const handleIncreaseClick = () => {
-		setVerticalAdjuster(verticalAdjuster + 1);
-	};
-	return /* @__PURE__ */ React.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React.createElement(IconButton, { onClick: handleDecreaseClick }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 18 } }, /* @__PURE__ */ React.createElement(LineSpacingIcon, null))), /* @__PURE__ */ React.createElement(Slider, {
-		value: verticalAdjuster,
-		min: 0,
-		max: 10,
-		step: .1,
-		onChange: handleAdjusterChange
-	}), /* @__PURE__ */ React.createElement(IconButton, { onClick: handleIncreaseClick }, /* @__PURE__ */ React.createElement("div", { style: {
-		rotate: "90deg",
-		fontSize: 24
-	} }, /* @__PURE__ */ React.createElement(MinimumValueIcon, null))));
-};
-
-//#endregion
-//#region src/componentSystems/multiThreadTimeline/mttMainTimeline/MttTimeline.jsx
-const useStyles = makeStyles((theme) => ({
-	root: {},
-	horizontalDash: {
-		backgroundImage: "linear-gradient(to right, grey 33%, rgba(255,255,255,0) 0%)",
-		backgroundPosition: "bottom",
-		backgroundSize: "16px 1px",
-		backgroundRepeat: "repeat-x"
-	},
-	slider: { height: 600 },
-	categoryBar: {
-		background: lighten(theme.palette.common.black, .5),
-		color: theme.palette.common.white,
-		display: "flex",
-		alignItems: "center"
-	},
-	categoryBarPlacement: {
-		position: "absolute",
-		left: 0
-	},
-	categoryLabel: {
-		transform: "rotate(90deg)",
-		width: 28
-	},
-	button: { "&:hover": { textDecoration: "line-through" } }
-}));
-const MttTimeline = memo((props) => {
-	const [showAllDetails] = useState(false);
-	const [startRange, setStartRange] = useState(10);
-	const [endRange, setEndRange] = useState();
-	const [startDate, setStartDate] = useState();
-	const [endDate, setEndDate] = useState();
-	const [displayRangeFilter, setDisplayRangeFilter] = useState(true);
-	const [threadHeight, setThreadHeight] = useState(92);
-	const [recordLength, setRecordLength] = useState();
-	const [containerWidth, setContainerWidth] = useState();
-	const [showMonthMarkers, setShowMonthMarkers] = useState(false);
-	const [showYearMarkers, setShowYearMarkers] = useState(false);
-	const [verticalAdjuster, setVerticalAdjuster] = useState(4.5);
-	const [uniqueTimelines, setUniqueTimelines] = useState(0);
-	const classes = useStyles(props);
-	const { data, loading } = props;
-	const theme = useTheme();
-	const visualizationYScale = 40;
-	useEffect(() => {
-		const years$1 = [];
-		data && data.map((item) => {
-			years$1.push(item.date.slice(-4));
-		});
-		const uniqueYears$1 = [...new Set(years$1)].sort();
-		data && setStartDate(uniqueYears$1[0] + "-01-01");
-		data && setEndDate(uniqueYears$1[uniqueYears$1.length - 1] + "-12-31");
-	}, [data]);
-	const mainContainer = useRef(null);
-	useEffect(() => {
-		setContainerWidth(mainContainer.current ? mainContainer.current.offsetWidth : 0);
-	}, []);
-	let movement_timer = null;
-	const RESET_TIMEOUT = 10;
-	const set_dimensions = () => {
-		if (mainContainer.current) setContainerWidth(mainContainer.current.offsetWidth);
-	};
-	window.addEventListener("resize", () => {
-		clearInterval(movement_timer);
-		movement_timer = setTimeout(set_dimensions, RESET_TIMEOUT);
-	});
-	const years = [];
-	data && data.map((item) => {
-		years.push(item.date.slice(-4));
-	});
-	const uniqueYears = [...new Set(years)];
-	let demoApiConfigDate = [];
-	uniqueYears.map((item) => {
-		demoApiConfigDate.push("01/01/" + item);
-	});
-	let yearsInRange = [];
-	yearsInRange.push(Number(demoApiConfigDate[1]?.slice(-4)) + 1);
-	let yearsToDisplay = [];
-	yearsInRange.map((item) => {
-		yearsToDisplay.push("01/01/" + item);
-	});
-	demoApiConfigDate.map((item) => {
-		yearsToDisplay.unshift(item);
-	});
-	const yearRange = yearsToDisplay.sort();
-	const getSingleGroupedData = useCallback(() => {
-		const flatOne = data && data.map((item) => item.dates).flat();
-		return data && flatOne && flatOne.map((item) => {
-			return item.details;
-		});
-	}, [data]);
-	const sortDate = data && getSingleGroupedData().sort(function(a, b) {
-		const c = new Date(a.date);
-		const d = new Date(b.date);
-		return c - d;
-	});
-	let dataConvertedDate = data && sortDate.map((item) => ({
-		...item,
-		date: new Date(item.date).toLocaleDateString()
-	}));
-	function formatDate(date) {
-		return new Date(date).toLocaleDateString("en-US");
-	}
-	const getPositionFromDate = useCallback((initDate) => {
-		const start = new Date(yearRange[1]);
-		const end = new Date(yearRange[2]);
-		const rangeStart = [initDate];
-		const dateList = [new Date(start).toLocaleDateString()];
-		let loop = new Date(start);
-		while (loop <= end) {
-			const newDate = loop.setDate(loop.getDate() + 1);
-			loop = new Date(newDate);
-			dateList.push(loop.toLocaleDateString());
-		}
-		const mappedToObjects = dateList.map(function(value) {
-			return { date: value };
-		});
-		const plots$1 = [];
-		for (let i = 1; i <= dateList.length; i++) plots$1.push(i);
-		return mappedToObjects.map((o, i) => ({
-			...o,
-			plots: plots$1[i] || null
-		})).filter(({ date }) => rangeStart.includes(date)).map(({ plots: plots$2 }) => plots$2).toString();
-	}, [yearRange]);
-	let demoDates = [];
-	dataConvertedDate && dataConvertedDate.map((item) => {
-		demoDates.push(item.date);
-	});
-	let unique = [...new Set(demoDates)];
-	useEffect(() => {
-		setEndRange(unique && Number(getPositionFromDate(unique.slice(-1).pop())) + 66);
-	}, []);
-	const getDatesFromRangeSelectionCompact = useCallback((left, right) => {
-		const rangeStart = [Math.round(left)];
-		const rangeEnd = [Math.round(right)];
-		let demoDates$1 = [];
-		dataConvertedDate && dataConvertedDate.map((item) => {
-			demoDates$1.push(item.date);
-		});
-		let unique$1 = [...new Set(demoDates$1)];
-		const getNextDay = () => {
-			const dateString = unique$1[unique$1.length - 1];
-			const date = new Date(dateString);
-			date.setDate(date.getDate() + 1);
-			const month = date.getMonth() + 1;
-			const day = date.getDate();
-			const year = date.getFullYear();
-			return `${month}/${day}/${year}`;
-		};
-		const nextDay = getNextDay();
-		unique$1.push(nextDay);
-		const mappedToObjects = unique$1.map(function(value) {
-			return { date: value };
-		});
-		const plots$1 = [];
-		for (let i = 1; i <= unique$1.length; i++) plots$1.push(i * 10);
-		let mergePlots = mappedToObjects.map((o, i) => ({
-			...o,
-			plots: plots$1[i] || null
-		}));
-		const startDate$1 = mergePlots.filter(({ plots: plots$2 }) => rangeStart.includes(plots$2)).map(({ date }) => date).toString();
-		const endDate$1 = mergePlots.filter(({ plots: plots$2 }) => rangeEnd.includes(plots$2)).map(({ date }) => date).toString();
-		setStartDate(startDate$1);
-		setEndDate(endDate$1);
-	}, [dataConvertedDate]);
-	const getRangeValues = useCallback((rangeValue) => {
-		const left = rangeValue[0];
-		const right = rangeValue[1];
-		setStartRange(Math.round(left));
-		setEndRange(Math.round(right));
-	}, []);
-	const processRangeValues = () => {
-		endRange && getDatesFromRangeSelectionCompact(startRange, endRange);
-	};
-	const plotYV = useCallback((item) => {
-		const plotDate = [item];
-		let demoDates$1 = [];
-		dataConvertedDate && dataConvertedDate.map((item$1) => {
-			demoDates$1.push(item$1.date);
-		});
-		let demoDatesTwo = [];
-		data && data.map((item$1) => {
-			demoDatesTwo.push(item$1.date);
-		});
-		let unique$1 = [...new Set(demoDatesTwo)];
-		const mappedToObjects = unique$1.map((date) => new Date(date)).sort((a, b) => a.getTime() - b.getTime()).map((date) => date.toLocaleDateString()).map(function(value) {
-			return { date: value };
-		});
-		const plots$1 = [];
-		for (let i = 1; i <= unique$1.length; i++) plots$1.push(i);
-		return mappedToObjects.map((o, i) => ({
-			...o,
-			plots: plots$1[i] || null
-		})).filter(({ date }) => plotDate.includes(date)).map(({ plots: plots$2 }) => plots$2).map((item$1) => {
-			return item$1;
-		});
-	}, [data, dataConvertedDate]);
-	function compareDate(date1, date2, comparison) {
-		const date1Month = Number(date1.split("/")[0]);
-		const date2Month = Number(date2.split("/")[0]);
-		const date1Day = Number(date1.split("/")[1]);
-		const date2Day = Number(date2.split("/")[1]);
-		const date1Year = Number(date1.split("/")[2]);
-		const date2Year = Number(date2.split("/")[2]);
-		if (comparison === ">") {
-			if (date1Year > date2Year) return true;
-			else if (date1Year === date2Year) {
-				if (date1Month > date2Month) return true;
-				else if (date1Month === date2Month) {
-					if (date1Day > date2Day) return true;
-				}
-			}
-			return false;
-		} else {
-			if (date1Year < date2Year) return true;
-			else if (date1Year === date2Year) {
-				if (date1Month < date2Month) return true;
-				else if (date1Month === date2Month) {
-					if (date1Day < date2Day) return true;
-				}
-			}
-			return false;
-		}
-	}
-	function minnifyTimelineObject(object) {
-		let cleanObject = [];
-		let notUsed = false;
-		object.forEach((obj, i) => {
-			if (cleanObject.length === 0) cleanObject.push({
-				timeline: obj.timeline,
-				subThread: obj.subThread,
-				firstDate: formatDate(obj.date),
-				lastDate: formatDate(obj.date),
-				color: obj.color,
-				icon: obj.iconID
-			});
-			else {
-				notUsed = true;
-				cleanObject.forEach((clnObj) => {
-					if (obj.timeline === clnObj.timeline && obj.subThread === clnObj.subThread) {
-						if (compareDate(formatDate(obj.date), formatDate(clnObj.firstDate), "<")) clnObj.firstDate = formatDate(obj.date);
-						else if (compareDate(formatDate(obj.date), formatDate(clnObj.lastDate), ">")) clnObj.lastDate = formatDate(obj.date);
-						notUsed = false;
-					}
-				});
-			}
-			if (notUsed) cleanObject.push({
-				timeline: obj.timeline,
-				subThread: obj.subThread,
-				firstDate: formatDate(obj.date),
-				lastDate: formatDate(obj.date),
-				color: obj.color,
-				icon: obj.iconID
-			});
-		});
-		return cleanObject;
-	}
-	let dates = [];
-	dataConvertedDate && dataConvertedDate.map((item) => {
-		dates.push(item.date);
-	});
-	const plots = [];
-	for (let i = 1; i <= unique.length; i++) plots.push(i);
-	const startDateSet = useMemo(() => new Date(startDate), [startDate]);
-	const endDateSet = useMemo(() => new Date(endDate), [endDate]);
-	const filteredByDate = data && data.filter((item) => {
-		const date = new Date(item.date);
-		return date >= startDateSet && date < endDateSet;
-	});
-	const buildCategoryLines = useCallback(() => {
-		const xLine = data && filteredByDate?.map((item) => {
-			return item.timeline.toString() + "." + item.subThread.toString();
-		});
-		return [...new Set(xLine)];
-	}, [filteredByDate, data]);
-	const minnifiedResult = data && minnifyTimelineObject(filteredByDate);
-	const detailedComponentSize = 130;
-	const summaryComponentSize = 73;
-	const summaryBreakpoint = Math.round(containerWidth / detailedComponentSize);
-	const overviewBreakpoint = Math.round(containerWidth / summaryComponentSize);
-	useEffect(() => {
-		const filteredByDate$1 = data && data.filter((item) => {
-			const date = new Date(item.date);
-			return date >= startDateSet && date <= endDateSet;
-		});
-		setRecordLength(filteredByDate$1?.length);
-	}, [
-		data,
-		endDateSet,
-		startDateSet
-	]);
-	const checkLinearLength = [];
-	filteredByDate?.forEach((item) => {
-		checkLinearLength.push(item.date);
-	});
-	let uniqueNodeScaleAmount = [...new Set(checkLinearLength)].length;
-	useCallback(() => {
-		if (uniqueNodeScaleAmount > overviewBreakpoint) return 50;
-		else if (uniqueNodeScaleAmount >= summaryBreakpoint) return summaryComponentSize;
-		else return 186;
-	}, [
-		uniqueNodeScaleAmount,
-		summaryBreakpoint,
-		overviewBreakpoint
-	]);
-	const getXScale = useCallback(() => {
-		if (uniqueNodeScaleAmount > overviewBreakpoint) return 50;
-		else if (uniqueNodeScaleAmount >= summaryBreakpoint) return summaryComponentSize;
-		else return 186;
-	}, [
-		uniqueNodeScaleAmount,
-		summaryBreakpoint,
-		overviewBreakpoint
-	]);
-	const getYScale = useCallback(() => {
-		if (uniqueNodeScaleAmount > overviewBreakpoint) return 50;
-		else if (uniqueNodeScaleAmount >= summaryBreakpoint) return summaryComponentSize;
-		else return 130;
-	}, [
-		uniqueNodeScaleAmount,
-		summaryBreakpoint,
-		overviewBreakpoint
-	]);
-	const topMargin = uniqueNodeScaleAmount >= summaryBreakpoint ? 48 : 0;
-	const plotXV = useCallback((timeline, subThread) => {
-		const xLine = data && data.map((item) => {
-			return item.timeline + "." + item.subThread;
-		});
-		const sortedRowIndex = [...new Set(xLine)].reduce(function(s, a) {
-			s.push({ thread: a });
-			return s;
-		}, []).sort((a, b) => a.thread > b.thread ? 1 : -1);
-		const concatIndex = timeline + "." + subThread;
-		const results = sortedRowIndex.map((v, index) => ({
-			...v,
-			sortedRowIndex: index
-		})).filter(function(entry) {
-			return entry.thread === concatIndex;
-		});
-		return (results[0] && results[0].sortedRowIndex * 50) - topMargin;
-	}, [data, topMargin]);
-	const plotY = useCallback((item) => {
-		const plotDate = [item];
-		let demoDates$1 = [];
-		dataConvertedDate && dataConvertedDate.map((item$1) => {
-			demoDates$1.push(item$1.date);
-		});
-		let demoDatesTwo = [];
-		dataConvertedDate && filteredByDate.map((item$1) => {
-			demoDatesTwo.push(item$1.date);
-		});
-		let unique$1 = [...new Set(demoDatesTwo)];
-		const mappedToObjects = unique$1.map((date) => new Date(date)).sort((a, b) => a.getTime() - b.getTime()).map((date) => date.toLocaleDateString()).map(function(value) {
-			return { date: value };
-		});
-		const plots$1 = [];
-		for (let i = 1; i <= unique$1.length; i++) plots$1.push(i);
-		let mergePlots = mappedToObjects.map((o, i) => ({
-			...o,
-			plots: plots$1[i] || null
-		}));
-		const res = mergePlots && mergePlots.filter(({ date }) => plotDate.includes(date)).map(({ plots: plots$2 }) => plots$2);
-		return (mergePlots && res.map((item$1) => {
-			return item$1;
-		})) * getYScale() - getYScale() + (getYScale() === 130 ? 32 : 8);
-	}, [
-		dataConvertedDate,
-		getYScale,
-		filteredByDate
-	]);
-	const plotX = useCallback((timeline, subThread) => {
-		const xLine = data && filteredByDate.map((item) => {
-			return item.timeline + "." + item.subThread;
-		});
-		const rowIndex = [...new Set(xLine)].reduce(function(s, a) {
-			s.push({ thread: a });
-			return s;
-		}, []);
-		const orderByThread = (unordered) => {
-			let maxElement = 0;
-			unordered.forEach((value) => {
-				if (value.thread.split(".")[0] > maxElement) maxElement = value.thread.split(".")[0];
-			});
-			let sortArray = [...Array(+maxElement)].map((e) => e = []);
-			unordered.forEach((value) => {
-				sortArray[+value.thread.split(".")[0] - 1].push(value);
-			});
-			sortArray.forEach((value) => {
-				value.sort((a, b) => {
-					return +a.thread.split(".")[1] - +b.thread.split(".")[1];
-				});
-			});
-			return sortArray.flat();
-		};
-		const sortedRowIndex = orderByThread(rowIndex);
-		const concatIndex = timeline + "." + subThread;
-		const results = sortedRowIndex.map((v, index) => ({
-			...v,
-			sortedRowIndex: index
-		})).filter(function(entry) {
-			return entry.thread === concatIndex;
-		});
-		return (results[0] && results[0].sortedRowIndex * getXScale()) + topMargin;
-	}, [
-		data,
-		getXScale,
-		topMargin,
-		filteredByDate
-	]);
-	const MONTHS = {
-		1: "Jan",
-		2: "Feb",
-		3: "March",
-		4: "Apr",
-		5: "May",
-		6: "June",
-		7: "July",
-		8: "Aug",
-		9: "Sept",
-		10: "Oct",
-		11: "Nov",
-		12: "Dec"
-	};
-	const convertNumberToMonths = (months) => {
-		const orderedMonths = months;
-		orderedMonths.sort(function(a, b) {
-			return a - b;
-		});
-		return orderedMonths.map(function(i) {
-			return MONTHS[i];
-		});
-	};
-	function lastDayOfMonthArray(object) {
-		let tempDates = [];
-		let dates$1 = [];
-		object.forEach((obj) => {
-			if (!tempDates.find((date) => date === formatDate(obj.date))) tempDates.push(formatDate(obj.date));
-		});
-		tempDates.forEach((date) => {
-			const dateMonth = Number(date.split("/")[0]);
-			const dateYear = Number(date.split("/")[2]);
-			let pushDate = "12/31/9999";
-			tempDates.forEach((fDate) => {
-				const fDateMonth = Number(fDate.split("/")[0]);
-				const fDateDay = Number(fDate.split("/")[1]);
-				if (Number(fDate.split("/")[2]) === dateYear && fDateMonth === dateMonth && fDateDay < Number(pushDate.split("/")[1])) pushDate = fDate;
-			});
-			if (pushDate !== "12/31/9999") dates$1.push(pushDate);
-		});
-		dates$1 = [...new Set(dates$1)];
-		return dates$1.map((date) => {
-			let timelines = [];
-			let subThreads = [];
-			object.forEach((obj) => {
-				if (formatDate(obj.date) === formatDate(date)) {
-					timelines.push(obj.timeline);
-					subThreads.push(obj.subThread);
-				}
-			});
-			return {
-				date,
-				timelines,
-				subThread: subThreads
-			};
-		});
-	}
-	useEffect(() => {
-		const timelineSet = /* @__PURE__ */ new Set();
-		data && data.forEach((item) => {
-			const timelineKey = `${item.timeline}-${item.subThread}`;
-			timelineSet.add(timelineKey);
-		});
-		setUniqueTimelines(timelineSet.size);
-	}, [data]);
-	function firstDayOfYearArray(object) {
-		let tempDates = [];
-		let dates$1 = [];
-		object.forEach((obj) => {
-			if (!tempDates.find((date) => date === formatDate(obj.date))) tempDates.push(formatDate(obj.date));
-		});
-		tempDates.forEach((date) => {
-			const dateMonth = Number(date.split("/")[0]);
-			const dateYear = Number(date.split("/")[2]);
-			let pushDate = "12/31/9999";
-			tempDates.forEach((fDate) => {
-				const fDateMonth = Number(fDate.split("/")[0]);
-				const fDateDay = Number(fDate.split("/")[1]);
-				if (Number(fDate.split("/")[2]) === dateYear && fDateMonth === dateMonth && fDateDay < Number(pushDate.split("/")[1])) pushDate = fDate;
-			});
-			if (pushDate !== "12/31/9999") dates$1.push(pushDate);
-		});
-		dates$1 = [...new Set(dates$1)];
-		dates$1.sort((a, b) => new Date(b) - new Date(a));
-		let dateArr = [];
-		for (let x = 0; x < dates$1.length; x++) if (x === dates$1.length - 1 || Number(dates$1[x].split("/")[2]) !== Number(dates$1[x + 1].split("/")[2])) dateArr.push(dates$1[x]);
-		dateArr.sort((a, b) => new Date(a) - new Date(b));
-		return dateArr.map((date) => {
-			let timelines = [];
-			let subThreads = [];
-			object.forEach((obj) => {
-				if (formatDate(obj.date) === formatDate(date)) {
-					timelines.push(obj.timeline);
-					subThreads.push(obj.subThread);
-				}
-			});
-			return {
-				date,
-				timelines,
-				subThread: subThreads
-			};
-		});
-	}
-	const Today = (object) => {
-		const dateList = [];
-		object && object.map((item) => {
-			dateList.push(item.date);
-		});
-		let unique$1 = [...new Set(dateList)];
-		const today = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US");
-		return unique$1.filter((date) => date.includes(today));
-	};
-	const getInverseProportionalNumber = (inputNumber) => {
-		const reciprocal = 1 / inputNumber;
-		return Math.round(reciprocal * 400);
-	};
-	const visualizationSmall = 10;
-	const rangeHandles = 18;
-	const adjusterHeight = 100;
-	const GuideLinesShort = () => {
-		return buildCategoryLines().map((item, index) => {
-			return /* @__PURE__ */ React.createElement("div", {
-				key: index,
-				style: {
-					position: "absolute",
-					zIndex: 0,
-					top: 186 * index
-				}
-			}, /* @__PURE__ */ React.createElement("div", {
-				className: classes.horizontalDash,
-				style: { height: threadHeight }
-			}), /* @__PURE__ */ React.createElement("div", { style: {
-				width: filteredByDate && uniqueNodeScaleAmount * getXScale() + getXScale(),
-				height: threadHeight,
-				borderBottom: `${theme.palette.divider} 1px solid`
-			} }));
-		});
-	};
-	const preloadArray = [...Array(7).keys()];
-	const VisualizationCard = ({ title, data: data$1, date, user }) => {
-		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", title, " "), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", data$1, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", date, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", user, " ")));
-	};
-	const VisualizationCardMulti = ({ title, data: data$1, date, user }) => {
-		return /* @__PURE__ */ React.createElement("div", { style: {
-			width: 130,
-			borderRadius: 4,
-			marginBottom: 16,
-			padding: 8
-		} }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", title, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", data$1, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", date, " ")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", user, " ")));
-	};
-	const categoryList = [];
-	data && filteredByDate.map((item) => {
-		categoryList.push({
-			label: item.timelineCategoryName,
-			color: item.color,
-			timeline: item.timeline
-		});
-	});
-	const uniqueCategoryLegendSorted = [...new Map(categoryList.map((item) => [item["label"], item])).values()].sort((a, b) => a.timeline > b.timeline ? 1 : -1);
-	const LegendDot = ({ background }) => {
-		return /* @__PURE__ */ React.createElement("div", { style: {
-			width: 30,
-			height: 15,
-			background: lighten(background, .5),
-			borderRadius: theme.spacing(6)
-		} });
-	};
-	const LegendItem = ({ label, color }) => {
-		return /* @__PURE__ */ React.createElement("div", { style: {
-			display: "flex",
-			alignItems: "center"
-		} }, /* @__PURE__ */ React.createElement(LegendDot, { background: "#" + color }), /* @__PURE__ */ React.createElement("div", { style: { marginLeft: theme.spacing(1) } }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, label, " ")));
-	};
-	const legend = data && uniqueCategoryLegendSorted.map((item, index) => {
-		return /* @__PURE__ */ React.createElement(LegendItem, {
-			key: index,
-			color: item.color,
-			label: item.label
-		});
-	});
-	const plotCategoryBar = (timelineNumber, subThread) => {
-		const xLine = data && filteredByDate.map((item) => {
-			return item.timeline.toString() + "." + item.subThread.toString();
-		});
-		const rowIndex = [...new Set(xLine)].sort(function(a, b) {
-			return a.localeCompare(b);
-		}).reduce(function(s, a) {
-			s.push({ thread: a });
-			return s;
-		}, []);
-		const concatIndex = timelineNumber + "." + subThread;
-		const results = rowIndex.map((v, index) => ({
-			...v,
-			rowIndex: index + 1
-		})).filter(function(entry) {
-			return entry.thread === concatIndex;
-		});
-		return (results[0] && results[0].rowIndex * getXScale()) - getXScale();
-	};
-	const CategoryBar = ({ label, height }) => {
-		return /* @__PURE__ */ React.createElement("div", {
-			className: classes.categoryBar,
-			style: { height }
-		}, /* @__PURE__ */ React.createElement("div", { className: classes.categoryLabel }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, " ", label, " ")));
-	};
-	const DateMarkers = /* @__PURE__ */ React.createElement("div", null, filteredByDate && showYearMarkers && uniqueNodeScaleAmount >= summaryBreakpoint && firstDayOfYearArray(filteredByDate).map((item, index) => {
-		return /* @__PURE__ */ React.createElement("div", {
-			key: index,
-			style: {
-				position: "absolute",
-				bottom: 0,
-				left: plotY(item.date)
-			}
-		}, /* @__PURE__ */ React.createElement(MttYearTag, { year: true }, item.date.split("/")[2]));
-	}), filteredByDate && uniqueNodeScaleAmount >= summaryBreakpoint && showMonthMarkers && lastDayOfMonthArray(filteredByDate).map((item, index) => {
-		return /* @__PURE__ */ React.createElement("div", {
-			key: index,
-			style: {
-				position: "absolute",
-				bottom: 0,
-				left: plotY(item.date)
-			}
-		}, /* @__PURE__ */ React.createElement(MttYearTag, null, convertNumberToMonths([item.date.split("/")[0]])));
-	}), filteredByDate && uniqueNodeScaleAmount >= summaryBreakpoint && Today(filteredByDate).map((item) => {
-		return /* @__PURE__ */ React.createElement("div", { style: {
-			position: "absolute",
-			bottom: 0,
-			left: plotY(item)
-		} }, /* @__PURE__ */ React.createElement(MttYearTag, {
-			year: true,
-			today: true
-		}, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " TODAY ")));
-	}));
-	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
-		ref: mainContainer,
-		style: {
-			position: "relative",
-			height: "75vh",
-			overflow: "scroll"
-		}
-	}, !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: {
-		zIndex: 99999999,
-		position: "absolute",
-		bottom: 0
-	} }, DateMarkers), data && data && uniqueNodeScaleAmount < summaryBreakpoint && filteredByDate.map((item, index) => {
-		return /* @__PURE__ */ React.createElement("div", {
-			key: index,
-			className: classes.categoryBarPlacement,
-			style: { top: plotCategoryBar(Number(item.timeline), Number(item.subThread)) + 0 }
-		}, /* @__PURE__ */ React.createElement(CategoryBar, {
-			key: item.id,
-			label: item.timelineCategoryName,
-			height: data && getXScale()
-		}));
-	}), data && filteredByDate.map((item, index) => {
-		return item.dates.length === 1 ? /* @__PURE__ */ React.createElement("div", {
-			key: index,
-			style: {
-				position: "absolute",
-				left: plotY(new Date(item.date).toLocaleDateString("en-US")),
-				top: plotX(item.timeline, item.subThread),
-				zIndex: 999999 - plotY(new Date(item.date).toLocaleDateString("en-US")) - item.subThread
-			}
-		}, /* @__PURE__ */ React.createElement(TimelineNode, {
-			icon: /* @__PURE__ */ React.createElement(IconRenderer, {
-				noBorder: true,
-				value: {
-					color: { hex: "#" + item.color },
-					name: item.iconID
-				}
-			}),
-			dot: data && uniqueNodeScaleAmount <= overviewBreakpoint,
-			dotColor: "#" + item.color,
-			data: item.dates,
-			details: data && uniqueNodeScaleAmount < summaryBreakpoint,
-			height: data && uniqueNodeScaleAmount <= summaryBreakpoint && 183 || data && uniqueNodeScaleAmount <= overviewBreakpoint && 30,
-			width: data && uniqueNodeScaleAmount < summaryBreakpoint && 130,
-			boxStyle: true,
-			show: showAllDetails,
-			iconColor: "#" + item.color
-		})) : /* @__PURE__ */ React.createElement("div", { key: item.id }, /* @__PURE__ */ React.createElement("div", { style: {
-			position: "absolute",
-			left: plotY(new Date(item.date).toLocaleDateString("en-US")) + 4,
-			top: plotX(item.timeline, item.subThread),
-			zIndex: 999999 - plotY(new Date(item.date).toLocaleDateString("en-US")) - item.timeline
-		} }, /* @__PURE__ */ React.createElement(MultiDot, {
-			map: item.dates,
-			number: item.dates.length
-		})));
-	}), /* @__PURE__ */ React.createElement(Fade, { in: data && uniqueNodeScaleAmount >= summaryBreakpoint }, /* @__PURE__ */ React.createElement("div", null, data && minnifiedResult.map((item, index) => {
-		return /* @__PURE__ */ React.createElement("div", {
-			key: index,
-			style: {
-				position: "absolute",
-				left: plotY(item.firstDate) + 2,
-				top: data && uniqueNodeScaleAmount > overviewBreakpoint ? 14 + plotX(item.timeline, item.subThread) : 4 + plotX(item.timeline, item.subThread)
-			}
-		}, /* @__PURE__ */ React.createElement(TimelineWrapper, {
-			timeline: item.timeline,
-			style: {
-				width: plotY(item.lastDate) - plotY(item.firstDate) + 45,
-				height: data && uniqueNodeScaleAmount > overviewBreakpoint ? 20 : 40,
-				backgroundColor: lighten("#" + item.color, .7)
-			}
-		}));
-	}))), data && uniqueNodeScaleAmount < summaryBreakpoint && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(GuideLinesShort, null)))), /* @__PURE__ */ React.createElement("div", { style: { width: 250 } }, /* @__PURE__ */ React.createElement(HeightAdjuster, {
-		verticalAdjuster,
-		setVerticalAdjuster
-	})), !loading && /* @__PURE__ */ React.createElement("div", { style: {
-		position: "relative",
-		borderTop: "1px solid lightgrey",
-		overflow: "scroll"
-	} }, /* @__PURE__ */ React.createElement("div", null, data && displayRangeFilter && /* @__PURE__ */ React.createElement("div", { style: { overflow: "scroll" } }, /* @__PURE__ */ React.createElement("div", { key: data }, /* @__PURE__ */ React.createElement(DynamicRangeSlider, {
-		id: "range-slider",
-		step: 10,
-		threads: 10 * uniqueTimelines,
-		width: containerWidth - rangeHandles,
-		margin: topMargin + getInverseProportionalNumber(verticalAdjuster) * 3,
-		defaultValue: [10, unique.length * 10],
-		max: unique.length * 10,
-		min: 10,
-		onThumbDragEnd: processRangeValues,
-		onRangeDragEnd: processRangeValues,
-		onInput: (e) => getRangeValues(e)
-	}))), /* @__PURE__ */ React.createElement("div", null, data && data.map((item, index) => {
-		return item.dates.length === 1 ? /* @__PURE__ */ React.createElement("div", {
-			key: index,
-			style: {
-				position: "absolute",
-				left: dataConvertedDate && plotYV(new Date(item.date).toLocaleDateString("en-US")) * (containerWidth / unique.length) - (visualizationSmall + rangeHandles),
-				top: plotXV(item.timeline, item.subThread) / verticalAdjuster + visualizationYScale + adjusterHeight
-			}
-		}, /* @__PURE__ */ React.createElement(VisualizationDot, {
-			type: item.dates[0].details.shortDescription,
-			hover: /* @__PURE__ */ React.createElement(VisualizationCard, {
-				title: item.dates[0].details.shortDescription,
-				data: item.dates[0].details.data1,
-				date: item.dates[0].details.date
-			})
-		})) : /* @__PURE__ */ React.createElement("div", { key: item.id }, /* @__PURE__ */ React.createElement("div", { style: {
-			position: "absolute",
-			left: dataConvertedDate && plotYV(new Date(item.date).toLocaleDateString("en-US")) * (containerWidth / unique.length) - (visualizationSmall + rangeHandles),
-			top: plotXV(item.timeline, item.subThread) / verticalAdjuster + visualizationYScale + adjusterHeight
-		} }, /* @__PURE__ */ React.createElement(VisualizationDot, {
-			hover: /* @__PURE__ */ React.createElement("div", { style: { color: "black" } }, item.dates.map((item$1) => {
-				return /* @__PURE__ */ React.createElement(VisualizationCardMulti, {
-					title: item$1.details.description,
-					date: item$1.details.date,
-					key: item$1.id
-				});
-			})),
-			multi: true
-		}, item.dates.length)));
-	})))), /* @__PURE__ */ React.createElement("div", { style: {
-		position: "absolute",
-		top: 0,
-		left: 0,
-		zIndex: 10
-	} }, loading && preloadArray.map((item, index) => {
-		return /* @__PURE__ */ React.createElement("div", {
-			key: index,
-			style: {
-				position: "absolute",
-				left: Math.floor(Math.random() * 11) * 60 + 40,
-				top: (index + 1) * 80
-			}
-		}, /* @__PURE__ */ React.createElement(TimelinePreloaderNode, {
-			longView: true,
-			loading
-		}));
-	})), uniqueNodeScaleAmount >= summaryBreakpoint && /* @__PURE__ */ React.createElement("div", { style: {
-		position: "absolute",
-		right: 0,
-		top: 0,
-		zIndex: 999999999,
-		background: "white",
-		borderRadius: 4
-	} }, /* @__PURE__ */ React.createElement("div", { style: {
-		display: "flex",
-		padding: theme.spacing(1),
-		gap: theme.spacing(3)
-	} }, legend, /* @__PURE__ */ React.createElement(Button, {
-		className: classes.button,
-		onClick: () => setShowMonthMarkers(!showMonthMarkers)
-	}, /* @__PURE__ */ React.createElement("span", { style: { textDecoration: !showMonthMarkers && "line-through" } }, "M")), /* @__PURE__ */ React.createElement(Button, {
-		className: classes.button,
-		onClick: () => setShowYearMarkers(!showYearMarkers)
-	}, /* @__PURE__ */ React.createElement("span", { style: { textDecoration: !showYearMarkers && "line-through" } }, "Y")))));
-});
-
-//#endregion
-//#region src/componentSystems/multiThreadTimeline/mttMainTimeline/MttMainTimeline.jsx
-const MttMainTimeline = (props) => {
-	const { timelineApiMethodInstanceId, params = {} } = props;
-	const [timelineThreads, setTimelineThreads] = useState(null);
-	const [data, setData] = useState();
-	const [loading, setLoading] = useState(false);
-	const executeQueryInstance = useCallback(async (apiMethodInstanceId, data$1 = {}) => apiMutate$1(ConfigService.integrationV1ApiUrl, `apimethod/executeQueryInstance/${apiMethodInstanceId}`, { method: "post" }, { data: data$1 }), []);
-	useEffect(() => {
-		const fetchTimelineThreads = async () => {
-			const timelineResponse = await executeQueryInstance(timelineApiMethodInstanceId).catch((e) => e);
-			if (timelineResponse?.status === 200) setTimelineThreads(timelineResponse?.data?.pageList || []);
-		};
-		fetchTimelineThreads();
-	}, [executeQueryInstance, timelineApiMethodInstanceId]);
-	useEffect(() => {
-		const fetchThreadEvents = async () => {
-			if (!timelineThreads) return null;
-			setLoading(true);
-			const promises = [];
-			const threadList = [];
-			timelineThreads.forEach((thread) => {
-				promises.push(executeQueryInstance(thread.queryID, { ...params }));
-			});
-			await Promise.all(promises.map((p) => p.catch((e) => {
-				setLoading(false);
-				return e;
-			}))).then((responses) => {
-				responses.forEach((response, index) => {
-					if (response.status === 200) {
-						const timelineThread = timelineThreads[index];
-						if (response?.data?.pageList) {
-							response.data.pageList.forEach((evt) => evt.threadId = timelineThread.name);
-							const thread = {
-								...timelineThread,
-								events: response.data.pageList
-							};
-							threadList.push(thread);
-						}
-					}
-				});
-				setLoading(false);
-			});
-			setData(formatDataWithTimelineCategoryNameOrderedByDate(threadList));
-		};
-		fetchThreadEvents();
-	}, [
-		executeQueryInstance,
-		timelineThreads,
-		params
-	]);
-	return /* @__PURE__ */ React.createElement(MttTimeline, {
-		data,
-		loading
-	});
-};
-
-//#endregion
-export { HeightAdjuster, MttMainTimeline, MttTimeline };
-//# sourceMappingURL=MttMainTimeline-Bme6LQZO.js.map