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>`;
+}