Is there a way to get a drop-down hierarchical gantt in Deneb?

I've seen @david-bacci do some great work in Deneb . Specifically in this post https://stackoverflow.com/questions/76111573/deneb-vega-lite-hierarchial-y-axis-on-a-gantt-chart

I want to know though if it is possible to have those top categories be collapsable drop-down menus in Deneb?

The provided Vega Lite specification creates an interactive Gantt chart visualizing multiple projects divided into tasks with corresponding start and end dates, status ("Delayed", "Behind Schedule", "On Schedule"), and detailed descriptions.

The visualization is split into two main sections - a sidebar and the main chart area. The sidebar, created by "hconcat", contains an interactive list of project tasks, which are highlighted based on their selection state and their alignment with the current group. The main chart area, assembled by "vconcat", represents tasks' timelines as horizontal bars whose color corresponds to the task status.

Users can click on different tasks in the sidebar to view different timelines. The chart also includes a vertical rule indicating the current date and tooltips on the timeline bars providing detailed information.

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"task": 0,
"group": "P01",
"name": "Clean the house",
"start": "2023-03-10",
"end": "2023-07-15",
"status": "Project",
"description": "This is the description of project 1."
},
{
"task": 1,
"group": "P01",
"name": "House 1.1",
"start": "2023-03-10",
"end": "2023-04-15",
"status": "Delayed",
"description": "This is the description of project 2."
},
{
"task": 2,
"group": "P01",
"name": "House 1.2",
"start": "2023-04-15",
"end": "2023-05-15",
"status": "Behind schedule",
"description": "This is the description of project 3."
},
{
"task": 3,
"group": "P01",
"name": "House 1.3",
"start": "2023-05-15",
"end": "2023-07-15",
"status": "On schedule",
"description": "This is the description of project 3."
},
{
"task": 0,
"group": "P02",
"name": "Clean the car",
"start": "2023-06-10",
"end": "2023-07-15",
"status": "Project",
"description": "This is the description of project 1."
},
{
"task": 1,
"group": "P02",
"name": "Car 2.1",
"start": "2023-04-10",
"end": "2023-06-01",
"status": "Delayed",
"description": "This is the description of project 2."
},
{
"task": 2,
"group": "P02",
"name": "Car 2.2",
"start": "2023-07-01",
"end": "2023-07-15",
"status": "On schedule",
"description": "This is the description of project 3."
},
{
"task": 0,
"group": "P03",
"name": "Clean the garage",
"start": "2023-03-10",
"end": "2023-05-15",
"status": "Project",
"description": "This is the description of project 1."
},
{
"task": 1,
"group": "P03",
"name": "Garage 3.1",
"start": "2023-01-10",
"end": "2023-02-01",
"status": "Delayed",
"description": "This is the description of project 2."
},
{
"task": 2,
"group": "P03",
"name": "Garage 3.2",
"start": "2023-02-04",
"end": "2023-03-15",
"status": "On schedule",
"description": "This is the description of project 3."
},
{
"task": 3,
"group": "P03",
"name": "Garage 3.3",
"start": "2023-03-10",
"end": "2023-04-01",
"status": "Delayed",
"description": "This is the description of project 2."
},
{
"task": 4,
"group": "P03",
"name": "Garage 3.4",
"start": "2023-05-04",
"end": "2023-06-15",
"status": "On schedule",
"description": "This is the description of project 3."
}
]
},
"hconcat": [
{"height": 200, "width": 10, "mark": {"type": "text", "align": "left"}},
{
"params": [
{
"name": "selectedgroup",
"value": "P01",
"select": {"type": "point", "fields": ["group"]}
}
],
"transform": [
{"calculate": "toDate(utcFormat(now(), '%Y-%m-%d'))","as": "currentDate"},
{"calculate": "selectedgroup.group", "as": "pgroup"},
{"calculate": "datum.group == datum.pgroup ? 'Y' : 'N'", "as": "check"},
{"calculate": "datum.group == datum.pgroup ? 'A' : 'B'", "as": "sort"},
{"calculate": "datum.sort + '-' + datum.group + '-0' + format(datum.task, '.0f') ","as": "project_sort"},
{"calculate": "datum.group == datum.pgroup && datum.task == 0 ? '⯈' : datum.group !== datum.pgroup && datum.task == 0 ? '⭘' : ''","as": "icon"},
{"calculate": "datum.icon + ' ' + datum.name + '|' + format(datum.task, '.0f') + '|' + datum.check", "as": "project_full_descr"},
{"filter": "datum.group == datum.pgroup || datum.pgroup == null || datum.task == 0"}
],
"width": 140,
"height": {"step": 29},
"mark": {"type": "bar", "tooltip": false, "color": "transparent"},
"encoding": {
"y": {
"field": "project_full_descr",
"type": "nominal",
"sort": {"field": "project_sort"},
"axis": {
"orient": "right",
"domain": false,
"grid": false,
"ticks": false,
"labels": true,
"labelFontSize": { "expr": "indexof(datum.label, '|0') !== -1 && indexof(datum.label, '|Y') !== -1 ? 13: indexof(datum.label, '|0') !== -1 && indexof(datum.label, '|N') !== -1 ? 13: 12"
},
"labelPadding": { "expr": "indexof(datum.label, '|0') !== -1 ? -150:-120"
},
"labelExpr": "split(datum.label, '|')[0]", 
"labelFontWeight": { "expr": "indexof(datum.label, '|0') !== -1 && indexof(datum.label, '|Y') !== -1 ? 'bold':'normal'"
},
"labelColor": { "expr": "indexof(datum.label, '|0') !== -1 && indexof(datum.label, '|Y') !== -1 ? '#000': indexof(datum.label, '|0') !== -1 && indexof(datum.label, '|N') !== -1 ? '#939191': '#E2E2E2'"
}
},
"title": null
}
}
},
{
"vconcat": [
{"height": 10, "width": 10, "mark": {"type": "text", "align": "left"}},
{
"width": 400,
"height": {"step": 28},
"transform": [
{
"calculate": "toDate(utcFormat(now(), '%Y-%m-%d'))",
"as": "currentDate"
},
{
"filter": {
"and": [
"datum['task'] != 0",
{"and": [{"param": "selectedgroup"}]}
]
}
}
],
"layer": [
{
"mark": {
"type": "rule",
"strokeDash": [2, 2],
"strokeWidth": 1,
"color": "#C690F1"
},
"encoding": {
"x": {
"field": "currentDate",
"type": "temporal",
"axis": {"format": "%d-%b"}
}
}
},
{
"mark": {
"type": "bar",
"height": {"band": 0.4},
"tooltip": true,
"cornerRadius": 4
},
"encoding": {
"y": {
"field": "name",
"type": "nominal",
"axis": {
"domain": false,
"grid": false,
"ticks": false,
"labels": false
},
"title": null
},
"x": {
"field": "start",
"type": "temporal",
"timeUnit": "yearmonthdate",
"axis": {
"format": "%d-%b",
"domain": true,
"grid": false,
"ticks": true,
"labels": true,
"labelFontSize": 11,
"labelColor": "#939191",
"labelPadding": 5
},
"title": null
},
"x2": {"field": "end"},
"color": {
"title": null,
"field": "status",
"type": "nominal",
"scale": {
"domain": ["Delayed", "Behind schedule", "On schedule"],
"range": ["#FAA43A", "#5DA5DA", "#60BD68"]
},
"legend": {
"labelFontSize": 11,
"labelColor": "#706D6C",
"symbolType": "circle",
"orient": "none",
"direction": "horizontal",
"legendY": 0,
"legendX": 260
}
},
"tooltip": [
{
"field": "start",
"type": "temporal",
"timeUnit": "yearmonthdate",
"title": "Start"
},
{
"field": "end",
"type": "temporal",
"timeUnit": "yearmonthdate",
"title": "End"
},
{"field": "description", "type": "nominal", "title": "Descr."}
]
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dy": -11,
"dx": 0,
"color": "#000",
"fontSize": 11
},
"encoding": {
"x": {"field": "start", "type": "temporal"},
"y": {"field": "name", "type": "nominal"},
"text": {"field": "name", "type": "nominal"}
}
}
]
}
]
}
],
"config": {"view": {"stroke": null}}
}

Adam