Vikas/f dag app

package.json

@@ -80,7 +80,7 @@
     "@ollion/flow-lineage": "workspace:*",
     "@ollion/flow-log": "workspace:*",
     "@ollion/flow-md-editor": "workspace:*",
-    "@ollion/flow-product-icon": "1.14.0",
+    "@ollion/flow-product-icon": "1.16.0",
     "@ollion/flow-system-icon": "latest",
     "@ollion/flow-table": "workspace:*",
     "d3": "^7.6.1",

packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts

@@ -260,6 +260,7 @@ export class FTimeseriesChart extends FRoot {
 					height="hug-content"
 					max-width="320px"
 					class="f-chart-tooltip hide"
+					data-theme="f-dark"
 					${ref(this.chartTooltip)}
 				></f-div>
 			</f-div>

packages/flow-lineage/package.json

@@ -22,13 +22,14 @@
   "dependencies": {
     "@ollion/flow-core": "workspace:*",
     "@ollion/flow-core-config": "workspace:*",
-    "d3": "^7.6.1",
+    "d3": "^7.8.4",
+    "d3-dag": "^1.1.0",
     "lit": "^3.1.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
     "@open-wc/testing": "^3.1.5",
-    "@types/d3": "^7.4.0",
+    "@types/d3": "^7.4.3",
     "@types/jest": "29.5.5",
     "@web/dev-server-esbuild": "^0.3.0",
     "@web/test-runner": "^0.13.30",

packages/flow-lineage/src/components/f-dag/add-group.ts

@@ -0,0 +1,115 @@
+import { html } from "lit";
+import type { FDag } from "./f-dag";
+import type { FInput, FSelect, FTabNode } from "@ollion/flow-core";
+
+export function addGroupPopover(this: FDag) {
+	const closeAddPopover = () => {
+		this.addGroupPopoverRef.open = false;
+	};
+
+	const addSelectionToGroup = (groupid: string) => {
+		this.selectedNodes.forEach(sn => {
+			sn.group = groupid;
+		});
+
+		this.addGroupPopoverRef.open = false;
+
+		this.resetPlacements();
+		this.selectedNodes = [];
+		this.addGroupButton.style.display = "none";
+		this.requestUpdate();
+	};
+
+	const addToNewGroup = () => {
+		const groupIdInput = this.querySelector<FInput>("#new-group-id")!;
+		const groupLabelInput = this.querySelector<FInput>("#new-group-label")!;
+		const parentGroupIfAny = this.selectedNodes[0].group;
+
+		const isAllFromSameGroup = this.selectedNodes.every(sn => sn.group === parentGroupIfAny);
+		this.config.groups.push({
+			id: groupIdInput.value as string,
+			label: groupLabelInput.value as string,
+			icon: "i-org",
+			group: isAllFromSameGroup && parentGroupIfAny ? parentGroupIfAny : undefined
+		});
+
+		addSelectionToGroup(groupIdInput.value as string);
+	};
+
+	const addToGroup = () => {
+		const groupDropdown = this.querySelector<FSelect>(`#f-group-dropdown`)!;
+		const groupid = groupDropdown.value as string;
+
+		addSelectionToGroup(groupid);
+	};
+
+	const switchTab = (event: PointerEvent) => {
+		const tabNodeElement = event.currentTarget as FTabNode;
+
+		this.querySelectorAll<FTabNode>(`.gr-selection-tabs`).forEach(tab => {
+			tab.active = false;
+		});
+		tabNodeElement.active = true;
+	};
+	return html` <f-popover size="small" id="add-group-popover" .overlay=${false} target="#add-group">
+		<f-div @wheel=${(e: Event) => e.stopPropagation()}>
+			<f-tab>
+				<f-tab-node
+					@click=${switchTab}
+					class="gr-selection-tabs"
+					active
+					content-id=${`existing-group-selection`}
+				>
+					<f-div width="100%" height="100%" align="middle-center" direction="column">
+						Exisiting
+					</f-div>
+				</f-tab-node>
+				<f-tab-node @click=${switchTab} class="gr-selection-tabs" content-id=${`new-group`}>
+					<f-div width="100%" height="100%" align="middle-center" direction="column">
+						Create New
+					</f-div>
+				</f-tab-node>
+			</f-tab>
+			<f-tab-content id="existing-group-selection">
+				<f-div padding="medium" gap="medium">
+					<f-select
+						id="f-group-dropdown"
+						placeholder="Select Group"
+						@input=${addToGroup}
+						.options=${this.config.groups.map(g => g.id)}
+					></f-select>
+				</f-div>
+				<f-button
+					label="cancel"
+					@click=${closeAddPopover}
+					variant="block"
+					state="neutral"
+				></f-button>
+			</f-tab-content>
+			<f-tab-content id="new-group">
+				<f-div direction="column">
+					<f-div padding="medium" gap="medium">
+						<f-input id="new-group-id" placeholder="New Group Id"></f-input>
+						<f-input id="new-group-label" placeholder="New Group Label"></f-input>
+					</f-div>
+
+					<f-div>
+						<f-div>
+							<f-button
+								label="cancel"
+								@click=${closeAddPopover}
+								variant="block"
+								state="neutral"
+							></f-button>
+						</f-div>
+						<f-div><f-button variant="block" label="Add" @click=${addToNewGroup}></f-button></f-div>
+					</f-div>
+				</f-div>
+			</f-tab-content>
+		</f-div>
+	</f-popover>`;
+}
+
+export function handleAddGroup(this: FDag) {
+	this.addGroupPopoverRef.open = true;
+}

packages/flow-lineage/src/components/f-dag/background-svg.ts

@@ -0,0 +1,22 @@
+import { html } from "lit";
+
+export default function backgroundSVG() {
+	return html` <svg
+		class="background-svg"
+		style="position: absolute;width: 100%;height: 100%;top: 0px;left: 0px;"
+	>
+		<pattern
+			class="background-pattern"
+			id="pattern-1undefined"
+			x="0"
+			y="0"
+			width="24"
+			height="24"
+			patternUnits="userSpaceOnUse"
+			patternTransform="translate(-0.5,-0.5)"
+		>
+			<circle cx="0.5" cy="0.5" r="1" fill="var(--color-border-subtle)"></circle>
+		</pattern>
+		<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-1undefined)"></rect>
+	</svg>`;
+}