Lineage DAG (#252)

## Summary

## Checklist
- [ ] Added Unit Tests
- [ ] Covered by existing CI
- [ ] Integration tested
- [ ] Documentation update
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added interactive transformation controls for chart zooming,
resetting, and scroll modes.
- Introduced a detailed join configuration view and enhanced node graph
visualization with tooltips and collapsible details.
- Implemented a new component for displaying configuration properties
related to joins in a tabular format.
- Added new dependencies to enhance functionality and updated existing
ones for better performance.
- Introduced a new method for retrieving edges in the node graph and
improved lineage data handling.
  - Added a new `StatusBar` component for job status representation.
- Introduced sample data structures for lineage and job tracking
responses.
- Implemented a new function for managing expandable row states in job
tracking tables.
- **UI Improvements**
  - Refined chart layouts with updated padding and legend styling.
  - Improved navigation headers and tabs for clearer page organization.
  - Enhanced visual feedback for missing drift or distribution data.
- Allowed interaction with previously disabled elements for improved
user experience.
- **Bug Fixes**
  - Improved error handling for data fetching and display logic.
- **Chores**
- Upgraded underlying dependencies and animations for smoother
performance.
- Removed obsolete files and functions related to job tracking data
management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- av pr metadata
This information is embedded by the av CLI when creating PRs to track
the status of stacks when using Aviator. Please do not delete or edit
this section of the PR.
```
{"parent":"main","parentHead":"","trunk":"main"}
```
-->

---------

Co-authored-by: Sean Lynch <[email protected]>
Co-authored-by: Ken Morton <[email protected]>

Author: 3 people

frontend/package-lock.json

@@ -62,12 +62,14 @@
 	"dependencies": {
 		"@creditkarma/thrift-server-core": "^1.0.4",
 		"@creditkarma/thrift-typescript": "^3.7.6",
+		"@layerstack/svelte-actions": "^0.0.11",
 		"@layerstack/utils": "^0.0.7",
 		"clsx": "^2.1.1",
 		"d3": "^7.9.0",
 		"dotenv": "^16.4.7",
-		"layerchart": "^0.95.0",
+		"layerchart": "^0.99.1",
 		"lodash": "^4.17.21",
+		"svelte-inspect-value": "^0.1.3",
 		"tailwind-merge": "^2.6.0",
 		"tailwind-variants": "^0.3.1"
 	},
@@ -79,6 +81,9 @@
 		"nanoid": "^3.3.8",
 		"svelte-headless-table": {
 			"svelte": "^5.0.0"
+		},
+		"svelte-inspect-value": {
+			"svelte": "^5.0.0"
 		}
 	},
 	"optionalDependencies": {

frontend/package.json

@@ -101,25 +101,49 @@
 
 		--ring: 0 0% 83.1%;
 
-		--job-running-bg: 249 32% 56%;
-		--job-running-border: 249 54% 72%;
-		--job-running-active-border: 250 100% 86%;
-		--job-waiting-bg: 250 30% 24%;
-		--job-waiting-border: 250 30% 40%;
-		--job-waiting-active-border: 250 89% 70%;
-		--job-failed-bg: 10 24% 20%;
-		--job-failed-border: 10 30% 34%;
-		--job-failed-active-border: 10 46% 56%;
-		--job-completed-bg: 160 40% 17%;
-		--job-completed-border: 160 40% 28%;
-		--job-completed-active-border: 160 32% 47%;
-		--job-invalid-bg: 44 80% 14%;
-		--job-invalid-border: 44 68% 24%;
-		--job-invalid-active-border: 44 62% 40%;
-		--job-queued-bg: 0 0% 16%;
-		--job-queued-border: 0 0% 24%;
-		--job-queued-active-border: 0 0% 40%;
+		/* Base colors for reuse */
+		--color-failed: 10 24% 20%;
+		--color-failed-border: 10 30% 34%;
+		--color-failed-active: 10 46% 56%;
 
+		--color-running: 250 30% 24%;
+		--color-running-border: 250 30% 40%;
+		--color-running-active: 250 48% 62%;
+
+		/* Job status colors using base variables */
+		--job-RUNNING-bg: var(--color-running);
+		--job-RUNNING-border: var(--color-running-border);
+		--job-RUNNING-active-border: var(--color-running-active);
+
+		--job-WAITING_FOR_UPSTREAM-bg: 210 30% 20%;
+		--job-WAITING_FOR_UPSTREAM-border: 210 30% 34%;
+		--job-WAITING_FOR_UPSTREAM-active-border: 210 46% 56%;
+
+		--job-FAILED-bg: var(--color-failed);
+		--job-FAILED-border: var(--color-failed-border);
+		--job-FAILED-active-border: var(--color-failed-active);
+
+		--job-SUCCESS-bg: 160 40% 17%;
+		--job-SUCCESS-border: 160 40% 28%;
+		--job-SUCCESS-active-border: 160 32% 47%;
+
+		--job-UPSTREAM_FAILED-bg: var(--color-failed);
+		--job-UPSTREAM_FAILED-border: var(--color-failed-border);
+		--job-UPSTREAM_FAILED-active-border: var(--color-failed-active);
+
+		--job-QUEUED-bg: 0 0% 16%;
+		--job-QUEUED-border: 0 0% 24%;
+		--job-QUEUED-active-border: 0 0% 40%;
+
+		--job-UPSTREAM_MISSING-bg: 38 30% 20%;
+		--job-UPSTREAM_MISSING-border: 38 30% 34%;
+		--job-UPSTREAM_MISSING-active-border: 38 46% 56%;
+
+		--job-WAITING_FOR_RESOURCES-bg: var(--color-running);
+		--job-WAITING_FOR_RESOURCES-border: var(--color-running-border);
+		--job-WAITING_FOR_RESOURCES-active-border: var(--color-running-active);
+
+		/* Scrollbar colors */
 		--scrollcolor: hsla(0, 0%, 13%, 1);
 		--scrollbackground: transparent;
 		scrollbar-color: var(--scrollcolor) var(--scrollbackground);