Add process-flow template

tone-row · Aug 30, 2024 · dd63476 · dd63476
1 parent 236e275
commit dd63476
Show file tree

Hide file tree

Showing 30 changed files with 105 additions and 25 deletions.
diff --git a/api/prompt/_shared.ts b/api/prompt/_shared.ts
@@ -39,7 +39,7 @@ export async function handleRateLimit(
  redis: kv,
  limiter: isPro
  ? Ratelimit.slidingWindow(3, "1m")
- : Ratelimit.fixedWindow(3, "30d"),
+ : Ratelimit.fixedWindow(2, "30d"),
  });
 
  const rateLimitKey = isPro ? `pro_${customerId}` : `unauth_${ip}`;

diff --git a/app/public/template-screenshots/code-flow.png b/app/public/template-screenshots/code-flow.png
diff --git a/app/public/template-screenshots/decision-flow.png b/app/public/template-screenshots/decision-flow.png
diff --git a/app/public/template-screenshots/default.png b/app/public/template-screenshots/default.png
diff --git a/app/public/template-screenshots/mindmap-dark.png b/app/public/template-screenshots/mindmap-dark.png
diff --git a/app/public/template-screenshots/mindmap.png b/app/public/template-screenshots/mindmap.png
diff --git a/app/public/template-screenshots/network-diagram-dark.png b/app/public/template-screenshots/network-diagram-dark.png
diff --git a/app/public/template-screenshots/org-chart.png b/app/public/template-screenshots/org-chart.png
diff --git a/app/public/template-screenshots/pert-light.png b/app/public/template-screenshots/pert-light.png
diff --git a/app/public/template-screenshots/playful-mindmap.png b/app/public/template-screenshots/playful-mindmap.png
diff --git a/app/public/template-screenshots/process-flow.png b/app/public/template-screenshots/process-flow.png
diff --git a/app/public/template-screenshots/thumb_code-flow.png b/app/public/template-screenshots/thumb_code-flow.png
diff --git a/app/public/template-screenshots/thumb_decision-flow.png b/app/public/template-screenshots/thumb_decision-flow.png
diff --git a/app/public/template-screenshots/thumb_default.png b/app/public/template-screenshots/thumb_default.png
diff --git a/app/public/template-screenshots/thumb_flowchart.png b/app/public/template-screenshots/thumb_flowchart.png
diff --git a/app/public/template-screenshots/thumb_knowledge-graph.png b/app/public/template-screenshots/thumb_knowledge-graph.png
diff --git a/app/public/template-screenshots/thumb_mindmap-dark.png b/app/public/template-screenshots/thumb_mindmap-dark.png
diff --git a/app/public/template-screenshots/thumb_mindmap.png b/app/public/template-screenshots/thumb_mindmap.png
diff --git a/app/public/template-screenshots/thumb_network-diagram-dark.png b/app/public/template-screenshots/thumb_network-diagram-dark.png
diff --git a/app/public/template-screenshots/thumb_network-diagram-dark.ts.png b/app/public/template-screenshots/thumb_network-diagram-dark.ts.png
diff --git a/app/public/template-screenshots/thumb_network-diagram-icons.png b/app/public/template-screenshots/thumb_network-diagram-icons.png
diff --git a/app/public/template-screenshots/thumb_org-chart.png b/app/public/template-screenshots/thumb_org-chart.png
diff --git a/app/public/template-screenshots/thumb_pert-light.png b/app/public/template-screenshots/thumb_pert-light.png
diff --git a/app/public/template-screenshots/thumb_playful-mindmap.png b/app/public/template-screenshots/thumb_playful-mindmap.png
diff --git a/app/public/template-screenshots/thumb_process-flow.png b/app/public/template-screenshots/thumb_process-flow.png
diff --git a/app/scripts/screenshot-templates.mjs b/app/scripts/screenshot-templates.mjs
@@ -37,7 +37,9 @@ async function main() {
 
  await screenshotTemplates(filteredTemplates);
  await createThumbnails(filteredTemplates);
- await createTemplatesIndex(templates); // Always create index with all templates
+ console.log(
+ "Don't forget to add the new templates to `shared/src/templates.ts` file."
+ );
 }
 
 /**
@@ -75,8 +77,8 @@ async function takeScreenshot(browser, template) {
  console.error("Error loading template", error);
  }
 
- // wait a few seconds
- await page.waitForTimeout(3000);
+ // wait 3 seconds
+ await new Promise((resolve) => setTimeout(resolve, 3000));
 
  // get the full page link
  const screenshotLink = await page.evaluate(() => {
@@ -137,21 +139,4 @@ async function createThumbnails(templates) {
  }
 }
 
-async function createTemplatesIndex(templates) {
- console.log("Creating templates index...");
- const indexPath = path.join(__dirname, "../../shared/templates.ts");
- const indexContent = `export const templates = ${JSON.stringify(
- templates,
- null,
- 2
- )} as const;`;
-
- try {
- await writeFile(indexPath, indexContent, "utf8");
- console.log("✅ Created templates index file");
- } catch (error) {
- console.error("Error creating templates index file:", error);
- }
-}
-
 main().catch(console.error);
diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
@@ -358,6 +358,8 @@ function getGraphUpdater({
  // Because the graph has no positions yet
  if (layout.name === "fcose") {
  if (isFirstRender.current) {
+ // @ts-ignore
+ layout.animate = false;
  // @ts-ignore
  layout.randomize = true;
  // @ts-ignore

diff --git a/app/src/components/LoadTemplateDialog.tsx b/app/src/components/LoadTemplateDialog.tsx
@@ -48,6 +48,8 @@ export function LoadTemplateDialog() {
  });
  }, [template, replaceContent, reset]);
 
+ console.log(templates);
+
  return (
  <Dialog.Root
  open={open}

diff --git a/app/src/lib/templates/process-flow-template.ts b/app/src/lib/templates/process-flow-template.ts
@@ -0,0 +1,90 @@
+import { FFTheme } from "../FFTheme";
+
+export const content = `
+Start Process
+ Step 1: Initial Assessment
+ Decision Point
+ Yes: Proceed to Step 2
+ Step 2: Detailed Analysis
+ Review Documentation [href="https://docs.example.com"]
+ Conduct Analysis
+ Generate Report
+ Share Results [href="https://results.example.com"]
+ No: Request More Information
+ Contact Client [href="mailto:[email protected]"]
+ (Initial Assessment)
+ Step 3: Final Decision
+ Approve: Complete Process
+ Reject: Provide Feedback
+ (Start Process)
+`;
+
+export const theme: FFTheme = {
+ layoutName: "dagre",
+ direction: "DOWN",
+ spacingFactor: 1.1,
+
+ background: "#fbfbfb",
+ fontFamily: "Inter",
+
+ shape: "roundrectangle",
+ nodeBackground: "#e6e6e6",
+ nodeForeground: "#333333",
+ padding: 15,
+ borderWidth: 0,
+ borderColor: "#cccccc",
+ textMaxWidth: 150,
+ lineHeight: 1.3,
+ textMarginY: 0,
+ useFixedHeight: false,
+ fixedHeight: 60,
+
+ curveStyle: "bezier",
+ edgeWidth: 2,
+ edgeColor: "#888888",
+ sourceArrowShape: "none",
+ targetArrowShape: "triangle",
+ sourceDistanceFromNode: 0,
+ targetDistanceFromNode: 5,
+ arrowScale: 1,
+ edgeTextSize: 0.9,
+ rotateEdgeLabel: false,
+};
+
+export const cytoscapeStyle = `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
+
+:childless {
+ font-weight: bold;
+}
+
+/** Start */
+:childless[in_degree < 1][out_degree > 0] {
+ background-color: #50c878;
+ border-color: #3da75d;
+}
+
+/** Decision Point */
+:childless[out_degree > 1] {
+ shape: diamond;
+ background-color: #ffa500;
+ height: $width;
+ text-margin-y: 2;
+ border-color: #cc8400;
+}
+
+/** Terminal */
+:childless[out_degree < 1][in_degree > 0] {
+ background-color: #ff6347;
+ color: white;
+ border-color: #e74c3c;
+}
+
+/** Links */
+:childless[href] {
+ background-color: #4a90e2;
+ color: white;
+ text-decoration: underline;
+ cursor: pointer;
+ border-color: #3a7ac5;
+}
+`;
diff --git a/shared/src/templates.ts b/shared/src/templates.ts
@@ -1,14 +1,15 @@
 export const templates = [
  "code-flow",
+ "process-flow",
+ "flowchart",
  "decision-flow",
+ "pert-light",
  "default",
- "flowchart",
+ "org-chart",
  "knowledge-graph",
- "mindmap-dark",
  "mindmap",
+ "mindmap-dark",
  "network-diagram-dark",
  "network-diagram-icons",
- "org-chart",
- "pert-light",
  "playful-mindmap",
 ] as const;