+ These are the tables that we'll export from Splitgraph to Seafowl. + You can query them in Splitgraph now, and then when the export is + complete, you'll be able to query them in Seafowl too. +
+ + ) : ( + <> ++ We successfully exported the tables to Seafowl, so now you can query + them in Seafowl too. +
+ + )} + + ); +}; + +export const EmbeddedTablePreviews = ({ + tablesToExport, + splitgraphRepository, + splitgraphNamespace, + useLoadingOrCompleted, +}: { + tablesToExport: ExportTableInput[]; + splitgraphRepository: string; + splitgraphNamespace: string; + useLoadingOrCompleted: ComponentProps< + typeof EmbedPreviewTableOrQuery + >["useLoadingOrCompleted"]; +}) => { + return ( + <> + {tablesToExport.map((exportTable) => ( ++ We've prepared a few queries to export from Splitgraph to Seafowl, + so that we can use them to render the charts that we want. + Splitgraph will execute the query and insert its result into + Seafowl. You can query them in Splitgraph now, and then when the + export is complete, you'll be able to query them in Seafowl too. +
+ + ) : ( + <> ++ We successfully exported these queries from Splitgraph to Seafowl, + so now you can query them in Seafowl too.{" "} + + Note: If some queries failed to export, it's probably because they + had empty result sets (e.g. the table of issue reactions) + +
+ + )} + + ); +}; + +export const EmbeddedQueryPreviews = ({ + queriesToExport, + splitgraphRepository, + splitgraphNamespace, + useLoadingOrCompleted, +}: { + queriesToExport: ExportQueryInput[]; + splitgraphRepository: string; + splitgraphNamespace: string; + useLoadingOrCompleted: ComponentProps< + typeof EmbedPreviewTableOrQuery + >["useLoadingOrCompleted"]; +}) => { + return ( + <> + {queriesToExport.map((exportQuery) => ( +{heading}
+ {JSON.stringify({ completed, loading }, null, 2)}}
+ {
+
+ {JSON.stringify(
+ state,
+ (_key, value) => {
+ if (value instanceof Set) {
+ return Array.from(value);
+ } else if (value instanceof Map) {
+ return Object.fromEntries(value);
+ } else {
+ return value;
+ }
+ },
+ 2
+ )}
+
+
+ ✓ Export complete! We successfully imported tables and
+ queries from Splitgraph to our{" "}
+
+ Seafowl
+ {" "}
+ instance running at https://demo.seafowl.cloud. Now
+ we can query it and get cache-optimized responses for rendering
+ charts and analytics.{" "}
+
https://demo.seafowl.cloud. This
+ demo exports them programatically with{" "}
+
+ madatdata
+ {" "}
+ calling the Splitgraph API from a Next.js API route, but you can
+ write your own queries and manually export them from the{" "}
+
+ Splitgraph Console
+ {" "}
+ (once you've created an account and logged into Splitgraph).
+ {stepStatus === "active" && (
+ <>
+ {exportError}
} + {["import_complete", "awaiting_export", "export_complete"].includes( + stepperState + ) && ( + <> ++ Importing tables from{" "} + + github.com/{`${githubNamespace}/${githubRepository}`} + +
+ ++ into:{" "} + + splitgraph.com/ + {`${splitgraphNamespace}/${splitgraphRepository}`} + +
++ This might take 5-10 minutes depending on the size of the GitHub + repository. +
+ + + ); +}; diff --git a/examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.module.css b/examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.module.css new file mode 100644 index 0000000..ecca0bc --- /dev/null +++ b/examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.module.css @@ -0,0 +1,38 @@ +.importPanel { + background: inherit; +} + +.error { + background-color: var(--danger); + padding: 8px; + border: 1px solid var(--sidebar); + margin-bottom: 8px; +} + +.repoNameInput { + margin-right: 0.25rem; + width: 50ch; +} + +.repoNameForm { + display: flex; +} + +.startImportButton { + color: var(--background); + background-color: var(--secondary); + padding: 8px; + border-radius: 8px; + text-decoration: none; + font-weight: bold; + border-style: none; +} + +.startImportButton:hover { + text-shadow: 0 0 5px rgba(43, 0, 255, 0.5); + cursor: pointer; +} + +.importCompleteInfo p { + margin-bottom: 1rem; +} diff --git a/examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.tsx b/examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.tsx new file mode 100644 index 0000000..9693305 --- /dev/null +++ b/examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.tsx @@ -0,0 +1,195 @@ +import { useState } from "react"; +import { useStepper } from "./StepperContext"; +import { ImportLoadingBar } from "./ImportLoadingBar"; +import { StepTitle } from "./StepTitle"; + +import styles from "./ImportPanel.module.css"; +import { StepDescription } from "./StepDescription"; +import { + GitHubRepoLink, + SplitgraphStargazersQueryLink, +} from "../RepositoryAnalytics/ImportedRepoMetadata"; + +export const ImportPanel = () => { + const [ + { + stepperState, + importTaskId, + importError, + splitgraphNamespace, + splitgraphRepository, + repository: githubRepositoryFromStepper, + }, + dispatch, + ] = useStepper(); + const [inputValue, setInputValue] = useState(""); + + const handleInputSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!isValidRepoName(inputValue)) { + dispatch({ + type: "import_error", + error: + "Invalid GitHub repository name. Format must be 'namespace/repository'", + }); + return; + } + + const [githubNamespace, githubRepository] = inputValue.split("/"); + + try { + const response = await fetch(`/api/start-import-from-github`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ githubSourceRepository: inputValue }), + }); + + if (!response.ok) { + throw new Error("Network response was not ok"); + } + + const data = await response.json(); + + if (!data.taskId) { + throw new Error("Response missing taskId"); + } + + if (!data.destination || !data.destination.splitgraphNamespace) { + throw new Error("Response missing destination.splitgraphNamespace"); + } + + if (!data.destination || !data.destination.splitgraphRepository) { + throw new Error("Response missing destination.splitgraphRepository"); + } + + dispatch({ + type: "start_import", + repository: { + namespace: githubNamespace, + repository: githubRepository, + }, + taskId: data.taskId, + splitgraphRepository: data.destination.splitgraphRepository as string, + splitgraphNamespace: data.destination.splitgraphNamespace as string, + }); + } catch (error) { + dispatch({ type: "import_error", error: error.message }); + } + }; + + const isValidRepoName = (repoName: string) => { + // A valid GitHub repo name should contain exactly one '/' + return /^[\w-.]+\/[\w-.]+$/.test(repoName); + }; + + const stepStatus: React.ComponentProps
+ ✓ Import complete! We successfully imported data from{" "}
+
+ Browse Data:{" "} + + splitgraph.com/ + {`${splitgraphNamespace}/${splitgraphRepository}`} + +
+
+ Query Data:
+ {" "}
+
{importError}
} + + + )} + {stepperState === "awaiting_import" && ( +{children}
: children} +