Merge pull request #461 from tone-row/dev

v1.27.2

api/prompt/_parseFlowchart.test.ts

@@ -9,4 +9,13 @@ describe("parseFlowchart", () => {
  expect(result.nodes[1].data.label).toEqual("Ocean");
  expect(result.edges[0].data.label).toEqual("heats");
  });
+
+ test("It should remove extra spaces around labels", () => {
+ const result = parseFlowchart(`People {hear about} Application
+People {research} Application
+People {try} Application
+Application {satisfies} People 
+People {use} Application`);
+ expect(result.nodes.length).toEqual(2);
+ });
 });

api/prompt/_parseFlowchart.ts

@@ -14,9 +14,9 @@ export function parseFlowchart(text: string): Graph {
  )
  continue;
 
- const from = line.slice(0, line.indexOf(" {"));
- const to = line.slice(line.indexOf("} ") + 2);
- const label = line.slice(line.indexOf(" {") + 2, line.indexOf("} "));
+ const from = line.slice(0, line.indexOf(" {")).trim();
+ const to = line.slice(line.indexOf("} ") + 2).trim();
+ const label = line.slice(line.indexOf(" {") + 2, line.indexOf("} ")).trim();
 
  if (!nodes.includes(from)) nodes.push(from);
  if (!nodes.includes(to)) nodes.push(to);

app/package.json

