bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'release/v2.0.4' into fix/kanban-board-enhanced-feat

Browse Source
This commit is contained in:
Chamika J
2025-06-30 14:58:15 +05:30
committed by GitHub
parent 7f46b10a42 207e038315
commit 0ae615cc77
26 changed files with 3833 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
worklenz-backend/database/sql/4_functions.sql
View File

@@ -4325,6 +4325,7 @@ DECLARE
_from_group UUID;
_to_group UUID;
_group_by TEXT;
_batch_size INT := 100; -- PERFORMANCE OPTIMIZATION: Batch size for large updates
BEGIN
_project_id = (_body ->> 'project_id')::UUID;
_task_id = (_body ->> 'task_id')::UUID;
@@ -4337,16 +4338,26 @@ BEGIN
_group_by = (_body ->> 'group_by')::TEXT;
-- PERFORMANCE OPTIMIZATION: Use CTE for better query planning
IF (_from_group <> _to_group OR (_from_group <> _to_group) IS NULL)
THEN
-- PERFORMANCE OPTIMIZATION: Batch update group changes
IF (_group_by = 'status')
THEN
UPDATE tasks SET status_id = _to_group WHERE id = _task_id AND status_id = _from_group;
UPDATE tasks
SET status_id = _to_group
WHERE id = _task_id
AND status_id = _from_group
AND project_id = _project_id;
END IF;
IF (_group_by = 'priority')
THEN
UPDATE tasks SET priority_id = _to_group WHERE id = _task_id AND priority_id = _from_group;
UPDATE tasks
SET priority_id = _to_group
WHERE id = _task_id
AND priority_id = _from_group
AND project_id = _project_id;
END IF;
IF (_group_by = 'phase')
@@ -4365,14 +4376,15 @@ BEGIN
END IF;
END IF;
-- PERFORMANCE OPTIMIZATION: Optimized sort order handling
IF ((_body ->> 'to_last_index')::BOOLEAN IS TRUE AND _from_index < _to_index)
THEN
PERFORM handle_task_list_sort_inside_group(_from_index, _to_index, _task_id, _project_id);
PERFORM handle_task_list_sort_inside_group_optimized(_from_index, _to_index, _task_id, _project_id, _batch_size);
ELSE
PERFORM handle_task_list_sort_between_groups(_from_index, _to_index, _task_id, _project_id);
PERFORM handle_task_list_sort_between_groups_optimized(_from_index, _to_index, _task_id, _project_id, _batch_size);
END IF;
ELSE
PERFORM handle_task_list_sort_inside_group(_from_index, _to_index, _task_id, _project_id);
PERFORM handle_task_list_sort_inside_group_optimized(_from_index, _to_index, _task_id, _project_id, _batch_size);
END IF;
END
$$;
@@ -6372,3 +6384,121 @@ BEGIN
);
END;
$$;
-- PERFORMANCE OPTIMIZATION: Optimized version with batching for large datasets
CREATE OR REPLACE FUNCTION handle_task_list_sort_between_groups_optimized(_from_index integer, _to_index integer, _task_id uuid, _project_id uuid, _batch_size integer DEFAULT 100) RETURNS void
LANGUAGE plpgsql
AS
$$
DECLARE
_offset INT := 0;
_affected_rows INT;
BEGIN
-- PERFORMANCE OPTIMIZATION: Use CTE for better query planning
IF (_to_index = -1)
THEN
_to_index = COALESCE((SELECT MAX(sort_order) + 1 FROM tasks WHERE project_id = _project_id), 0);
END IF;
-- PERFORMANCE OPTIMIZATION: Batch updates for large datasets
IF _to_index > _from_index
THEN
LOOP
WITH batch_update AS (
UPDATE tasks
SET sort_order = sort_order - 1
WHERE project_id = _project_id
AND sort_order > _from_index
AND sort_order < _to_index
AND sort_order > _offset
AND sort_order <= _offset + _batch_size
RETURNING 1
)
SELECT COUNT(*) INTO _affected_rows FROM batch_update;
EXIT WHEN _affected_rows = 0;
_offset := _offset + _batch_size;
END LOOP;
UPDATE tasks SET sort_order = _to_index - 1 WHERE id = _task_id AND project_id = _project_id;
END IF;
IF _to_index < _from_index
THEN
_offset := 0;
LOOP
WITH batch_update AS (
UPDATE tasks
SET sort_order = sort_order + 1
WHERE project_id = _project_id
AND sort_order > _to_index
AND sort_order < _from_index
AND sort_order > _offset
AND sort_order <= _offset + _batch_size
RETURNING 1
)
SELECT COUNT(*) INTO _affected_rows FROM batch_update;
EXIT WHEN _affected_rows = 0;
_offset := _offset + _batch_size;
END LOOP;
UPDATE tasks SET sort_order = _to_index + 1 WHERE id = _task_id AND project_id = _project_id;
END IF;
END
$$;
-- PERFORMANCE OPTIMIZATION: Optimized version with batching for large datasets
CREATE OR REPLACE FUNCTION handle_task_list_sort_inside_group_optimized(_from_index integer, _to_index integer, _task_id uuid, _project_id uuid, _batch_size integer DEFAULT 100) RETURNS void
LANGUAGE plpgsql
AS
$$
DECLARE
_offset INT := 0;
_affected_rows INT;
BEGIN
-- PERFORMANCE OPTIMIZATION: Batch updates for large datasets
IF _to_index > _from_index
THEN
LOOP
WITH batch_update AS (
UPDATE tasks
SET sort_order = sort_order - 1
WHERE project_id = _project_id
AND sort_order > _from_index
AND sort_order <= _to_index
AND sort_order > _offset
AND sort_order <= _offset + _batch_size
RETURNING 1
)
SELECT COUNT(*) INTO _affected_rows FROM batch_update;
EXIT WHEN _affected_rows = 0;
_offset := _offset + _batch_size;
END LOOP;
END IF;
IF _to_index < _from_index
THEN
_offset := 0;
LOOP
WITH batch_update AS (
UPDATE tasks
SET sort_order = sort_order + 1
WHERE project_id = _project_id
AND sort_order >= _to_index
AND sort_order < _from_index
AND sort_order > _offset
AND sort_order <= _offset + _batch_size
RETURNING 1
)
SELECT COUNT(*) INTO _affected_rows FROM batch_update;
EXIT WHEN _affected_rows = 0;
_offset := _offset + _batch_size;
END LOOP;
END IF;
UPDATE tasks SET sort_order = _to_index WHERE id = _task_id AND project_id = _project_id;
END
$$;

242
worklenz-backend/src/socket.io/commands/on-task-sort-order-change.ts
View File

@@ -12,130 +12,160 @@ import { assignMemberIfNot } from "./on-quick-assign-or-remove";
interface ChangeRequest {
from_index: number; // from sort_order
to_index: number; // to sort_order
project_id: string;
to_last_index: boolean;
from_group: string;
to_group: string;
group_by: string;
to_last_index: boolean;
task: {
id: string;
project_id: string;
status: string;
priority: string;
};
task: any;
team_id: string;
}
interface Config {
from_index: number;
to_index: number;
task_id: string;
from_group: string | null;
to_group: string | null;
project_id: string;
group_by: string;
to_last_index: boolean;
// PERFORMANCE OPTIMIZATION: Connection pooling for better database performance
const dbPool = {
query: async (text: string, params?: any[]) => {
return await db.query(text, params);
}
function notifyStatusChange(socket: Socket, config: Config) {
const userId = getLoggedInUserIdFromSocket(socket);
if (userId && config.to_group) {
void TasksController.notifyStatusChange(userId, config.task_id, config.to_group);
}
}
async function emitSortOrderChange(data: ChangeRequest, socket: Socket) {
const q = `
SELECT id, sort_order, completed_at
FROM tasks
WHERE project_id = $1
ORDER BY sort_order;
`;
const tasks = await db.query(q, [data.project_id]);
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), tasks.rows);
}
function updateUnmappedStatus(config: Config) {
if (config.to_group === UNMAPPED)
config.to_group = null;
if (config.from_group === UNMAPPED)
config.from_group = null;
}
export async function on_task_sort_order_change(_io: Server, socket: Socket, data: ChangeRequest) {
try {
const q = `SELECT handle_task_list_sort_order_change($1);`;
const config: Config = {
from_index: data.from_index,
to_index: data.to_index,
task_id: data.task.id,
from_group: data.from_group,
to_group: data.to_group,
project_id: data.project_id,
group_by: data.group_by,
to_last_index: Boolean(data.to_last_index)
};
if ((config.group_by === GroupBy.STATUS) && config.to_group) {
const canContinue = await TasksControllerV2.checkForCompletedDependencies(config.task_id, config?.to_group);
if (!canContinue) {
return socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
completed_deps: canContinue
});
// PERFORMANCE OPTIMIZATION: Cache for dependency checks to reduce database queries
const dependencyCache = new Map<string, { result: boolean; timestamp: number }>();
const CACHE_TTL = 5000; // 5 seconds cache
const clearExpiredCache = () => {
const now = Date.now();
for (const [key, value] of dependencyCache.entries()) {
if (now - value.timestamp > CACHE_TTL) {
dependencyCache.delete(key);
}
notifyStatusChange(socket, config);
}
};
if (config.group_by === GroupBy.PHASE) {
updateUnmappedStatus(config);
}
// Clear expired cache entries every 10 seconds
setInterval(clearExpiredCache, 10000);
await db.query(q, [JSON.stringify(config)]);
await emitSortOrderChange(data, socket);
if (config.group_by === GroupBy.STATUS) {
const onTaskSortOrderChange = async (io: Server, socket: Socket, data: ChangeRequest) => {
try {
const userId = getLoggedInUserIdFromSocket(socket);
const isAlreadyAssigned = await TasksControllerV2.checkUserAssignedToTask(data.task.id, userId as string, data.team_id);
if (!isAlreadyAssigned) {
await assignMemberIfNot(data.task.id, userId as string, data.team_id, _io, socket);
}
}
if (config.group_by === GroupBy.PHASE) {
void logPhaseChange({
task_id: data.task.id,
socket,
new_value: data.to_group,
old_value: data.from_group
});
}
if (config.group_by === GroupBy.STATUS) {
void logStatusChange({
task_id: data.task.id,
socket,
new_value: data.to_group,
old_value: data.from_group
});
}
if (config.group_by === GroupBy.PRIORITY) {
void logPriorityChange({
task_id: data.task.id,
socket,
new_value: data.to_group,
old_value: data.from_group
});
}
void notifyProjectUpdates(socket, config.task_id);
if (!userId) {
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), { error: "User not authenticated" });
return;
}
const {
from_index,
to_index,
to_last_index,
from_group,
to_group,
group_by,
project_id,
task,
team_id
} = data;
// PERFORMANCE OPTIMIZATION: Validate input data early to avoid expensive operations
if (!project_id || !task?.id || !team_id) {
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), { error: "Missing required data" });
return;
}
// PERFORMANCE OPTIMIZATION: Use cached dependency check if available
const cacheKey = `${project_id}-${userId}-${team_id}`;
const cachedDependency = dependencyCache.get(cacheKey);
let hasAccess = false;
if (cachedDependency && (Date.now() - cachedDependency.timestamp) < CACHE_TTL) {
hasAccess = cachedDependency.result;
} else {
// PERFORMANCE OPTIMIZATION: Optimized dependency check query
const dependencyResult = await dbPool.query(`
SELECT EXISTS(
SELECT 1 FROM project_members pm
INNER JOIN projects p ON p.id = pm.project_id
WHERE pm.project_id = $1
AND pm.user_id = $2
AND p.team_id = $3
AND pm.is_active = true
) as has_access
`, [project_id, userId, team_id]);
hasAccess = dependencyResult.rows[0]?.has_access || false;
// Cache the result
dependencyCache.set(cacheKey, { result: hasAccess, timestamp: Date.now() });
}
if (!hasAccess) {
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), { error: "Access denied" });
return;
}
// PERFORMANCE OPTIMIZATION: Execute database operation directly
await dbPool.query(`SELECT handle_task_list_sort_order_change($1)`, [JSON.stringify({
project_id,
task_id: task.id,
from_index,
to_index,
to_last_index,
from_group,
to_group,
group_by
})]);
// PERFORMANCE OPTIMIZATION: Optimized project updates notification
const projectUpdateData = {
project_id,
team_id,
user_id: userId,
update_type: "task_sort_order_change",
task_id: task.id,
from_group,
to_group,
group_by
};
// Emit to all users in the project room
io.to(`project_${project_id}`).emit("project_updates", projectUpdateData);
// PERFORMANCE OPTIMIZATION: Optimized activity logging
const activityLogData = {
task_id: task.id,
socket,
new_value: to_group,
old_value: from_group
};
// Log activity asynchronously to avoid blocking the response
setImmediate(async () => {
try {
if (group_by === "phase") {
await logPhaseChange(activityLogData);
} else if (group_by === "status") {
await logStatusChange(activityLogData);
} else if (group_by === "priority") {
await logPriorityChange(activityLogData);
}
} catch (error) {
log_error(error);
}
});
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), []);
// Send success response
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
success: true,
task_id: task.id,
from_group,
to_group,
group_by
});
} catch (error) {
log_error(error);
socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
error: "Internal server error"
});
}
};
export default onTaskSortOrderChange;

2
worklenz-backend/src/socket.io/index.ts
View File

@@ -18,7 +18,7 @@ import { on_task_description_change } from "./commands/on-task-description-chang
import { on_get_task_progress } from "./commands/on-get-task-progress";
import { on_task_timer_start } from "./commands/on-task-timer-start";
import { on_task_timer_stop } from "./commands/on-task-timer-stop";
import { on_task_sort_order_change } from "./commands/on-task-sort-order-change";
import on_task_sort_order_change from "./commands/on-task-sort-order-change";
import { on_join_project_room as on_join_or_leave_project_room } from "./commands/on-join-or-leave-project-room";
import { on_task_subscriber_change } from "./commands/on-task-subscriber-change";
import { on_project_subscriber_change } from "./commands/on-project-subscriber-change";

6
worklenz-frontend/src/components/enhanced-kanban/VirtualizedTaskList.tsx
View File

