udp-react-enterprise-component-library 25.16.1 → 25.16.2-beta.2

package/dist/MttMainTimeline-sEwjTclL.js

@@ -0,0 +1,888 @@
+import { t as apiMutate$1 } from "./useAxiosMutate-C_CLzTKW.js";
+import { n as formatDataWithTimelineCategoryNameOrderedByDate } from "./mttFunctions-BwD8i0ZG.js";
+import { t as IconRenderer } from "./IconRenderer-3GKCegIn.js";
+import { t as MttYearTag } from "./MttYearTag-DG99yJQY.js";
+import { a as TimelineWrapper, i as MultiDot, n as TimelinePreloaderNode, o as TimelineNode, r as VisualizationDot, t as DynamicRangeSlider } from "./DynamicRangeSlider-B1eo_raB.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) {
+		return new Date(a.date) - new Date(b.date);
+	});
+	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);
+			return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
+		};
+		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(() => {
+		setRecordLength((data && data.filter((item) => {
+			const date = new Date(item.date);
+			return date >= startDateSet && date <= endDateSet;
+		}))?.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 { MttTimeline as n, HeightAdjuster as r, MttMainTimeline as t };
+//# sourceMappingURL=MttMainTimeline-sEwjTclL.js.map