@@ -1,6 +1,6 @@
 {
  "name": "app",
- "version": "1.27.1",
+ "version": "1.27.2",
  "main": "module/module.js",
  "license": "MIT",
  "scripts": {
@@ -49,10 +49,10 @@
  "@reach/visually-hidden": "^0.16.0",
  "@react-hook/throttle": "^2.2.0",
  "@sendgrid/mail": "^7.4.6",
- "@sentry/react": "^6.18.1",
- "@sentry/tracing": "^6.18.1",
- "@stripe/react-stripe-js": "^1.6.0",
- "@stripe/stripe-js": "^1.19.1",
+ "@sentry/react": "^7.38.0",
+ "@sentry/tracing": "^7.38.0",
+ "@stripe/react-stripe-js": "^1.16.4",
+ "@stripe/stripe-js": "^1.46.0",
  "@supabase/gotrue-js": "^2",
  "@supabase/supabase-js": "^2",
  "@svgr/webpack": "^6.3.1",
@@ -66,6 +66,7 @@
  "buffer": "^6.0.3",
  "core-js": "^3.18.1",
  "cytoscape": "^3.23.0",
+ "cytoscape-cose-bilkent": "^4.1.0",
  "cytoscape-dagre": "^2.5.0",
  "cytoscape-elk": "^2.1.0",
  "cytoscape-klay": "^3.1.4",

app/src/components/Graph.tsx

@@ -1,4 +1,5 @@
 import { Core, EdgeSingular, NodeSingular } from "cytoscape";
+import coseBilkent from "cytoscape-cose-bilkent";
 import dagre from "cytoscape-dagre";
 import klay from "cytoscape-klay";
 import cytoscapeSvg from "cytoscape-svg";
@@ -16,7 +17,6 @@ import { useContextMenu } from "react-contexify";
 import { useDebouncedCallback } from "use-debounce";
 
 import { buildStylesForGraph } from "../lib/buildStylesForGraph";
-import { defaultLayout } from "../lib/constants";
 import { cytoscape } from "../lib/cytoscape";
 import { getGetSize, TGetSize } from "../lib/getGetSize";
 import { getLayout } from "../lib/getLayout";
@@ -47,6 +47,7 @@ declare global {
 if (!cytoscape.prototype.hasInitialised) {
  cytoscape.use(dagre);
  cytoscape.use(klay);
+ cytoscape.use(coseBilkent);
  cytoscape.use(cytoscapeSvg);
  cytoscape.prototype.hasInitialised = true;
 }
@@ -195,7 +196,6 @@ function initializeGraph({
  const bg = (useDoc.getState().meta?.background as string) ?? original.bg;
  cy.current = cytoscape({
  container: document.getElementById("cy"), // container to render in
- layout: { ...(defaultLayout as cytoscape.LayoutOptions) },
  elements: [],
  // TODO: shouldn't this load the user's style as well?
  // TODO: not even loading the real theme... this seems sus
@@ -290,6 +290,7 @@ function getGraphUpdater({
 
  try {
  const layout = getLayout(doc);
+ console.log("layout", layout);
 
  elements = universalParse(parser, doc.text, getSize.current);
 
@@ -303,13 +304,13 @@ function getGraphUpdater({
  if (layout.name !== "preset") {
  cy.current
  .layout({
- ...layout,
  animate: graphInitialized.current
  ? elements.length < 200
  ? shouldAnimate
  : false
  : false,
  animationDuration: shouldAnimate ? 333 : 0,
+ ...layout,
  padding: DEFAULT_GRAPH_PADDING,
  })
  .run();

app/src/components/RenameButton.tsx

@@ -1,5 +1,5 @@
 import { t, Trans } from "@lingui/macro";
-import { ChangeEvent, ReactNode, useRef, useState } from "react";
+import { ChangeEvent, memo, ReactNode, useRef, useState } from "react";
 import { useMutation } from "react-query";
 import { useHistory } from "react-router-dom";
 
@@ -20,7 +20,11 @@ import {
  tooltipSize,
 } from "./Shared";
 
-export function RenameButton({ children }: { children: ReactNode }) {
+export const RenameButton = memo(function RenameButton({
+ children,
+}: {
+ children: ReactNode;
+}) {
  const fullText = useDoc(docToString);
  const isValidSponsor = useIsValidSponsor();
  const session = useSession();
@@ -166,4 +170,4 @@ export function RenameButton({ children }: { children: ReactNode }) {
  </Dialog>
  </>
  );
-}
+});

app/src/components/SignUpForm.tsx

@@ -10,6 +10,7 @@ import { Button, Input, Notice } from "../components/Shared";
 import Spinner from "../components/Spinner";
 import { isError } from "../lib/helpers";
 import { createCustomer, createSubscription } from "../lib/queries";
+import { logError } from "../lib/sentry";
 import { supabase } from "../lib/supabaseClient";
 import { Box, Type } from "../slang";
 import styles from "./SignUpForm.module.css";
@@ -82,12 +83,16 @@ export function SignUpForm() {
  const { error: supabaseError } = await supabase.auth.signInWithOtp({
  email,
  });
+
  if (supabaseError) throw supabaseError;
  },
  {
  onSuccess: () => {
  setSuccess(true);
  },
+ onError: (error) => {
+ logError(error as Error);
+ },
  }
  );
 

app/src/components/Tabs/EditLayoutTab.tsx

@@ -2,7 +2,8 @@ import { t, Trans } from "@lingui/macro";
 import produce from "immer";
 import { FaRegSnowflake } from "react-icons/fa";
 
-import { defaultLayout } from "../../lib/constants";
+import { GraphOptionsObject } from "../../lib/constants";
+import { defaultLayout, getLayout } from "../../lib/getLayout";
 import { directions, layouts } from "../../lib/graphOptions";
 import { hasOwnProperty } from "../../lib/helpers";
 import { useIsValidSponsor } from "../../lib/hooks";
@@ -21,7 +22,11 @@ import {
 export function EditLayoutTab() {
  const isValidSponsor = useIsValidSponsor();
  const doc = useDoc();
- const layout = hasOwnProperty(doc.meta, "layout") ? doc.meta.layout : {};
+ const layout = (
+ hasOwnProperty(doc.meta, "layout") ? doc.meta.layout : {}
+ ) as GraphOptionsObject["layout"];
+ // this is the layout that's currently being rendered
+ const graphLayout = getLayout(doc);
 
  let layoutName = defaultLayout.name as string;
  if (
@@ -37,7 +42,8 @@ export function EditLayoutTab() {
 
  const isFrozen = useIsFrozen();
 
- let direction = defaultLayout.rankDir;
+ let direction = layout?.["rankDir"] ?? graphLayout.rankDir;
+
  if (
  typeof layout === "object" &&
  layout &&
@@ -116,6 +122,7 @@ export function EditLayoutTab() {
  {[
  "dagre",
  "klay",
+ "cose",
  "breadthfirst",
  "concentric",
  "circle",
@@ -140,6 +147,7 @@ export function EditLayoutTab() {
  return produce(state, (draft) => {
  if (!draft.meta.layout) draft.meta.layout = {};
  // This any is because typing the layout object is too restrictive
+
  (draft.meta.layout as any).spacingFactor = parseFloat(
  e.target.value
  );

app/src/components/Tabs/shared.tsx

@@ -57,14 +57,14 @@ export function OptionWithLabel({
  minHeight: 50,
  }}
  >
- <div style={{ flex: 1 }}>{children}</div>
  <Type
  size={-1}
- style={{ flex: 0, marginLeft: 20 }}
+ style={{ flex: 100, minWidth: 100, maxWidth: 100 }}
  color="color-lineNumbers"
  >
  {label}
  </Type>
+ <div style={{ flex: 1 }}>{children}</div>
  </div>
  );
 }

app/src/index.tsx

@@ -3,14 +3,12 @@ import "./slang/slang.css";
 import "core-js/features/object/from-entries";
 import "core-js/features/object/entries";
 
-import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
 import { Buffer } from "buffer";
 import React from "react";
 import ReactDOM from "react-dom";
 
-import pkg from "../package.json";
 import App from "./components/App";
+import { initSentry } from "./lib/sentry";
 import reportWebVitals from "./reportWebVitals";
 
 // Fixes Webpack 5 Buffer polyfill issue
@@ -21,15 +19,7 @@ declare global {
 }
 window.Buffer = Buffer;
 
-Sentry.init({
- release: `flowchartfun@${pkg.version}`,
- dsn: "https://[email protected]/5673697",
- integrations: [new Integrations.BrowserTracing()],
- // percentage of transactions to capture for performance monitoring.
- tracesSampleRate: 0.25,
- enabled: process.env.REACT_APP_SENTRY_ENABLED === "1",
- environment: process.env.REACT_APP_SENTRY_ENVIRONMENT ?? "development",
-});
+initSentry();
 
 ReactDOM.render(
  <React.StrictMode>

app/src/lib/constants.ts

@@ -13,31 +13,21 @@ type Merge<T extends object> = {
 
 type Layout = Merge<cytoscape.LayoutOptions> & {
  elk?: any;
+ rankDir?: string;
 };
 
 export type GraphOptionsObject = {
- layout?: Partial<Layout> & { rankDir?: string };
+ layout: Partial<Layout>;
  style?: cytoscape.Stylesheet[];
  theme?: GraphThemes;
  background?: string;
 };
 
-const defaultSpacingFactor = 1.25;
-
-export const defaultLayout: Required<GraphOptionsObject>["layout"] = {
- name: "dagre",
- fit: true,
- animate: true,
- spacingFactor: defaultSpacingFactor,
- rankDir: "TB",
-};
-
 export const editorOptions: EditorProps["options"] = {
  minimap: { enabled: false },
  insertSpaces: true,
  wordBasedSuggestions: false,
  occurrencesHighlight: false,
- // TODO: choose the correct render line highlight, used to be false
  renderLineHighlight: "none",
  scrollBeyondLastLine: false,
  overviewRulerBorder: false,

app/src/lib/getLayout.test.ts

@@ -1,12 +1,17 @@
-import { defaultLayout } from "./constants";
 import { getLayout } from "./getLayout";
 import { initialDoc } from "./useDoc";
 
 describe("getLayout", () => {
  test("returns the default layout if nothing passed", () => {
  const doc = { ...initialDoc, meta: {} };
  const layout = getLayout(doc);
- expect(layout).toEqual(defaultLayout);
+ expect(layout).toEqual({
+ name: "dagre",
+ fit: true,
+ animate: true,
+ spacingFactor: 1.25,
+ rankDir: "TB",
+ });
  });
 
  test("returns layout name", () => {