Skip to content

Commit f70ea71

Browse files
milesrichardsonmilesrichardson
committed
Add styling, bells and whistles to stepper (text, buttons, loading bars, etc.)
1 parent 301cb59 commit f70ea71

20 files changed

Lines changed: 716 additions & 50 deletions

‎examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ChartsPanel.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Charts } from "../RepositoryAnalytics/Charts";
2+
import { StepDescription } from "./StepDescription";
3+
import { StepTitle } from "./StepTitle";
4+
import { useStepper } from "./StepperContext";
5+
6+
export const ChartsPanel = () => {
7+
const [
8+
{
9+
repository: { namespace: githubNamespace, repository: githubRepository },
10+
splitgraphNamespace,
11+
splitgraphRepository,
12+
stepperState,
13+
},
14+
] = useStepper();
15+
16+
const stepStatus = (() => {
17+
switch (stepperState) {
18+
case "export_complete":
19+
return "active";
20+
default:
21+
return "unstarted";
22+
}
23+
})();
24+
25+
return (
26+
<div>
27+
<StepTitle
28+
status={stepStatus}
29+
stepNumber={3}
30+
stepTitle="Render charts with Observable Plot"
31+
/>
32+
<StepDescription status={stepStatus}>
33+
Once the data is loaded into Seafowl, we can query it with{" "}
34+
<a href="https://www.github.com/splitgraph/madatdata" target="_blank">
35+
madatdata
36+
</a>{" "}
37+
and render some charts using{" "}
38+
<a href="https://observablehq.com/plot/" target="_blank">
39+
Observable Plot
40+
</a>
41+
.
42+
</StepDescription>
43+
<Charts
44+
importedRepository={{
45+
githubNamespace,
46+
githubRepository,
47+
splitgraphNamespace,
48+
splitgraphRepository,
49+
}}
50+
/>
51+
</div>
52+
);
53+
};

‎examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportPanel.module.css‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
.exportPanel {
22
/* Styles for the export panel container */
33
background: inherit;
4-
}
5-
6-
.startExportButton {
7-
/* Styles for the start export button */
8-
background: inherit;
4+
margin-top: 2rem;
95
}
106

117
.querySeafowlButton {
@@ -17,3 +13,26 @@
1713
/* Styles for the view report button */
1814
background: inherit;
1915
}
16+
17+
.startExportButton {
18+
color: var(--background);
19+
background-color: var(--secondary);
20+
padding: 8px;
21+
border-radius: 8px;
22+
text-decoration: none;
23+
font-weight: bold;
24+
border-style: none;
25+
}
26+
27+
.startExportButton:hover {
28+
text-shadow: 0 0 5px rgba(43, 0, 255, 0.5);
29+
cursor: pointer;
30+
}
31+
32+
.exportCompleteInfo p {
33+
margin-bottom: 1rem;
34+
}
35+
36+
.exportInfo p {
37+
margin-bottom: 1rem;
38+
}

‎examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportPanel.tsx‎

Lines changed: 82 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useStepper } from "./StepperContext";
44
import styles from "./ExportPanel.module.css";
55
import { ExportLoadingBars } from "./ExportLoadingBars";
66

