* Added in a temp initial version of the /browse feature

* Updated schema * Refactored a few things * Fix issue with nulling out Grapher that showed up when navigating from /browse to a /[tinyurl] * Added in tooltips and refactored Functions with buttons * Meta description should show notes now in link
csprance · Jul 31, 2022 · dae7284 · dae7284
1 parent 1c48c9a
commit dae7284
Show file tree

Hide file tree

Showing 27 changed files with 364 additions and 67 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -17,15 +17,16 @@ const StyledButton = styled.button`
   }
   width: 72px;
   height: 40px;
-  margin-left: 4px;
+  margin: 4px;
 `;
 interface Props extends React.PropsWithChildren {
   onClick: () => void;
   name: string;
+  style?: React.CSSProperties;
 }
-const Button: React.FC<Props> = ({ children, onClick, name }) => {
+const Button: React.FC<Props> = ({ children, onClick, name, style }) => {
   return (
-    <StyledButton aria-label={name} onClick={onClick}>
+    <StyledButton style={style} aria-label={name} onClick={onClick}>
       {children}
     </StyledButton>
   );

diff --git a/components/Formulas.tsx b/components/Formulas.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { useStore } from '../store';
 import FormulaComponent from './Formula';
+import GuiWindow from './GuiWindow';
 
 interface Props {}
 const Formulas: React.FC<Props> = () => {
@@ -15,7 +16,7 @@ const Formulas: React.FC<Props> = () => {
   } = useStore();
 
   return (
-    <div className="guiWindow">
+    <GuiWindow>
       <div id="formulaButtonBar">
         <div
           className="userInputButtonsSmall"
@@ -61,7 +62,7 @@ const Formulas: React.FC<Props> = () => {
       {formulas.map((formula) => (
         <FormulaComponent key={formula.id} formula={formula} />
       ))}
-    </div>
+    </GuiWindow>
   );
 };
 

diff --git a/components/FunctionButtons.tsx b/components/FunctionButtons.tsx
@@ -1,35 +1,54 @@
 import * as React from 'react';
+import styled from 'styled-components';
+
 import { FUNCS } from '../lib/graphtoy/constants';
+import Button from './Button';
+import GuiWindow from './GuiWindow';
+import Tooltip from './Tooltip';
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-gap: 5px;
+  min-width: 250px;
+`;
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-content: flex-start;
+  row-gap: 12px;
+  column-gap: 12px;
+`;
 
 interface Props {}
 const FunctionButtons: React.FC<Props> = () => {
   const inject = (value: string) => {
     document.execCommand('insertText', false, value);
   };
   return (
-    <div className="guiWindow">
-      <div className="uiFuncPanel">
-        {FUNCS.map((funcs, idx1) => {
-          return (
-            <div className="uiFuncGrid" key={`${idx1}`}>
-              {Object.keys(funcs).map((key) => {
-                const { text, description } = funcs[key];
-                return (
-                  <div
-                    key={key}
-                    className={key.length < 12 ? "uiFunc" : 'uiFuncB'}
+    <GuiWindow>
+      <Container>
+        {FUNCS.map((funcs, idx1) => (
+          <Wrapper key={`${idx1}`}>
+            {Object.entries(funcs).map(
+              ([key, { description, text, params }]) => (
+                <Tooltip content={description} direction="top" key={key}>
+                  <Button
+                    style={{ minWidth: '100%', height: '30px', margin: 0 }}
+                    name={key}
                     onClick={() => inject(text)}
-                    title={description}
                   >
                     {key}
-                  </div>
-                );
-              })}
-            </div>
-          );
-        })}
-      </div>
-    </div>
+                  </Button>
+                </Tooltip>
+              ),
+            )}
+          </Wrapper>
+        ))}
+      </Container>
+    </GuiWindow>
   );
 };
 

diff --git a/components/Graph.tsx b/components/Graph.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import { useStore } from '../store';
-import Grapher from './Grapher';
+import GrapherComponent from './GrapherComponent';
 import TimelineControls from './TimelineControls';
 
 interface Props {}
 const Graph: React.FC<Props> = () => {
-  const { grapher } = useStore();
+  const { grapher, formulas, variables } = useStore();
 
   const [theme, setTheme] = React.useState('Dark');
   const [range, setRange] = React.useState('Free');
@@ -87,7 +87,11 @@ Zoom: Mouse Wheel, or Shift+Left Mouse Button"
         </div>
       </div>
 
-      <Grapher />
+      <GrapherComponent
+        formulas={formulas}
+        variables={variables}
+        grapher={grapher}
+      />
 
       <TimelineControls />
     </div>

diff --git a/components/Grapher.tsx → components/GrapherComponent.tsx b/components/Grapher.tsx → components/GrapherComponent.tsx
@@ -1,21 +1,33 @@
 import * as React from 'react';
 
-import { useStore } from '../store';
+import Grapher from '../lib/graphtoy';
+import { Formula, Variable } from '../lib/graphtoy/types';
 
-interface Props {}
-const Grapher: React.FC<Props> = () => {
-  const { grapher, formulas, variables } = useStore();
+interface Props {
+  grapher: Grapher;
+  formulas: Formula[];
+  variables: Variable[];
+  extraInit?: (grapher: Grapher) => void;
+}
+const GrapherComponent: React.FC<Props> = ({
+  grapher,
+  formulas,
+  variables,
+  extraInit,
+}) => {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
 
   // Update Canvas
   React.useEffect(() => {
     if (canvasRef.current) {
       // Set the canvas so it knows where to operate
       grapher.setCanvas(canvasRef.current);
+      // Do any extra setup you want here
+      if (extraInit) extraInit(grapher);
       // Start grapher and register all the event handles/state
       grapher.start();
     }
-  }, [grapher, canvasRef]);
+  }, [grapher, canvasRef, extraInit]);
 
   // Update Formulas
   React.useEffect(() => {
@@ -30,12 +42,11 @@ const Grapher: React.FC<Props> = () => {
   return (
     <canvas
       ref={canvasRef}
-      id="mainCanvas"
       style={{ width: '100%', height: 'auto' }}
       width={1664}
       height={1248}
     />
   );
 };
 
-export default Grapher;
+export default GrapherComponent;
diff --git a/components/GrapherComponentList.tsx b/components/GrapherComponentList.tsx
@@ -0,0 +1,44 @@
+import Link from 'next/link';
+import * as React from 'react';
+
+import Grapher from '../lib/graphtoy';
+import { MyStore } from '../store';
+import GrapherComponent from './GrapherComponent';
+import { tiny_url } from '.prisma/client';
+
+interface Props {
+  grapherList: tiny_url[];
+}
+const GrapherComponentList: React.FC<Props> = ({ grapherList }) => {
+  return (
+    <>
+      {grapherList.map((t) => {
+        const { id, url, value } = t;
+        const { formulas, variables, notes } = value as unknown as MyStore;
+        return (
+          <div key={id} style={{ width: 400, height: 400 }}>
+            <Link href={`/${url}`} passHref>
+              <a> {url}</a>
+            </Link>
+            <div>{notes}</div>
+            <div>
+              <GrapherComponent
+                formulas={formulas}
+                variables={variables}
+                grapher={new Grapher()}
+                extraInit={(grapher) => {
+                  grapher.toggleVisualizer();
+                }}
+              />
+              {formulas.map((f) => (
+                <div key={f.value}>{f.value}</div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default GrapherComponentList;
diff --git a/components/Gui.tsx b/components/Gui.tsx
@@ -11,13 +11,9 @@ const Gui: React.FC<Props> = () => {
   return (
     <>
       <Formulas />
-      <br />
       <Variables />
-      <br />
       <Notes />
-      <br />
       <FunctionButtons />
-      <br />
       <Help />
     </>
   );

diff --git a/components/GuiWindow.tsx b/components/GuiWindow.tsx
@@ -1,8 +1,17 @@
 import * as React from 'react';
+import styled from 'styled-components';
 
+import { guiBgColor } from '../styles';
+
+const Wrapper = styled.div`
+  background-color: ${guiBgColor};
+  padding: 8px;
+  border-radius: 6px;
+  margin-bottom: 10px;
+`;
 interface Props extends React.PropsWithChildren {}
 const GuiWindow: React.FC<Props> = ({ children }) => {
-  return <div>{children}</div>;
+  return <Wrapper>{children}</Wrapper>;
 };
 
 export default GuiWindow;
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import packageJSON from '../package.json';
+import { useStore } from '../store';
+import SEO, { SITE_DESCRIPTION } from './SEO';
 
 const Wrapper = styled.div``;
 const Title = styled.h1`
@@ -16,10 +18,14 @@ const BubbleLink = styled.a`
   margin-left: 5px;
   margin-right: 5px;
 `;
+
 interface Props {}
 const Header: React.FC<Props> = () => {
+  const { notes } = useStore();
+
   return (
     <Wrapper>
+      <SEO article metaDescription={notes ? notes : SITE_DESCRIPTION} />
       <Title>
         Graphtoy<span style={{ color: 'skyblue' }}>+</span> v
         {packageJSON.version}

diff --git a/components/Help.tsx b/components/Help.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
 
+import GuiWindow from './GuiWindow';
+
 interface Props {}
 const Help: React.FC<Props> = () => {
   return (
-    <div className="guiWindow">
+    <GuiWindow>
       <ul>
         <li>Use Mouse to pan view</li>
         <li>Use SHIFT+Mouse to zoom centered at the mouse pointer</li>
@@ -21,7 +23,7 @@ const Help: React.FC<Props> = () => {
           the X axis.
         </li>
       </ul>
-    </div>
+    </GuiWindow>
   );
 };
 

diff --git a/components/Notes.tsx b/components/Notes.tsx
@@ -5,15 +5,9 @@ import Editor from 'react-simple-code-editor';
 import styled from 'styled-components';
 
 import { useStore } from '../store';
-import { bgColor, ctrlColor, inputBg } from '../styles';
+import { ctrlColor, inputBg } from '../styles';
+import GuiWindow from './GuiWindow';
 
-const Wrapper = styled.div`
-  background: ${bgColor};
-  display: grid;
-  padding: 10px;
-  grid-template-rows: 30px auto;
-  border-radius: 5px;
-`;
 const CustomTextArea = styled(Editor)`
   border-radius: 5px;
   background: ${inputBg};
@@ -27,12 +21,13 @@ interface Props {}
 const Notes: React.FC<Props> = () => {
   const { notes, setNotes } = useStore();
   return (
-    <Wrapper>
+    <GuiWindow>
       <p
         style={{
           fontSize: '17.5px',
           padding: 0,
           margin: 0,
+          marginBottom: '10px',
           width: '100%',
           textAlign: 'center',
         }}
@@ -56,7 +51,7 @@ const Notes: React.FC<Props> = () => {
           fontSize: 12,
         }}
       />
-    </Wrapper>
+    </GuiWindow>
   );
 };