Артем

https://jsfiddle.net/cruperman/hdoe9aL8/

На float

Для реализации такой выборки пришлось немного поменять структуру данных. Тем более, что это даже помогло в проекте.
Запрос будет такого вида:

SELECT * FROM "table" WHERE "teble"."data" ?| array['a', 'b', 'c', 'y'];

Поле json_data поменялось. Вместо вложенного массива тэгов, они вылезли на верхний уровень json объекта.

id|name|json_data
1|vasya|{"a": 0.1, "b": 0.2, "c": 0.3}
2|lena|{"d": 0.3, "e": 0.4, "f": 0.8}
3|dima|{"x": 0.2, "y": 0.2, "z": 0.3}

{
  "compilerOptions": {
    "module": "commonjs",
    ...
  },
  ...
}

Проблема в конфиге typescript

:after или :before
У кнопки позиционирование relative, у :after (или :before) - absolute
Устанавливаете left: 0 и bottom: 0
width: 20px, например
При наведении через :hover устанавливаете width: 100%

transition: 1s width - чтобы плавно было

const filtered = obj.people.filter((p) => {
  for (let el of arr) {
    if (el.menId === p.data.menId && el.firstName === p.data.firstName) {
      return true
    }
  }
  return false
})

https://lodash.com/docs/4.17.11#sortBy
Смотрите пример. Вторым аргументом можно передать не функцию, а название поля, по которому сортировка будет происходить

var arr = [...]
var max = arr.reduce((prev, cur) => {
  if (prev.b > cur.b) {
    return prev
  }
  return cur
})
console.log(max) // {a: 'test3', b: 700}

var arr = [...]
var max = 0
for (let i in arr) {
  if (arr[i].b > arr[max].b) {
    max = i
  }
}
console.log(max) // "2"

В глобальном окружении объявляется переменная a (window.a)
Объявление поднимается на самый верх - всплытие переменных
var a;

Самовызывающаяся функция

(function(){
    a = 2;
    
    (function(){
      b = 3;
    })();
    
  })();

Интерпретатор ищет переменную а в лексическом окружении функции и не находит её
Далее он начинает искать её во внешнем объекте переменных. В данном случае - это window
Происходит присвоение window.a = 2
a = 2;

Тоже самое, что и с переменной а, только во внешнем объекте переменных тоже нет такой переменной и интерпретатор начинает искать её во внешнем объекте переменных первой функции, т.е. в глобальном окружении.
b = 3;

К слову, если бы не было присвоения переменных a=2 и b=3, то вывод этих переменных в консоль вывело undefined для a, а для b выбросило бы исключение, т.к. b не была объявлена.

htmlbook.ru/css/clip
Может это вам поможет

Верхнюю часть я бы сделал через два блока по бокам от текста, а правую, нижнюю и левую - обычным border

https://jsfiddle.net/svorg3tw/1/
Можете использовать псевдоэлементы :before :after. Тут уже на что фантазии хватит.

Не надо никуда обращаться.
Используйте отступ с одной стороны и задайте отступ у родителя
https://jsfiddle.net/8Lr73ksj/1/