Александр

https://www.30secondsofcode.org/js/s/function-base...

const groupBy = (collection, extractKey) => 
  collection.reduce((acc, item) => {
    const key = extractKey(item);
    acc[key] ??= [];
    acc[key].push(item);
    return acc;
  }, {});

const data = groupBy(array, (person) => person.role);

UPD: Можно использовать Object.groupBy (совсем забыл про него) если устраивает поддержка.
Object.groupBy(array, (person) => person.role);

File System API

Добавьте

$(document).on('click', '.content .child', function(event){
    event.stopPropagation();
});

Лучше вот это изучить.

Для импортирования JSON-файлов нужен какой-нибудь сборщик, который сможет зарезолвить их. Вы можете получить свои данные обычным запросом:

const response = await fetch('data.json');
const data = await response.json();

console.log(data);

Также, для работы Вам потребуется локальный сервер, например: live-server или serve. Запускать можно при помощи npx, например: npx serve.

const updateItems = async ({ id, isShow = false }: Partial<{ id: number, isShow: boolean }>) => {};

Object.fromEntries(Object.entries(...).map(([key, value]) => [key, [value]]));

Зависит как минимум от свойства display

Function.prototype.apply() принимает первым аргументом контекст (this), с которым будет работать, в Вашем случае - person. Вторым аргументом принимает массив аргументов вызова функции, которую вызываете при помощи .apply. Можете почитать подробнее на MDN и learn.javascript.ru.

1. Необходимо создать Path2D один раз, а у Вас в него добавляется новый прямоугольник на каждой итерации render. Что-то вроде:

const createPath = (x, y) => {
  const path = new Path2D();
  path.roundRect(x, y, 200, 40, 30);
  return path;
};

let taskList = [
  { id: 0, value: "", x: 150, y: 75 },
  { id: 0, value: "", x: -150, y: 75 },
].map((entry) => ({ ...entry, path: createPath(entry.x, entry.y) }));

2. Храните позицию камеры и перемещайте холст на каждой итерации render.
Добавляем переменные для отслеживания позиции камеры на холсте.

let cameraX = 0;
let cameraY = 0;

Обновляем позицию камеры на холсте.

addEventListener("mousemove", ({ button, clientX, clientY }) => {
  if (pressMM) {
    cameraX += clientX - lastX;
    cameraY += clientY - lastY;
    lastX = clientX;
    lastY = clientY;
  }
});

Рисуем элементы с учетом позиции камеры холста.

const drawTasks = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.save();
  context.translate(cameraX, cameraY);

  for (const { x, y, path, value } of taskList) {
    context.beginPath();
    context.stroke(path);
  }

  context.restore();
};

Второй пример сначала дополните всеми изменениями и после решайте, насколько корректное поведение.

Вставляйте ссылку программно после инициализации.