Поле clear в механизме выделений Vega-Lite определяет событие, при котором текущее выделение сбрасывается. После срабатывания очистки состояние selection возвращается к исходному виду: выбранные элементы снимаются, фильтры перестают действовать, условные стили возвращаются к начальному состоянию.

clear используется внутри описания selection-параметра:

params: [
  {
    name: "brush",
    select: {
      type: "interval",
      clear: "dblclick"
    }
  }
]

В этом примере двойной клик удаляет текущее выделение.

---

Почему clear играет важную роль

Без механизма очистки интерактивная визуализация быстро становится неудобной:

• пользователь не может вернуться к исходному состоянию;
• фильтрация «застревает»;
• подсветка продолжает действовать;
• приходится перезагружать график.

Поле clear решает эту проблему, предоставляя контролируемый способ сброса selection.

---

Базовый принцип работы

Каждое selection-состояние хранится внутри внутреннего хранилища Vega-Lite. Пока выделение активно:

• фильтры используют выбранные значения;
• условные encoding-выражения реагируют на selection;
• другие графики получают сигналы взаимодействия.

Когда событие clear срабатывает:

1. selection очищается;
2. связанные условия становятся ложными;
3. график возвращается к начальному виду.

---

Стандартное поведение

По умолчанию Vega-Lite автоматически использует:

clear: "dblclick"

Это означает:

• двойной клик очищает selection;
• одинарный клик не влияет на сброс;
• drag-события не очищают состояние.

Пример:

{
  params: [
    {
      name: "point_select",
      select: "point"
    }
  ]
}

Даже без явного указания clear, двойной клик будет работать.

---

Явное указание clear

Стандартный сброс по двойному клику

{
  params: [
    {
      name: "brush",
      select: {
        type: "interval",
        clear: "dblclick"
      }
    }
  ]
}

Наиболее распространённый вариант.

Подходит для:

• scatter plot;
• интерактивных dashboard;
• zoom/brush-интерфейсов;
• linked views.

---

Отключение очистки

clear: false

Иногда требуется запретить автоматический сброс.

{
  params: [
    {
      name: "selected",
      select: {
        type: "point",
        clear: false
      }
    }
  ]
}

Теперь:

• двойной клик не очищает состояние;
• selection остаётся активным;
• сброс возможен только программно.

---

Когда отключение полезно

Постоянный фильтр

transform: [
  {
    filter: {
      param: "selected"
    }
  }
]

Если selection управляет критически важной фильтрацией, случайный сброс может нарушить интерфейс.

---

Управление через внешние элементы

Например:

• кнопки;
• checkbox;
• dropdown;
• custom UI.

В таком случае очисткой управляет уже не Vega-Lite, а приложение.

---

Использование альтернативных событий

clear принимает не только dblclick, но и любые Vega event streams.

---

Очистка по обычному клику

clear: "click"

Пример:

{
  params: [
    {
      name: "brush",
      select: {
        type: "interval",
        clear: "click"
      }
    }
  ]
}

Теперь любой клик удаляет selection.

---

Практический эффект

Поведение становится более агрессивным:

• пользователь быстрее сбрасывает выделение;
• уменьшается вероятность накопления selections;
• интерфейс становится менее «липким».

Но есть и минусы:

• selection может исчезать случайно;
• drag-интеракции становятся менее предсказуемыми.

---

Очистка по нажатию клавиши

Vega event system поддерживает keyboard events.

---

Очистка по Escape

clear: "keydown[event.key === 'Escape']"

Пример:

{
  params: [
    {
      name: "selectData",
      select: {
        type: "point",
        clear: "keydown[event.key === 'Escape']"
      }
    }
  ]
}

Теперь:

• выделение работает обычным образом;
• клавиша Esc очищает состояние.

---

Преимущества клавиатурного сброса

Особенно полезно в сложных аналитических интерфейсах:

• power-user UX;
• desktop dashboard;
• data exploration tools;
• BI-системы.

---

Комбинированные события

Система событий Vega позволяет комбинировать несколько условий.

---

Несколько способов очистки

clear: "dblclick, keydown[event.key === 'Escape']"

Теперь selection очищается:

• двойным кликом;
• клавишей Escape.

---

Сценарии применения

Такой подход улучшает usability:

Событие	Назначение
dblclick	мышь
Escape	клавиатура
touchend	mobile
contextmenu	альтернативный UX

---

Работа clear с point selection

Базовый пример

{
  data: {
    values: [
      {x: 10, y: 20},
      {x: 30, y: 40},
      {x: 50, y: 60}
    ]
  },

  params: [
    {
      name: "pts",
      select: {
        type: "point",
        clear: "dblclick"
      }
    }
  ],

  mark: "point",

  encoding: {
    x: {field: "x", type: "quantitative"},
    y: {field: "y", type: "quantitative"},

    color: {
      condition: {
        param: "pts",
        value: "red"
      },
      value: "gray"
    }
  }
}

---

Что происходит

1. Клик выбирает точку.
2. Выбранная точка окрашивается в красный.
3. Двойной клик удаляет selection.
4. Все точки снова становятся серыми.

---

Работа clear с interval selection

Brush-интерфейс

{
  params: [
    {
      name: "brush",
      select: {
        type: "interval",
        clear: "dblclick"
      }
    }
  ]
}

---

Поведение

После drag-выделения:

• создаётся область interval;
• фильтрация начинает работать;
• условные стили активируются.

После double click:

• рамка brush исчезает;
• selection очищается;
• график возвращается к исходному состоянию.

---

Взаимодействие clear и empty

Поле empty определяет, как трактуется отсутствие selection.

---

Пример