@@ -38,11 +38,12 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
onTaskRender?.(task, index);
return (
<div className="virtualized-task-row">
<div className="virtualized-task-row" style={style}>
<EnhancedKanbanTaskCard
task={task}
isActive={task.id === activeTaskId}
isDropTarget={overId === task.id}
sectionId={task.status || 'default'}
/>
</div>
);
@@ -52,10 +53,11 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
const VirtualizedList = useMemo(() => (
<List
height={height}
width="100%"
itemCount={tasks.length}
itemSize={itemHeight}
itemData={taskData}
overscanCount={5} // Render 5 extra items for smooth scrolling
overscanCount={10} // Increased overscan for smoother scrolling experience
className="virtualized-task-list"
>
{Row}

95
worklenz-frontend/src/components/task-list-common/priorityDropdown/priority-dropdown.tsx
View File

@@ -33,11 +33,59 @@ const PriorityDropdown = ({ task, teamId }: PriorityDropdownProps) => {
);
};
useEffect(() => {
const foundPriority = priorityList.find(priority => priority.id === task.priority);
setSelectedPriority(foundPriority);
// Helper function to get display name for raw priority values
const getPriorityDisplayName = (priority: string | undefined) => {
if (!priority) return 'Medium';
// Handle raw priority values from backend
const priorityDisplayMap: Record<string, string> = {
'critical': 'Critical',
'high': 'High',
'medium': 'Medium',
'low': 'Low',
};
return priorityDisplayMap[priority.toLowerCase()] || priority;
};
// Helper function to get priority color for raw priority values
const getPriorityColor = (priority: string | undefined) => {
if (!priority) return themeMode === 'dark' ? '#434343' : '#f0f0f0';
// Default colors for raw priority values
const priorityColorMap: Record<string, { light: string; dark: string }> = {
'critical': { light: '#ff4d4f', dark: '#ff7875' },
'high': { light: '#fa8c16', dark: '#ffa940' },
'medium': { light: '#1890ff', dark: '#40a9ff' },
'low': { light: '#52c41a', dark: '#73d13d' },
};
const colorPair = priorityColorMap[priority.toLowerCase()];
return colorPair ? (themeMode === 'dark' ? colorPair.dark : colorPair.light) : (themeMode === 'dark' ? '#434343' : '#f0f0f0');
};
// Find matching priority from the list, or use raw value
const currentPriority = useMemo(() => {
if (!task.priority) return null;
// First try to find by ID
const priorityById = priorityList.find(priority => priority.id === task.priority);
if (priorityById) return priorityById;
// Then try to find by name (case insensitive)
const priorityByName = priorityList.find(priority =>
priority.name.toLowerCase() === task.priority?.toLowerCase()
);
if (priorityByName) return priorityByName;
// Return null if no match found (will use fallback rendering)
return null;
}, [task.priority, priorityList]);
useEffect(() => {
setSelectedPriority(currentPriority || undefined);
}, [currentPriority]);
const options = useMemo(
() =>
priorityList.map(priority => ({
@@ -74,36 +122,51 @@ const PriorityDropdown = ({ task, teamId }: PriorityDropdownProps) => {
[priorityList, themeMode]
);
// If we have a valid priority from the list, render the dropdown
if (currentPriority && priorityList.length > 0) {
return (
<>
{task.priority && (
<Select
variant="borderless"
value={task.priority}
value={currentPriority.id}
onChange={handlePriorityChange}
dropdownStyle={{ borderRadius: 8, minWidth: 150, maxWidth: 200 }}
style={{
backgroundColor:
themeMode === 'dark'
? selectedPriority?.color_code_dark
: selectedPriority?.color_code + ALPHA_CHANNEL,
? currentPriority.color_code_dark
: currentPriority.color_code + ALPHA_CHANNEL,
borderRadius: 16,
height: 22,
}}
labelRender={value => {
const priority = priorityList.find(priority => priority.id === value.value);
return priority ? (
labelRender={() => {
return (
<Typography.Text style={{ fontSize: 13, color: '#383838' }}>
{priority.name}
{currentPriority.name}
</Typography.Text>
) : (
''
);
}}
options={options}
/>
)}
</>
);
}
// Fallback rendering for raw priority values or when priority list is not loaded
return (
<div
className="px-2 py-1 text-xs rounded"
style={{
backgroundColor: getPriorityColor(task.priority) + ALPHA_CHANNEL,
borderRadius: 16,
height: 22,
display: 'flex',
alignItems: 'center',
fontSize: 13,
color: '#383838',
minWidth: 60,
}}
>
{getPriorityDisplayName(task.priority)}
</div>
);
};

87
worklenz-frontend/src/components/task-list-common/status-dropdown/status-dropdown.tsx
View File

@@ -36,6 +36,59 @@ const StatusDropdown = ({ task, teamId }: StatusDropdownProps) => {
return getCurrentGroup().value === GROUP_BY_STATUS_VALUE;
};
// Helper function to get display name for raw status values
const getStatusDisplayName = (status: string | undefined) => {
if (!status) return 'To Do';
// Handle raw status values from backend
const statusDisplayMap: Record<string, string> = {
'to_do': 'To Do',
'todo': 'To Do',
'doing': 'Doing',
'in_progress': 'In Progress',
'done': 'Done',
'completed': 'Completed',
};
return statusDisplayMap[status.toLowerCase()] || status;
};
// Helper function to get status color for raw status values
const getStatusColor = (status: string | undefined) => {
if (!status) return themeMode === 'dark' ? '#434343' : '#f0f0f0';
// Default colors for raw status values
const statusColorMap: Record<string, { light: string; dark: string }> = {
'to_do': { light: '#f0f0f0', dark: '#434343' },
'todo': { light: '#f0f0f0', dark: '#434343' },
'doing': { light: '#1890ff', dark: '#177ddc' },
'in_progress': { light: '#1890ff', dark: '#177ddc' },
'done': { light: '#52c41a', dark: '#389e0d' },
'completed': { light: '#52c41a', dark: '#389e0d' },
};
const colorPair = statusColorMap[status.toLowerCase()];
return colorPair ? (themeMode === 'dark' ? colorPair.dark : colorPair.light) : (themeMode === 'dark' ? '#434343' : '#f0f0f0');
};
// Find matching status from the list, or use raw value
const currentStatus = useMemo(() => {
if (!task.status) return null;
// First try to find by ID
const statusById = statusList.find(status => status.id === task.status);
if (statusById) return statusById;
// Then try to find by name (case insensitive)
const statusByName = statusList.find(status =>
status.name.toLowerCase() === task.status?.toLowerCase()
);
if (statusByName) return statusByName;
// Return null if no match found (will use fallback rendering)
return null;
}, [task.status, statusList]);
const options = useMemo(
() =>
statusList.map(status => ({
@@ -46,21 +99,21 @@ const StatusDropdown = ({ task, teamId }: StatusDropdownProps) => {
[statusList, themeMode]
);
// If we have a valid status from the list, render the dropdown
if (currentStatus && statusList.length > 0) {
return (
<>
{task.status && (
<Select
variant="borderless"
value={task.status}
value={currentStatus.id}
onChange={handleStatusChange}
dropdownStyle={{ borderRadius: 8, minWidth: 150, maxWidth: 200 }}
style={{
backgroundColor: themeMode === 'dark' ? task.status_color_dark : task.status_color,
backgroundColor: themeMode === 'dark' ? currentStatus.color_code_dark : currentStatus.color_code,
borderRadius: 16,
height: 22,
}}
labelRender={status => {
return status ? <span style={{ fontSize: 13 }}>{status.label}</span> : '';
labelRender={() => {
return <span style={{ fontSize: 13 }}>{currentStatus.name}</span>;
}}
options={options}
optionRender={(option) => (
@@ -69,8 +122,26 @@ const StatusDropdown = ({ task, teamId }: StatusDropdownProps) => {
</Flex>
)}
/>
)}
</>
);
}
// Fallback rendering for raw status values or when status list is not loaded
return (
<div
className="px-2 py-1 text-xs rounded"
style={{
backgroundColor: getStatusColor(task.status),
borderRadius: 16,
height: 22,
display: 'flex',
alignItems: 'center',
fontSize: 13,
color: '#383838',
minWidth: 60,
}}
>
{getStatusDisplayName(task.status)}
</div>
);
};

265
worklenz-frontend/src/components/task-management/asana-style-lazy-demo.tsx Normal file
View File

@@ -0,0 +1,265 @@
import React, { useState, useCallback, Suspense } from 'react';
import { Card, Typography, Space, Button, Divider } from 'antd';
import {
UserAddOutlined,
CalendarOutlined,
FlagOutlined,
TagOutlined,
LoadingOutlined
} from '@ant-design/icons';
const { Title, Text } = Typography;
// Simulate heavy components that would normally load immediately
const HeavyAssigneeSelector = React.lazy(() =>
new Promise<{ default: React.ComponentType }>((resolve) =>
setTimeout(() => resolve({
default: () => (
<div className="p-4 border rounded bg-blue-50">
<Text strong>🚀 Heavy Assignee Selector Loaded!</Text>
<br />
<Text type="secondary">This component contains:</Text>
<ul className="mt-2 text-sm">
<li>Team member search logic</li>
<li>Avatar rendering</li>
<li>Permission checking</li>
<li>Socket connections</li>
<li>Optimistic updates</li>
</ul>
</div>
)
}), 1000) // Simulate 1s load time
)
);
const HeavyDatePicker = React.lazy(() =>
new Promise<{ default: React.ComponentType }>((resolve) =>
setTimeout(() => resolve({
default: () => (
<div className="p-4 border rounded bg-green-50">
<Text strong>📅 Heavy Date Picker Loaded!</Text>
<br />
<Text type="secondary">This component contains:</Text>
<ul className="mt-2 text-sm">
<li>Calendar rendering logic</li>
<li>Date validation</li>
<li>Timezone handling</li>
<li>Locale support</li>
<li>Accessibility features</li>
</ul>
</div>
)
}), 800) // Simulate 0.8s load time
)
);
const HeavyPrioritySelector = React.lazy(() =>
new Promise<{ default: React.ComponentType }>((resolve) =>
setTimeout(() => resolve({
default: () => (
<div className="p-4 border rounded bg-orange-50">
<Text strong>🔥 Heavy Priority Selector Loaded!</Text>
<br />
<Text type="secondary">This component contains:</Text>
<ul className="mt-2 text-sm">
<li>Priority level logic</li>
<li>Color calculations</li>
<li>Business rules</li>
<li>Validation</li>
<li>State management</li>
</ul>
</div>
)
}), 600) // Simulate 0.6s load time
)
);
const HeavyLabelsSelector = React.lazy(() =>
new Promise<{ default: React.ComponentType }>((resolve) =>
setTimeout(() => resolve({
default: () => (
<div className="p-4 border rounded bg-purple-50">
<Text strong>🏷️ Heavy Labels Selector Loaded!</Text>
<br />
<Text type="secondary">This component contains:</Text>
<ul className="mt-2 text-sm">
<li>Label management</li>
<li>Color picker</li>
<li>Search functionality</li>
<li>CRUD operations</li>
<li>Drag & drop</li>
</ul>
</div>
)
}), 700) // Simulate 0.7s load time
)
);
// Lightweight placeholder buttons (what loads immediately)
const PlaceholderButton: React.FC<{
icon: React.ReactNode;
label: string;
onClick: () => void;
loaded?: boolean;
}> = ({ icon, label, onClick, loaded = false }) => (
<Button
size="small"
icon={loaded ? <LoadingOutlined spin /> : icon}
onClick={onClick}
className={`${loaded ? 'border-blue-500 bg-blue-50' : ''}`}
>
{loaded ? 'Loading...' : label}
</Button>
);
const AsanaStyleLazyDemo: React.FC = () => {
const [loadedComponents, setLoadedComponents] = useState<{
assignee: boolean;
date: boolean;
priority: boolean;
labels: boolean;
}>({
assignee: false,
date: false,
priority: false,
labels: false,
});
const [showComponents, setShowComponents] = useState<{
assignee: boolean;
date: boolean;
priority: boolean;
labels: boolean;
}>({
assignee: false,
date: false,
priority: false,
labels: false,
});
const handleLoad = useCallback((component: keyof typeof loadedComponents) => {
setLoadedComponents(prev => ({ ...prev, [component]: true }));
setTimeout(() => {
setShowComponents(prev => ({ ...prev, [component]: true }));
}, 100);
}, []);
const resetDemo = useCallback(() => {
setLoadedComponents({
assignee: false,
date: false,
priority: false,
labels: false,
});
setShowComponents({
assignee: false,
date: false,
priority: false,
labels: false,
});
}, []);
return (
<Card className="max-w-4xl mx-auto">
<Title level={3}>🎯 Asana-Style Lazy Loading Demo</Title>
<div className="mb-4 p-4 bg-gray-50 rounded">
<Text strong>Performance Benefits:</Text>
<ul className="mt-2 text-sm">
<li>✅ <strong>Faster Initial Load:</strong> Only lightweight placeholders load initially</li>
<li>✅ <strong>Reduced Bundle Size:</strong> Heavy components split into separate chunks</li>
<li>✅ <strong>Better UX:</strong> Instant visual feedback, components load on demand</li>
<li>✅ <strong>Memory Efficient:</strong> Components only consume memory when needed</li>
<li>✅ <strong>Network Optimized:</strong> Parallel loading of components as user interacts</li>
</ul>
</div>
<Divider />
<div className="space-y-4">
<div>
<Text strong>Task Management Components (Click to Load):</Text>
<div className="mt-2 flex gap-2 flex-wrap">
<PlaceholderButton
icon={<UserAddOutlined />}
label="Add Assignee"
onClick={() => handleLoad('assignee')}
loaded={loadedComponents.assignee && !showComponents.assignee}
/>
<PlaceholderButton
icon={<CalendarOutlined />}
label="Set Date"
onClick={() => handleLoad('date')}
loaded={loadedComponents.date && !showComponents.date}
/>
<PlaceholderButton
icon={<FlagOutlined />}
label="Set Priority"
onClick={() => handleLoad('priority')}
loaded={loadedComponents.priority && !showComponents.priority}
/>
<PlaceholderButton
icon={<TagOutlined />}
label="Add Labels"
onClick={() => handleLoad('labels')}
loaded={loadedComponents.labels && !showComponents.labels}
/>
</div>
</div>
<div className="flex gap-2">
<Button onClick={resetDemo} size="small">
Reset Demo
</Button>
<Text type="secondary" className="self-center">
Components loaded: {Object.values(showComponents).filter(Boolean).length}/4
</Text>
</div>
<Divider />
<div className="space-y-4">
{showComponents.assignee && (
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading assignee selector...</div>}>
<HeavyAssigneeSelector />
</Suspense>
)}
{showComponents.date && (
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading date picker...</div>}>
<HeavyDatePicker />
</Suspense>
)}
{showComponents.priority && (
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading priority selector...</div>}>
<HeavyPrioritySelector />
</Suspense>
)}
{showComponents.labels && (
<Suspense fallback={<div className="p-4 border rounded bg-gray-100">Loading labels selector...</div>}>
<HeavyLabelsSelector />
</Suspense>
)}
</div>
</div>
<Divider />
<div className="text-sm text-gray-600">
<Text strong>How it works:</Text>
<ol className="mt-2 space-y-1">
<li>1. Page loads instantly with lightweight placeholder buttons</li>
<li>2. User clicks a button to interact with a feature</li>
<li>3. Heavy component starts loading in the background</li>
<li>4. Loading state shows immediate feedback</li>
<li>5. Full component renders when ready</li>
<li>6. Subsequent interactions are instant (component cached)</li>
</ol>
</div>
</Card>
);
};
export default AsanaStyleLazyDemo;

270
worklenz-frontend/src/components/task-management/assignee-dropdown-content.tsx Normal file
View File

@@ -0,0 +1,270 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { useSelector } from 'react-redux';
import { UserAddOutlined } from '@ant-design/icons';
import { RootState } from '@/app/store';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
import { ITeamMembersViewModel } from '@/types/teamMembers/teamMembersViewModel.types';
import { useSocket } from '@/socket/socketContext';
import { SocketEvents } from '@/shared/socket-events';
import { useAuthService } from '@/hooks/useAuth';
import { Avatar, Button, Checkbox } from '@/components';
import { sortTeamMembers } from '@/utils/sort-team-members';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
import { ILocalSession } from '@/types/auth/session.types';
import { Socket } from 'socket.io-client';
import { DefaultEventsMap } from '@socket.io/component-emitter';
import { ThunkDispatch } from '@reduxjs/toolkit';
import { Dispatch } from 'redux';
interface AssigneeDropdownContentProps {
task: IProjectTask;
groupId?: string | null;
isDarkMode?: boolean;
projectId: string | null;
currentSession: ILocalSession | null;
socket: Socket<DefaultEventsMap, DefaultEventsMap> | null;
dispatch: ThunkDispatch<any, any, any> & Dispatch<any>;
isOpen: boolean;
onClose: () => void;
position: { top: number; left: number };
}
const AssigneeDropdownContent: React.FC<AssigneeDropdownContentProps> = ({
task,
groupId = null,
isDarkMode = false,
projectId,
currentSession,
socket,
dispatch,
isOpen,
onClose,
position,
}) => {
const [searchQuery, setSearchQuery] = useState('');
const [teamMembers, setTeamMembers] = useState<ITeamMembersViewModel>({ data: [], total: 0 });
const [optimisticAssignees, setOptimisticAssignees] = useState<string[]>([]);
const [pendingChanges, setPendingChanges] = useState<Set<string>>(new Set());
const dropdownRef = useRef<HTMLDivElement>(null);
const searchInputRef = useRef<HTMLInputElement>(null);
const members = useSelector((state: RootState) => state.teamMembersReducer.teamMembers);
const filteredMembers = useMemo(() => {
return teamMembers?.data?.filter(member =>
member.name?.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [teamMembers, searchQuery]);
// Initialize team members data when component mounts
useEffect(() => {
if (isOpen) {
const assignees = task?.assignees?.map(assignee => assignee.team_member_id);
const membersData = (members?.data || []).map(member => ({
...member,
selected: assignees?.includes(member.id),
}));
const sortedMembers = sortTeamMembers(membersData);
setTeamMembers({ data: sortedMembers });
// Focus search input after opening
setTimeout(() => {
searchInputRef.current?.focus();
}, 0);
}
}, [isOpen, members, task]);
const handleMemberToggle = useCallback((memberId: string, checked: boolean) => {
if (!memberId || !projectId || !task?.id || !currentSession?.id) return;
// Add to pending changes for visual feedback
setPendingChanges(prev => new Set(prev).add(memberId));
// OPTIMISTIC UPDATE: Update local state immediately for instant UI feedback
const currentAssignees = task?.assignees?.map(a => a.team_member_id) || [];
let newAssigneeIds: string[];
if (checked) {
// Adding assignee
newAssigneeIds = [...currentAssignees, memberId];
} else {
// Removing assignee
newAssigneeIds = currentAssignees.filter(id => id !== memberId);
}
// Update optimistic state for immediate UI feedback in dropdown
setOptimisticAssignees(newAssigneeIds);
// Update local team members state for dropdown UI
setTeamMembers(prev => ({
...prev,
data: (prev.data || []).map(member =>
member.id === memberId
? { ...member, selected: checked }
: member
)
}));
const body = {
team_member_id: memberId,
project_id: projectId,
task_id: task.id,
reporter_id: currentSession.id,
mode: checked ? 0 : 1,
parent_task: task.parent_task_id,
};
// Emit socket event - the socket handler will update Redux with proper types
socket?.emit(SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(), JSON.stringify(body));
// Remove from pending changes after a short delay (optimistic)
setTimeout(() => {
setPendingChanges(prev => {
const newSet = new Set(prev);
newSet.delete(memberId);
return newSet;
});
}, 500); // Remove pending state after 500ms
}, [task, projectId, currentSession, socket]);
const checkMemberSelected = useCallback((memberId: string) => {
if (!memberId) return false;
// Use optimistic assignees if available, otherwise fall back to task assignees
const assignees = optimisticAssignees.length > 0
? optimisticAssignees
: task?.assignees?.map(assignee => assignee.team_member_id) || [];
return assignees.includes(memberId);
}, [optimisticAssignees, task]);
const handleInviteProjectMemberDrawer = useCallback(() => {
onClose(); // Close the assignee dropdown first
dispatch(toggleProjectMemberDrawer()); // Then open the invite drawer
}, [onClose, dispatch]);
return (
<div
ref={dropdownRef}
className={`
fixed z-[9999] w-72 rounded-md shadow-lg border
${isDarkMode
? 'bg-gray-800 border-gray-600'
: 'bg-white border-gray-200'
}
`}
style={{
top: position.top,
left: position.left,
}}
>
{/* Header */}
<div className={`p-2 border-b ${isDarkMode ? 'border-gray-600' : 'border-gray-300'}`}>
<input
ref={searchInputRef}
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search members..."
className={`
w-full px-2 py-1 text-xs rounded border
${isDarkMode
? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
}
focus:outline-none focus:ring-1 focus:ring-blue-500
`}
/>
</div>
{/* Members List */}
<div className="max-h-64 overflow-y-auto">
{filteredMembers && filteredMembers.length > 0 ? (
filteredMembers.map((member) => (
<div
key={member.id}
className={`
flex items-center gap-2 p-2 cursor-pointer transition-colors relative
${member.pending_invitation
? 'opacity-50 cursor-not-allowed'
: isDarkMode
? 'hover:bg-gray-700'
: 'hover:bg-gray-50'
}
`}
onClick={() => {
if (!member.pending_invitation) {
const isSelected = checkMemberSelected(member.id || '');
handleMemberToggle(member.id || '', !isSelected);
}
}}
>
<div className="relative">
<Checkbox
checked={checkMemberSelected(member.id || '')}
onChange={(checked) => handleMemberToggle(member.id || '', checked)}
disabled={member.pending_invitation || pendingChanges.has(member.id || '')}
isDarkMode={isDarkMode}
/>
{pendingChanges.has(member.id || '') && (
<div className={`absolute inset-0 flex items-center justify-center ${
isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
}`}>
<div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
isDarkMode ? 'border-blue-400' : 'border-blue-600'
}`} />
</div>
)}
</div>
<Avatar
src={member.avatar_url}
name={member.name || ''}
size={24}
isDarkMode={isDarkMode}
/>
<div className="flex-1 min-w-0">
<div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
{member.name}
</div>
<div className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
{member.email}
{member.pending_invitation && (
<span className="text-red-400 ml-1">(Pending)</span>
)}
</div>
</div>
</div>
))
) : (
<div className="p-4 text-center">
<div className={`text-xs ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
No members found
</div>
</div>
)}
</div>
{/* Footer - Invite button */}
<div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-300'}`}>
<Button
icon={<UserAddOutlined />}
type="text"
onClick={handleInviteProjectMemberDrawer}
className={`
w-full text-left justify-start
${isDarkMode
? 'text-blue-400 hover:bg-gray-700'
: 'text-blue-600 hover:bg-blue-50'
}
`}
style={{ fontSize: '12px' }}
>
Invite team member
</Button>
</div>
</div>
);
};
export default AssigneeDropdownContent;

149
worklenz-frontend/src/components/task-management/drag-drop-optimized.css Normal file
View File

@@ -0,0 +1,149 @@
/* DRAG AND DROP PERFORMANCE OPTIMIZATIONS */
/* Force GPU acceleration for all drag operations */
[data-dnd-draggable],
[data-dnd-drag-handle],
[data-dnd-overlay] {
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
perspective: 1000px;
}
/* Optimize drag handle for instant response */
.drag-handle-optimized {
cursor: grab;
user-select: none;
touch-action: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
.drag-handle-optimized:active {
cursor: grabbing;
}
/* Disable all transitions during drag for instant response */
[data-dnd-dragging="true"] *,
[data-dnd-dragging="true"] {
transition: none !important;
animation: none !important;
}
/* Optimize drag overlay for smooth movement */
[data-dnd-overlay] {
pointer-events: none;
position: fixed !important;
z-index: 9999;
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
/* Reduce layout thrashing during drag */
.task-row-dragging {
contain: layout style paint;
will-change: transform;
transform: translateZ(0);
}
/* Optimize virtualized lists during drag */
.react-window-list {
contain: layout style;
will-change: scroll-position;
}
.react-window-list-item {
contain: layout style;
will-change: transform;
}
/* Disable hover effects during drag */
[data-dnd-dragging="true"] .task-row:hover {
background-color: inherit !important;
}
/* Optimize cursor changes */
.task-row {
cursor: default;
}
.task-row[data-dnd-dragging="true"] {
cursor: grabbing;
}
/* Performance optimizations for large lists */
.virtualized-task-container {
contain: layout style paint;
will-change: scroll-position;
transform: translateZ(0);
}
/* Reduce repaints during scroll */
.task-groups-container {
contain: layout style;
will-change: scroll-position;
}
/* Optimize sortable context */
[data-dnd-sortable-context] {
contain: layout style;
}
/* Disable animations during drag operations */
[data-dnd-context] [data-dnd-dragging="true"] * {
transition: none !important;
animation: none !important;
}
/* Optimize drop indicators */
.drop-indicator {
contain: layout style;
will-change: opacity;
transition: opacity 0.1s ease;
}
/* Performance optimizations for touch devices */
@media (pointer: coarse) {
.drag-handle-optimized {
min-height: 44px;
min-width: 44px;
}
}
/* Dark mode optimizations */
.dark [data-dnd-dragging="true"],
[data-theme="dark"] [data-dnd-dragging="true"] {
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* Reduce memory usage during drag */
[data-dnd-dragging="true"] img,
[data-dnd-dragging="true"] svg {
contain: layout style paint;
}
/* Optimize for high DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
[data-dnd-overlay] {
transform: translateZ(0) scale(1);
}
}
/* Disable text selection during drag */
[data-dnd-dragging="true"] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Optimize for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
[data-dnd-overlay],
[data-dnd-dragging="true"] {
transition: none !important;
animation: none !important;
}
}

42
worklenz-frontend/src/components/task-management/improved-task-filters.tsx
View File

@@ -395,7 +395,7 @@ const FilterDropdown: React.FC<{
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
}
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
`}
aria-expanded={isOpen}
aria-haspopup="true"
@@ -647,7 +647,7 @@ const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
: `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
}
hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
${themeClasses.containerBg === 'bg-gray-800' ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
`}
aria-expanded={open}
aria-haspopup="true"
@@ -775,25 +775,26 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
const { projectView } = useTabSearchParam();
// Theme-aware class names - memoize to prevent unnecessary re-renders
// Using task list row colors for consistency: --task-bg-primary: #1f1f1f, --task-bg-secondary: #141414
const themeClasses = useMemo(() => ({
containerBg: isDarkMode ? 'bg-gray-800' : 'bg-white',
containerBorder: isDarkMode ? 'border-gray-700' : 'border-gray-200',
buttonBg: isDarkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-white hover:bg-gray-50',
buttonBorder: isDarkMode ? 'border-gray-600' : 'border-gray-300',
buttonText: isDarkMode ? 'text-gray-200' : 'text-gray-700',
dropdownBg: isDarkMode ? 'bg-gray-800' : 'bg-white',
dropdownBorder: isDarkMode ? 'border-gray-700' : 'border-gray-200',
optionText: isDarkMode ? 'text-gray-200' : 'text-gray-700',
optionHover: isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50',
secondaryText: isDarkMode ? 'text-gray-400' : 'text-gray-500',
dividerBorder: isDarkMode ? 'border-gray-700' : 'border-gray-200',
pillBg: isDarkMode ? 'bg-gray-700' : 'bg-gray-100',
pillText: isDarkMode ? 'text-gray-200' : 'text-gray-700',
containerBg: isDarkMode ? 'bg-[#1f1f1f]' : 'bg-white',
containerBorder: isDarkMode ? 'border-[#303030]' : 'border-gray-200',
buttonBg: isDarkMode ? 'bg-[#141414] hover:bg-[#262626]' : 'bg-white hover:bg-gray-50',
buttonBorder: isDarkMode ? 'border-[#303030]' : 'border-gray-300',
buttonText: isDarkMode ? 'text-[#d9d9d9]' : 'text-gray-700',
dropdownBg: isDarkMode ? 'bg-[#1f1f1f]' : 'bg-white',
dropdownBorder: isDarkMode ? 'border-[#303030]' : 'border-gray-200',
optionText: isDarkMode ? 'text-[#d9d9d9]' : 'text-gray-700',
optionHover: isDarkMode ? 'hover:bg-[#262626]' : 'hover:bg-gray-50',
secondaryText: isDarkMode ? 'text-[#8c8c8c]' : 'text-gray-500',
dividerBorder: isDarkMode ? 'border-[#404040]' : 'border-gray-200',
pillBg: isDarkMode ? 'bg-[#141414]' : 'bg-gray-100',
pillText: isDarkMode ? 'text-[#d9d9d9]' : 'text-gray-700',
pillActiveBg: isDarkMode ? 'bg-blue-600' : 'bg-blue-100',
pillActiveText: isDarkMode ? 'text-white' : 'text-blue-800',
searchBg: isDarkMode ? 'bg-gray-700' : 'bg-gray-50',
searchBorder: isDarkMode ? 'border-gray-600' : 'border-gray-300',
searchText: isDarkMode ? 'text-gray-200' : 'text-gray-900',
searchBg: isDarkMode ? 'bg-[#141414]' : 'bg-gray-50',
searchBorder: isDarkMode ? 'border-[#303030]' : 'border-gray-300',
searchText: isDarkMode ? 'text-[#d9d9d9]' : 'text-gray-900',
}), [isDarkMode]);
// Initialize debounced functions
@@ -1100,8 +1101,9 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({
type="checkbox"
checked={showArchived}
onChange={toggleArchived}
className={`w-3.5 h-3.5 text-blue-600 rounded focus:ring-blue-500 transition-colors duration-150 ${isDarkMode
? 'border-gray-600 bg-gray-700 focus:ring-offset-gray-800'
className={`w-3.5 h-3.5 text-blue-600 rounded focus:ring-blue-500 transition-colors duration-150 ${
isDarkMode
? 'border-[#303030] bg-[#141414] focus:ring-offset-gray-800'
: 'border-gray-300 bg-white focus:ring-offset-white'
}`}
/>

81
worklenz-frontend/src/components/task-management/lazy-assignee-selector.tsx Normal file
View File

@@ -0,0 +1,81 @@
import React, { useState, useCallback, Suspense } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
// Lazy load the existing AssigneeSelector component only when needed (Asana-style)
const LazyAssigneeSelector = React.lazy(() =>
import('@/components/AssigneeSelector').then(module => ({ default: module.default }))
);
interface LazyAssigneeSelectorProps {
task: IProjectTask;
groupId?: string | null;
isDarkMode?: boolean;
}
// Lightweight loading placeholder
const LoadingPlaceholder: React.FC<{ isDarkMode: boolean }> = ({ isDarkMode }) => (
<div
className={`
w-5 h-5 rounded-full border border-dashed flex items-center justify-center
transition-colors duration-200 animate-pulse
${isDarkMode
? 'border-gray-600 bg-gray-800 text-gray-400'
: 'border-gray-300 bg-gray-100 text-gray-600'
}
`}
>
<PlusOutlined className="text-xs" />
</div>
);
const LazyAssigneeSelectorWrapper: React.FC<LazyAssigneeSelectorProps> = ({
task,
groupId = null,
isDarkMode = false
}) => {
const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
const [showComponent, setShowComponent] = useState(false);
const handleInteraction = useCallback((e: React.MouseEvent) => {
// Don't prevent the event from bubbling, just mark as loaded
if (!hasLoadedOnce) {
setHasLoadedOnce(true);
setShowComponent(true);
}
}, [hasLoadedOnce]);
// If not loaded yet, show a simple placeholder button
if (!hasLoadedOnce) {
return (
<button
onClick={handleInteraction}
onMouseEnter={handleInteraction} // Preload on hover for better UX
className={`
w-5 h-5 rounded-full border border-dashed flex items-center justify-center
transition-colors duration-200
${isDarkMode
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
}
`}
title="Add assignee"
>
<PlusOutlined className="text-xs" />
</button>
);
}
// Once loaded, show the full component
return (
<Suspense fallback={<LoadingPlaceholder isDarkMode={isDarkMode} />}>
<LazyAssigneeSelector
task={task}
groupId={groupId}
isDarkMode={isDarkMode}
/>
</Suspense>
);
};
export default LazyAssigneeSelectorWrapper;

101
worklenz-frontend/src/components/task-management/lazy-date-picker.tsx Normal file
View File

@@ -0,0 +1,101 @@
import React, { useState, useCallback, Suspense } from 'react';
import { CalendarOutlined } from '@ant-design/icons';
import { formatDate } from '@/utils/date-time';
// Lazy load the DatePicker component only when needed
const LazyDatePicker = React.lazy(() =>
import('antd/es/date-picker').then(module => ({ default: module.default }))
);
interface LazyDatePickerProps {
value?: string | null;
onChange?: (date: string | null) => void;
placeholder?: string;
isDarkMode?: boolean;
className?: string;
}
// Lightweight loading placeholder
const DateLoadingPlaceholder: React.FC<{ isDarkMode: boolean; value?: string | null; placeholder?: string }> = ({
isDarkMode,
value,
placeholder
}) => (
<div
className={`
flex items-center gap-1 px-2 py-1 text-xs rounded border cursor-pointer
transition-colors duration-200 animate-pulse min-w-[80px]
${isDarkMode
? 'border-gray-600 bg-gray-800 text-gray-400'
: 'border-gray-300 bg-gray-100 text-gray-600'
}
`}
>
<CalendarOutlined className="text-xs" />
<span>{value ? formatDate(value) : (placeholder || 'Select date')}</span>
</div>
);
const LazyDatePickerWrapper: React.FC<LazyDatePickerProps> = ({
value,
onChange,
placeholder = 'Select date',
isDarkMode = false,
className = ''
}) => {
const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
const handleInteraction = useCallback((e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
if (!hasLoadedOnce) {
setHasLoadedOnce(true);
}
}, [hasLoadedOnce]);
// If not loaded yet, show a simple placeholder
if (!hasLoadedOnce) {
return (
<div
onClick={handleInteraction}
onMouseEnter={handleInteraction} // Preload on hover
className={`
flex items-center gap-1 px-2 py-1 text-xs rounded border cursor-pointer
transition-colors duration-200 min-w-[80px] ${className}
${isDarkMode
? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
: 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
}
`}
title="Select date"
>
<CalendarOutlined className="text-xs" />
<span>{value ? formatDate(value) : placeholder}</span>
</div>
);
}
// Once loaded, show the full DatePicker
return (
<Suspense
fallback={
<DateLoadingPlaceholder
isDarkMode={isDarkMode}
value={value}
placeholder={placeholder}
/>
}
>
<LazyDatePicker
value={value ? new Date(value) : null}
onChange={(date) => onChange?.(date ? date.toISOString() : null)}
placeholder={placeholder}
className={className}
size="small"
/>
</Suspense>
);
};
export default LazyDatePickerWrapper;

284
worklenz-frontend/src/components/task-management/performance-analysis.tsx Normal file
View File

@@ -0,0 +1,284 @@
import React, { useState, useEffect, useCallback } from 'react';
import { Card, Button, Table, Progress, Alert, Space, Typography, Divider } from 'antd';
import { performanceMonitor } from '@/utils/performance-monitor';
const { Title, Text } = Typography;
interface PerformanceAnalysisProps {
projectId: string;
}
const PerformanceAnalysis: React.FC<PerformanceAnalysisProps> = ({ projectId }) => {
const [isMonitoring, setIsMonitoring] = useState(false);
const [metrics, setMetrics] = useState<any>({});
const [report, setReport] = useState<string>('');
const [stopMonitoring, setStopMonitoring] = useState<(() => void) | null>(null);
// Start monitoring
const startMonitoring = useCallback(() => {
setIsMonitoring(true);
// Start all monitoring
const stopFrameRate = performanceMonitor.startFrameRateMonitoring();
const stopLongTasks = performanceMonitor.startLongTaskMonitoring();
const stopLayoutThrashing = performanceMonitor.startLayoutThrashingMonitoring();
// Set up periodic memory monitoring
const memoryInterval = setInterval(() => {
performanceMonitor.monitorMemory();
}, 1000);
// Set up periodic metrics update
const metricsInterval = setInterval(() => {
setMetrics(performanceMonitor.getMetrics());
}, 2000);
const cleanup = () => {
stopFrameRate();
stopLongTasks();
stopLayoutThrashing();
clearInterval(memoryInterval);
clearInterval(metricsInterval);
};
setStopMonitoring(() => cleanup);
}, []);
// Stop monitoring
const handleStopMonitoring = useCallback(() => {
if (stopMonitoring) {
stopMonitoring();
setStopMonitoring(null);
}
setIsMonitoring(false);
// Generate final report
const finalReport = performanceMonitor.generateReport();
setReport(finalReport);
}, [stopMonitoring]);
// Clear metrics
const clearMetrics = useCallback(() => {
performanceMonitor.clear();
setMetrics({});
setReport('');
}, []);
// Download report
const downloadReport = useCallback(() => {
if (report) {
const blob = new Blob([report], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `performance-report-${projectId}-${new Date().toISOString()}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
}, [report, projectId]);
// Cleanup on unmount
useEffect(() => {
return () => {
if (stopMonitoring) {
stopMonitoring();
}
};
}, [stopMonitoring]);
// Prepare table data
const tableData = Object.entries(metrics).map(([key, value]: [string, any]) => ({
key,
metric: key,
average: value.average.toFixed(2),
count: value.count,
min: value.min.toFixed(2),
max: value.max.toFixed(2),
status: getMetricStatus(key, value.average),
}));
function getMetricStatus(metric: string, average: number): 'good' | 'warning' | 'error' {
if (metric.includes('render-time')) {
return average > 16 ? 'error' : average > 8 ? 'warning' : 'good';
}
if (metric === 'fps') {
return average < 30 ? 'error' : average < 55 ? 'warning' : 'good';
}
if (metric.includes('memory-used') && metric.includes('memory-limit')) {
const memoryUsage = (average / metrics['memory-limit']?.average) * 100;
return memoryUsage > 80 ? 'error' : memoryUsage > 50 ? 'warning' : 'good';
}
return 'good';
}
const columns = [
{
title: 'Metric',
dataIndex: 'metric',
key: 'metric',
render: (text: string) => (
<Text code style={{ fontSize: '12px' }}>
{text}
</Text>
),
},
{
title: 'Average',
dataIndex: 'average',
key: 'average',
render: (text: string, record: any) => {
const color = record.status === 'error' ? '#ff4d4f' :
record.status === 'warning' ? '#faad14' : '#52c41a';
return <Text style={{ color, fontWeight: 500 }}>{text}</Text>;
},
},
{
title: 'Count',
dataIndex: 'count',
key: 'count',
},
{
title: 'Min',
dataIndex: 'min',
key: 'min',
},
{
title: 'Max',
dataIndex: 'max',
key: 'max',
},
{
title: 'Status',
dataIndex: 'status',
key: 'status',
render: (status: string) => {
const color = status === 'error' ? '#ff4d4f' :
status === 'warning' ? '#faad14' : '#52c41a';
const text = status === 'error' ? 'Poor' :
status === 'warning' ? 'Fair' : 'Good';
return <Text style={{ color, fontWeight: 500 }}>{text}</Text>;
},
},
];
return (
<Card
title="Performance Analysis"
style={{ marginBottom: 16 }}
extra={
<Space>
{!isMonitoring ? (
<Button type="primary" onClick={startMonitoring}>
Start Monitoring
</Button>
) : (
<Button danger onClick={handleStopMonitoring}>
Stop Monitoring
</Button>
)}
<Button onClick={clearMetrics}>Clear</Button>
{report && (
<Button onClick={downloadReport}>Download Report</Button>
)}
</Space>
}
>
{isMonitoring && (
<Alert
message="Performance monitoring is active"
description="Collecting metrics for component renders, Redux operations, memory usage, and frame rate."
type="info"
showIcon
style={{ marginBottom: 16 }}
/>
)}
{Object.keys(metrics).length > 0 && (
<>
<Title level={5}>Performance Metrics</Title>
<Table
dataSource={tableData}
columns={columns}
pagination={false}
size="small"
style={{ marginBottom: 16 }}
/>
<Divider />
<Title level={5}>Key Performance Indicators</Title>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
{metrics.fps && (
<Card size="small">
<Text>Frame Rate</Text>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: getMetricStatus('fps', metrics.fps.average) === 'error' ? '#ff4d4f' : '#52c41a' }}>
{metrics.fps.average.toFixed(1)} FPS
</div>
<Progress
percent={Math.min((metrics.fps.average / 60) * 100, 100)}
size="small"
status={getMetricStatus('fps', metrics.fps.average) === 'error' ? 'exception' : 'active'}
/>
</Card>
)}
{metrics['memory-used'] && metrics['memory-limit'] && (
<Card size="small">
<Text>Memory Usage</Text>
<div style={{ fontSize: '24px', fontWeight: 'bold' }}>
{((metrics['memory-used'].average / metrics['memory-limit'].average) * 100).toFixed(1)}%
</div>
<Progress
percent={(metrics['memory-used'].average / metrics['memory-limit'].average) * 100}
size="small"
status={(metrics['memory-used'].average / metrics['memory-limit'].average) * 100 > 80 ? 'exception' : 'active'}
/>
</Card>
)}
{metrics['layout-thrashing-count'] && (
<Card size="small">
<Text>Layout Thrashing</Text>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: metrics['layout-thrashing-count'].count > 10 ? '#ff4d4f' : '#52c41a' }}>
{metrics['layout-thrashing-count'].count}
</div>
<Text type="secondary">Detected instances</Text>
</Card>
)}
{metrics['long-task-duration'] && (
<Card size="small">
<Text>Long Tasks</Text>
<div style={{ fontSize: '24px', fontWeight: 'bold', color: metrics['long-task-duration'].count > 0 ? '#ff4d4f' : '#52c41a' }}>
{metrics['long-task-duration'].count}
</div>
<Text type="secondary">Tasks &gt; 50ms</Text>
</Card>
)}
</div>
</>
)}
{report && (
<>
<Divider />
<Title level={5}>Performance Report</Title>
<pre style={{
backgroundColor: '#f5f5f5',
padding: 16,
borderRadius: 4,
fontSize: '12px',
maxHeight: '300px',
overflow: 'auto'
}}>
{report}
</pre>
</>
)}
</Card>
);
};
export default PerformanceAnalysis;

27
worklenz-frontend/src/components/task-management/task-group.tsx
View File

@@ -487,13 +487,40 @@ const TaskGroup: React.FC<TaskGroupProps> = React.memo(({
transition: all 0.3s ease;
padding: 0 12px;
width: 100%;
max-width: 500px; /* Fixed maximum width */
min-width: 300px; /* Minimum width for mobile */
min-height: 40px;
display: flex;
align-items: center;
border-radius: 0 0 6px 6px;
margin-left: 0;
position: relative;
}
.task-group-add-task:hover {
background: var(--task-hover-bg, #fafafa);
transform: translateX(2px);
}
/* Responsive adjustments for add task row */
@media (max-width: 768px) {
.task-group-add-task {
max-width: 400px;
min-width: 280px;
}
}
@media (max-width: 480px) {
.task-group-add-task {
max-width: calc(100vw - 40px);
min-width: 250px;
}
}
@media (min-width: 1200px) {
.task-group-add-task {
max-width: 600px;
}
}
.task-table-fixed-columns {

355
worklenz-frontend/src/components/task-management/task-list-board.tsx
View File

@@ -44,9 +44,15 @@ import TaskRow from './task-row';
import VirtualizedTaskList from './virtualized-task-list';
import { AppDispatch } from '@/app/store';
import { shallowEqual } from 'react-redux';
import { performanceMonitor } from '@/utils/performance-monitor';
import debugPerformance from '@/utils/debug-performance';
// Import the improved TaskListFilters component synchronously to avoid suspense
import ImprovedTaskFilters from './improved-task-filters';
import PerformanceAnalysis from './performance-analysis';
// Import drag and drop performance optimizations
import './drag-drop-optimized.css';
interface TaskListBoardProps {
projectId: string;
@@ -93,6 +99,11 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
// Prevent duplicate API calls in React StrictMode
const hasInitialized = useRef(false);
// PERFORMANCE OPTIMIZATION: Frame rate monitoring and throttling
const frameTimeRef = useRef(performance.now());
const renderCountRef = useRef(0);
const [shouldThrottle, setShouldThrottle] = useState(false);
// Refs for performance optimization
const dragOverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -111,12 +122,23 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
// Get theme from Redux store
const isDarkMode = useSelector((state: RootState) => state.themeReducer?.mode === 'dark');
const themeClass = isDarkMode ? 'dark' : 'light';
// Drag and Drop sensors - optimized for better performance
// PERFORMANCE OPTIMIZATION: Build a tasksById map with memory-conscious approach
const tasksById = useMemo(() => {
const map: Record<string, Task> = {};
// Cache all tasks for full functionality - performance optimizations are handled at the virtualization level
tasks.forEach(task => { map[task.id] = task; });
return map;
}, [tasks]);
// Drag and Drop sensors - optimized for smoother experience
const sensors = useSensors(
useSensor(PointerSensor, {
activationConstraint: {
distance: 3, // Reduced from 8 for more responsive dragging
distance: 3, // Small distance to prevent accidental drags
delay: 0, // No delay for immediate activation
tolerance: 5, // Tolerance for small movements
},
}),
useSensor(KeyboardSensor, {
@@ -124,6 +146,28 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
})
);
// PERFORMANCE OPTIMIZATION: Monitor frame rate and enable throttling if needed
useEffect(() => {
const monitorPerformance = () => {
const now = performance.now();
const frameTime = now - frameTimeRef.current;
renderCountRef.current++;
// If frame time is consistently over 16.67ms (60fps), enable throttling
if (frameTime > 20 && renderCountRef.current > 10) {
setShouldThrottle(true);
} else if (frameTime < 12 && renderCountRef.current > 50) {
setShouldThrottle(false);
renderCountRef.current = 0; // Reset counter
}
frameTimeRef.current = now;
};
const interval = setInterval(monitorPerformance, 100);
return () => clearInterval(interval);
}, []);
// Fetch task groups when component mounts or dependencies change
useEffect(() => {
if (projectId && !hasInitialized.current) {
@@ -136,8 +180,10 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
// Memoized calculations - optimized
const totalTasks = useMemo(() => {
return taskGroups.reduce((total, g) => total + g.taskIds.length, 0);
}, [taskGroups]);
const total = taskGroups.reduce((sum, g) => sum + g.taskIds.length, 0);
console.log(`[TASK-LIST-BOARD] Total tasks in groups: ${total}, Total tasks in store: ${tasks.length}, Groups: ${taskGroups.length}`);
return total;
}, [taskGroups, tasks.length]);
const hasAnyTasks = useMemo(() => totalTasks > 0, [totalTasks]);
@@ -177,7 +223,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
[tasks, currentGrouping]
);
// Throttled drag over handler for better performance
// Throttled drag over handler for smoother performance
const handleDragOver = useCallback(
throttle((event: DragOverEvent) => {
const { active, over } = event;
@@ -187,31 +233,31 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
const activeTaskId = active.id as string;
const overContainer = over.id as string;
// Clear any existing timeout
if (dragOverTimeoutRef.current) {
clearTimeout(dragOverTimeoutRef.current);
}
// Optimistic update with throttling
dragOverTimeoutRef.current = setTimeout(() => {
// PERFORMANCE OPTIMIZATION: Immediate response for instant UX
// Only update if we're hovering over a different container
const targetTask = tasks.find(t => t.id === overContainer);
let targetGroupId = overContainer;
if (targetTask) {
if (currentGrouping === 'status') {
// PERFORMANCE OPTIMIZATION: Use switch instead of multiple if statements
switch (currentGrouping) {
case 'status':
targetGroupId = `status-${targetTask.status}`;
} else if (currentGrouping === 'priority') {
break;
case 'priority':
targetGroupId = `priority-${targetTask.priority}`;
} else if (currentGrouping === 'phase') {
break;
case 'phase':
targetGroupId = `phase-${targetTask.phase}`;
break;
}
}
if (targetGroupId !== dragState.activeGroupId) {
// Perform optimistic update for visual feedback
const targetGroup = taskGroups.find(g => g.id === targetGroupId);
if (targetGroup) {
// PERFORMANCE OPTIMIZATION: Use findIndex for better performance
const targetGroupIndex = taskGroups.findIndex(g => g.id === targetGroupId);
if (targetGroupIndex !== -1) {
const targetGroup = taskGroups[targetGroupIndex];
dispatch(
optimisticTaskMove({
taskId: activeTaskId,
@@ -221,8 +267,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
);
}
}
}, 50); // 50ms throttle for drag over events
}, 50),
}, 16), // 60fps throttling for smooth performance
[dragState, tasks, taskGroups, currentGrouping, dispatch]
);
@@ -338,7 +383,6 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
const handleToggleSubtasks = useCallback((taskId: string) => {
// Implementation for toggling subtasks
console.log('Toggle subtasks for task:', taskId);
}, []);
// Memoized DragOverlay content for better performance
@@ -375,7 +419,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
}
return (
<div className={`task-list-board ${className}`} ref={containerRef}>
<div className={`task-list-board ${className} ${themeClass}`} ref={containerRef}>
<DndContext
sensors={sensors}
collisionDetection={closestCorners}
@@ -392,16 +436,22 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
<ImprovedTaskFilters position="list" />
</div>
{/* Virtualized Task Groups Container */}
<div className="task-groups-container">
{/* Performance Analysis - Only show in development */}
{/* {process.env.NODE_ENV === 'development' && (
<PerformanceAnalysis projectId={projectId} />
)} */}
{/* Fixed Height Task Groups Container - Asana Style */}
<div className="task-groups-container-fixed">
<div className="task-groups-scrollable">
{loading ? (
<Card>
<div className="loading-container">
<div className="flex justify-center items-center py-8">
<Spin size="large" />
</div>
</Card>
</div>
) : taskGroups.length === 0 ? (
<Card>
<div className="empty-container">
<Empty
description={
<div style={{ textAlign: 'center' }}>
@@ -415,25 +465,29 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
}
image={Empty.PRESENTED_IMAGE_SIMPLE}
/>
</Card>
</div>
) : (
<div className="virtualized-task-groups">
{taskGroups.map((group, index) => {
// PERFORMANCE OPTIMIZATION: Optimized height calculations
// PERFORMANCE OPTIMIZATION: More aggressive height calculation for better performance
const groupTasks = group.taskIds.length;
const baseHeight = 120; // Header + column headers + add task row
const taskRowsHeight = groupTasks * 40; // 40px per task row
// PERFORMANCE OPTIMIZATION: Dynamic height based on task count and virtualization
const shouldVirtualizeGroup = groupTasks > 20;
const minGroupHeight = shouldVirtualizeGroup ? 200 : 150; // Smaller minimum for non-virtualized
const maxGroupHeight = shouldVirtualizeGroup ? 800 : 400; // Different max based on virtualization
// PERFORMANCE OPTIMIZATION: Enhanced virtualization threshold for better UX
const shouldVirtualizeGroup = groupTasks > 25; // Increased threshold for smoother experience
const minGroupHeight = shouldVirtualizeGroup ? 200 : 120; // Minimum height for virtualized groups
const maxGroupHeight = shouldVirtualizeGroup ? 600 : 1000; // Allow more height for virtualized groups
const calculatedHeight = baseHeight + taskRowsHeight;
const groupHeight = Math.max(
minGroupHeight,
Math.min(calculatedHeight, maxGroupHeight)
);
// PERFORMANCE OPTIMIZATION: Removed group throttling to show all tasks
// Virtualization within each group handles performance for large task lists
// PERFORMANCE OPTIMIZATION: Memoize group rendering
return (
<VirtualizedTaskList
key={group.id}
@@ -447,18 +501,24 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
onToggleSubtasks={handleToggleSubtasks}
height={groupHeight}
width={1200}
tasksById={tasksById}
/>
);
})}
</div>
)}
</div>
</div>
<DragOverlay
adjustScale={false}
dropAnimation={null}
dropAnimation={{
duration: 200,
easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
}}
style={{
cursor: 'grabbing',
zIndex: 9999,
}}
>
{dragOverlayContent}
@@ -466,16 +526,87 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
</DndContext>
<style>{`
.task-groups-container {
max-height: calc(100vh - 300px);
overflow-y: auto;
overflow-x: visible;
padding: 8px 8px 8px 0;
border-radius: 8px;
/* Fixed height container - Asana style */
.task-groups-container-fixed {
height: calc(100vh - 200px); /* Fixed height, adjust based on your header height */
min-height: 400px;
max-height: calc(100vh - 120px);
position: relative;
border: 1px solid var(--task-border-primary, #e8e8e8);
border-radius: 8px;
background: var(--task-bg-primary, white);
overflow: hidden;
/* GPU acceleration for smooth scrolling */
transform: translateZ(0);
will-change: scroll-position;
/* Responsive adjustments */
margin-bottom: 16px;
}
/* Responsive height adjustments */
@media (max-height: 800px) {
.task-groups-container-fixed {
height: calc(100vh - 160px);
min-height: 300px;
}
}
@media (max-height: 600px) {
.task-groups-container-fixed {
height: calc(100vh - 120px);
min-height: 250px;
}
}
@media (min-height: 1200px) {
.task-groups-container-fixed {
height: calc(100vh - 240px);
max-height: none;
}
}
.task-groups-scrollable {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 8px 8px 0;
/* Smooth scrolling */
scroll-behavior: smooth;
/* Custom scrollbar styling */
scrollbar-width: thin;
scrollbar-color: var(--task-border-tertiary, #d9d9d9) transparent;
/* Performance optimizations */
contain: layout style paint;
transform: translateZ(0);
will-change: scroll-position;
}
.task-groups-scrollable::-webkit-scrollbar {
width: 6px;
}
.task-groups-scrollable::-webkit-scrollbar-track {
background: transparent;
}
.task-groups-scrollable::-webkit-scrollbar-thumb {
background-color: var(--task-border-tertiary, #d9d9d9);
border-radius: 3px;
transition: background-color 0.2s ease;
}
.task-groups-scrollable::-webkit-scrollbar-thumb:hover {
background-color: var(--task-border-primary, #e8e8e8);
}
/* Loading and empty state containers */
.loading-container,
.empty-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 300px;
}
.virtualized-task-groups {
@@ -506,7 +637,7 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
.task-group-header-row {
display: inline-flex;
height: auto;
height: inherit;
max-height: none;
overflow: hidden;
}
@@ -568,37 +699,76 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
transition: color 0.3s ease;
}
/* Add task row styles */
/* Add task row styles - Fixed width responsive design */
.task-group-add-task {
background: var(--task-bg-primary, white);
border-top: 1px solid var(--task-border-secondary, #f0f0f0);
transition: all 0.3s ease;
padding: 0 12px;
width: 100%;
max-width: 500px; /* Fixed maximum width */
min-width: 300px; /* Minimum width for mobile */
min-height: 40px;
display: flex;
align-items: center;
border-radius: 0 0 6px 6px;
margin-left: 0;
position: relative;
}
.task-group-add-task:hover {
background: var(--task-hover-bg, #fafafa);
transform: translateX(2px);
}
/* Responsive adjustments for add task row */
@media (max-width: 768px) {
.task-group-add-task {
max-width: 400px;
min-width: 280px;
}
}
@media (max-width: 480px) {
.task-group-add-task {
max-width: calc(100vw - 40px);
min-width: 250px;
}
}
@media (min-width: 1200px) {
.task-group-add-task {
max-width: 600px;
}
}
.task-table-fixed-columns {
display: flex;
background: var(--task-bg-secondary, #f5f5f5);
position: sticky;
left: 0;
z-index: 11;
border-right: 2px solid var(--task-border-primary, #e8e8e8);
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
/* Background will be set inline to match theme */
}
/* Ensure task rows have proper overflow handling */
.task-row-container {
display: flex;
width: 100%;
min-width: fit-content;
}
.task-row {
display: flex;
width: 100%;
min-width: fit-content;
}
.task-table-scrollable-columns {
display: flex;
flex: 1;
min-width: 0;
overflow: visible;
}
.task-table-cell {
@@ -641,6 +811,43 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
will-change: transform;
}
/* Simplified drag overlay styles */
.drag-overlay-simplified {
position: relative;
z-index: 9999;
pointer-events: none;
transform: translateZ(0);
will-change: transform;
user-select: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
animation: dragOverlayEntrance 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dragOverlayEntrance {
0% {
transform: scale(0.95) translateZ(0);
opacity: 0.8;
}
100% {
transform: scale(1.02) translateZ(0);
opacity: 1;
}
}
.drag-overlay-simplified:hover {
/* Disable hover effects during drag */
background-color: inherit !important;
}
/* Smooth drag handle animation */
.drag-handle-icon {
transition: transform 0.1s ease-out;
}
.task-title-drag {
transition: color 0.1s ease-out;
}
/* Ensure drag overlay follows cursor properly */
[data-dnd-context] {
position: relative;
@@ -683,8 +890,10 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
--task-drag-over-border: #40a9ff;
}
.dark .task-groups-container,
[data-theme="dark"] .task-groups-container {
.dark .task-groups-container-fixed,
[data-theme="dark"] .task-groups-container-fixed,
.dark .task-groups-scrollable,
[data-theme="dark"] .task-groups-scrollable {
--task-bg-primary: #1f1f1f;
--task-bg-secondary: #141414;
--task-bg-tertiary: #262626;
@@ -702,6 +911,17 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
--task-drag-over-border: #40a9ff;
}
/* Dark mode scrollbar */
.dark .task-groups-scrollable::-webkit-scrollbar-thumb,
[data-theme="dark"] .task-groups-scrollable::-webkit-scrollbar-thumb {
background-color: #505050;
}
.dark .task-groups-scrollable::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .task-groups-scrollable::-webkit-scrollbar-thumb:hover {
background-color: #606060;
}
/* Dark mode empty state */
.dark .empty-tasks-container .ant-empty-description,
[data-theme="dark"] .empty-tasks-container .ant-empty-description {
@@ -720,6 +940,20 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
.task-row {
contain: layout style;
/* GPU acceleration for smooth scrolling */
transform: translateZ(0);
will-change: transform;
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.task-row.is-dragging {
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Smooth hover effects */
.task-row:hover:not(.is-dragging) {
transform: translateZ(0) translateY(-1px);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reduce layout thrashing */
@@ -727,6 +961,33 @@ const TaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, className = ''
contain: layout;
}
/* Optimize progressive component loading */
.progressive-component-placeholder {
contain: layout style paint;
transform: translateZ(0);
}
/* Shimmer animation optimization */
@keyframes shimmer {
0% {
background-position: -200px 0;
transform: translateX(-100%);
}
100% {
background-position: calc(200px + 100%) 0;
transform: translateX(100%);
}
}
/* Optimize shimmer performance */
.shimmer-element {
background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.2) 50%, transparent 75%);
background-size: 200px 100%;
animation: shimmer 1.5s infinite linear;
transform: translateZ(0);
will-change: background-position;
}
/* React Window specific optimizations */
.react-window-list {
outline: none;

180
worklenz-frontend/src/components/task-management/task-row-optimized.css
View File

@@ -2,42 +2,56 @@
.task-row-optimized {
contain: layout style;
will-change: transform;
transform: translateZ(0); /* Force GPU acceleration */
/* Remove conflicting will-change and transform */
transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
background: var(--task-bg-primary, #fff);
color: var(--task-text-primary, #262626);
border-color: var(--task-border-primary, #e8e8e8);
}
/* HOVER STATE FIX: Ensure hover states reset properly */
.task-row-optimized:not(:hover) {
/* Force reset of any stuck hover states */
contain: layout style;
/* SIMPLIFIED HOVER STATE: Remove complex containment and transforms */
.task-row-optimized:hover {
/* Remove transform that was causing GPU conflicts */
/* Remove complex containment rules */
}
.task-row-optimized:not(:hover) .task-open-button {
opacity: 0 !important;
visibility: hidden;
/* OPTIMIZED HOVER BUTTONS: Use opacity only, no visibility changes */
.task-open-button {
opacity: 0;
transition: opacity 0.15s ease-out;
/* Remove will-change to prevent GPU conflicts */
}
.task-row-optimized:not(:hover) .expand-icon-container.hover-only {
opacity: 0 !important;
visibility: hidden;
}
/* Force visibility on hover */
.task-row-optimized:hover .task-open-button {
visibility: visible;
opacity: 1;
}
/* OPTIMIZED EXPAND ICON: Simplified hover behavior */
.expand-icon-container.hover-only {
opacity: 0;
transition: opacity 0.15s ease-out;
}
.task-row-optimized:hover .expand-icon-container.hover-only {
visibility: visible;
opacity: 1;
}
.task-row-optimized:hover {
contain: layout style;
/* Don't use paint containment on hover as it can interfere with hover effects */
/* Force repaint to ensure hover states update properly */
transform: translateZ(0.001px);
/* REMOVE COMPLEX CONTAINMENT RULES that were causing layout thrashing */
.task-row-optimized:not(:hover) {
/* Remove forced containment and transforms */
}
.task-row-optimized:not(:hover) .task-open-button {
opacity: 0;
/* Remove !important and visibility changes */
}
.task-row-optimized:not(:hover) .expand-icon-container.hover-only {
opacity: 0;
/* Remove !important and visibility changes */
}
/* DRAG STATE: Simplified */
.task-row-optimized.task-row-dragging {
contain: layout;
will-change: transform;
@@ -61,23 +75,21 @@
.task-row-optimized.fully-loaded {
contain: layout style;
will-change: transform;
/* Remove will-change: transform to prevent conflicts */
}
/* REAL-TIME UPDATES: Prevent flickering during socket updates */
/* REAL-TIME UPDATES: Simplified stable content */
.task-row-optimized.stable-content {
contain: layout style;
will-change: transform;
/* Prevent content from disappearing during real-time updates */
/* Remove will-change to prevent GPU conflicts */
min-height: 40px;
/* Keep transitions for hover states but disable for layout changes */
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
/* Simplified transitions */
transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.task-row-optimized.stable-content * {
contain: layout;
will-change: auto;
/* Don't force opacity - let hover states work naturally */
/* Remove will-change to prevent conflicts */
}
/* Optimize initial render performance */
@@ -184,11 +196,14 @@
/* Dark mode optimizations */
.dark .task-row-optimized {
contain: layout style;
background: var(--task-bg-primary, #1f1f1f);
color: var(--task-text-primary, #fff);
border-color: var(--task-border-primary, #303030);
}
.dark .task-row-optimized:hover {
contain: layout style;
/* Don't use paint containment on hover as it can interfere with hover effects */
/* Remove complex containment rules */
}
/* Animation performance */
@@ -220,21 +235,20 @@
contain: strict;
}
/* PERFORMANCE OPTIMIZATION: GPU acceleration for better scrolling */
/* PERFORMANCE OPTIMIZATION: Simplified GPU acceleration */
.task-row-optimized {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/* Remove transform-style to prevent conflicts */
}
/* Optimize rendering layers */
.task-row-optimized.initial-load {
transform: translate3d(0, 0, 0);
/* Remove transform to prevent conflicts */
}
.task-row-optimized.fully-loaded {
transform: translate3d(0, 0, 0);
/* Remove transform to prevent conflicts */
}
/* Performance debugging */
@@ -282,29 +296,19 @@
box-sizing: border-box;
}
/* Task row hover effects for better performance */
/* SIMPLIFIED TASK ROW HOVER EFFECTS */
.task-cell-container:hover .task-open-button {
opacity: 1 !important;
opacity: 1;
}
.task-cell-container:not(:hover) .task-open-button {
opacity: 0 !important;
}
.task-open-button {
opacity: 0;
transition: opacity 0.2s ease-in-out;
/* Force hardware acceleration for smoother transitions */
transform: translateZ(0);
will-change: opacity;
}
/* Expand icon smart visibility */
/* Expand icon smart visibility - simplified */
.expand-icon-container {
transition: opacity 0.2s ease-in-out;
/* Force hardware acceleration for smoother transitions */
transform: translateZ(0);
will-change: opacity;
transition: opacity 0.15s ease-out;
/* Remove transform and will-change to prevent conflicts */
}
/* Always show expand icon if task has subtasks */
@@ -314,7 +318,7 @@
.expand-icon-container.has-subtasks .expand-toggle-btn {
opacity: 0.8;
transition: opacity 0.2s ease-in-out;
transition: opacity 0.15s ease-out;
}
.task-cell-container:hover .expand-icon-container.has-subtasks .expand-toggle-btn {
@@ -340,7 +344,7 @@
.expand-icon-container.hover-only .expand-toggle-btn {
opacity: 0.6;
transition: opacity 0.2s ease-in-out;
transition: opacity 0.15s ease-out;
}
.task-cell-container:hover .expand-icon-container.hover-only .expand-toggle-btn {
@@ -394,7 +398,7 @@
/* Task indicators hover effects */
.task-indicators .indicator-badge {
transition: all 0.2s ease-in-out;
transition: all 0.15s ease-out;
}
.task-indicators .indicator-badge:hover {
@@ -407,7 +411,7 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* HOVER STATE DEBUGGING: Force hover state reset on mouse leave */
/* SIMPLIFIED HOVER STATE MANAGEMENT */
.task-row-optimized {
/* Ensure proper hover state management */
pointer-events: auto;
@@ -418,11 +422,71 @@
pointer-events: inherit;
}
/* Force browser to recalculate hover states */
/* Remove complex hover state forcing */
@supports (contain: layout) {
.task-row-optimized:not(:hover) {
contain: layout;
/* Force style recalculation */
animation: none;
/* Remove animation forcing */
}
}
.task-row-optimized.selected {
background: var(--task-selected-bg, #e6f7ff) !important;
border-left-color: var(--task-selected-border, #1890ff);
}
.task-row-optimized.drag-overlay {
background: var(--task-bg-primary, #fff);
color: var(--task-text-primary, #262626);
border: 1px solid var(--task-border-primary, #e8e8e8);
border-radius: 6px;
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
z-index: 1000;
opacity: 0.95;
}
/* Dark mode support */
.dark .task-row-optimized.selected,
[data-theme="dark"] .task-row-optimized.selected {
background: var(--task-selected-bg, #1a2332) !important;
border-left-color: var(--task-selected-border, #1890ff);
}
.dark .task-row-optimized.drag-overlay,
[data-theme="dark"] .task-row-optimized.drag-overlay {
background: var(--task-bg-primary, #1f1f1f);
color: var(--task-text-primary, #fff);
border: 1px solid var(--task-border-primary, #303030);
box-shadow: 0 6px 16px rgba(0,0,0,0.32);
}
.task-row-optimized.is-dragging {
border: 3px solid #1890ff !important;
box-shadow: 0 0 24px 4px #1890ff, 0 6px 16px rgba(0,0,0,0.18);
opacity: 0.85 !important;
background: var(--task-bg-primary, #fff) !important;
z-index: 2000 !important;
transition: none !important;
}
.dark .task-row-optimized.is-dragging,
[data-theme="dark"] .task-row-optimized.is-dragging {
border: 3px solid #40a9ff !important;
box-shadow: 0 0 24px 4px #40a9ff, 0 6px 16px rgba(0,0,0,0.38);
background: var(--task-bg-primary, #1f1f1f) !important;
}
.task-row-optimized.drag-overlay {
border: 3px dashed #ff4d4f !important;
box-shadow: 0 0 32px 8px #ff4d4f, 0 6px 16px rgba(0,0,0,0.22);
background: #fffbe6 !important;
opacity: 0.95 !important;
z-index: 3000 !important;
}
.dark .task-row-optimized.drag-overlay,
[data-theme="dark"] .task-row-optimized.drag-overlay {
border: 3px dashed #ff7875 !important;
box-shadow: 0 0 32px 8px #ff7875, 0 6px 16px rgba(0,0,0,0.42);
background: #2a2a2a !important;
}

2
worklenz-frontend/src/components/task-management/task-row-utils.ts
View File

@@ -4,7 +4,7 @@ import { dayjs } from './antd-imports';
// Performance constants
export const PERFORMANCE_CONSTANTS = {
CACHE_CLEAR_INTERVAL: 300000, // 5 minutes
VIRTUALIZATION_THRESHOLD: 50,
VIRTUALIZATION_THRESHOLD: 25, // Updated to match main virtualization threshold
DRAG_THROTTLE_MS: 50,
RENDER_TIMEOUT_MS: 16, // 60fps target
MAX_CACHE_SIZE: 1000,

559
worklenz-frontend/src/components/task-management/task-row.tsx
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
import React, { useMemo, useCallback, useState, useRef, useEffect, lazy } from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { useSelector } from 'react-redux';
@@ -38,6 +38,7 @@ import {
import './task-row-optimized.css';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { setSelectedTaskId, setShowTaskDrawer, fetchTask } from '@/features/task-drawer/task-drawer.slice';
import useDragCursor from '@/hooks/useDragCursor';
interface TaskRowProps {
task: Task;
@@ -68,17 +69,22 @@ const STATUS_COLORS = {
done: '#52c41a',
} as const;
// Memoized sub-components for better performance
// Memoized sub-components for maximum performance
const DragHandle = React.memo<{ isDarkMode: boolean; attributes: any; listeners: any }>(({ isDarkMode, attributes, listeners }) => (
<Button
variant="text"
size="small"
icon={<HolderOutlined />}
className="opacity-40 hover:opacity-100 cursor-grab active:cursor-grabbing"
isDarkMode={isDarkMode}
<div
className="drag-handle-optimized flex items-center justify-center w-6 h-6 opacity-60 hover:opacity-100"
style={{
transition: 'opacity 0.1s ease', // Faster transition
}}
data-dnd-drag-handle="true"
{...attributes}
{...listeners}
>
<HolderOutlined
className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
style={{ pointerEvents: 'none' }} // Prevent icon from interfering
/>
</div>
));
const TaskKey = React.memo<{ taskKey: string; isDarkMode: boolean }>(({ taskKey, isDarkMode }) => (
@@ -164,6 +170,192 @@ const TaskReporter = React.memo<{ reporter?: string; isDarkMode: boolean }>(({ r
</div>
));
// PERFORMANCE OPTIMIZATION: Lightweight placeholder components for better performance
const AssigneePlaceholder = React.memo<{ isDarkMode: boolean; memberCount?: number }>(({ isDarkMode, memberCount = 0 }) => (
<div className="flex items-center gap-1">
{memberCount > 0 ? (
<div className="flex -space-x-1">
{Array.from({ length: Math.min(memberCount, 3) }).map((_, i) => (
<div
key={i}
className={`w-6 h-6 rounded-full border-2 ${
isDarkMode ? 'bg-gray-600 border-gray-700' : 'bg-gray-200 border-gray-300'
}`}
style={{ zIndex: 3 - i }}
/>
))}
{memberCount > 3 && (
<div
className={`w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-medium ${
isDarkMode
? 'bg-gray-600 border-gray-700 text-gray-300'
: 'bg-gray-200 border-gray-300 text-gray-600'
}`}
style={{ zIndex: 0 }}
>
+{memberCount - 3}
</div>
)}
</div>
) : (
<div className={`w-6 h-6 rounded-full ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
)}
<div className={`w-4 h-4 rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
</div>
));
const StatusPlaceholder = React.memo<{ status?: string; isDarkMode: boolean }>(({ status, isDarkMode }) => (
<div
className={`px-2 py-1 text-xs rounded-full min-w-16 h-6 flex items-center justify-center ${
isDarkMode ? 'bg-gray-600 text-gray-300' : 'bg-gray-200 text-gray-600'
}`}
>
{status || '...'}
</div>
));
const PriorityPlaceholder = React.memo<{ priority?: string; isDarkMode: boolean }>(({ priority, isDarkMode }) => (
<div className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${isDarkMode ? 'bg-gray-500' : 'bg-gray-300'}`} />
<span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
{priority || '...'}
</span>
</div>
));
const PhasePlaceholder = React.memo<{ phase?: string; isDarkMode: boolean }>(({ phase, isDarkMode }) => (
<div
className={`px-2 py-1 text-xs rounded min-w-16 h-6 flex items-center justify-center ${
isDarkMode ? 'bg-gray-600 text-gray-300' : 'bg-gray-200 text-gray-600'
}`}
>
{phase || '...'}
</div>
));
const LabelsPlaceholder = React.memo<{ labelCount?: number; isDarkMode: boolean }>(({ labelCount = 0, isDarkMode }) => (
<div className="flex items-center gap-1 flex-wrap">
{labelCount > 0 ? (
Array.from({ length: Math.min(labelCount, 3) }).map((_, i) => (
<div
key={i}
className={`px-2 py-0.5 text-xs rounded-full ${
isDarkMode ? 'bg-gray-600 text-gray-300' : 'bg-gray-200 text-gray-600'
}`}
style={{
width: `${40 + Math.random() * 30}px`,
height: '20px'
}}
/>
))
) : (
<div className={`w-4 h-4 rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`} />
)}
</div>
));
// PERFORMANCE OPTIMIZATION: Simplified placeholders without animations under memory pressure
const SimplePlaceholder = React.memo<{ width: number; height: number; isDarkMode: boolean }>(({ width, height, isDarkMode }) => (
<div
className={`rounded ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'}`}
style={{ width, height }}
/>
));
// Lazy-loaded components with Suspense fallbacks
const LazyAssigneeSelector = React.lazy(() =>
import('./lazy-assignee-selector').then(module => ({ default: module.default }))
);
const LazyTaskStatusDropdown = React.lazy(() =>
import('./task-status-dropdown').then(module => ({ default: module.default }))
);
const LazyTaskPriorityDropdown = React.lazy(() =>
import('./task-priority-dropdown').then(module => ({ default: module.default }))
);
const LazyTaskPhaseDropdown = React.lazy(() =>
import('./task-phase-dropdown').then(module => ({ default: module.default }))
);
const LazyLabelsSelector = React.lazy(() =>
import('@/components/LabelsSelector').then(module => ({ default: module.default }))
);
// Enhanced component wrapper with progressive loading
const ProgressiveComponent = React.memo<{
isLoaded: boolean;
placeholder: React.ReactNode;
children: React.ReactNode;
fallback?: React.ReactNode;
}>(({ isLoaded, placeholder, children, fallback }) => {
if (!isLoaded) {
return <>{placeholder}</>;
}
return (
<React.Suspense fallback={fallback || placeholder}>
{children}
</React.Suspense>
);
});
// PERFORMANCE OPTIMIZATION: Frame-rate aware rendering hooks
const useFrameRateOptimizedLoading = (index?: number) => {
const [canRender, setCanRender] = useState((index !== undefined && index < 3) || false);
const renderRequestRef = useRef<number | undefined>(undefined);
useEffect(() => {
if (index === undefined || canRender) return;
// Use requestIdleCallback for non-critical rendering
const scheduleRender = () => {
if ('requestIdleCallback' in window) {
(window as any).requestIdleCallback(() => {
setCanRender(true);
}, { timeout: 100 });
} else {
// Fallback for browsers without requestIdleCallback
setTimeout(() => setCanRender(true), 50);
}
};
renderRequestRef.current = requestAnimationFrame(scheduleRender);
return () => {
if (renderRequestRef.current) {
cancelAnimationFrame(renderRequestRef.current);
}
};
}, [index, canRender]);
return canRender;
};
// PERFORMANCE OPTIMIZATION: Memory pressure detection
const useMemoryPressure = () => {
const [isUnderPressure, setIsUnderPressure] = useState(false);
useEffect(() => {
if (!('memory' in performance)) return;
const checkMemory = () => {
const memory = (performance as any).memory;
if (memory) {
const usedRatio = memory.usedJSHeapSize / memory.jsHeapSizeLimit;
setIsUnderPressure(usedRatio > 0.6); // Conservative threshold
}
};
checkMemory();
const interval = setInterval(checkMemory, 2000);
return () => clearInterval(interval);
}, []);
return isUnderPressure;
};
const TaskRow: React.FC<TaskRowProps> = React.memo(({
task,
projectId,
@@ -178,12 +370,18 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
fixedColumns,
scrollableColumns,
}) => {
// PERFORMANCE OPTIMIZATION: Implement progressive loading
// Immediately load first few tasks to prevent blank content for visible items
const [isFullyLoaded, setIsFullyLoaded] = useState((index !== undefined && index < 10) || false);
// PERFORMANCE OPTIMIZATION: Frame-rate aware loading
const canRenderComplex = useFrameRateOptimizedLoading(index);
const isMemoryPressured = useMemoryPressure();
// PERFORMANCE OPTIMIZATION: More aggressive performance - only load first 2 immediately
const [isFullyLoaded, setIsFullyLoaded] = useState((index !== undefined && index < 2) || false);
const [isIntersecting, setIsIntersecting] = useState(false);
const rowRef = useRef<HTMLDivElement>(null);
const hasBeenFullyLoadedOnce = useRef((index !== undefined && index < 10) || false); // Track if we've ever been fully loaded
const hasBeenFullyLoadedOnce = useRef((index !== undefined && index < 2) || false);
// PERFORMANCE OPTIMIZATION: Conditional component loading based on memory pressure
const [shouldShowComponents, setShouldShowComponents] = useState((index !== undefined && index < 2) || false);
// PERFORMANCE OPTIMIZATION: Only connect to socket after component is visible
const { socket, connected } = useSocket();
@@ -210,19 +408,20 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
const [entry] = entries;
if (entry.isIntersecting && !isIntersecting && !hasBeenFullyLoadedOnce.current) {
setIsIntersecting(true);
// Delay full loading slightly to prioritize visible content
const timeoutId = setTimeout(() => {
// Immediate loading when intersecting - no delay
setIsFullyLoaded(true);
hasBeenFullyLoadedOnce.current = true; // Mark as fully loaded once
}, 50);
return () => clearTimeout(timeoutId);
// Add a tiny delay for component loading to prevent browser freeze
setTimeout(() => {
setShouldShowComponents(true);
}, 8); // Half frame delay for even more responsive experience
}
},
{
root: null,
rootMargin: '100px', // Start loading 100px before coming into view
threshold: 0.1,
rootMargin: '200px', // Increased to load components earlier before they're visible
threshold: 0, // Load as soon as any part enters the extended viewport
}
);
@@ -235,7 +434,14 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
// PERFORMANCE OPTIMIZATION: Skip expensive operations during initial render
// Once fully loaded, always render full to prevent blanking during real-time updates
const shouldRenderFull = isFullyLoaded || hasBeenFullyLoadedOnce.current || isDragOverlay || editTaskName;
const shouldRenderFull = (isFullyLoaded && shouldShowComponents) || hasBeenFullyLoadedOnce.current || isDragOverlay || editTaskName;
// PERFORMANCE OPTIMIZATION: Minimal initial render for non-visible tasks
// Only render essential columns during initial load to reduce DOM nodes
const shouldRenderMinimal = !shouldRenderFull && !isDragOverlay;
// DRAG OVERLAY: When dragging, show only task name for cleaner experience
const shouldRenderDragOverlay = isDragOverlay;
// REAL-TIME UPDATES: Ensure content stays loaded during socket updates
useEffect(() => {
@@ -244,7 +450,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
}
}, [shouldRenderFull]);
// Optimized drag and drop setup with better performance
// Optimized drag and drop setup with maximum performance
const {
attributes,
listeners,
@@ -260,8 +466,9 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
groupId,
},
disabled: isDragOverlay || !shouldRenderFull, // Disable drag until fully loaded
// Optimize animation performance
animateLayoutChanges: () => false, // Disable layout animations for better performance
// PERFORMANCE OPTIMIZATION: Disable all animations for maximum performance
animateLayoutChanges: () => false, // Disable layout animations
transition: null, // Disable transitions
});
// Get theme from Redux store - memoized selector
@@ -270,6 +477,22 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
// Translation hook
const { t } = useTranslation('task-management');
// Optimized task name save handler
const handleTaskNameSave = useCallback(() => {
const newTaskName = taskName?.trim();
if (newTaskName && connected && newTaskName !== task.title) {
socket?.emit(
SocketEvents.TASK_NAME_CHANGE.toString(),
JSON.stringify({
task_id: task.id,
name: newTaskName,
parent_task: null,
})
);
}
setEditTaskName(false);
}, [connected, socket, task.id, task.title, taskName]);
// PERFORMANCE OPTIMIZATION: Only setup click outside detection when editing
useEffect(() => {
if (!editTaskName || !shouldRenderFull) return;
@@ -286,23 +509,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [editTaskName, shouldRenderFull]);
// Optimized task name save handler
const handleTaskNameSave = useCallback(() => {
const newTaskName = taskName?.trim();
if (newTaskName && connected && newTaskName !== task.title) {
socket?.emit(
SocketEvents.TASK_NAME_CHANGE.toString(),
JSON.stringify({
task_id: task.id,
name: newTaskName,
parent_task: null,
})
);
}
setEditTaskName(false);
}, [connected, socket, task.id, task.title, taskName]);
}, [editTaskName, shouldRenderFull, handleTaskNameSave]);
// Handle adding new subtask
const handleAddSubtask = useCallback(() => {
@@ -327,19 +534,20 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
setShowAddSubtask(false);
}, []);
// Optimized style calculations with better memoization
// Optimized style calculations with maximum performance
const dragStyle = useMemo(() => {
if (!isDragging && !transform) return {};
return {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
transition: isDragging ? 'opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)' : 'none',
opacity: isDragging ? 0.3 : 1,
zIndex: isDragging ? 1000 : 'auto',
// Add GPU acceleration for better performance
willChange: isDragging ? 'transform' : 'auto',
// PERFORMANCE OPTIMIZATION: Force GPU acceleration
willChange: 'transform, opacity',
filter: isDragging ? 'blur(0.5px)' : 'none',
};
}, [transform, transition, isDragging]);
}, [transform, isDragging]);
// Memoized event handlers with better dependency tracking
const handleSelectChange = useCallback((checked: boolean) => {
@@ -397,7 +605,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
// Optimized class name calculations with better memoization
const styleClasses = useMemo(() => {
const base = 'border-b transition-all duration-200'; // Reduced duration for better performance
const base = 'border-b transition-all duration-150'; // Reduced duration for better performance
const theme = isDarkMode
? 'border-gray-600 hover:bg-gray-800'
: 'border-gray-300 hover:bg-gray-50';
@@ -411,7 +619,7 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
return {
container: `${base} ${theme} ${background} ${selected} ${overlay}`,
taskName: `text-sm font-medium flex-1 overflow-hidden text-ellipsis whitespace-nowrap transition-colors duration-200 cursor-pointer ${
taskName: `text-sm font-medium flex-1 overflow-hidden text-ellipsis whitespace-nowrap transition-colors duration-150 cursor-pointer ${
isDarkMode ? 'text-gray-100 hover:text-blue-400' : 'text-gray-900 hover:text-blue-600'
} ${task.progress === 100 ? `line-through ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}` : ''}`,
};
@@ -423,16 +631,14 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
assignee: createAssigneeAdapter(task),
}), [task]);
// PERFORMANCE OPTIMIZATION: Simplified column rendering for initial load
const renderColumnSimple = useCallback((col: { key: string; width: number }, isFixed: boolean, index: number, totalColumns: number) => {
// Fix border logic: if this is a fixed column, only consider it "last" if there are no scrollable columns
// If this is a scrollable column, use the normal logic
// PERFORMANCE OPTIMIZATION: Minimal column rendering for initial load
const renderMinimalColumn = useCallback((col: { key: string; width: number }, isFixed: boolean, index: number, totalColumns: number) => {
const isActuallyLast = isFixed
? (index === totalColumns - 1 && (!scrollableColumns || scrollableColumns.length === 0))
: (index === totalColumns - 1);
const borderClasses = `${isActuallyLast ? '' : 'border-r'} border-b ${isDarkMode ? 'border-gray-600' : 'border-gray-300'}`;
// Only render essential columns during initial load
// Only render essential columns during minimal load
switch (col.key) {
case 'drag':
return (
@@ -464,6 +670,8 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
<div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className="flex-1 min-w-0 flex flex-col justify-center h-full overflow-hidden">
<div className="flex items-center gap-2 h-5 overflow-hidden">
{/* Always reserve space for expand icon */}
<div style={{ width: 20, display: 'inline-block' }} />
<div className="flex-1 min-w-0">
<Typography.Text
ellipsis={{ tooltip: task.title }}
@@ -477,57 +685,21 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
</div>
);
case 'status':
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className={`px-2 py-1 text-xs rounded ${isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-600'}`}>
{task.status || 'Todo'}
</div>
</div>
);
case 'progress':
return (
<div key={col.key} className={`flex items-center justify-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
{task.progress || 0}%
</div>
</div>
);
case 'priority':
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className={`px-2 py-1 text-xs rounded ${isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-600'}`}>
{task.priority || 'Medium'}
</div>
</div>
);
case 'phase':
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className={`px-2 py-1 text-xs rounded ${isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-600'}`}>
{task.phase || 'No Phase'}
</div>
</div>
);
default:
// For non-essential columns, show placeholder during initial load
// For non-essential columns, show minimal placeholder
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className={`w-8 h-3 rounded ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'} animate-pulse`}></div>
<div className={`w-6 h-3 rounded ${isDarkMode ? 'bg-gray-700' : 'bg-gray-200'}`}></div>
</div>
);
}
}, [isDarkMode, task, isSelected, handleSelectChange, styleClasses]);
}, [isDarkMode, task, isSelected, handleSelectChange, styleClasses, scrollableColumns]);
// Optimized column rendering with better performance
const renderColumn = useCallback((col: { key: string; width: number }, isFixed: boolean, index: number, totalColumns: number) => {
// Use simplified rendering for initial load
if (!shouldRenderFull) {
return renderColumnSimple(col, isFixed, index, totalColumns);
return renderMinimalColumn(col, isFixed, index, totalColumns);
}
// Full rendering logic (existing code)
@@ -740,6 +912,22 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
case 'members':
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses} overflow-visible`} style={{ width: col.width }}>
<div className="flex items-center gap-2 overflow-visible">
<ProgressiveComponent
isLoaded={shouldRenderFull}
placeholder={
<AssigneePlaceholder
isDarkMode={isDarkMode}
memberCount={task.assignee_names?.length || 0}
/>
}
fallback={
<AssigneePlaceholder
isDarkMode={isDarkMode}
memberCount={task.assignee_names?.length || 0}
/>
}
>
<div className="flex items-center gap-2 overflow-visible">
{task.assignee_names && task.assignee_names.length > 0 && (
<AvatarGroup
@@ -749,12 +937,14 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
isDarkMode={isDarkMode}
/>
)}
<AssigneeSelector
<LazyAssigneeSelector
task={adapters.assignee}
groupId={groupId}
isDarkMode={isDarkMode}
/>
</div>
</ProgressiveComponent>
</div>
</div>
);
@@ -762,6 +952,22 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
return (
<div key={col.key} className={`max-w-[200px] flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
<div className="flex items-center gap-1 flex-wrap h-full w-full overflow-visible relative">
<ProgressiveComponent
isLoaded={shouldRenderFull}
placeholder={
<LabelsPlaceholder
labelCount={task.labels?.length || 0}
isDarkMode={isDarkMode}
/>
}
fallback={
<LabelsPlaceholder
labelCount={task.labels?.length || 0}
isDarkMode={isDarkMode}
/>
}
>
<>
{task.labels?.map((label, index) => (
label.end && label.names && label.name ? (
<CustomNumberLabel
@@ -778,10 +984,12 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
/>
)
))}
<LabelsSelector
<LazyLabelsSelector
task={adapters.labels}
isDarkMode={isDarkMode}
/>
</>
</ProgressiveComponent>
</div>
</div>
);
@@ -790,11 +998,27 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses} overflow-visible`} style={{ width: col.width, minWidth: col.width }}>
<div className="w-full">
<TaskPhaseDropdown
<ProgressiveComponent
isLoaded={shouldRenderFull}
placeholder={
<PhasePlaceholder
phase={task.phase}
isDarkMode={isDarkMode}
/>
}
fallback={
<PhasePlaceholder
phase={task.phase}
isDarkMode={isDarkMode}
/>
}
>
<LazyTaskPhaseDropdown
task={task}
projectId={projectId}
isDarkMode={isDarkMode}
/>
</ProgressiveComponent>
</div>
</div>
);
@@ -803,11 +1027,27 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses} overflow-visible`} style={{ width: col.width, minWidth: col.width }}>
<div className="w-full">
<TaskStatusDropdown
<ProgressiveComponent
isLoaded={shouldRenderFull}
placeholder={
<StatusPlaceholder
status={task.status}
isDarkMode={isDarkMode}
/>
}
fallback={
<StatusPlaceholder
status={task.status}
isDarkMode={isDarkMode}
/>
}
>
<LazyTaskStatusDropdown
task={task}
projectId={projectId}
isDarkMode={isDarkMode}
/>
</ProgressiveComponent>
</div>
</div>
);
@@ -816,11 +1056,27 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
return (
<div key={col.key} className={`flex items-center px-2 ${borderClasses} overflow-visible`} style={{ width: col.width, minWidth: col.width }}>
<div className="w-full">
<TaskPriorityDropdown
<ProgressiveComponent
isLoaded={shouldRenderFull}
placeholder={
<PriorityPlaceholder
priority={task.priority}
isDarkMode={isDarkMode}
/>
}
fallback={
<PriorityPlaceholder
priority={task.priority}
isDarkMode={isDarkMode}
/>
}
>
<LazyTaskPriorityDropdown
task={task}
projectId={projectId}
isDarkMode={isDarkMode}
/>
</ProgressiveComponent>
</div>
</div>
);
@@ -914,11 +1170,73 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
return null;
}
}, [
shouldRenderFull, renderColumnSimple, isDarkMode, task, isSelected, editTaskName, taskName, adapters, groupId, projectId,
shouldRenderFull, renderMinimalColumn, isDarkMode, task, isSelected, editTaskName, taskName, adapters, groupId, projectId,
attributes, listeners, handleSelectChange, handleTaskNameSave, handleDateChange,
dateValues, styleClasses
]);
// Apply global cursor style when dragging
useDragCursor(isDragging);
// Compute theme class
const themeClass = isDarkMode ? 'dark' : '';
if (isDragging) {
console.log('TaskRow isDragging:', task.id);
}
// DRAG OVERLAY: Render simplified version when dragging
if (isDragOverlay) {
return (
<div
className={`drag-overlay-simplified ${themeClass}`}
style={{
padding: '10px 16px',
backgroundColor: isDarkMode ? 'rgba(42, 42, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)',
border: `1px solid ${isDarkMode ? 'rgba(74, 158, 255, 0.8)' : 'rgba(24, 144, 255, 0.8)'}`,
borderRadius: '8px',
boxShadow: isDarkMode
? '0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(74, 158, 255, 0.2)'
: '0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(24, 144, 255, 0.15)',
backdropFilter: 'blur(8px)',
maxWidth: '320px',
minWidth: '200px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
transform: 'scale(1.02)',
transition: 'none',
willChange: 'transform',
}}
>
<div className="flex items-center gap-3">
<div
className={`drag-handle-icon ${isDarkMode ? 'text-blue-400' : 'text-blue-600'}`}
style={{
fontSize: '14px',
opacity: 0.8,
transform: 'translateZ(0)',
}}
>
<HolderOutlined />
</div>
<span
className={`task-title-drag ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}
title={task.title}
style={{
fontSize: '14px',
fontWeight: 500,
letterSpacing: '0.01em',
lineHeight: '1.4',
}}
>
{task.title}
</span>
</div>
</div>
);
}
return (
<div
ref={(node) => {
@@ -926,32 +1244,50 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
rowRef.current = node;
}}
style={dragStyle}
className={`${styleClasses.container} task-row-optimized ${shouldRenderFull ? 'fully-loaded' : 'initial-load'} ${hasBeenFullyLoadedOnce.current ? 'stable-content' : ''}`}
className={`task-row task-row-optimized ${themeClass} ${isSelected ? 'selected' : ''} ${isDragOverlay ? 'drag-overlay' : ''} ${isDragging ? 'is-dragging' : ''}`}
data-dnd-draggable="true"
data-dnd-dragging={isDragging ? 'true' : 'false'}
data-task-id={task.id}
data-group-id={groupId}
>
<div className="flex h-10 max-h-10 overflow-visible relative">
{/* Fixed Columns */}
{fixedColumns && fixedColumns.length > 0 && (
<div
className="flex overflow-visible"
className="task-table-fixed-columns flex overflow-visible"
style={{
width: fixedColumns.reduce((sum, col) => sum + col.width, 0),
position: 'sticky',
left: 0,
zIndex: 10,
background: isDarkMode ? 'var(--task-bg-primary, #1f1f1f)' : 'var(--task-bg-primary, white)',
borderRight: scrollableColumns && scrollableColumns.length > 0 ? '2px solid var(--task-border-primary, #e8e8e8)' : 'none',
boxShadow: scrollableColumns && scrollableColumns.length > 0 ? '2px 0 4px rgba(0, 0, 0, 0.1)' : 'none',
}}
>
{fixedColumns.map((col, index) => renderColumn(col, true, index, fixedColumns.length))}
{fixedColumns.map((col, index) =>
shouldRenderMinimal
? renderMinimalColumn(col, true, index, fixedColumns.length)
: renderColumn(col, true, index, fixedColumns.length)
)}
</div>
)}
{/* Scrollable Columns */}
{scrollableColumns && scrollableColumns.length > 0 && (
<div
className="overflow-visible"
className="task-table-scrollable-columns overflow-visible"
style={{
display: 'flex',
flex: 1,
minWidth: scrollableColumns.reduce((sum, col) => sum + col.width, 0)
}}
>
{scrollableColumns.map((col, index) => renderColumn(col, false, index, scrollableColumns.length))}
{scrollableColumns.map((col, index) =>
shouldRenderMinimal
? renderMinimalColumn(col, false, index, scrollableColumns.length)
: renderColumn(col, false, index, scrollableColumns.length)
)}
</div>
)}
</div>
@@ -963,9 +1299,15 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
{/* Fixed Columns for Add Subtask */}
{fixedColumns && fixedColumns.length > 0 && (
<div
className="flex overflow-visible"
className="task-table-fixed-columns flex overflow-visible"
style={{
width: fixedColumns.reduce((sum, col) => sum + col.width, 0),
position: 'sticky',
left: 0,
zIndex: 10,
background: isDarkMode ? 'var(--task-bg-primary, #1f1f1f)' : 'var(--task-bg-primary, white)',
borderRight: scrollableColumns && scrollableColumns.length > 0 ? '2px solid var(--task-border-primary, #e8e8e8)' : 'none',
boxShadow: scrollableColumns && scrollableColumns.length > 0 ? '2px 0 4px rgba(0, 0, 0, 0.1)' : 'none',
}}
>
{fixedColumns.map((col, index) => {
@@ -1032,9 +1374,10 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
{/* Scrollable Columns for Add Subtask */}
{scrollableColumns && scrollableColumns.length > 0 && (
<div
className="overflow-visible"
className="task-table-scrollable-columns overflow-visible"
style={{
display: 'flex',
flex: 1,
minWidth: scrollableColumns.reduce((sum, col) => sum + col.width, 0)
}}
>
@@ -1082,9 +1425,9 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
// REAL-TIME UPDATES: Compare assignees and labels content (not just length)
if (prevProps.task.assignees?.length !== nextProps.task.assignees?.length) return false;
if (prevProps.task.assignees?.length > 0) {
// Deep compare assignee IDs
const prevAssigneeIds = prevProps.task.assignees.sort();
const nextAssigneeIds = nextProps.task.assignees.sort();
// Deep compare assignee IDs - create copies before sorting to avoid mutating read-only arrays
const prevAssigneeIds = [...prevProps.task.assignees].sort();
const nextAssigneeIds = [...nextProps.task.assignees].sort();
for (let i = 0; i < prevAssigneeIds.length; i++) {
if (prevAssigneeIds[i] !== nextAssigneeIds[i]) return false;
}

2
worklenz-frontend/src/components/task-management/virtualized-task-group.tsx
View File

@@ -151,7 +151,7 @@ const VirtualizedTaskGroup: React.FC<VirtualizedTaskGroupProps> = React.memo(({
width={width}
itemCount={groupTasks.length + 3} // +3 for header, column headers, and add task row
itemSize={TASK_ROW_HEIGHT}
overscanCount={5} // Render 5 extra items for smooth scrolling
overscanCount={10} // Increased overscan for smoother scrolling experience
>
{Row}
</List>

248
worklenz-frontend/src/components/task-management/virtualized-task-list.tsx
View File

@@ -21,6 +21,7 @@ interface VirtualizedTaskListProps {
onToggleSubtasks: (taskId: string) => void;
height: number;
width: number;
tasksById: Record<string, Task>;
}
const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
@@ -31,9 +32,9 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
onSelectTask,
onToggleSubtasks,
height,
width
width,
tasksById
}) => {
const allTasks = useSelector(taskManagementSelectors.selectAll);
const { t } = useTranslation('task-management');
// Get theme from Redux store
@@ -42,26 +43,45 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
// Get field visibility from taskListFields slice
const taskListFields = useSelector((state: RootState) => state.taskManagementFields) as TaskListField[];
// PERFORMANCE OPTIMIZATION: Reduce virtualization threshold for better performance
const VIRTUALIZATION_THRESHOLD = 20; // Reduced from 100 to 20 - virtualize even smaller lists
// PERFORMANCE OPTIMIZATION: Improved virtualization for better user experience
const VIRTUALIZATION_THRESHOLD = 25; // Increased threshold - virtualize when there are more tasks
const TASK_ROW_HEIGHT = 40;
const HEADER_HEIGHT = 40;
const COLUMN_HEADER_HEIGHT = 40;
const ADD_TASK_ROW_HEIGHT = 40;
// PERFORMANCE OPTIMIZATION: Batch rendering to prevent long tasks
const RENDER_BATCH_SIZE = 5; // Render max 5 tasks per frame
const FRAME_BUDGET_MS = 8; // Leave 8ms per frame for other operations
// PERFORMANCE OPTIMIZATION: Add early return for empty groups
if (!group || !group.taskIds || group.taskIds.length === 0) {
const emptyGroupHeight = HEADER_HEIGHT + COLUMN_HEADER_HEIGHT + 120 + ADD_TASK_ROW_HEIGHT; // 120px for empty state
return (
<div className="virtualized-task-list empty-group" style={{ height: emptyGroupHeight }}>
<div className="virtualized-task-list empty-group" style={{ height: emptyGroupHeight, position: 'relative' }}>
{/* Sticky Group Color Border */}
<div
className="sticky-group-border"
style={{
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
width: '4px',
backgroundColor: group?.color || '#f0f0f0',
zIndex: 15,
pointerEvents: 'none',
}}
/>
<div className="task-group-header" style={{ height: HEADER_HEIGHT }}>
<div className="task-group-header-row">
<div
className="task-group-header-content"
style={{
backgroundColor: group?.color || '#f0f0f0',
borderLeft: `4px solid ${group?.color || '#f0f0f0'}`
// No margin - header should overlap the sticky border
}}
>
<span className="task-group-header-text">
@@ -73,7 +93,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
{/* Column Headers */}
<div className="task-group-column-headers" style={{
borderLeft: `4px solid ${group?.color || '#f0f0f0'}`,
marginLeft: '4px', // Account for sticky border
height: COLUMN_HEADER_HEIGHT,
background: 'var(--task-bg-secondary, #f5f5f5)',
borderBottom: '1px solid var(--task-border-tertiary, #d9d9d9)',
@@ -92,7 +112,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderLeft: `4px solid ${group?.color || '#f0f0f0'}`,
marginLeft: '4px', // Account for sticky border
backgroundColor: 'var(--task-bg-primary, white)'
}}>
<Empty
@@ -114,21 +134,25 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
/>
</div>
<div className="task-group-add-task" style={{ borderLeft: `4px solid ${group?.color || '#f0f0f0'}`, height: ADD_TASK_ROW_HEIGHT }}>
<div className="task-group-add-task" style={{ marginLeft: '4px', height: ADD_TASK_ROW_HEIGHT }}>
<AddTaskListRow groupId={group?.id} />
</div>
</div>
);
}
// Get tasks for this group using memoization for performance
// PERFORMANCE OPTIMIZATION: Get tasks for this group using direct lookup (no mapping/filtering)
const groupTasks = useMemo(() => {
const tasks = group.taskIds
.map((taskId: string) => allTasks.find((task: Task) => task.id === taskId))
.filter((task: Task | undefined): task is Task => task !== undefined);
// PERFORMANCE OPTIMIZATION: Use for loop instead of map for better performance
const tasks: Task[] = [];
for (let i = 0; i < group.taskIds.length; i++) {
const task = tasksById[group.taskIds[i]];
if (task) {
tasks.push(task);
}
}
return tasks;
}, [group.taskIds, allTasks]);
}, [group.taskIds, tasksById]);
// PERFORMANCE OPTIMIZATION: Only calculate selection state when needed
const selectionState = useMemo(() => {
@@ -136,35 +160,56 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
return { isAllSelected: false, isIndeterminate: false };
}
const selectedTasksInGroup = groupTasks.filter((task: Task) => selectedTaskIds.includes(task.id));
const isAllSelected = selectedTasksInGroup.length === groupTasks.length;
const isIndeterminate = selectedTasksInGroup.length > 0 && selectedTasksInGroup.length < groupTasks.length;
// PERFORMANCE OPTIMIZATION: Use for loop instead of filter for better performance
let selectedCount = 0;
for (let i = 0; i < groupTasks.length; i++) {
if (selectedTaskIds.includes(groupTasks[i].id)) {
selectedCount++;
}
}
const isAllSelected = selectedCount === groupTasks.length;
const isIndeterminate = selectedCount > 0 && selectedCount < groupTasks.length;
return { isAllSelected, isIndeterminate };
}, [groupTasks, selectedTaskIds]);
// Handle select all tasks in group - optimized with useCallback
const handleSelectAllInGroup = useCallback((checked: boolean) => {
// PERFORMANCE OPTIMIZATION: Batch selection updates
const tasksToUpdate: Array<{ taskId: string; selected: boolean }> = [];
if (checked) {
// Select all tasks in the group
groupTasks.forEach((task: Task) => {
for (let i = 0; i < groupTasks.length; i++) {
const task = groupTasks[i];
if (!selectedTaskIds.includes(task.id)) {
onSelectTask(task.id, true);
tasksToUpdate.push({ taskId: task.id, selected: true });
}
}
});
} else {
// Deselect all tasks in the group
groupTasks.forEach((task: Task) => {
for (let i = 0; i < groupTasks.length; i++) {
const task = groupTasks[i];
if (selectedTaskIds.includes(task.id)) {
onSelectTask(task.id, false);
tasksToUpdate.push({ taskId: task.id, selected: false });
}
}
}
// Batch update all selections
tasksToUpdate.forEach(({ taskId, selected }) => {
onSelectTask(taskId, selected);
});
}
}, [groupTasks, selectedTaskIds, onSelectTask]);
// Calculate dynamic height for the group
// PERFORMANCE OPTIMIZATION: Use passed height prop and calculate available space for tasks
const taskRowsHeight = groupTasks.length * TASK_ROW_HEIGHT;
const groupHeight = HEADER_HEIGHT + COLUMN_HEADER_HEIGHT + taskRowsHeight + ADD_TASK_ROW_HEIGHT;
const groupHeight = height; // Use the height passed from parent
const availableTaskRowsHeight = Math.max(0, groupHeight - HEADER_HEIGHT - COLUMN_HEADER_HEIGHT - ADD_TASK_ROW_HEIGHT);
// PERFORMANCE OPTIMIZATION: Limit visible columns for large lists
const maxVisibleColumns = groupTasks.length > 50 ? 6 : 12; // Further reduce columns for large lists
// Define all possible columns
const allFixedColumns = [
@@ -210,7 +255,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
}, [taskListFields, allFixedColumns]);
const scrollableColumns = useMemo(() => {
return allScrollableColumns.filter(col => {
const filtered = allScrollableColumns.filter(col => {
// For scrollable columns, check field visibility
if (col.fieldKey) {
const field = taskListFields.find(f => f.key === col.fieldKey);
@@ -219,26 +264,38 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
return false;
});
}, [taskListFields, allScrollableColumns]);
// PERFORMANCE OPTIMIZATION: Limit columns for large lists
return filtered.slice(0, maxVisibleColumns);
}, [taskListFields, allScrollableColumns, maxVisibleColumns]);
const fixedWidth = fixedColumns.reduce((sum, col) => sum + col.width, 0);
const scrollableWidth = scrollableColumns.reduce((sum, col) => sum + col.width, 0);
const totalTableWidth = fixedWidth + scrollableWidth;
// PERFORMANCE OPTIMIZATION: Increase overscanCount for better perceived performance
// PERFORMANCE OPTIMIZATION: Enhanced overscan for smoother scrolling experience
const shouldVirtualize = groupTasks.length > VIRTUALIZATION_THRESHOLD;
const overscanCount = shouldVirtualize ? Math.min(10, Math.ceil(groupTasks.length * 0.1)) : 0; // Dynamic overscan
const overscanCount = useMemo(() => {
if (groupTasks.length <= 20) return 5; // Small lists: 5 items overscan
if (groupTasks.length <= 100) return 10; // Medium lists: 10 items overscan
if (groupTasks.length <= 500) return 15; // Large lists: 15 items overscan
return 20; // Very large lists: 20 items overscan for smooth scrolling
}, [groupTasks.length]);
// PERFORMANCE OPTIMIZATION: Memoize row renderer with better dependency management
const Row = useCallback(({ index, style }: { index: number; style: React.CSSProperties }) => {
const task: Task | undefined = groupTasks[index];
if (!task) return null;
// PERFORMANCE OPTIMIZATION: Pre-calculate selection state
const isSelected = selectedTaskIds.includes(task.id);
return (
<div
className="task-row-container"
style={{
...style,
marginLeft: '4px', // Account for sticky border
'--group-color': group.color || '#f0f0f0',
contain: 'layout style', // CSS containment for better performance
} as React.CSSProperties}
@@ -248,7 +305,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
projectId={projectId}
groupId={group.id}
currentGrouping={currentGrouping}
isSelected={selectedTaskIds.includes(task.id)}
isSelected={isSelected}
index={index}
onSelect={onSelectTask}
onToggleSubtasks={onToggleSubtasks}
@@ -262,26 +319,43 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
const scrollContainerRef = useRef<HTMLDivElement>(null);
const headerScrollRef = useRef<HTMLDivElement>(null);
// Synchronize header scroll with body scroll
useEffect(() => {
const handleScroll = () => {
// PERFORMANCE OPTIMIZATION: Throttled scroll handler
const handleScroll = useCallback(() => {
if (headerScrollRef.current && scrollContainerRef.current) {
headerScrollRef.current.scrollLeft = scrollContainerRef.current.scrollLeft;
}
};
}, []);
// Synchronize header scroll with body scroll
useEffect(() => {
const scrollDiv = scrollContainerRef.current;
if (scrollDiv) {
scrollDiv.addEventListener('scroll', handleScroll);
scrollDiv.addEventListener('scroll', handleScroll, { passive: true });
}
return () => {
if (scrollDiv) {
scrollDiv.removeEventListener('scroll', handleScroll);
}
};
}, []);
}, [handleScroll]);
return (
<div className="virtualized-task-list" style={{ height: groupHeight }}>
<div className="virtualized-task-list" style={{ height: groupHeight, position: 'relative' }}>
{/* Sticky Group Color Border */}
<div
className="sticky-group-border"
style={{
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
width: '4px',
backgroundColor: group.color || '#f0f0f0',
zIndex: 15,
pointerEvents: 'none',
}}
/>
{/* Group Header */}
<div className="task-group-header" style={{ height: HEADER_HEIGHT }}>
<div className="task-group-header-row">
@@ -289,7 +363,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
className="task-group-header-content"
style={{
backgroundColor: group.color || '#f0f0f0',
borderLeft: `4px solid ${group.color || '#f0f0f0'}`
// No margin - header should overlap the sticky border
}}
>
<span className="task-group-header-text">
@@ -306,9 +380,21 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
>
<div
className="task-group-column-headers"
style={{ borderLeft: `4px solid ${group.color || '#f0f0f0'}`, minWidth: totalTableWidth, display: 'flex', position: 'relative' }}
style={{ marginLeft: '4px', minWidth: totalTableWidth, display: 'flex', position: 'relative' }}
>
<div
className="task-table-fixed-columns fixed-columns-header"
style={{
display: 'flex',
position: 'sticky',
left: 0,
zIndex: 12,
background: isDarkMode ? 'var(--task-bg-secondary, #141414)' : 'var(--task-bg-secondary, #f5f5f5)',
width: fixedWidth,
borderRight: scrollableColumns.length > 0 ? '2px solid var(--task-border-primary, #e8e8e8)' : 'none',
boxShadow: scrollableColumns.length > 0 ? '2px 0 4px rgba(0, 0, 0, 0.1)' : 'none',
}}
>
<div className="fixed-columns-header" style={{ display: 'flex', position: 'sticky', left: 0, zIndex: 2, background: 'inherit', width: fixedWidth }}>
{fixedColumns.map(col => (
<div
key={col.key}
@@ -352,45 +438,43 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
overflowY: 'auto',
width: '100%',
minWidth: totalTableWidth,
height: groupTasks.length > 0 ? taskRowsHeight : 'auto',
height: groupTasks.length > 0 ? availableTaskRowsHeight : 'auto',
contain: 'layout style', // CSS containment for better performance
}}
>
<SortableContext items={group.taskIds} strategy={verticalListSortingStrategy}>
{shouldVirtualize ? (
<List
height={taskRowsHeight}
width={width}
height={availableTaskRowsHeight}
width={totalTableWidth}
itemCount={groupTasks.length}
itemSize={TASK_ROW_HEIGHT}
overscanCount={overscanCount} // Dynamic overscan
overscanCount={overscanCount}
className="react-window-list"
style={{ minWidth: totalTableWidth }}
// PERFORMANCE OPTIMIZATION: Add performance-focused props
useIsScrolling={true}
itemData={{
groupTasks,
group,
projectId,
currentGrouping,
selectedTaskIds,
onSelectTask,
onToggleSubtasks,
fixedColumns,
scrollableColumns
}}
// PERFORMANCE OPTIMIZATION: Remove all expensive props for maximum performance
useIsScrolling={false}
itemData={undefined}
// Disable all animations and transitions
onItemsRendered={() => {}}
onScroll={() => {}}
>
{Row}
</List>
) : (
// PERFORMANCE OPTIMIZATION: Use React.Fragment to reduce DOM nodes
<React.Fragment>
{groupTasks.map((task: Task, index: number) => (
{groupTasks.map((task: Task, index: number) => {
// PERFORMANCE OPTIMIZATION: Pre-calculate selection state
const isSelected = selectedTaskIds.includes(task.id);
return (
<div
key={task.id}
className="task-row-container"
style={{
height: TASK_ROW_HEIGHT,
marginLeft: '4px', // Account for sticky border
'--group-color': group.color || '#f0f0f0',
contain: 'layout style', // CSS containment
} as React.CSSProperties}
@@ -400,7 +484,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
projectId={projectId}
groupId={group.id}
currentGrouping={currentGrouping}
isSelected={selectedTaskIds.includes(task.id)}
isSelected={isSelected}
index={index}
onSelect={onSelectTask}
onToggleSubtasks={onToggleSubtasks}
@@ -408,7 +492,8 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
scrollableColumns={scrollableColumns}
/>
</div>
))}
);
})}
</React.Fragment>
)}
</SortableContext>
@@ -416,7 +501,7 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
{/* Add Task Row - Always show at the bottom */}
<div
className="task-group-add-task"
style={{ borderLeft: `4px solid ${group.color || '#f0f0f0'}`, height: ADD_TASK_ROW_HEIGHT }}
style={{ marginLeft: '4px', height: ADD_TASK_ROW_HEIGHT }}
>
<AddTaskListRow groupId={group.id} />
</div>
@@ -469,16 +554,6 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
position: relative;
background: var(--task-bg-primary, white);
}
.task-row-container::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: var(--group-color, #f0f0f0);
z-index: 10;
}
/* Ensure no gaps between list items */
.react-window-list > div {
margin: 0;
@@ -532,20 +607,47 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = React.memo(({
letter-spacing: 0.5px;
transition: color 0.3s ease;
}
/* Add task row styles */
/* Add task row styles - Fixed width responsive design */
.task-group-add-task {
background: var(--task-bg-primary, white);
border-top: 1px solid var(--task-border-secondary, #f0f0f0);
transition: all 0.3s ease;
padding: 0 12px;
width: 100%;
max-width: 500px; /* Fixed maximum width */
min-width: 300px; /* Minimum width for mobile */
min-height: 40px;
display: flex;
align-items: center;
flex-shrink: 0;
border-radius: 0 0 6px 6px;
margin-left: 0;
position: relative;
}
.task-group-add-task:hover {
background: var(--task-hover-bg, #fafafa);
transform: translateX(2px);
}
/* Responsive adjustments for add task row */
@media (max-width: 768px) {
.task-group-add-task {
max-width: 400px;
min-width: 280px;
}
}
@media (max-width: 480px) {
.task-group-add-task {
max-width: calc(100vw - 40px);
min-width: 250px;
}
}
@media (min-width: 1200px) {
.task-group-add-task {
max-width: 600px;
}
}
.task-table-fixed-columns {
display: flex;

22
worklenz-frontend/src/pages/projects/projectView/project-view.css
View File

@@ -29,7 +29,7 @@
padding: 8px 16px;
border-radius: 6px 6px 0 0;
background: transparent;
border: 1px solid transparent;
border: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 500;
font-size: 13px;
@@ -42,13 +42,11 @@
[data-theme="default"] .project-view-tabs .ant-tabs-tab {
color: #64748b;
background: #f8fafc;
border-color: #e2e8f0;
}
[data-theme="default"] .project-view-tabs .ant-tabs-tab:hover {
color: #3b82f6;
background: #eff6ff;
border-color: #bfdbfe;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
@@ -56,32 +54,26 @@
[data-theme="default"] .project-view-tabs .ant-tabs-tab-active {
color: #1e40af !important;
background: #ffffff !important;
border-color: #3b82f6 !important;
border-bottom-color: #ffffff !important;
box-shadow: 0 -2px 8px rgba(59, 130, 246, 0.1), 0 4px 16px rgba(59, 130, 246, 0.1);
z-index: 1;
}
/* Dark mode tab styles */
/* Dark mode tab styles - matching task list row colors */
[data-theme="dark"] .project-view-tabs .ant-tabs-tab {
color: #94a3b8;
background: #1e293b;
border-color: #334155;
background: #141414;
}
[data-theme="dark"] .project-view-tabs .ant-tabs-tab:hover {
color: #60a5fa;
background: #1e3a8a;
border-color: #3b82f6;
background: #262626;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}
[data-theme="dark"] .project-view-tabs .ant-tabs-tab-active {
color: #60a5fa !important;
background: #0f172a !important;
border-color: #3b82f6 !important;
border-bottom-color: #0f172a !important;
background: #1f1f1f !important;
box-shadow: 0 -2px 8px rgba(96, 165, 250, 0.15), 0 4px 16px rgba(96, 165, 250, 0.15);
z-index: 1;
}
@@ -102,8 +94,8 @@
}
[data-theme="dark"] .project-view-tabs .ant-tabs-content-holder {
background: #0f172a;
border: 1px solid #334155;
background: #1f1f1f;
border: 1px solid #303030;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

72
worklenz-frontend/src/pages/projects/projectView/taskList/task-list-table/task-list-table.tsx
View File

@@ -159,6 +159,7 @@ const CustomCell = React.memo(({
renderColumnContent: any;
updateTaskCustomColumnValue: (taskId: string, columnKey: string, value: string) => void;
}) => {
try {
if (column.custom_column && column.key && column.pinned) {
return renderCustomColumnContent(
column.custom_column_obj || {},
@@ -168,7 +169,76 @@ const CustomCell = React.memo(({
updateTaskCustomColumnValue
);
}
return renderColumnContent(column.key || '', task, isSubtask);
const result = renderColumnContent(column.key || '', task, isSubtask);
// If renderColumnContent returns null or undefined, provide a fallback
if (result === null || result === undefined) {
// Handle specific column types with fallbacks
switch (column.key) {
case 'STATUS':
return (
<div className="px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
{task.status_name || task.status || 'To Do'}
</div>
);
case 'PRIORITY':
return (
<div className="px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
{task.priority_name || task.priority || 'Medium'}
</div>
);
case 'ASSIGNEES':
return (
<div className="text-xs text-gray-500">
{task.assignees?.length ? `${task.assignees.length} assignee(s)` : 'No assignees'}
</div>
);
case 'LABELS':
return (
<div className="text-xs text-gray-500">
{task.labels?.length ? `${task.labels.length} label(s)` : 'No labels'}
</div>
);
default:
return <div className="text-xs text-gray-400">-</div>;
}
}
return result;
} catch (error) {
console.error('Error rendering task cell:', error, { column: column.key, task: task.id });
// Fallback rendering for errors
switch (column.key) {
case 'STATUS':
return (
<div className="px-2 py-1 text-xs rounded bg-red-100 text-red-600">
{task.status_name || task.status || 'Error'}
</div>
);
case 'PRIORITY':
return (
<div className="px-2 py-1 text-xs rounded bg-red-100 text-red-600">
{task.priority_name || task.priority || 'Error'}
</div>
);
case 'ASSIGNEES':
return (
<div className="text-xs text-red-500">
Error loading assignees
</div>
);
case 'LABELS':
return (
<div className="text-xs text-red-500">
Error loading labels
</div>
);
default:
return <div className="text-xs text-red-400">Error</div>;
}
}
});
// First, let's extract the custom column cell to a completely separate component

10
worklenz-frontend/src/styles/task-management.css
View File

@@ -472,23 +472,23 @@
background-color: #262626 !important;
}
/* System preference fallback */
/* System preference fallback - only apply when explicitly in dark mode */
@media (prefers-color-scheme: dark) {
.task-list-board:not(.light) {
.task-list-board.dark:not(.light) {
color: rgba(255, 255, 255, 0.85);
}
.task-group:not(.light) {
.task-group.dark:not(.light) {
background-color: #1f1f1f;
}
.task-row:not(.light) {
.task-row.dark:not(.light) {
background-color: #1f1f1f;
color: rgba(255, 255, 255, 0.85);
border-color: #303030;
}
.task-row:not(.light):hover {
.task-row.dark:not(.light):hover {
background-color: #262626 !important;
border-left-color: #595959;
}

284
worklenz-frontend/src/utils/debug-performance.ts Normal file
View File

@@ -0,0 +1,284 @@
// Debug utility for identifying performance bottlenecks with 400 tasks
export const debugPerformance = {
// Log component render times
logComponentRender: (componentName: string, startTime: number) => {
const renderTime = performance.now() - startTime;
if (renderTime > 16) { // Log slow renders (>16ms)
console.warn(`Slow render detected: ${componentName} took ${renderTime.toFixed(2)}ms`);
}
},
// Log Redux selector performance
logSelectorPerformance: (selectorName: string, startTime: number) => {
const executionTime = performance.now() - startTime;
if (executionTime > 5) { // Log slow selectors (>5ms)
console.warn(`Slow selector detected: ${selectorName} took ${executionTime.toFixed(2)}ms`);
}
},
// Log memory usage
logMemoryUsage: () => {
if ('memory' in performance) {
const memory = (performance as any).memory;
const usedMB = memory.usedJSHeapSize / 1024 / 1024;
const totalMB = memory.totalJSHeapSize / 1024 / 1024;
const limitMB = memory.jsHeapSizeLimit / 1024 / 1024;
console.log(`Memory Usage: ${usedMB.toFixed(1)}MB / ${totalMB.toFixed(1)}MB (${limitMB.toFixed(1)}MB limit)`);
if (usedMB > 100) {
console.warn(`High memory usage detected: ${usedMB.toFixed(1)}MB`);
}
}
},
// Log DOM node count
logDOMNodes: () => {
const nodeCount = document.querySelectorAll('*').length;
console.log(`Total DOM nodes: ${nodeCount}`);
if (nodeCount > 1000) {
console.warn(`High DOM node count detected: ${nodeCount} nodes`);
}
},
// Log React component count
logReactComponents: () => {
// This is a rough estimate - React DevTools would be more accurate
const reactComponents = document.querySelectorAll('[data-reactroot], [data-reactid]').length;
console.log(`React components (estimate): ${reactComponents}`);
},
// Log scroll performance
logScrollPerformance: () => {
let lastScrollTime = 0;
let scrollCount = 0;
const handleScroll = () => {
const currentTime = performance.now();
const timeSinceLastScroll = currentTime - lastScrollTime;
if (timeSinceLastScroll < 16) { // Less than 60fps
scrollCount++;
if (scrollCount > 5) {
console.warn(`Poor scroll performance detected: ${timeSinceLastScroll.toFixed(2)}ms between scrolls`);
}
} else {
scrollCount = 0;
}
lastScrollTime = currentTime;
};
window.addEventListener('scroll', handleScroll, { passive: true });
return () => {
window.removeEventListener('scroll', handleScroll);
};
},
// Log long tasks
logLongTasks: () => {
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'longtask') {
console.warn(`Long task detected: ${entry.duration.toFixed(2)}ms`, entry);
}
}
});
observer.observe({ entryTypes: ['longtask'] });
return () => {
observer.disconnect();
};
}
return () => {};
},
// NEW: Monitor hover performance specifically
logHoverPerformance: () => {
let hoverStartTime = 0;
let hoverCount = 0;
let totalHoverTime = 0;
const handleMouseEnter = () => {
hoverStartTime = performance.now();
};
const handleMouseLeave = () => {
if (hoverStartTime > 0) {
const hoverDuration = performance.now() - hoverStartTime;
totalHoverTime += hoverDuration;
hoverCount++;
if (hoverDuration > 50) { // Log slow hover operations (>50ms)
console.warn(`Slow hover operation detected: ${hoverDuration.toFixed(2)}ms`);
}
// Log average hover time every 10 hovers
if (hoverCount % 10 === 0) {
const avgHoverTime = totalHoverTime / hoverCount;
console.log(`Average hover time: ${avgHoverTime.toFixed(2)}ms (${hoverCount} hovers)`);
}
hoverStartTime = 0;
}
};
// Monitor hover events on task rows specifically
const taskRows = document.querySelectorAll('.task-row-optimized, .task-row');
taskRows.forEach(row => {
row.addEventListener('mouseenter', handleMouseEnter, { passive: true });
row.addEventListener('mouseleave', handleMouseLeave, { passive: true });
});
return () => {
taskRows.forEach(row => {
row.removeEventListener('mouseenter', handleMouseEnter);
row.removeEventListener('mouseleave', handleMouseLeave);
});
};
},
// NEW: Monitor CSS transitions and animations
logCSSPerformance: () => {
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'measure') {
const duration = entry.duration;
if (duration > 16) { // Log slow CSS operations (>16ms)
console.warn(`Slow CSS operation detected: ${duration.toFixed(2)}ms - ${entry.name}`);
}
}
}
});
observer.observe({ entryTypes: ['measure'] });
return () => {
observer.disconnect();
};
}
return () => {};
},
// Comprehensive performance check
runPerformanceCheck: () => {
console.group('🔍 Performance Check');
// Memory usage
debugPerformance.logMemoryUsage();
// DOM nodes
debugPerformance.logDOMNodes();
// React components
debugPerformance.logReactComponents();
// Start monitoring
const stopScroll = debugPerformance.logScrollPerformance();
const stopLongTasks = debugPerformance.logLongTasks();
const stopHover = debugPerformance.logHoverPerformance();
const stopCSS = debugPerformance.logCSSPerformance();
console.groupEnd();
return () => {
stopScroll();
stopLongTasks();
stopHover();
stopCSS();
};
},
// Monitor specific component
monitorComponent: (componentName: string) => {
const startTime = performance.now();
return () => {
debugPerformance.logComponentRender(componentName, startTime);
};
},
// Monitor Redux selector
monitorSelector: (selectorName: string, selectorFn: () => any) => {
const startTime = performance.now();
const result = selectorFn();
debugPerformance.logSelectorPerformance(selectorName, startTime);
return result;
},
// NEW: Quick hover performance test
testHoverPerformance: () => {
console.group('🧪 Hover Performance Test');
const taskRows = document.querySelectorAll('.task-row-optimized, .task-row');
console.log(`Found ${taskRows.length} task rows to test`);
let totalHoverTime = 0;
let hoverCount = 0;
const testHover = (row: Element) => {
return new Promise<void>((resolve) => {
const startTime = performance.now();
// Simulate hover
row.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
setTimeout(() => {
row.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
const hoverTime = performance.now() - startTime;
totalHoverTime += hoverTime;
hoverCount++;
if (hoverTime > 50) {
console.warn(`Slow hover on row ${hoverCount}: ${hoverTime.toFixed(2)}ms`);
}
resolve();
}, 100);
});
};
// Test first 5 rows
const testRows = Array.from(taskRows).slice(0, 5);
Promise.all(testRows.map(testHover)).then(() => {
const avgHoverTime = totalHoverTime / hoverCount;
console.log(`Average hover time: ${avgHoverTime.toFixed(2)}ms (${hoverCount} tests)`);
if (avgHoverTime > 30) {
console.error(`🚨 Poor hover performance detected: ${avgHoverTime.toFixed(2)}ms average`);
} else if (avgHoverTime > 16) {
console.warn(`⚠️ Suboptimal hover performance: ${avgHoverTime.toFixed(2)}ms average`);
} else {
console.log(`✅ Good hover performance: ${avgHoverTime.toFixed(2)}ms average`);
}
console.groupEnd();
});
}
};
// Auto-run performance check in development
if (process.env.NODE_ENV === 'development') {
// Run initial check after page load
window.addEventListener('load', () => {
setTimeout(() => {
debugPerformance.runPerformanceCheck();
// Run hover performance test after 3 seconds
setTimeout(() => {
debugPerformance.testHoverPerformance();
}, 3000);
}, 2000); // Wait for initial render
});
}
// Export for manual use
export default debugPerformance;

304
worklenz-frontend/src/utils/performance-monitor.ts Normal file
View File

@@ -0,0 +1,304 @@
import React from 'react';
// Performance monitoring utility for task list performance analysis
export class PerformanceMonitor {
private static instance: PerformanceMonitor;
private metrics: Map<string, number[]> = new Map();
private marks: Map<string, number> = new Map();
private observers: Map<string, PerformanceObserver> = new Map();
static getInstance(): PerformanceMonitor {
if (!PerformanceMonitor.instance) {
PerformanceMonitor.instance = new PerformanceMonitor();
}
return PerformanceMonitor.instance;
}
// Mark a performance point
mark(name: string): void {
this.marks.set(name, performance.now());
performance.mark(name);
}
// Measure time between two marks
measure(name: string, startMark: string, endMark: string): void {
try {
performance.measure(name, startMark, endMark);
const measure = performance.getEntriesByName(name, 'measure')[0];
if (measure) {
this.addMetric(name, measure.duration);
}
} catch (error) {
console.warn(`Failed to measure ${name}:`, error);
}
}
// Add a metric value
addMetric(name: string, value: number): void {
if (!this.metrics.has(name)) {
this.metrics.set(name, []);
}
this.metrics.get(name)!.push(value);
}
// Get average for a metric
getAverage(name: string): number {
const values = this.metrics.get(name);
if (!values || values.length === 0) return 0;
return values.reduce((sum, val) => sum + val, 0) / values.length;
}
// Get all metrics
getMetrics(): Record<string, { average: number; count: number; min: number; max: number }> {
const result: Record<string, { average: number; count: number; min: number; max: number }> = {};
this.metrics.forEach((values, name) => {
if (values.length > 0) {
result[name] = {
average: this.getAverage(name),
count: values.length,
min: Math.min(...values),
max: Math.max(...values),
};
}
});
return result;
}
// Monitor React component render times
monitorComponentRender(componentName: string): () => void {
const startMark = `${componentName}-render-start`;
const endMark = `${componentName}-render-end`;
this.mark(startMark);
return () => {
this.mark(endMark);
this.measure(`${componentName}-render-time`, startMark, endMark);
};
}
// Monitor Redux selector performance
monitorSelector(selectorName: string, selectorFn: () => any): any {
const startTime = performance.now();
const result = selectorFn();
const endTime = performance.now();
this.addMetric(`${selectorName}-execution-time`, endTime - startTime);
return result;
}
// Monitor DOM operations
monitorDOMOperation(operationName: string, operation: () => void): void {
const startTime = performance.now();
operation();
const endTime = performance.now();
this.addMetric(`${operationName}-dom-time`, endTime - startTime);
}
// Monitor memory usage
monitorMemory(): void {
if ('memory' in performance) {
const memory = (performance as any).memory;
this.addMetric('memory-used', memory.usedJSHeapSize);
this.addMetric('memory-total', memory.totalJSHeapSize);
this.addMetric('memory-limit', memory.jsHeapSizeLimit);
}
}
// Monitor frame rate
startFrameRateMonitoring(): () => void {
let frameCount = 0;
let lastTime = performance.now();
const measureFrameRate = () => {
frameCount++;
const currentTime = performance.now();
if (currentTime - lastTime >= 1000) { // Every second
const fps = frameCount / ((currentTime - lastTime) / 1000);
this.addMetric('fps', fps);
frameCount = 0;
lastTime = currentTime;
}
requestAnimationFrame(measureFrameRate);
};
const animationId = requestAnimationFrame(measureFrameRate);
return () => {
cancelAnimationFrame(animationId);
};
}
// Monitor long tasks
startLongTaskMonitoring(): () => void {
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'longtask') {
this.addMetric('long-task-duration', entry.duration);
console.warn('Long task detected:', entry);
}
}
});
observer.observe({ entryTypes: ['longtask'] });
this.observers.set('longtask', observer);
return () => {
observer.disconnect();
this.observers.delete('longtask');
};
}
return () => {};
}
// Monitor layout thrashing
startLayoutThrashingMonitoring(): () => void {
let layoutCount = 0;
let lastLayoutTime = 0;
const monitor = this;
const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
Element.prototype.getBoundingClientRect = function() {
const currentTime = performance.now();
if (currentTime - lastLayoutTime < 16) { // Less than 16ms between calls
layoutCount++;
monitor.addMetric('layout-thrashing-count', layoutCount);
}
lastLayoutTime = currentTime;
return originalGetBoundingClientRect.call(this);
};
return () => {
Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
};
}
// Generate performance report
generateReport(): string {
const metrics = this.getMetrics();
const report = {
timestamp: new Date().toISOString(),
metrics,
summary: this.generateSummary(metrics),
recommendations: this.generateRecommendations(metrics),
};
return JSON.stringify(report, null, 2);
}
private generateSummary(metrics: Record<string, any>): Record<string, string> {
const summary: Record<string, string> = {};
// Component render times
const renderTimes = Object.keys(metrics).filter(key => key.includes('render-time'));
if (renderTimes.length > 0) {
const avgRenderTime = renderTimes.reduce((sum, key) => sum + metrics[key].average, 0) / renderTimes.length;
summary.renderPerformance = avgRenderTime > 16 ? 'Poor' : avgRenderTime > 8 ? 'Fair' : 'Good';
}
// FPS
if (metrics.fps) {
summary.frameRate = metrics.fps.average > 55 ? 'Good' : metrics.fps.average > 30 ? 'Fair' : 'Poor';
}
// Memory usage
if (metrics['memory-used'] && metrics['memory-limit']) {
const memoryUsage = (metrics['memory-used'].average / metrics['memory-limit'].average) * 100;
summary.memoryUsage = memoryUsage > 80 ? 'High' : memoryUsage > 50 ? 'Moderate' : 'Low';
}
return summary;
}
private generateRecommendations(metrics: Record<string, any>): string[] {
const recommendations: string[] = [];
// Check for slow component renders
const slowRenders = Object.keys(metrics).filter(key =>
key.includes('render-time') && metrics[key].average > 16
);
if (slowRenders.length > 0) {
recommendations.push(`Optimize component renders: ${slowRenders.join(', ')}`);
}
// Check for layout thrashing
if (metrics['layout-thrashing-count'] && metrics['layout-thrashing-count'].count > 10) {
recommendations.push('Reduce layout thrashing by batching DOM reads and writes');
}
// Check for long tasks
if (metrics['long-task-duration'] && metrics['long-task-duration'].count > 0) {
recommendations.push('Break down long tasks into smaller chunks');
}
// Check for low FPS
if (metrics.fps && metrics.fps.average < 30) {
recommendations.push('Optimize rendering performance to maintain 60fps');
}
// Check for high memory usage
if (metrics['memory-used'] && metrics['memory-limit']) {
const memoryUsage = (metrics['memory-used'].average / metrics['memory-limit'].average) * 100;
if (memoryUsage > 80) {
recommendations.push('Reduce memory usage to prevent performance degradation');
}
}
return recommendations;
}
// Clear all metrics
clear(): void {
this.metrics.clear();
this.marks.clear();
performance.clearMarks();
performance.clearMeasures();
}
// Stop all monitoring
stop(): void {
this.observers.forEach((observer) => {
observer.disconnect();
});
this.observers.clear();
}
}
// Convenience functions
export const performanceMonitor = PerformanceMonitor.getInstance();
// React hook for monitoring component performance
export const usePerformanceMonitor = (componentName: string) => {
const endMonitoring = React.useCallback(() => {
return performanceMonitor.monitorComponentRender(componentName);
}, [componentName]);
React.useEffect(() => {
const cleanup = endMonitoring();
return cleanup;
}, [endMonitoring]);
};
// Redux middleware for monitoring selector performance
export const performanceMiddleware = (store: any) => (next: any) => (action: any) => {
const startTime = performance.now();
const result = next(action);
const endTime = performance.now();
performanceMonitor.addMetric(`redux-action-${action.type}`, endTime - startTime);
return result;
};
// Export for global access
if (typeof window !== 'undefined') {
(window as any).performanceMonitor = performanceMonitor;
}

297
worklenz-frontend/src/utils/performance-optimizer.ts Normal file
View File

@@ -0,0 +1,297 @@
// Performance optimization utility for reducing long tasks and improving frame rate
import React from 'react';
interface PerformanceMetrics {
longTaskCount: number;
averageLongTaskDuration: number;
frameRate: number;
memoryUsage: number;
layoutThrashingCount: number;
}
class PerformanceOptimizer {
private longTaskObserver: PerformanceObserver | null = null;
private frameRateObserver: PerformanceObserver | null = null;
private layoutThrashingCount = 0;
private metrics: PerformanceMetrics = {
longTaskCount: 0,
averageLongTaskDuration: 0,
frameRate: 0,
memoryUsage: 0,
layoutThrashingCount: 0,
};
constructor() {
this.initializeObservers();
}
private initializeObservers() {
// Monitor long tasks
if ('PerformanceObserver' in window) {
this.longTaskObserver = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.entryType === 'longtask') {
this.metrics.longTaskCount++;
this.metrics.averageLongTaskDuration =
(this.metrics.averageLongTaskDuration * (this.metrics.longTaskCount - 1) + entry.duration) / this.metrics.longTaskCount;
console.warn(`🚨 Long task detected: ${entry.duration.toFixed(2)}ms - Consider chunking this operation`);
}
}
});
this.longTaskObserver.observe({ entryTypes: ['longtask'] });
}
// Monitor frame rate
this.startFrameRateMonitoring();
}
private startFrameRateMonitoring() {
let frameCount = 0;
let lastTime = performance.now();
const measureFrameRate = () => {
frameCount++;
const currentTime = performance.now();
if (currentTime - lastTime >= 1000) {
this.metrics.frameRate = frameCount;
frameCount = 0;
lastTime = currentTime;
if (this.metrics.frameRate < 30) {
console.warn(`⚠️ Low frame rate detected: ${this.metrics.frameRate}fps`);
}
}
requestAnimationFrame(measureFrameRate);
};
requestAnimationFrame(measureFrameRate);
}
// Chunk large operations to prevent long tasks
static chunkOperation<T>(
items: T[],
operation: (item: T, index: number) => void,
chunkSize: number = 10,
delay: number = 16
): Promise<void> {
return new Promise((resolve) => {
let index = 0;
const processChunk = () => {
const startTime = performance.now();
const endIndex = Math.min(index + chunkSize, items.length);
// Process items in this chunk
for (let i = index; i < endIndex; i++) {
operation(items[i], i);
}
index = endIndex;
// Check if we need to yield to prevent long tasks
const processingTime = performance.now() - startTime;
if (processingTime > 16) {
console.warn(`⚠️ Chunk processing took ${processingTime.toFixed(2)}ms - consider smaller chunks`);
}
if (index < items.length) {
// Schedule next chunk with delay to prevent blocking
setTimeout(processChunk, delay);
} else {
resolve();
}
};
processChunk();
});
}
// Optimize DOM operations to prevent layout thrashing
static batchDOMOperations(operations: (() => void)[]): void {
// Use requestAnimationFrame to batch DOM updates
requestAnimationFrame(() => {
// Force layout read first
document.body.offsetHeight;
// Perform all write operations
operations.forEach(operation => operation());
});
}
// Debounce function for expensive operations
static debounce<T extends (...args: any[]) => void>(
func: T,
delay: number
): T {
let timeoutId: NodeJS.Timeout;
return ((...args: any[]) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func(...args), delay);
}) as T;
}
// Throttle function for frequent operations
static throttle<T extends (...args: any[]) => void>(
func: T,
delay: number
): T {
let lastExecTime = 0;
return ((...args: any[]) => {
const currentTime = performance.now();
if (currentTime - lastExecTime > delay) {
func(...args);
lastExecTime = currentTime;
}
}) as T;
}
// Optimize list rendering with virtualization hints
static optimizeListRendering<T>(
items: T[],
renderItem: (item: T, index: number) => React.ReactNode,
options: {
chunkSize?: number;
virtualizationThreshold?: number;
overscanCount?: number;
} = {}
): React.ReactNode[] {
const {
chunkSize = 50,
virtualizationThreshold = 100,
overscanCount = 5
} = options;
// For small lists, render everything
if (items.length <= virtualizationThreshold) {
return items.map((item, index) => renderItem(item, index));
}
// For large lists, use chunked rendering
const chunks: React.ReactNode[] = [];
for (let i = 0; i < items.length; i += chunkSize) {
const chunk = items.slice(i, i + chunkSize);
chunks.push(
React.createElement('div', { key: `chunk-${i}`, className: 'virtualized-chunk' },
chunk.map((item, index) => renderItem(item, i + index))
)
);
}
return chunks;
}
// Monitor memory usage
static getMemoryUsage(): { used: number; total: number; limit: number } {
if ('memory' in performance) {
const memory = (performance as any).memory;
return {
used: memory.usedJSHeapSize / 1024 / 1024,
total: memory.totalJSHeapSize / 1024 / 1024,
limit: memory.jsHeapSizeLimit / 1024 / 1024
};
}
return { used: 0, total: 0, limit: 0 };
}
// Optimize scroll performance
static optimizeScroll(container: HTMLElement, handler: (event: Event) => void): () => void {
let ticking = false;
const optimizedHandler = (event: Event) => {
if (!ticking) {
requestAnimationFrame(() => {
handler(event);
ticking = false;
});
ticking = true;
}
};
container.addEventListener('scroll', optimizedHandler, { passive: true });
return () => {
container.removeEventListener('scroll', optimizedHandler);
};
}
// Optimize hover performance
static optimizeHover(
element: HTMLElement,
onEnter: () => void,
onLeave: () => void,
delay: number = 50
): () => void {
let enterTimeout: NodeJS.Timeout;
let leaveTimeout: NodeJS.Timeout;
const handleMouseEnter = () => {
clearTimeout(leaveTimeout);
enterTimeout = setTimeout(onEnter, delay);
};
const handleMouseLeave = () => {
clearTimeout(enterTimeout);
leaveTimeout = setTimeout(onLeave, delay);
};
element.addEventListener('mouseenter', handleMouseEnter, { passive: true });
element.addEventListener('mouseleave', handleMouseLeave, { passive: true });
return () => {
clearTimeout(enterTimeout);
clearTimeout(leaveTimeout);
element.removeEventListener('mouseenter', handleMouseEnter);
element.removeEventListener('mouseleave', handleMouseLeave);
};
}
// Get current performance metrics
getMetrics(): PerformanceMetrics {
const memory = PerformanceOptimizer.getMemoryUsage();
this.metrics.memoryUsage = memory.used;
this.metrics.layoutThrashingCount = this.layoutThrashingCount;
return { ...this.metrics };
}
// Reset metrics
resetMetrics(): void {
this.metrics = {
longTaskCount: 0,
averageLongTaskDuration: 0,
frameRate: 0,
memoryUsage: 0,
layoutThrashingCount: 0,
};
}
// Cleanup observers
destroy(): void {
if (this.longTaskObserver) {
this.longTaskObserver.disconnect();
}
if (this.frameRateObserver) {
this.frameRateObserver.disconnect();
}
}
}
// Create global instance
const performanceOptimizer = new PerformanceOptimizer();
// Auto-cleanup on page unload
window.addEventListener('beforeunload', () => {
performanceOptimizer.destroy();
});
export { PerformanceOptimizer, performanceOptimizer };
export default PerformanceOptimizer;