props.toggleMinimize()}
+ />
+
+
+ )}
+
+
+ {getElement()}
+
+
+ );
+};
+
+export const DurationDisplay = (props: {
+ startTime: string | undefined;
+ endTime: string | undefined;
+ currentTime: Date;
+}) => {
+ const {
+ formattedHours,
+ formattedMinutes,
+ formattedSeconds,
+ formattedMilliseconds,
+ } = durationFormat(
+ props.startTime || undefined,
+ props.endTime || undefined,
+ new Date()
+ );
+ // const out = `${formattedHours}:${formattedMinutes}:${formattedSeconds}.${formattedMilliseconds}`;
+ const getTextColor = (highlighted: boolean) => {
+ if (!highlighted) {
+ return "text-gray-300";
+ }
+ return ""; // default to standrd
+ };
+ const highlightHours = formattedHours !== "00";
+ const highlightMinutes = formattedMinutes !== "00" || highlightHours;
+ const highlightSeconds = true;
+ const highlightMilliseconds = true;
+ return (
+
+ {formattedDate}
+
+
+ {formattedTime}
+
+
+ {formattedHours}
+
+ :
+
+
+ {formattedMinutes}
+
+
+ :
+
+
+ {formattedSeconds}
+
+
+ .
+
+
+ {formattedMilliseconds}
+
+
+ );
+};
diff --git a/ui/frontend/src/components/common/DeleteButton.tsx b/ui/frontend/src/components/common/DeleteButton.tsx
new file mode 100644
index 000000000..5b76e950e
--- /dev/null
+++ b/ui/frontend/src/components/common/DeleteButton.tsx
@@ -0,0 +1,22 @@
+import { XMarkIcon } from "@heroicons/react/20/solid";
+
+export const DeleteButton = (props: {
+ deleteMe: () => void;
+ deleteType: string;
+ canDelete: boolean;
+}) => {
+ if (!props.canDelete) return <>;
+ return (
+
+ );
+};
diff --git a/ui/frontend/src/components/common/Dropdown.tsx b/ui/frontend/src/components/common/Dropdown.tsx
new file mode 100644
index 000000000..51d0a1fc4
--- /dev/null
+++ b/ui/frontend/src/components/common/Dropdown.tsx
@@ -0,0 +1,103 @@
+import { Listbox, Transition } from "@headlessui/react";
+import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import React, { Fragment } from "react";
+import { AiFillQuestionCircle } from "react-icons/ai";
+import { IconType } from "react-icons/lib";
+import { classNames } from "../../utils";
+import { HelpTooltip } from "./HelpTooltip";
+
+type Selectable = {
+ name: string;
+ value: any;
+ icon?: IconType;
+};
+
+export const DropdownSelector: React.FC<{
+ choices: Selectable[];
+ setCurrentChoice: (choice: any) => void;
+ currentChoice: any | null;
+ title: string;
+ description?: string;
+}> = (props) => {
+ return (
+
+
+ {/* Hack to make the padding look good */}
+
+ {props.currentChoice?.name ? props.currentChoice.name : "..."}
+
+
+
+
+
+
+
+
+ {props.choices.map((config, index) => (
+
+ classNames(
+ active ? "text-white bg-dwlightblue" : "text-gray-900",
+ "relative cursor-default select-none py-2 pl-3 pr-9"
+ )
+ }
+ value={config}
+ >
+ {({ selected, active }) => (
+ <>
+
+ {config.name}
+
+
+ {selected ? (
+
+
+
+ ) : null}
+
+ )}
+
+ ))}
+
+
+
+
+ )}
+ {props.message}
;
+};
diff --git a/ui/frontend/src/components/common/GenericTabbedView.tsx b/ui/frontend/src/components/common/GenericTabbedView.tsx
new file mode 100644
index 000000000..c25426362
--- /dev/null
+++ b/ui/frontend/src/components/common/GenericTabbedView.tsx
@@ -0,0 +1,78 @@
+import { classNames } from "../../utils";
+import { HiChevronDown, HiChevronUp } from "react-icons/hi";
+
+export const Tabs = (props: {
+ allTabs: { name: string; displayName: string }[];
+ setCurrentTab: (tab: string) => void;
+ currentTab: string;
+ isMinimized: boolean;
+ setIsMinimized: (minimized: boolean) => void | null;
+ additionalElement?: JSX.Element;
+}) => {
+ const Icon = props.isMinimized ? HiChevronDown : HiChevronUp;
+ return (
+
+
+ );
+};
diff --git a/ui/frontend/src/components/common/GenericTable.tsx b/ui/frontend/src/components/common/GenericTable.tsx
new file mode 100644
index 000000000..a1291709e
--- /dev/null
+++ b/ui/frontend/src/components/common/GenericTable.tsx
@@ -0,0 +1,396 @@
+import React, { FC } from "react";
+import { HiChevronDown, HiChevronUp } from "react-icons/hi";
+
+// TODO -- replace all these JSX functions with FC :/
+type GenericTableProps
+
+
+
+ {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
+
+
+
+
+
+
+
+ {props.setIsMinimized && (
+
+
+ props.setIsMinimized(!props.isMinimized)}
+ />
+
+ )}
+
+ {props.additionalElement ? (
+
+ {props.additionalElement}
+
+ ) : (
+ <>
+ )}
+
+
+ );
+};
+
+type GenericGroupedTableProps
+
+
+ {props.name ? (
+
+ + {props.name} +
+ ) : null} +
+
+
+
+
+
+
+
+
+ | + {props.dataTypeName} + | + } + {props.columns.map((column, index) => { + return ( ++ {column.displayName} + | + ); + })} +
|---|
+ {
+ expandable && setExpanded(!expanded);
+ }}
+ />
+
+ ) : null}
+
+
+ );
+};
+
+export const getMeanStdDev = (data: number[]) => {
+ const mean = data.reduce((a, b) => a + b, 0) / data.length;
+ const stdDev = Math.sqrt(
+ data.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / data.length
+ );
+ return { mean, stdDev };
+};
+
+export const formatMeanStdDev = (
+ mean: number,
+ stdDev: number,
+ meanDecimalPoints?: number,
+ stdDevDecimalPoints?: number
+) => {
+ if (meanDecimalPoints === undefined) {
+ meanDecimalPoints = 2;
+ }
+ if (stdDevDecimalPoints === undefined) {
+ stdDevDecimalPoints = 2;
+ }
+ if (stdDev === 0) {
+ return `${mean.toFixed(meanDecimalPoints)}`;
+ }
+ return `${mean.toFixed(meanDecimalPoints)} ± ${stdDev.toFixed(
+ stdDevDecimalPoints
+ )}`;
+};
diff --git a/ui/frontend/src/components/common/HelpTooltip.tsx b/ui/frontend/src/components/common/HelpTooltip.tsx
new file mode 100644
index 000000000..37da3ed78
--- /dev/null
+++ b/ui/frontend/src/components/common/HelpTooltip.tsx
@@ -0,0 +1,31 @@
+import { AiFillQuestionCircle } from "react-icons/ai";
+
+export const HelpTooltip: React.FC<{ description: string }> = (props) => {
+ return (
+
+
+
+ {props.name ? (
+
+ + {props.name} +
+ ) : null} +
+
+
+
+
+
+
+
+
+ | + { + | + {props.dataTypeName} + | + } + {props.columns.map((column, index) => { + return ( ++ {column.displayName} + | + ); + })} +
|---|
+
+
+ );
+};
+
+export const LabelWithHelpTooltip: React.FC<{
+ label: string;
+ description: string;
+}> = (props) => {
+ return (
+
+
+
+ );
+};
diff --git a/ui/frontend/src/components/common/Loading.tsx b/ui/frontend/src/components/common/Loading.tsx
new file mode 100644
index 000000000..bb35b56fa
--- /dev/null
+++ b/ui/frontend/src/components/common/Loading.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+export const Loading = () => {
+ return (
+
+
+
+
+
+ );
+};
diff --git a/ui/frontend/src/components/common/ProjectVersionSelector.tsx b/ui/frontend/src/components/common/ProjectVersionSelector.tsx
new file mode 100644
index 000000000..371ccdf17
--- /dev/null
+++ b/ui/frontend/src/components/common/ProjectVersionSelector.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { classNames } from "../../utils";
+import { DAGTemplateWithoutData } from "../../state/api/friendlyApi";
+
+export const ProjectVersionSelector = (props: {
+ dagTemplates: DAGTemplateWithoutData[];
+ currentProjectVersionIndex: number;
+ setCurrentProjectVersionIndex: (i: number) => void;
+ compareToProjectVersionIndex: number;
+ setCompareToProjectVersionIndex: (i: number) => void;
+}) => {
+ const {
+ currentProjectVersionIndex,
+ setCurrentProjectVersionIndex,
+ compareToProjectVersionIndex,
+ setCompareToProjectVersionIndex,
+ } = props;
+
+ return (
+
+
+
+ );
+};
+
+export const MultiProjectVersionSelector = (props: {
+ dagTemplates: DAGTemplateWithoutData[];
+ projectVersionsIndices: Set
+
+
+ );
+};
diff --git a/ui/frontend/src/components/common/RunDurationChart.tsx b/ui/frontend/src/components/common/RunDurationChart.tsx
new file mode 100644
index 000000000..edd7f54d1
--- /dev/null
+++ b/ui/frontend/src/components/common/RunDurationChart.tsx
@@ -0,0 +1,118 @@
+import {
+ Chart as ChartJS,
+ LinearScale,
+ PointElement,
+ LineElement,
+ BarElement,
+ Title,
+ Tooltip,
+ Filler,
+ Legend,
+ CategoryScale,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+import { RunStatusType } from "../../state/api/friendlyApi";
+import { getColorFromStatus } from "../dashboard/Runs/Status";
+// import { RunStatus, getColorFromStatus } from "../dashboard/Runs/Run/Status";
+
+ChartJS.register(
+ CategoryScale,
+ BarElement,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Filler,
+ Legend
+);
+
+export const RunDurationChart = (props: {
+ runInfo: {
+ name: string;
+ runId: number;
+ duration: number | undefined;
+ state: RunStatusType;
+ }[];
+ w?: string;
+ h?: string;
+}) => {
+ const data = {
+ labels: props.runInfo.map((i) => `run: ${i.runId}`),
+ datasets: [
+ {
+ categoryPercentage: 1.0,
+ barPercentage: 0.99,
+ label:
+ "How long " +
+ props.runInfo[0].name +
+ " execution took for each run logged.",
+ data: props.runInfo.map((i) => i.duration),
+ fill: false,
+ segment: {
+ //eslint-disable-next-line @typescript-eslint/no-explicit-any
+ borderColor: (ctx: any) => {
+ const p2Index = ctx.p0.$context.dataIndex;
+ const status = props.runInfo[p2Index].state;
+ return getColorFromStatus(status).html;
+ },
+ },
+ backgroundColor: props.runInfo.map(
+ ({ state }) => getColorFromStatus(state).html
+ ),
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ maintainAspectRatio: false,
+ layout: {
+ // autoPadding: true,
+ },
+ scales: {
+ x: {
+ display: true,
+ },
+ y: {
+ display: true,
+ ticks: {
+ //eslint-disable-next-line @typescript-eslint/no-explicit-any
+ callback: function (value: any) {
+ return value + "s";
+ },
+ },
+ },
+ },
+ plugins: {
+ legend: {
+ display: true,
+ position: "top" as const,
+ },
+ title: {
+ display: false,
+ text: "Chart.js Line Chart",
+ },
+ },
+ };
+ const outerHeight = props.h || "h-[25px]";
+ const outerWidth = props.w || "w-[250px]";
+ const height = props.h ? props.h : "25px";
+ const width = props.w ? "w-full" : "250px";
+
+ return (
+
+
+ );
+};
diff --git a/ui/frontend/src/components/common/Tooltip.tsx b/ui/frontend/src/components/common/Tooltip.tsx
new file mode 100644
index 000000000..3cd180810
--- /dev/null
+++ b/ui/frontend/src/components/common/Tooltip.tsx
@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+
+export const ToolTip: React.FC<{ children: ReactNode; tooltip?: string }> = (
+ props
+) => {
+ return (
+
+ {props.children}
+ {/* This is a hack -- the overflow is hidden for the parent container, so we need to
+ position it on the right of the icon.
+ We'll need to redo it, just don't have the time now and this works... */}
+
+ {props.tooltip}
+
+
+ );
+};
diff --git a/ui/frontend/src/components/common/WithHelpIcon.tsx b/ui/frontend/src/components/common/WithHelpIcon.tsx
new file mode 100644
index 000000000..0c853d145
--- /dev/null
+++ b/ui/frontend/src/components/common/WithHelpIcon.tsx
@@ -0,0 +1,28 @@
+import { ReactNode, useContext } from "react";
+import { HelpVideos, TutorialContext } from "../tutorial/HelpVideo";
+import { FaQuestionCircle } from "react-icons/fa";
+
+export const WithHelpIcon = (props: {
+ children: ReactNode;
+ whichIcon: keyof typeof HelpVideos;
+ translate?: string;
+}) => {
+ const { setLoomVideoOpen, includeHelp, setCurrentLoomVideo } =
+ useContext(TutorialContext);
+ return (
+
+ {includeHelp ? (
+ {
+ setCurrentLoomVideo(props.whichIcon);
+ setLoomVideoOpen(true);
+ }}
+ />
+ ) : null}
+ {props.children}
+
+ );
+};
diff --git a/ui/frontend/src/components/dashboard/Account/Account.tsx b/ui/frontend/src/components/dashboard/Account/Account.tsx
new file mode 100644
index 000000000..0b3a44b8f
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Account/Account.tsx
@@ -0,0 +1,66 @@
+import { Loading } from "../../common/Loading";
+import { useUserInformation } from "../../../state/api/friendlyApi";
+import { useRedirectFunctions } from "@propelauth/react";
+import { ErrorPage } from "../../common/Error";
+
+export const Account = () => {
+ const userInfo = useUserInformation();
+ const { redirectToOrgPage } = useRedirectFunctions();
+ if (userInfo.isLoading || userInfo.isFetching) {
+ return
+
+ );
+};
+
+export default Account;
diff --git a/ui/frontend/src/components/dashboard/Alerts.tsx b/ui/frontend/src/components/dashboard/Alerts.tsx
new file mode 100644
index 000000000..50dc02900
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Alerts.tsx
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+export const Alerts = () => {
+ const currentURL = new URL(window.location.href);
+ const pathParts = currentURL.pathname.split("/");
+ // Remove the last part of the path
+ pathParts.pop();
+ const modifiedPath = pathParts.join("/") + "/runs";
+ return (
+
+
+ + Account +
+
+ Username:
+ {user}
+
+
+ Workspaces:
+ {orgs.length > 0 ? (
+ orgs.map((org) => {
+ return (
+
+ redirectToOrgPage(org.auth_provider_organization_id)
+ }
+ key={org.name}
+ className="font-normal text-dwlightblue px-2 rounded-md hover:underline hover:cursor-pointer"
+ >
+ {org.name}
+
+ );
+ })
+ ) : (
+
+ Upgrade to the paid plan to collaborate with your team!
+
+ )}
+
+
+
+
+
+ Terms of Use
+
+
+
+ Sorry, this feature is not available to you yet. If you are interested in
+ trying it out, please reach out to us - info@dagworks.io! In the
+ meanwhile, check out your{" "}
+
+ run history{" "}
+ {" "}
+ to dive into your executions.
+
+ );
+};
diff --git a/ui/frontend/src/components/dashboard/Catalog/CatalogOutlet.tsx b/ui/frontend/src/components/dashboard/Catalog/CatalogOutlet.tsx
new file mode 100644
index 000000000..8e668b9d3
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Catalog/CatalogOutlet.tsx
@@ -0,0 +1,25 @@
+import { ErrorPage } from "../../common/Error";
+import { Loading } from "../../common/Loading";
+import { CatalogView } from "./SearchTable";
+import { useURLParams } from "../../../state/urlState";
+import { Project, useProjectByID } from "../../../state/api/friendlyApi";
+
+// const DEFAULT_NUMBER_OF_VERSIONS = 5;
+// const DEFAULT_NUMBER_OF_RUNS_PER_VERSION = 3;
+export const CatalogOutlet = () => {
+ const { projectId } = useURLParams();
+ const project = useProjectByID({ projectId: projectId as number });
+
+ if (project.isError) {
+ return (
+
+ void 0}
+ highlightedRun={null}
+ taskName={data.node_name}
+ >
+
+ );
+ },
+ },
+ // {
+ // displayName: "Node",
+ // Render: (nodeRun: CatalogNodeRun) => {
+ // // TODO -- hide this for subrows...
+ // return (
+ //
+ //
+ // {nodeRun.node_name}
+ //
+ //
+ // );
+ // },
+ // },
+
+ {
+ displayName: "Type",
+ Render: (data: NodeRunAndTemplate) => {
+ const nodeTemplateData = data.nodeTemplateData;
+ if (nodeTemplateData === undefined) {
+ return -;
+ }
+ const pythonType = getNodeOutputType
+ {parsePythonType(pythonType)}
+
+ );
+ // return {props.nodeName};
+ },
+ },
+ {
+ displayName: "State",
+ Render: (nodeRun: NodeRunAndTemplate) => {
+ // TODO -- ensure that this is the right type
+ let status = nodeRun.status as RunStatusType;
+ status = adjustStatusForDuration(
+ status,
+ nodeRun.start_time || undefined,
+ nodeRun.end_time || undefined,
+ new Date()
+ );
+ return
+ (
+
+
+ );
+};
+
+export const NodeRunsView = (props: {
+ value: RowToDisplay;
+ view: "runtime-chart" | "table" | undefined;
+}) => {
+ const { node, projectId } = props.value;
+ const nodeTemplateName = node.name;
+ const lastN = 100; // TODO -- make this configurable/part of the RowToDisplay
+ const latestNodeRuns = useNodeRunsByTemplateAndProject({
+ nodeTemplateName,
+ projectId,
+ limit: lastN,
+ });
+ if (latestNodeRuns.error) {
+ return (
+
+
+
+
+ {
+ const newSelectedRunIds = new Set(selectedRunIds);
+ if (e.target.checked) {
+ newSelectedRunIds.add(nodeRun.dag_run_id as number);
+ } else {
+ newSelectedRunIds.delete(nodeRun.dag_run_id as number);
+ }
+ setSelectedRunIds(newSelectedRunIds);
+ }}
+ className="h-4 w-4 rounded border-gray-300 text-dwdarkblue focus:ring-dwdarkblue"
+ />
+
+ )}
+ >
+
+ )}
+
+ No runs found
+
+ );
+ }
+ if (props.view === "table") {
+ return (
+
+ {tagsToMap.map(([key, value]) => {
+ return (
+
+ );
+};
+
+const DocumentationDisplay: React.FC<{
+ documentation: string | undefined;
+}> = (props) => {
+ const [expanded, setExpanded] = useState(false);
+ return (
+
+ {key}
+ {displayTagValue(value)}
+
+ );
+ })}
+
+
+ );
+};
+
+const getNodeTypeAndColor = (node: NodeTemplate) => {
+ // // TODO -- get this as node attributes from the DB
+ // // const nodeType = node.userDefined
+ // // ? "input"
+ // // : extractTagFromNode(node, "hamilton.data_saver") === true ||
+ // // extractTagFromNode(node, "hamilton.data_loader") === true
+ // // ? "artifact"
+ // // : "transform";
+ // const nodeType = "transform" as string;
+ const classifications = node.classifications as Classification[];
+ let nodeType = "transform";
+ if (classifications.length > 0) {
+ nodeType = classifications[0];
+ }
+ const bgColor =
+ nodeType === "data_loader" || nodeType === "data_saver"
+ ? "bg-dwdarkblue"
+ : nodeType === "input"
+ ? "bg-yellow-500"
+ : "bg-green-500";
+ const nodeTypeName = nodeType.replace("_", " ");
+ return [nodeTypeName, bgColor];
+};
+const FeatureNameDisplay = (label: string, value: RowToDisplay) => {
+ const node = value.node;
+ // TODO -- get this as node attributes from the DB
+ // const nodeType = node.userDefined
+ // ? "input"
+ // : extractTagFromNode(node, "hamilton.data_saver") === true ||
+ // extractTagFromNode(node, "hamilton.data_loader") === true
+ // ? "artifact"
+ // : "transform";
+ const Icon = getPythonTypeIconFromNode(node);
+
+ const [nodeType, bgColor] = getNodeTypeAndColor(node);
+ const outputType = getNodeOutputType {
+ setExpanded(!expanded);
+ e.stopPropagation();
+ }}
+ className={`${
+ expanded ? "break-word whitespace-pre-wrap" : "truncate"
+ } text-gray-500 cursor-cell`}
+ >
+ {props.documentation}
+
+
+ {outputType ? (
+
+
+ ) : null}
+
+ );
+};
+
+export const getIconForCodeType = (code: CodeArtifact) => {
+ if (code.type === "p_function") {
+ return AiOutlineFunction;
+ }
+ return undefined;
+};
+
+export const FunctionDisplay = (props: {
+ projectId: number;
+ projectVersionId: number;
+ code: CodeArtifact;
+ justIcon?: boolean;
+}) => {
+ const { name, path } = props.code;
+
+ if (path === undefined || name === undefined) {
+ return <>;
+ }
+
+ // const filename = path.split("/").slice(-1)[0];
+ const fnIdentifier = getFunctionIdentifier(props.code);
+ const url = `/dashboard/project/${props.projectId}/version/${props.projectVersionId}/code#${fnIdentifier}`;
+ const Icon = getIconForCodeType(props.code);
+ return (
+
+
+ {node.name}
+
+
+
+ {nodeType}
+
+
+ {Icon ? (
+
+
+ ) : null}
+ {!props.justIcon && (
+
+ );
+};
+
+interface FeatureSearchBoxProps {
+ setSearch: (term: string) => void;
+ term: string;
+}
+
+const FeatureSearchBox: React.FC
+
+ {name.split(".").slice(-1).join(".")}
+
+
+ )}
+
+ {/*
+ );
+};
+
+export type RowToDisplay = {
+ node: NodeTemplate;
+ key: string;
+ dagTemplateId: number;
+ projectVersionName: string;
+ projectId: number;
+ codeArtifact: CodeArtifact | undefined;
+ // runInfo: {
+ // runId: number;
+ // duration: number | undefined;
+ // state: RunStatusType;
+ // }[];
+};
+
+const extractTableData = (
+ nodes: NodeTemplate[],
+ codeArtifacts: CodeArtifact[],
+ projectId: number
+): RowToDisplay[] => {
+ const codeArtifactsById = new Map
+
+ This feature is under active development. Feedback & comments
+ appreciated.
+
+
*/}
+ setSearch(e.target.value)}
+ className="text-lg block w-full rounded-md border-dwlightblue/30 border shadow-sm focus:border-dwdarkblue focus:ring-dwdarkblue sm:text-sm py-2 px-2"
+ placeholder="Search for nodes, functions, etc..."
+ />
+
+ {
+ e.stopPropagation();
+ setView("table");
+ }}
+ className="hover:scale-125 cursor-pointer"
+ />
+ {
+ e.stopPropagation();
+ setView("runtime-chart");
+ }}
+ className="hover:scale-125 cursor-pointer"
+ />
+
+ );
+ },
+ },
+ ];
+
+ const shouldDisplay = (row: { item: RowToDisplay }) => {
+ // return true;
+ //eslint-disable-next-line no-prototype-builtins
+ const node = row.item.node;
+ return !Object.prototype.hasOwnProperty.call(
+ node.tags,
+ "hamilton.non_final_node"
+ );
+ // return !node.tags.hasOwnProperty("hamilton.decorators.non_final"); // Really it should check the value...
+ };
+ const getSearchResult = (term: string) => {
+ if (searchTerm == "") {
+ // This is a little messy cause it won't include all the search result fields necessarily...
+ return searchData
+ .map((data) => {
+ return { item: data };
+ })
+ .sort((n1, n2) => {
+ return n1.item.node.name.localeCompare(n2.item.node.name);
+ });
+ }
+ return fuse.search(term);
+ };
+
+ const searchResults = getSearchResult(searchTerm).filter(shouldDisplay);
+ return (
+
+ [
+ result.item.node.name,
+ result.item,
+ ])}
+ columns={cols}
+ dataTypeName={""}
+ dataTypeDisplay={FeatureNameDisplay}
+ extraRowData={{
+ Render: (props: { value: RowToDisplay }) => {
+ return (
+
+ );
+};
diff --git a/ui/frontend/src/components/dashboard/Code/Code.tsx b/ui/frontend/src/components/dashboard/Code/Code.tsx
new file mode 100644
index 000000000..b2dba515e
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Code/Code.tsx
@@ -0,0 +1,132 @@
+import { FC, useState } from "react";
+import CodeExplorer, { getFunctionIdentifier } from "./CodeExplorer";
+import {
+ CodeArtifact,
+ DAGTemplateWithData,
+ ProjectWithData,
+} from "../../../state/api/friendlyApi";
+import { ProjectVersionSelector } from "../../common/ProjectVersionSelector";
+import { extractCodeContents } from "../../../utils/codeExtraction";
+import FunctionView from "./Function";
+import {
+ getNodesProducedByFunction,
+ getDirectlyUpstreamNodes,
+} from "../../../utils/dagUtils";
+
+interface CodeProps {
+ dagTemplates: DAGTemplateWithData[];
+ project: ProjectWithData;
+}
+
+export const Code: FC
+
+
+
+
+
+
+ );
+};
diff --git a/ui/frontend/src/components/dashboard/Code/CodeExplorer.tsx b/ui/frontend/src/components/dashboard/Code/CodeExplorer.tsx
new file mode 100644
index 000000000..3b38a122a
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Code/CodeExplorer.tsx
@@ -0,0 +1,184 @@
+import React, { FC } from "react";
+import { HiChevronRight, HiChevronDown } from "react-icons/hi";
+import { IconType } from "react-icons/lib";
+import {
+ AiOutlineProject,
+ AiOutlineFileText,
+ AiOutlineFunction,
+} from "react-icons/ai";
+import { GoDot } from "react-icons/go";
+import { HashLink } from "react-router-hash-link";
+import {
+ CodeArtifact,
+ DAGTemplateWithData,
+ NodeTemplate,
+ Project,
+ ProjectWithData,
+} from "../../../state/api/friendlyApi";
+import { getNodesProducedByFunction } from "../../../utils/dagUtils";
+
+interface CodeExplorerProps {
+ dagTemplate: DAGTemplateWithData;
+ project: ProjectWithData;
+}
+
+const IconClose = HiChevronDown;
+const IconOpen = HiChevronRight;
+
+interface RecursiveNodeView {
+ children: RecursiveNodeView[];
+ icon: IconType;
+ name: string;
+ link: string | undefined;
+ level: number;
+ classNames: string;
+}
+
+export const getFunctionIdentifier = (fn: CodeArtifact) => {
+ return fn.name.replace(/\./g, "_");
+};
+
+const getLink = (fn: CodeArtifact) => {
+ return `#${getFunctionIdentifier(fn)}`;
+};
+
+const generateNodeViews = (
+ nodes: NodeTemplate[],
+ codeArtifact: CodeArtifact
+) => {
+ const children: RecursiveNodeView[] = [];
+ return nodes.map((node) => {
+ return {
+ children: children,
+ icon: GoDot,
+ name: node.name,
+ link: getLink(codeArtifact),
+ level: 3,
+ classNames: "text-gray-500",
+ };
+ });
+};
+
+const generateFunctionViews = (
+ code: CodeArtifact[],
+ dag: DAGTemplateWithData
+) => {
+ return code.map((code) => {
+ const fnName = code.name.split(".").slice(-1)[0];
+ const nodes = getNodesProducedByFunction(dag, code);
+ return {
+ children: generateNodeViews(nodes, code),
+ icon: AiOutlineFunction,
+ name: fnName,
+ link: getLink(code),
+ level: 2,
+ classNames: "text-gray-600",
+ };
+ });
+};
+
+const generateFunctionGroupingLevelViews = (
+ dag: DAGTemplateWithData,
+ grouper: (codeArtifact: CodeArtifact) => string
+) => {
+ // Break into groups
+ const groups = new Map
+ {props.dagTemplates.length > 1 ? (
+
+
+
+
+
+
+
+
+ {dagTemplate.code_artifacts.map((codeArtifact, index) => {
+ // TODO -- get the implied nodes by looking at the code artifact identifier
+ // const { sinks, intermediate, upstream } = dag.getImpliedNodes(fn);
+ const nodesProducedByFunction = getNodesProducedByFunction(
+ dagTemplate,
+ codeArtifact
+ );
+ const upstreamNodes = getDirectlyUpstreamNodes(
+ dagTemplate,
+ codeArtifact
+ );
+ const functionContents = extractCodeContents(
+ codeArtifact,
+ dagTemplate
+ );
+ const compareToContents =
+ compareToIndex !== currentIndex &&
+ compareToDAGFunctionsByIdentifier[codeArtifact.name]
+ ? extractCodeContents(
+ compareToDAGFunctionsByIdentifier[codeArtifact.name],
+ compareToDagTemplate
+ )
+ : undefined;
+ const fnIdentifier = getFunctionIdentifier(codeArtifact);
+ const isCurrent = currentHashLink === `#${fnIdentifier}`;
+
+ return (
+
+
+ toggleExpanded(index, all)}
+ compareCodeArtifact={
+ compareToDAGFunctionsByIdentifier[codeArtifact.name]
+ }
+ isHighlighted={isCurrent}
+ dagTemplate={dagTemplate}
+ >
+
+ );
+ })}
+ 0 ? "hover:bg-gray-200" : ""
+ } text-gray-600 gap-1 cursor-pointer ${view.classNames}`}
+ style={{ paddingLeft: `${view.level + 0.1}rem` }}
+ >
+ {view.children.length > 0 && (
+
+ el.scrollIntoView({ behavior: "smooth", block: "end" })
+ }
+ to={view.link}
+ >
+ {view.name}
+
+ ) : (
+ {view.name}
+ )}
+
+ {open &&
+ view.children.map((child, index) => {
+ return
+
+ );
+};
+
+export default CodeExplorer;
diff --git a/ui/frontend/src/components/dashboard/Code/CodeOutlet.tsx b/ui/frontend/src/components/dashboard/Code/CodeOutlet.tsx
new file mode 100644
index 000000000..f2ecc9a14
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Code/CodeOutlet.tsx
@@ -0,0 +1,12 @@
+import { Loading } from "../../common/Loading";
+import { useData as useDashboardData } from "../Dashboard";
+import { Code } from "./Code";
+
+export const CodeOutlet = () => {
+ const { dagTemplates, project } = useDashboardData();
+
+ if (dagTemplates === undefined) {
+ return
+
+ );
+};
diff --git a/ui/frontend/src/components/dashboard/Code/Function.tsx b/ui/frontend/src/components/dashboard/Code/Function.tsx
new file mode 100644
index 000000000..ee7157dfb
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Code/Function.tsx
@@ -0,0 +1,306 @@
+import React, { FC, useState } from "react";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued";
+
+import Highlight, { defaultProps } from "prism-react-renderer";
+import { MdOutlineExpand } from "react-icons/md";
+import { TbDelta } from "react-icons/tb";
+
+import { AiOutlineCode, AiOutlineGithub } from "react-icons/ai";
+
+import dracula from "prism-react-renderer/themes/vsLight";
+
+import { BiNetworkChart } from "react-icons/bi";
+import { FunctionGraphView } from "./FunctionGraphView";
+import { NodeView } from "./CodeViewUtils";
+import {
+ CodeArtifact,
+ CodeVersionGit1,
+ DAGTemplateWithData,
+ NodeTemplate,
+ getCodeVersion,
+} from "../../../state/api/friendlyApi";
+
+interface FunctionProps {
+ contents: string | undefined;
+ compareToContents: string | undefined;
+ codeArtifact: CodeArtifact;
+ compareCodeArtifact: CodeArtifact | undefined;
+ // codeArtifact: CodeArtifact;
+ // compareFn: HamiltonFunction | undefined;
+ upstreamNodes: NodeTemplate[];
+ nodesProducedByFunction: NodeTemplate[];
+ expanded: boolean;
+ toggleExpanded: (all: boolean) => void;
+ isHighlighted: boolean;
+ dagTemplate: DAGTemplateWithData; // Shouldn't be necessary but I don't want to refactor viz and I want to reuse it
+}
+
+const getCodeArtifactLink = (
+ codeArtifact: CodeArtifact,
+ dagTemplate: DAGTemplateWithData
+) => {
+ /**
+ * Gets the link to the function in the git repo
+ * TODO -- move this to the server side. We'll want to have:
+ * (1) branch, if applicable
+ * (2) commit hash, in case the branch changes
+ * (3) generated perma-link to the function
+ */
+ const functionPath = codeArtifact.path;
+ // TODO -- verify that this works
+ const gitVersion = getCodeVersion
+ {/*
+ {({ className, style, tokens, getLineProps, getTokenProps }) => {
+ const styleToRender = {
+ ...style,
+ backgroundColor: "transparent",
+ "word-break": "break-all",
+ "white-space": "pre-wrap",
+ };
+ className += "";
+ return (
+
+ )}
+
+ );
+};
+
+export const DiffView = (props: {
+ fnContents: string;
+ compareFnContents: string;
+}) => (
+ {fn.name}
*/} +
+ {props.displayFnExpand && (
+ setExpanded(!expanded)}
+ />
+ )}
+
+ {expanded && (
+
+ {tokens.map((line, i) => (
+ // eslint-disable-next-line react/jsx-key
+
+ {line.map((token, key) => (
+ // eslint-disable-next-line react/jsx-key
+
+ ))}
+
+ ))}
+
+ );
+ }}
+
+
+ );
+};
+
+const FunctionView: FC
+ input
+
+
+ output
+
+
+
+ );
+};
+
+export default FunctionView;
diff --git a/ui/frontend/src/components/dashboard/Code/FunctionGraphView.tsx b/ui/frontend/src/components/dashboard/Code/FunctionGraphView.tsx
new file mode 100644
index 000000000..b83196e6e
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Code/FunctionGraphView.tsx
@@ -0,0 +1,63 @@
+// import ReactFlow, {
+// useNodesState,
+// useEdgesState,
+// Handle,
+// Position,
+// ReactFlowProvider,
+// } from "reactflow";
+
+import {
+ DAGTemplateWithData,
+ NodeTemplate,
+} from "../../../state/api/friendlyApi";
+import { VisualizeDAG } from "../Visualize/DAGViz";
+import { VizType } from "../Visualize/types";
+
+export const FunctionGraphView = (props: {
+ upstreamNodes: NodeTemplate[];
+ nodesProducedByFunction: NodeTemplate[];
+ dagTemplate: DAGTemplateWithData;
+}) => {
+ const nodesWeCareAboutSet = new Set([
+ ...props.upstreamNodes.map((node) => node.name),
+ ...props.nodesProducedByFunction.map((node) => node.name),
+ ]);
+ const upstreamNodesSet = new Set(
+ props.upstreamNodes.map((node) => node.name)
+ );
+ const modifiedDAGTemplate = {
+ ...props.dagTemplate,
+ nodes: props.dagTemplate.nodes
+ .filter((node) => nodesWeCareAboutSet.has(node.name))
+ .map((n) => {
+ return {
+ ...n,
+ // This is not ideal -- we're adding new types that the API doesn't know about
+ // That said its not terrible -- no reason we shouldn't be able to add arbitrary properties
+ // -- as we're making the DAGViz one class for everything with different cases, I'm happy to pile on another case here
+ classifications: upstreamNodesSet.has(n.name)
+ ? ["external_to_subdag"]
+ : n.classifications,
+ // dependencies: Object.fromEntries(
+ // Object.entries(n.dependencies as string[]).filter(([k, v]) =>
+ // nodesWeCareAboutSet.has(k)
+ // )
+ // ),
+ };
+ }),
+ };
+ return (
+
+
+ {expanded && contents ? ( // TODO -- display a dummy if we don't have code...
+ displayMode === "code" || !diffModeAvailable ? (
+
+
+ + {codeArtifact.name} +
+
+ {diffModeAvailable ? (
+ displayMode === "code" ? (
+ setDisplayMode("diff")}
+ />
+ ) : (
+ setDisplayMode("code")}
+ />
+ )
+ ) : (
+ <>
+ )}
+
+
+
+ No code recorded...
+
+ )}
+
+
+ {miniGraphView === "graph" && (
+
+ setExpanded(!isExpanded)}
+ className={classNames(
+ `${
+ props.disable
+ ? "text-gray-400"
+ : "text-gray-300 hover:bg-gray-700 hover:text-white"
+ }`,
+ "group flex justify-between items-center px-2 py-2 text-base font-medium rounded-md"
+ )}
+ >
+ {name}
+ {props.disable ? <> :
+ {isExpanded &&
+ items.map((item) => {
+ return (
+ navigate(item.href)}
+ className={classNames(
+ item?.current
+ ? "bg-gray-900 text-white"
+ : "text-gray-300 hover:bg-gray-700 hover:text-white",
+ "group flex items-center px-2 py-2 text-base font-medium rounded-md"
+ )}
+ >
+
+ {item.name}
+
+ );
+ })}
+
+ );
+ return (
+ navigate(props.item.href)}
+ className={classNames(
+ props.item?.current
+ ? "bg-gray-900 text-white"
+ : "text-gray-300 hover:bg-gray-700 hover:text-white",
+ "group flex items-center px-2 py-2 text-base font-medium rounded-md"
+ )}
+ >
+
+ {props.item.name}
+
+
+ );
+ const hasHelpVideo =
+ NAV_HELP[props.item.name as keyof typeof NAV_HELP] !== undefined;
+ if (hasHelpVideo) {
+ return (
+
+
+ );
+};
+
+const MinimizeButton = (props: {
+ toggleMinimize: () => void;
+ color: "white" | "grey";
+ kind: "open" | "close";
+}) => {
+ const Icon = props.kind === "close" ? ChevronLeftIcon : ChevronRightIcon;
+ return (
+
+ );
+};
+const ProjectAwareSidebar = (props: {
+ setMinimized: () => void;
+ projectName: string;
+ dagTemplates: DAGTemplateWithoutData[];
+ projectId: number | undefined;
+ navSubMenus: {
+ header: string;
+ menus: {
+ href: string;
+ name: string;
+ current: boolean;
+ icon: IconType;
+ under: string;
+ }[];
+ }[];
+ topLevelNavs: {
+ href: string;
+ name: string;
+ current: boolean;
+ icon: IconType;
+ }[];
+ navigate: (path: string) => void;
+ userName: string;
+ userOrg: string;
+}) => {
+ const navKeys = props.navSubMenus.map((item) => item.header);
+ // const navKeys = [...props.navSubMenus.map((item) => item.header)];
+ return (
+
+ props.toggleMinimize()}
+ />
+
+ navigate("/dashboard/projects")}
+ className={classNames(
+ "text-gray-300 hover:bg-gray-700 hover:text-white hover:cursor-pointer rounded-md border-0 border-transparent",
+ " h-10 w-10"
+ )}
+ aria-hidden="true"
+ title="Projects"
+ />
+
+ props.setSearchBarOpen()}
+ className={classNames(
+ "text-gray-300 hover:bg-gray-700 hover:text-white hover:cursor-pointer rounded-md border-0 border-transparent",
+ " h-10 w-10"
+ )}
+ aria-hidden="true"
+ title="Search"
+ />
+
+
+
+
+
+ {!localMode && (
+
+ {
+ navigate("/dashboard/settings")}
+ className={classNames(
+ "text-gray-300 hover:bg-gray-700 hover:text-white hover:cursor-pointer rounded-md border-0 border-transparent",
+ " h-10 w-10"
+ )}
+ aria-hidden="true"
+ title="API Keys"
+ />
+ }
+
+ )}
+
+
+
+
+
+ (props.logout !== null ? props.logout : () => void 0)(true)
+ }
+ >
+ {!localMode && (
+
+ )}
+
+
+
+ );
+};
+
+const SideBar = (props: {
+ allowMinimization: boolean;
+ full: boolean;
+ navSubMenus: {
+ header: string;
+ menus: {
+ href: string;
+ name: string;
+ current: boolean;
+ icon: IconType;
+ under: string;
+ }[];
+ }[];
+ topLevelNavs: {
+ href: string;
+ name: string;
+ current: boolean;
+ icon: IconType;
+ }[];
+ userName: string;
+ userOrg: string;
+ navigate: (path: string) => void;
+ setSearchBarOpen: () => void;
+ projectName: string;
+ dagTemplates: DAGTemplateWithoutData[];
+ projectId: number | undefined;
+}) => {
+ const {
+ navSubMenus,
+ topLevelNavs,
+ userName,
+ userOrg,
+ navigate,
+ setSearchBarOpen,
+ projectName,
+ allowMinimization,
+ } = props;
+ const logoutBase = useProcessAwareLogout();
+ const logout = logoutBase
+ ? (redirectOnLogin: boolean) => {
+ logoutBase(redirectOnLogin).then(() => {
+ // Quick way to reset state
+ localStorage.clear();
+ });
+ }
+ : null;
+ const [displayProjectSidebar, setDisplayProjectSidebar] = useState(true);
+ return (
+ <>
+ {allowMinimization && (
+
+
+
+
+
+
+
+
+ {props.projectName}
+
+
+ {props.dagTemplates.length > 0 ? (
+
+ v.
+ {" "}
+ {props.dagTemplates.flatMap((v, i) => {
+ const isLast = i === props.dagTemplates.length - 1;
+ const vNumber = (
+
+ {v.id}
+
+ );
+ const joined =
+ ) : null}
+
+
+ setDisplayProjectSidebar(!displayProjectSidebar)
+ }
+ color={"white"}
+ />
+
+ )}
+
+ {/* General project nav -- this toggles between project select view and team view */}
+
+ setDisplayProjectSidebar(!displayProjectSidebar)
+ }
+ />
+ {props.full && displayProjectSidebar && (
+ setDisplayProjectSidebar(false)}
+ projectName={projectName}
+ dagTemplates={props.dagTemplates}
+ navSubMenus={navSubMenus}
+ topLevelNavs={topLevelNavs}
+ navigate={navigate}
+ userName={userName}
+ userOrg={userOrg}
+ projectId={props.projectId}
+ />
+ )}
+
+
+ );
+};
+
+type ContextType = {
+ dagTemplates: DAGTemplateWithData[];
+ project: ProjectWithData;
+};
+
+export const useData = () => {
+ return useOutletContext
+
+
+
+
+ {/* Static sidebar for desktop. Overflow-clip is probably not the right one, but it solves the problem of it scrolling unecessarily for now... */}
+
+
+
+ );
+};
+
+export default Dashboard;
diff --git a/ui/frontend/src/components/dashboard/NavBreadCrumb.tsx b/ui/frontend/src/components/dashboard/NavBreadCrumb.tsx
new file mode 100644
index 000000000..d8aa38eb6
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/NavBreadCrumb.tsx
@@ -0,0 +1,68 @@
+import { ChevronRightIcon, HomeIcon } from "@heroicons/react/20/solid";
+import { DAGTemplateWithoutData, Project } from "../../state/api/friendlyApi";
+
+export const NavBreadCrumb = (props: {
+ project: Project;
+ dagTemplates: DAGTemplateWithoutData[];
+}) => {
+ const getElements = () => {
+ const pathNameRelativeToDashboard = location.pathname.split("/").slice(2);
+ return [
+ // ...elements,
+ ...pathNameRelativeToDashboard.map((pathName, index) => {
+ // This is a little hacky of a way to get the actual names displayed
+ // TODO -- think this through a little cleaner
+ const linkName =
+ index == 1
+ ? props.project.name
+ : index == 3
+ ? props.dagTemplates[0]?.name
+ : pathName;
+ return (
+ // TODO -- enable when we can get this working -- we just need to link for links that exist
+ // Should be easy I just don't have time now
+
+ {linkName}
+
+ );
+ }),
+ ];
+ };
+
+ // Relative to the dashboard so that we can view it
+
+ const elements = getElements();
+
+ return (
+
+ );
+};
diff --git a/ui/frontend/src/components/dashboard/Project/Project.tsx b/ui/frontend/src/components/dashboard/Project/Project.tsx
new file mode 100644
index 000000000..889342113
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Project/Project.tsx
@@ -0,0 +1,94 @@
+import { skipToken } from "@reduxjs/toolkit/dist/query";
+import { ErrorPage } from "../../common/Error";
+import { Loading } from "../../common/Loading";
+import { ProjectLogInstructions } from "./ProjectLogInstructions";
+import {
+ AttributeDocumentationLoom1,
+ ProjectWithData,
+ getProjectAttributes,
+ useLatestDAGTemplates,
+ useProjectByID,
+ useUserInformation,
+} from "../../../state/api/friendlyApi";
+import { ProjectDocumentation } from "./ProjectDocumentation";
+import ReactMarkdown from "react-markdown";
+// import { VisualizeDAG } from "../Visualize/VisualizeNew";
+// import { createLogicalDAG } from "../../../hamilton/dagTypes";
+import { useURLParams } from "../../../state/urlState";
+
+export const ProjectView = () => {
+ const { projectId } = useURLParams();
+ const whoAmI = useUserInformation();
+ const latestProjectVersion = useLatestDAGTemplates(
+ projectId !== undefined ? { projectId: projectId, limit: 1 } : skipToken
+ );
+ const project = useProjectByID(
+ projectId !== undefined
+ ? { projectId: projectId, attributeTypes: "documentation_loom" }
+ : skipToken
+ );
+ if (
+ latestProjectVersion.isFetching ||
+ latestProjectVersion.isLoading ||
+ latestProjectVersion.isUninitialized ||
+ project.isFetching ||
+ project.isLoading ||
+ project.isUninitialized
+ ) {
+ return
+ {/* Sidebar component, swap this element with another sidebar if you like */}
+ setSearchBarOpen(true)}
+ projectName={project.data?.name || ""}
+ dagTemplates={dagTemplateVersions?.data || []}
+ projectId={projectId}
+ />
+
+
+
+ {dagTemplateVersions.isSuccess &&
+ project.isSuccess &&
+ project.data !== null && // TODO -- determine if this could be null?
+ hasChosenProject && (
+
+
+
+
+
+ + {project.data.name || ""} +
, +
+
{out}
;
+ }
+ return <>;
+};
diff --git a/ui/frontend/src/components/dashboard/Project/ProjectDocumentation.tsx b/ui/frontend/src/components/dashboard/Project/ProjectDocumentation.tsx
new file mode 100644
index 000000000..5c05626e8
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Project/ProjectDocumentation.tsx
@@ -0,0 +1,103 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { classNames } from "../../../utils";
+import { AttributeDocumentationLoom1 } from "../../../state/api/friendlyApi";
+
+const Loom_001View = (props: { documentation: object }) => {
+ const documentation = props.documentation as {
+ id: string;
+ };
+
+ const targetRef = useRef
+
+
+ );
+};
+
+/**
+ * Component to render project documentation
+ * TODO -- make this generic so we can render multiple types of documentation, each in a tab
+ *
+ * @param props
+ * @returns
+ */
+export const ProjectDocumentation = (props: {
+ loomDocs: { name: string; value: AttributeDocumentationLoom1 }[];
+}) => {
+ const tabs = props.loomDocs.map((doc) => doc.name);
+ const [currentTabIndex, setCurrentTabIndex] = useState(0);
+ const currentTab = tabs[currentTabIndex];
+ return (
+
+
+ );
+};
diff --git a/ui/frontend/src/components/dashboard/Project/ProjectLogInstructions.tsx b/ui/frontend/src/components/dashboard/Project/ProjectLogInstructions.tsx
new file mode 100644
index 000000000..0830da4e0
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Project/ProjectLogInstructions.tsx
@@ -0,0 +1,242 @@
+import { API_KEY_ICON } from "../Dashboard";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import { classNames } from "../../../utils";
+import { CheckBox } from "../../common/Checkbox";
+
+const INSTALL_CODE = `# be sure to initialize any python environment you want to use first
+pip install hamilton[sdk]`;
+
+export const UsingHamiltonAlready = (props: {
+ projectId: string;
+ username: string;
+}) => {
+ const exampleCode = `
+from hamilton_sdk import adapters
+from hamilton import driver
+...
+tracker = adapters.HamiltonTracker(
+ project_id=${props.projectId}, # modify this as needed
+ username="${props.username}",
+ dag_name="my_version_of_the_dag",
+ tags={"environment": "DEV", "team": "MY_TEAM", "version": "X"}
+)
+dr = (
+ driver.Builder()
+ .with_config(your_config)
+ .with_modules(*your_modules)
+ .with_adapters(tracker)
+ .build()
+)
+# to run call .execute() or .materialize() on the driver
+`;
+ return (
+ <>
+
+
+
+ {props.loomDocs.length > 1 && (
+
+
+
+
+
+
+ )}
+
+ {props.loomDocs.length > 1 && (
+
+
+ )}
+
+
+
+
+
+
+
+ + Modify your regular Hamilton driver to log to the Hamilton UI: +
+
+
+ + Run your DAG. A new version will show up! Note that the versions are + keyed on the "dag_name" as well as the code in the + modules. you pass. No new version will be logged if neither of those + change. +
+
+
+ + Initialize the project from one of our demo project templates: +
+
+
+ + Install python dependencies for the example: +
+
+
+ Run it!
+
+
+ + + Track your runs! + +
+
+
+ );
+};
+
+export const NothingToSee = () => {
+ return (
+ + Upload some runs! +
+-
+
-
+ + {!props.hideAPIKey && ( + <> ++
+ + + Get an API key from the left side menu ( + +
+ + )} ++ + ) +
+
+ -
+ ++
+ + Install the Hamilton SDK: +
++ {INSTALL_CODE} + +
+
+
+
+
+ {/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
+
+
+
+
+ {currentTab === USING_HAMILTON ? (
+
+
+
+
+
+ );
+};
diff --git a/ui/frontend/src/components/dashboard/Project/Projects.tsx b/ui/frontend/src/components/dashboard/Project/Projects.tsx
new file mode 100644
index 000000000..86210bdf5
--- /dev/null
+++ b/ui/frontend/src/components/dashboard/Project/Projects.tsx
@@ -0,0 +1,894 @@
+import { Fragment, useEffect, useState } from "react";
+
+import { useNavigate } from "react-router-dom";
+import {
+ useCreateProject,
+ useLatestDAGTemplates,
+ useAllProjects,
+ useUpdateProject,
+ useUserInformation,
+ UserInformation,
+ Project,
+ ProjectWithData,
+ getProjectAttributes,
+ AttributeDocumentationLoom1,
+ useDAGTemplatesByID,
+ DAGTemplateWithData,
+} from "../../../state/api/friendlyApi";
+import { Loading } from "../../common/Loading";
+import CreatableSelect from "react-select/creatable";
+
+import { Dialog, Transition } from "@headlessui/react";
+import { ErrorPage } from "../../common/Error";
+import { GenericTable } from "../../common/GenericTable";
+import { NothingToSee, ProjectLogInstructions } from "./ProjectLogInstructions";
+import { skipToken } from "@reduxjs/toolkit/dist/query";
+import { BiNetworkChart, BiHelpCircle, BiListPlus } from "react-icons/bi";
+import { ProjectDocumentation } from "./ProjectDocumentation";
+import { PlusIcon } from "@heroicons/react/24/outline";
+import { setProjectID } from "../../../state/projectSlice";
+import { usePostHog } from "posthog-js/react";
+import { VisualizeDAG } from "../Visualize/DAGViz";
+import { VizType } from "../Visualize/types";
+import { localMode } from "../../../App";
+
+type ProjectCreateFormProps = {
+ setOpenProject: (projectId: number) => void;
+ whoAmI: UserInformation;
+ closeOut: () => void;
+ currentProject: Project | null;
+ refresh: () => void;
+};
+
+const CreatedProjectModal = () => {
+ return + Nothing logged yet, check back later! +
+Success!!
;
+};
+export const ProjectCreateOrEditForm = (props: ProjectCreateFormProps) => {
+ const [currentProjectName, setCurrentProjectName] = useState
+
+
+
+ Track execution of DAGs, visualize your pipelines, and understand + how they change over time! +
+ +
+
+
+
+
+
+
+
+ setCurrentProjectName(e.target.value)}
+ placeholder="Your project name"
+ />
+
+
+
+
+