{
  condition: {
    param: "brush",
    empty: false,
    value: "red"
  },
  value: "gray"
}

---

Что важно понимать

После clear selection становится пустым.

Далее вступает в работу empty.

---

empty: true

Поведение:

• пустое selection считается совпадающим;
• все элементы могут отображаться как выбранные.

---

empty: false

Поведение:

• после очистки ничего не считается выбранным;
• все элементы переходят в fallback-состояние.

---

Влияние на transform filter

Selection как фильтр

transform: [
  {
    filter: {
      param: "brush"
    }
  }
]

---

После очистки

Если selection очищается:

clear: "dblclick"

то filter перестаёт ограничивать данные.

Результат:

• скрытые записи снова появляются;
• визуализация восстанавливается.

---

Особенности при multi-selection

Несколько выбранных точек

select: {
  type: "point",
  toggle: true,
  clear: "dblclick"
}

---

Поведение

Пользователь может:

• выбирать несколько точек;
• накапливать selection;
• удалять отдельные элементы.

Но clear очищает всё selection полностью.

---

Программная очистка selection

Иногда требуется управлять сбросом извне.

---

Через Vega View API

Внутри Vega runtime selection хранится как signal.

Пример:

view.signal("brush", null).run();

---

Когда это полезно

Интеграция с React

button.oncl ick = () => {
  view.signal("brush", null).run();
};

---

Сброс dashboard

Например:

• очистка всех фильтров;
• reset analytics state;
• восстановление default view.

---

Использование clear в layered charts

Несколько слоёв

layer: [
  {
    mark: "point"
  },
  {
    mark: "text"
  }
]

Selection может использоваться всеми слоями одновременно.

---

Эффект очистки

После clear:

• все dependent layers обновляются;
• annotations исчезают;
• conditional styling сбрасывается;
• фильтрация отменяется.

---

Использование в linked views

Координация графиков

Один selection может управлять несколькими представлениями.

hconcat: [
  chart1,
  chart2
]

---

Пример связи

Левый график:

params: [
  {
    name: "brush",
    select: {
      type: "interval",
      clear: "dblclick"
    }
  }
]

Правый график:

transform: [
  {
    filter: {
      param: "brush"
    }
  }
]

---

Что делает clear

После двойного клика:

• brush удаляется;
• filter отключается;
• второй график снова показывает полный набор данных.

---

Отличие clear от toggle

Поля часто путают.

---

toggle

Управляет:

• добавлением;
• удалением отдельных элементов selection.

---

clear

Управляет:

• полным сбросом selection.

---

Сравнение

Поле	Назначение
toggle	изменение отдельных элементов
clear	очистка всего состояния
empty	поведение пустого selection

---

Внутренний механизм Vega

После компиляции Vega-Lite создаёт event stream.

Примерно так:

{
  clear: {
    events: "dblclick"
  }
}

При наступлении события runtime:

1. очищает store selection;
2. обновляет signals;
3. инициирует rerender.

---

Типичные ошибки

Использование конфликтующих событий

Проблемный пример:

select: {
  type: "point",
  on: "click",
  clear: "click"
}

---

Что происходит

Одно и то же событие:

• создаёт selection;
• немедленно его удаляет.

В результате выделение визуально «не работает».

---

Неправильная работа с touch-устройствами

dblclick не всегда удобен на mobile.

---

Лучшее решение

clear: "touchend"

или:

clear: "pointerup"

---

Избыточный автоматический сброс

Слишком агрессивные события делают интерфейс неудобным.

Плохой пример:

clear: "mousemove"

Selection будет исчезать практически мгновенно.

---

Практические рекомендации

Для desktop analytics

Оптимально:

clear: "dblclick"

---

Для mobile UI

Лучше:

clear: "touchend"

или:

clear: "pointerup"

---

Для профессиональных BI-интерфейсов

Хорошая практика:

clear: "dblclick, keydown[event.key === 'Escape']"

---

Для контролируемых dashboard

Подходит:

clear: false

с внешним reset-механизмом.

---

Полный пример interactive scatter plot

const spec = {
  data: {
    values: [
      {x: 10, y: 20, cat: "A"},
      {x: 15, y: 35, cat: "B"},
      {x: 25, y: 10, cat: "A"},
      {x: 40, y: 50, cat: "C"}
    ]
  },

  params: [
    {
      name: "brush",

      select: {
        type: "interval",

        clear: "dblclick"
      }
    }
  ],

  mark: "point",

  encoding: {
    x: {
      field: "x",
      type: "quantitative"
    },

    y: {
      field: "y",
      type: "quantitative"
    },

    color: {
      condition: {
        param: "brush",
        field: "cat",
        type: "nominal"
      },

      value: "lightgray"
    },

    size: {
      condition: {
        param: "brush",
        value: 200
      },

      value: 80
    }
  }
};

---

Полный пример linked views

const spec = {
  data: {
    values: [
      {cat: "A", value: 10},
      {cat: "B", value: 20},
      {cat: "C", value: 30},
      {cat: "D", value: 40}
    ]
  },

  hconcat: [
    {
      params: [
        {
          name: "sel",

          select: {
            type: "point",

            clear: "dblclick"
          }
        }
      ],

      mark: "bar",

      encoding: {
        x: {
          field: "cat",
          type: "nominal"
        },

        y: {
          field: "value",
          type: "quantitative"
        },

        color: {
          condition: {
            param: "sel",
            value: "orange"
          },

          value: "steelblue"
        }
      }
    },

    {
      transform: [
        {
          filter: {
            param: "sel"
          }
        }
      ],

      mark: "text",

      encoding: {
        text: {
          field: "cat"
        }
      }
    }
  ]
};