7-
import { relevantGitHubTableNamesForImport } from "../../lib/config/github-tables";
7+
import { splitgraphTablesToExportToSeafowl } from "../../lib/config/github-tables";
88
import { makeQueriesToExport } from "../../lib/config/queries-to-export";
99
import type {
1010
ExportQueryInput,
@@ -13,10 +13,29 @@ import type {
1313
StartExportToSeafowlResponseData,
1414
} from "../../pages/api/start-export-to-seafowl";
1515
import { useMemo, useCallback } from "react";
16+
import { StepTitle } from "./StepTitle";
17+
import { StepDescription } from "./StepDescription";
18+
import {
19+
SeafowlEmbeddedQuery,
20+
SeafowlStargazersQueryLink,
21+
} from "../RepositoryAnalytics/ImportedRepoMetadata";
22+
import {
23+
GitHubRepoLink,
24+
SplitgraphStargazersQueryLink,
25+
SplitgraphEmbeddedQuery,
26+
} from "../RepositoryAnalytics/ImportedRepoMetadata";
27+
import { makeStargazersTableQuery } from "../RepositoryAnalytics/sql-queries";
1628

1729
export const ExportPanel = () => {
1830
const [
19-
{ stepperState, exportError, splitgraphRepository, splitgraphNamespace },
31+
{
32+
stepperState,
33+
exportError,
34+
splitgraphRepository,
35+
splitgraphNamespace,
36+
exportedTablesCompleted,
37+
repository: githubRepositoryFromStepper,
38+
},
2039
dispatch,
2140
] = useStepper();
2241

@@ -32,15 +51,15 @@ export const ExportPanel = () => {
3251

3352
const tablesToExport = useMemo<ExportTableInput[]>(
3453
() =>
35-
relevantGitHubTableNamesForImport.map((tableName) => ({
54+
splitgraphTablesToExportToSeafowl.map((tableName) => ({
3655
namespace: splitgraphNamespace,
3756
repository: splitgraphRepository,
3857
table: tableName,
3958
})),
4059
[
4160
splitgraphNamespace,
4261
splitgraphRepository,
43-
relevantGitHubTableNamesForImport,
62+
splitgraphTablesToExportToSeafowl,
4463
]
4564
);
4665

@@ -100,26 +119,76 @@ export const ExportPanel = () => {
100119
return () => abortController.abort();
101120
}, [queriesToExport, tablesToExport, dispatch]);
102121

122+
const stepStatus = (() => {
123+
switch (stepperState) {
124+
case "import_complete":
125+
return "active";
126+
case "awaiting_export":
127+
return "loading";
128+
case "export_complete":
129+
return "completed";
130+
default:
131+
return "unstarted";
132+
}
133+
})();
134+
103135
return (
104136
<div className={styles.exportPanel}>
137+
<StepTitle
138+
stepNumber={2}
139+
stepTitle={"Export Data from Splitgraph to Seafowl"}
140+
status={stepStatus}
141+
/>
142+
<StepDescription status={stepStatus}>
143+
{stepStatus === "completed" ? (
144+
<div className={styles.exportCompleteInfo}>
145+
<p>
146+
&#10003; Export complete! We successfully imported tables and
147+
queries from Splitgraph to our{" "}
148+
<a href="https://seafowl.io" target="_blank">
149+
Seafowl
150+
</a>{" "}
151+
instance running at <code>https://demo.seafowl.cloud</code>. Now
152+
we can query it and get cache-optimized responses for rendering
153+
charts and analytics.
154+
</p>
155+
<p>
156+
<strong>Query Data: </strong>&nbsp;
157+
<SeafowlStargazersQueryLink
158+
splitgraphNamespace={splitgraphNamespace}
159+
splitgraphRepository={splitgraphRepository}
160+
/>
161+
</p>
162+
<SeafowlEmbeddedQuery
163+
importedRepository={{ splitgraphNamespace, splitgraphRepository }}
164+
tableName={"stargazers"}
165+
makeQuery={makeStargazersTableQuery}
166+
/>
167+
</div>
168+
) : (
169+
<div className={styles.exportInfo}>
170+
Now let's export some tables and pre-made queries from our staging
171+
area in Splitgraph to our cache-optimized{" "}
172+
<a href="https://seafowl.io" target="_blank">
173+
Seafowl
174+
</a>{" "}
175+
instance running at <code>https://demo.seafowl.cloud</code>.{" "}
176+
{stepStatus === "active" && (
177+
<> Click the button to start the export.</>
178+
)}
179+
</div>
180+
)}
181+
</StepDescription>
105182
{exportError && <p className={styles.error}>{exportError}</p>}
106183
{stepperState === "import_complete" && (
107184
<button
108185
className={styles.startExportButton}
109186
onClick={handleStartExport}
110187
>
111-
Start Export
188+
Start Export of Tables and Queries from Splitgraph to Seafowl
112189
</button>
113190
)}
114191
{stepperState === "awaiting_export" && <ExportLoadingBars />}
115-
{stepperState === "export_complete" && (
116-
<>
117-
<button className={styles.querySeafowlButton}>
118-
Query Seafowl in Splitgraph Console
119-
</button>
120-
<button className={styles.viewReportButton}>View Report</button>
121-
</>
122-
)}
123192
</div>
124193
);
125194
};

‎examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportLoadingBar.tsx‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
import { useEffect } from "react";
22
import { useStepper } from "./StepperContext";
3+
import { LoadingBar } from "../LoadingBar";
34

45
type ImportLoadingBarProps = {
56
taskId: string;
67
splitgraphNamespace: string;
78
splitgraphRepository: string;
9+
githubNamespace: string;
10+
githubRepository: string;
811
};
912

1013
export const ImportLoadingBar: React.FC<ImportLoadingBarProps> = ({
1114
taskId,
1215
splitgraphNamespace,
1316
splitgraphRepository,
17+
githubNamespace,
18+
githubRepository,
1419
}) => {
1520
const [{ stepperState }, dispatch] = useStepper();
1621

@@ -69,5 +74,39 @@ export const ImportLoadingBar: React.FC<ImportLoadingBarProps> = ({
6974
dispatch,
7075
]);
7176

72-
return <div>Loading...</div>;
77+
return (
78+
<div>
79+
<LoadingBar
80+
title={
81+
<div style={{ textAlign: "center" }}>
82+
<p>
83+
Importing tables from{" "}
84+
<a
85+
href={`https://github.com/${githubNamespace}/${githubRepository}`}
86+
target="_blank"
87+
>
88+
github.com/{`${githubNamespace}/${githubRepository}`}
89+
</a>
90+
</p>
91+
92+
<p>
93+
into:{" "}
94+
<a
95+
href={`https://www.splitgraph.com/${splitgraphNamespace}/${splitgraphRepository}`}
96+
target="_blank"
97+
>
98+
splitgraph.com/
99+
{`${splitgraphNamespace}/${splitgraphRepository}`}
100+
</a>
101+
</p>
102+
</div>
103+
}
104+
>
105+
<p>
106+
This might take 5-10 minutes depending on the size of the GitHub
107+
repository.
108+
</p>
109+
</LoadingBar>
110+
</div>
111+
);
73112
};

‎examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ImportPanel.module.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,31 @@
88
border: 1px solid var(--sidebar);
99
margin-bottom: 8px;
1010
}
11+
12+
.repoNameInput {
13+
margin-right: 0.25rem;
14+
width: 50ch;
15+
}
16+
17+
.repoNameForm {
18+
display: flex;
19+
}
20+
21+
.startImportButton {
22+
color: var(--background);
23+
background-color: var(--secondary);
24+
padding: 8px;
25+
border-radius: 8px;
26+
text-decoration: none;
27+
font-weight: bold;
28+
border-style: none;
29+
}
30+
31+
.startImportButton:hover {
32+
text-shadow: 0 0 5px rgba(43, 0, 255, 0.5);
33+
cursor: pointer;
34+
}
35+
36+
.importCompleteInfo p {
37+
margin-bottom: 1rem;
38+
}

0 commit comments

Comments
 (0)