{/* Fixed width based only on visible days - never extends */}
{days.map((day, dayIndex) => (
@@ -749,128 +671,369 @@ export function HorizontalTimelineCalendar({
left: `${dayIndex * effectiveDayWidth}px`,
width: `${effectiveDayWidth}px`,
height: '100%',
- backgroundImage: `repeating-linear-gradient(to right, transparent, transparent ${(effectiveDayWidth / timeSlots.length) - 1}px, #e5e7eb ${(effectiveDayWidth / timeSlots.length) - 1}px, #e5e7eb ${effectiveDayWidth / timeSlots.length}px)`
+ backgroundImage: `repeating-linear-gradient(to right, transparent, transparent ${(effectiveDayWidth / 24) - 1}px, #e5e7eb ${(effectiveDayWidth / 24) - 1}px, #e5e7eb ${effectiveDayWidth / 24}px)`
}}
/>
))}
{/* Group markers by repetition ID and calculate vertical stacking */}
{(() => {
- // Group only visible markers by repetition ID
- const markersByRepetition: Record
= {}
- visibleMarkers.forEach(marker => {
- if (!markersByRepetition[marker.repetitionId]) {
- markersByRepetition[marker.repetitionId] = []
+ // Group ALL markers (not just visible) by repetition ID to check boundaries
+ const allMarkersByRepetition: Record = {}
+ phaseMarkers.forEach(marker => {
+ if (!allMarkersByRepetition[marker.repetitionId]) {
+ allMarkersByRepetition[marker.repetitionId] = []
}
- markersByRepetition[marker.repetitionId].push(marker)
+ allMarkersByRepetition[marker.repetitionId].push(marker)
+ })
+
+ // Group visible markers by repetition ID for rendering
+ const visibleMarkersByRepetition: Record = {}
+ visibleMarkers.forEach(marker => {
+ if (!visibleMarkersByRepetition[marker.repetitionId]) {
+ visibleMarkersByRepetition[marker.repetitionId] = []
+ }
+ visibleMarkersByRepetition[marker.repetitionId].push(marker)
})
- // Calculate positions for each repetition
const borderPadding = 20
- const repetitionData = Object.entries(markersByRepetition).map(([repId, markers]) => {
- const positions = markers.map(m => {
- const dayIndex = days.findIndex(d =>
+ const MARKER_ICON_SIZE = 32
+ const MARKER_TOP_OFFSET = 10
+ const MARKER_HEIGHT = MARKER_ICON_SIZE + (MARKER_TOP_OFFSET * 2) // Total height for a marker row
+ const ROW_HEIGHT = 40 // Minimum row height
+
+ // Calculate positions for each repetition using ALL markers
+ const repetitionData = Object.entries(visibleMarkersByRepetition).map(([repId, visibleMarkers]) => {
+ const allMarkers = allMarkersByRepetition[repId] || []
+
+ // Get positions of visible markers
+ const visiblePositions = visibleMarkers.map(m => {
+ const dayIndex = days.findIndex(d =>
d.toDateString() === new Date(m.startTime).toDateString()
)
if (dayIndex === -1) return null
return getTimePosition(m.startTime)
}).filter((p): p is number => p !== null)
- if (positions.length === 0) return null
+ if (visiblePositions.length === 0) return null
- const leftmost = Math.min(...positions)
- const rightmost = Math.max(...positions)
- const borderLeft = leftmost - borderPadding
- const borderWidth = (rightmost - leftmost) + (borderPadding * 2)
- const borderRight = borderLeft + borderWidth
+ // Get positions of ALL markers (including those outside viewport)
+ const allPositions = allMarkers.map(m => {
+ // Check if marker is in viewport date range
+ const markerDate = new Date(m.startTime)
+ markerDate.setHours(0, 0, 0, 0)
+ const start = new Date(startDate)
+ start.setHours(0, 0, 0, 0)
+ const end = new Date(endDate)
+ end.setHours(0, 0, 0, 0)
+
+ if (markerDate >= start && markerDate <= end) {
+ const dayIndex = days.findIndex(d =>
+ d.toDateString() === markerDate.toDateString()
+ )
+ if (dayIndex === -1) return null
+ return getTimePosition(m.startTime)
+ }
+ // Marker is outside viewport - calculate if it's before or after
+ if (markerDate < start) {
+ return -Infinity // Before viewport
+ }
+ return Infinity // After viewport
+ })
+
+ const visibleLeftmost = Math.min(...visiblePositions)
+ const visibleRightmost = Math.max(...visiblePositions)
+
+ // Check if markers extend beyond viewport
+ const hasMarkersBefore = allPositions.some(p => p === -Infinity)
+ const hasMarkersAfter = allPositions.some(p => p === Infinity)
+
+ // Calculate border width
+ let borderLeft = visibleLeftmost - borderPadding
+ let borderWidth = (visibleRightmost - visibleLeftmost) + (borderPadding * 2)
+
+ // If markers extend beyond, extend border to viewport edge
+ const viewportLeft = 0
+ const viewportRight = days.length * effectiveDayWidth
+
+ if (hasMarkersBefore) {
+ borderLeft = viewportLeft
+ borderWidth = (visibleRightmost - viewportLeft) + borderPadding
+ }
+ if (hasMarkersAfter) {
+ borderWidth = (viewportRight - borderLeft) + borderPadding
+ }
return {
repId,
- markers,
+ visibleMarkers,
+ allMarkers,
left: borderLeft,
- right: borderRight,
width: borderWidth,
- leftmostMarkerPos: leftmost,
- rightmostMarkerPos: rightmost
+ right: borderLeft + borderWidth,
+ extendLeft: hasMarkersBefore,
+ extendRight: hasMarkersAfter
}
}).filter((d): d is NonNullable => d !== null)
// Calculate vertical stacking positions
- // Sort repetitions by left position to process them in order
const sortedRepetitions = [...repetitionData].sort((a, b) => a.left - b.left)
- const ROW_HEIGHT = 40 // Height allocated per row
const repetitionRows: Array> = []
sortedRepetitions.forEach(rep => {
- // Find the first row where this repetition doesn't overlap
let placed = false
for (let rowIndex = 0; rowIndex < repetitionRows.length; rowIndex++) {
const row = repetitionRows[rowIndex]
- // Check if this repetition overlaps with any in this row
- // Two repetitions overlap if they share any horizontal space
- // They don't overlap if one is completely to the left or right of the other
const hasOverlap = row.some(existingRep => {
- // Add a small threshold to avoid edge cases
const threshold = 1
return !(rep.right + threshold <= existingRep.left || rep.left - threshold >= existingRep.right)
})
-
+
if (!hasOverlap) {
row.push(rep)
placed = true
break
}
}
-
- // If no row found, create a new row
+
if (!placed) {
repetitionRows.push([rep])
}
})
- // Render all repetitions with their vertical positions
- // Use flexbox to stack rows and share vertical space equally
+ // Render all repetitions - items stick to top, not distributed
return (
-
{repetitionRows.map((row, rowIndex) => (
{row.map(rep => {
- const firstMarker = rep.markers[0]
- const allPhases = rep.markers.map(m => getPhaseStyle(m.phase).label).join(', ')
- const times = rep.markers.map(m => moment(m.startTime).format('h:mm A')).join(', ')
- const totalAssigned = new Set(rep.markers.flatMap(m => m.assignedConductors)).size
+ const firstMarker = rep.visibleMarkers[0]
+ const allPhases = rep.visibleMarkers.map(m => getPhaseStyle(m.phase).label).join(', ')
+ const times = rep.visibleMarkers.map(m => moment(m.startTime).format('h:mm A')).join(', ')
+ const totalAssigned = new Set(rep.visibleMarkers.flatMap(m => m.assignedConductors)).size
+
+ // Calculate height based on markers (just enough for markers)
+ const repHeight = MARKER_HEIGHT
+
+ // Calculate if dragging
+ const isDragging = draggingRepetition === rep.repId
+ const currentLeft = isDragging && dragPosition ? dragPosition.x : rep.left
+ const borderPadding = 20
+
+ // Render markers inside the repetition border
+ const markerElements = rep.visibleMarkers.map((marker) => {
+ const style = getPhaseStyle(marker.phase)
+ const absoluteX = getTimePosition(marker.startTime)
+ const isSelected = selectedMarker === marker.id
+ const isVerticalLineHovered = hoveredVerticalLine === marker.id
+
+ // Calculate marker position relative to repetition border's left edge
+ // The repetition border starts at currentLeft, and markers are positioned relative to that
+ let markerLeftRelative = absoluteX - currentLeft
+
+ // If dragging, maintain relative position to the original border position
+ if (isDragging && dragPosition) {
+ // Calculate offset from the original leftmost position
+ const originalLeftmost = Math.min(...rep.visibleMarkers.map(m => getTimePosition(m.startTime)))
+ const offsetFromLeftmost = absoluteX - originalLeftmost
+ markerLeftRelative = offsetFromLeftmost
+ }
+
+ // Calculate vertical line dimensions
+ const HEADER_ROW_HEIGHT = 60
+ const CONDUCTOR_ROWS_HEIGHT = conductorAvailabilities.length * 36
+ const ROW_HEIGHT = 40
+ const MARKER_TOP_OFFSET = 10
+ const MARKER_ICON_SIZE = 32
+ const rowIndex = repetitionRows.findIndex(r => r.includes(rep))
+
+ const markerCenterY = MARKER_TOP_OFFSET + (MARKER_ICON_SIZE / 2)
+ const lineTop = -(HEADER_ROW_HEIGHT + CONDUCTOR_ROWS_HEIGHT + (rowIndex * ROW_HEIGHT) + MARKER_TOP_OFFSET)
+ const lineHeight = HEADER_ROW_HEIGHT + CONDUCTOR_ROWS_HEIGHT + (rowIndex * ROW_HEIGHT) + MARKER_TOP_OFFSET + markerCenterY
+
+ const formattedTime = moment(marker.startTime).format('h:mm A')
+ const formattedDate = moment(marker.startTime).format('MMM D, YYYY')
+ const fullTimeString = `${formattedDate} at ${formattedTime}`
+
+ return (
+
handleMarkerMouseDown(e, marker.id)}
+ onMouseEnter={() => {
+ setHoveredMarker(marker.id)
+ setHoveredVerticalLine(marker.id)
+ }}
+ onMouseLeave={() => {
+ setHoveredMarker(null)
+ setHoveredVerticalLine(null)
+ }}
+ title={`${style.label} - ${moment(marker.startTime).format('MMM D, h:mm A')}${marker.assignedConductors.length > 0 ? ` (${marker.assignedConductors.length} assigned)` : ''}`}
+ >
+ {/* Vertical line extending from header to marker */}
+
{
+ setHoveredVerticalLine(marker.id)
+ const rect = e.currentTarget.getBoundingClientRect()
+ setVerticalLineTooltip({
+ markerId: marker.id,
+ x: rect.left + rect.width / 2,
+ y: rect.top,
+ time: fullTimeString
+ })
+ }}
+ onMouseLeave={() => {
+ setHoveredVerticalLine(null)
+ setVerticalLineTooltip(null)
+ }}
+ onMouseMove={(e) => {
+ const rect = e.currentTarget.getBoundingClientRect()
+ setVerticalLineTooltip({
+ markerId: marker.id,
+ x: rect.left + rect.width / 2,
+ y: rect.top,
+ time: fullTimeString
+ })
+ }}
+ />
+
+ {/* Small icon marker */}
+
+
+ {style.icon}
+
+
+ {/* Assign Conductors button */}
+
+
+
+ {/* Connection indicators on assigned conductors */}
+ {marker.assignedConductors.map((conductorId, lineIndex) => {
+ const conductorIndex = conductorAvailabilities.findIndex(c => c.conductorId === conductorId)
+ if (conductorIndex === -1) return null
+
+ const CONDUCTOR_ROW_HEIGHT = 36
+ const HEADER_ROW_HEIGHT = 60
+ const CONDUCTOR_ROWS_HEIGHT = conductorAvailabilities.length * 36
+ const ROW_HEIGHT = 40
+ const MARKER_TOP_OFFSET = 10
+ const MARKER_ICON_SIZE = 32
+
+ const conductorRowTop = HEADER_ROW_HEIGHT + (conductorIndex * CONDUCTOR_ROW_HEIGHT)
+ const conductorRowCenter = conductorRowTop + (CONDUCTOR_ROW_HEIGHT / 2)
+ const markerCenterFromTop = HEADER_ROW_HEIGHT + CONDUCTOR_ROWS_HEIGHT + (rowIndex * ROW_HEIGHT) + MARKER_TOP_OFFSET + (MARKER_ICON_SIZE / 2)
+ const dotY = -(markerCenterFromTop - conductorRowCenter)
+
+ return (
+
+ )
+ })}
+
+ )
+ })
return (
handleRepetitionMouseDown(e, rep.repId)}
- isDragging={draggingRepetition === rep.repId}
+ isDragging={isDragging}
dragOffset={repetitionDragOffset}
- />
+ extendLeft={rep.extendLeft}
+ extendRight={rep.extendRight}
+ >
+ {markerElements}
+
)
})}
@@ -878,220 +1041,12 @@ export function HorizontalTimelineCalendar({
)
})()}
-
- {/* Phase markers - positioned relative to their repetition's row */}
- {(() => {
- // Group only visible markers by repetition to find their row positions
- const markersByRepetition: Record
= {}
- visibleMarkers.forEach(marker => {
- if (!markersByRepetition[marker.repetitionId]) {
- markersByRepetition[marker.repetitionId] = []
- }
- markersByRepetition[marker.repetitionId].push(marker)
- })
-
- // Calculate repetition positions and rows (same logic as borders)
- const borderPadding = 20
- const repetitionData = Object.entries(markersByRepetition).map(([repId, markers]) => {
- const positions = markers.map(m => {
- const dayIndex = days.findIndex(d =>
- d.toDateString() === new Date(m.startTime).toDateString()
- )
- if (dayIndex === -1) return null
- return getTimePosition(m.startTime)
- }).filter((p): p is number => p !== null)
-
- if (positions.length === 0) return null
-
- const leftmost = Math.min(...positions)
- const rightmost = Math.max(...positions)
- const borderLeft = leftmost - borderPadding
- const borderWidth = (rightmost - leftmost) + (borderPadding * 2)
- const borderRight = borderLeft + borderWidth
-
- return {
- repId,
- markers,
- left: borderLeft,
- right: borderRight,
- width: borderWidth
- }
- }).filter((d): d is NonNullable => d !== null)
-
- // Calculate vertical stacking (same as borders)
- const ROW_HEIGHT = 40
- const sortedRepetitions = [...repetitionData].sort((a, b) => a.left - b.left)
- const repetitionRows: Array> = []
-
- sortedRepetitions.forEach(rep => {
- let placed = false
- for (let rowIndex = 0; rowIndex < repetitionRows.length; rowIndex++) {
- const row = repetitionRows[rowIndex]
- const hasOverlap = row.some(existingRep => {
- const threshold = 1
- return !(rep.right + threshold <= existingRep.left || rep.left - threshold >= existingRep.right)
- })
-
- if (!hasOverlap) {
- row.push(rep)
- placed = true
- break
- }
- }
-
- if (!placed) {
- repetitionRows.push([rep])
- }
- })
-
- // Create a map of repetition ID to row index
- const repIdToRowIndex: Record = {}
- repetitionRows.forEach((row, rowIndex) => {
- row.forEach(rep => {
- repIdToRowIndex[rep.repId] = rowIndex
- })
- })
-
- return visibleMarkers.map((marker) => {
- const style = getPhaseStyle(marker.phase)
- const dayIndex = days.findIndex(d =>
- d.toDateString() === new Date(marker.startTime).toDateString()
- )
- if (dayIndex === -1) return null
-
- // Get absolute position from start of timeline (includes day offset)
- const absoluteX = getTimePosition(marker.startTime)
- const isDragging = draggingRepetition === marker.repetitionId
- const isSelected = selectedMarker === marker.id
- const rowIndex = repIdToRowIndex[marker.repetitionId] || 0
- const topOffset = rowIndex * ROW_HEIGHT + 10 // 10px padding from top of row
-
- const isVerticalLineHovered = hoveredVerticalLine === marker.id
-
- // Calculate marker position - if dragging, maintain relative position to border
- let markerLeft = absoluteX
- if (isDragging && dragPosition) {
- const repData = repetitionData.find(r => r.repId === marker.repetitionId)
- if (repData) {
- // Calculate offset from leftmost marker
- const leftmostMarker = repData.markers.reduce((prev, curr) =>
- getTimePosition(prev.startTime) < getTimePosition(curr.startTime) ? prev : curr
- )
- const leftmostX = getTimePosition(leftmostMarker.startTime)
- const offsetFromLeftmost = absoluteX - leftmostX
- // Position relative to dragged border
- markerLeft = dragPosition.x + borderPadding + offsetFromLeftmost
- }
- }
-
- return (
- handleMarkerMouseDown(e, marker.id)}
- onMouseEnter={() => {
- setHoveredMarker(marker.id)
- setHoveredVerticalLine(marker.id)
- }}
- onMouseLeave={() => {
- setHoveredMarker(null)
- setHoveredVerticalLine(null)
- }}
- title={`${style.label} - ${moment(marker.startTime).format('MMM D, h:mm A')}${marker.assignedConductors.length > 0 ? ` (${marker.assignedConductors.length} assigned)` : ''}`}
- >
- {/* Small icon marker */}
-
-
- {style.icon}
-
-
- {/* Assign Conductors button - top right corner */}
-
-
-
- {/* Connection indicators on assigned conductors (shown as dots on the vertical line) */}
- {marker.assignedConductors.map((conductorId, lineIndex) => {
- const conductorIndex = conductorAvailabilities.findIndex(c => c.conductorId === conductorId)
- if (conductorIndex === -1) return null
-
- const CONDUCTOR_ROW_HEIGHT = 36 // Height of each conductor row
- const HEADER_ROW_HEIGHT = 60 // Approximate height of header row
- const conductorRowTop = HEADER_ROW_HEIGHT + (conductorIndex * CONDUCTOR_ROW_HEIGHT)
- const conductorRowCenter = conductorRowTop + (CONDUCTOR_ROW_HEIGHT / 2)
-
- // Position dot at conductor row center (negative because it's above the marker)
- // Distance from marker center to conductor row center
- const dotY = -(totalHeightToMarker - conductorRowCenter)
-
- return (
-
- )
- })}
-
{/* Conductor assignment panel (shown when marker is selected) */}
{selectedMarker && assignmentPanelPosition && (
-