* updates to browse

* commented way more functions * expanded function description *
csprance · Aug 5, 2022 · 00ed846 · 00ed846
1 parent 0acccf1
commit 00ed846
Show file tree

Hide file tree

Showing 7 changed files with 493 additions and 129 deletions.
diff --git a/components/FunctionButtons.tsx b/components/FunctionButtons.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { FUNCS } from '../lib/graphtoy/constants';
 import Button from './Button';
+import FunctionDescription from './FunctionDescription';
 import GuiWindow from './GuiWindow';
 import Tooltip from './Tooltip';
 
@@ -34,7 +35,18 @@ const FunctionButtons: React.FC<Props> = () => {
           <Wrapper key={`${idx1}`}>
             {Object.entries(funcs).map(
               ([key, { description, text, params }]) => (
-                <Tooltip content={description} direction="top" key={key}>
+                <Tooltip
+                  content={
+                    <FunctionDescription
+                      name={key}
+                      description={description}
+                      text={text}
+                      params={params}
+                    />
+                  }
+                  direction="right"
+                  key={key}
+                >
                   <Button
                     style={{ minWidth: '100%', height: '30px', margin: 0 }}
                     name={key}

diff --git a/components/FunctionDescription.tsx b/components/FunctionDescription.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { FunctionParam } from '../lib/graphtoy/constants';
+
+const Wrapper = styled.div`
+  display: grid;
+`;
+const FunctionName = styled.div`
+  display: grid;
+  color: #ffd700;
+  margin-bottom: 10px;
+`;
+const FunctionDescriptionP = styled.div`
+  display: grid;
+`;
+interface Props {
+  description: string | string[];
+  text: string;
+  params: FunctionParam[];
+  name: string;
+}
+
+function mapDescription(description: string | string[]) {
+  let mappedDescription: JSX.Element[] = [];
+  if (Array.isArray(description)) {
+    mappedDescription = description.map((d, idx) => <span key={idx}>{d}</span>);
+  } else {
+    mappedDescription = [<span key={'single-description'}>{description}</span>];
+  }
+  return mappedDescription;
+}
+const FunctionDescription: React.FC<Props> = ({
+  params,
+  description,
+  text,
+  name,
+}) => {
+  return (
+    <Wrapper>
+      <FunctionName>{name}</FunctionName>
+      <FunctionDescriptionP>{mapDescription(description)}</FunctionDescriptionP>
+      {params.map((param) => (
+        <p style={{ marginBottom: 2 }} key={`${name}-${param.name}`}>
+          <span style={{ color: '#eb68ff' }}>{param.name}</span> -{' '}
+          {mapDescription(param.description)}
+        </p>
+      ))}
+    </Wrapper>
+  );
+};
+
+export default FunctionDescription;
diff --git a/components/GrapherComponentList.tsx b/components/GrapherComponentList.tsx
@@ -5,23 +5,30 @@ import Grapher from '../lib/graphtoy';
 import { MyStore } from '../store';
 import GrapherComponent from './GrapherComponent';
 import { tiny_url } from '.prisma/client';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: grid;
+  grid-auto-columns: auto;
+  grid-template-columns: auto auto auto auto;
+`;
 
 interface Props {
   grapherList: tiny_url[];
 }
 const GrapherComponentList: React.FC<Props> = ({ grapherList }) => {
   return (
-    <>
+    <Wrapper>
       {grapherList.map((t) => {
         const { id, url, value } = t;
-        const { formulas, variables, notes } = value as unknown as MyStore;
+        const { formulas, variables, notes } = (value as unknown) as MyStore;
         return (
-          <div key={id} style={{ width: 400, height: 400 }}>
+          <div key={id}>
             <Link href={`/${url}`} passHref>
-              <a> {url}</a>
+              <a><h3> {url}</h3></a>
             </Link>
             <div>{notes}</div>
-            <div>
+            <div style={{ width: 400, height: 400 }}>
               <GrapherComponent
                 formulas={formulas}
                 variables={variables}
@@ -37,7 +44,7 @@ const GrapherComponentList: React.FC<Props> = ({ grapherList }) => {
           </div>
         );
       })}
-    </>
+    </Wrapper>
   );
 };
 

diff --git a/components/Tooltip/index.tsx b/components/Tooltip/index.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from "react";
+import { set } from "immer/dist/utils/common";
 
 export interface Props extends React.PropsWithChildren {
   delay?: number;
@@ -8,10 +9,29 @@ export interface Props extends React.PropsWithChildren {
 const Index: React.FC<Props> = ({ delay, children, direction, content }) => {
   let timeout: NodeJS.Timeout;
   const [active, setActive] = useState(false);
+  const [width, setWidth] = useState(320);
+  const [side, setSide] = useState(direction ? direction : 'right');
+  const tooltipRef = useRef<HTMLDivElement>(null);
 
   const showTip = () => {
     if (content) {
       timeout = setTimeout(() => {
+        const offsetAmtLeft = document.body.clientWidth -tooltipRef.current!.offsetLeft;
+        const offsetAmtRight = tooltipRef.current!.offsetLeft;
+        console.log('left', offsetAmtLeft);
+        console.log('right', offsetAmtRight);
+        if ( offsetAmtLeft < 320) {
+          setSide('left');
+        } else {
+          setSide('right')
+        }
+
+        // } else if (offsetAmtRight > 320){
+        //   setSide('top');
+        // }
+        if (  offsetAmtRight> 320){
+          setSide('right');
+        }
         setActive(true);
       }, delay || 250);
     }
@@ -24,13 +44,19 @@ const Index: React.FC<Props> = ({ delay, children, direction, content }) => {
 
   return (
     <div
+      ref={tooltipRef}
       className="Tooltip-Wrapper"
       onMouseEnter={showTip}
       onMouseLeave={hideTip}
     >
       {children}
       {active && (
-        <div className={`Tooltip-Tip ${direction || 'top'}`}>{content}</div>
+        <div
+          style={{  maxWidth: '320px' }}
+          className={`Tooltip-Tip ${side || 'top'}`}
+        >
+          {content}
+        </div>
       )}
     </div>
   );

diff --git a/components/Tooltip/tooltip-styles.ts b/components/Tooltip/tooltip-styles.ts
@@ -30,7 +30,8 @@ export const TooltipStyles = createGlobalStyle`
     font-family: sans-serif;
     line-height: 1;
     z-index: 100;
-    white-space: nowrap;
+    white-space: pre-wrap;
+    min-width: 250px;
   }
 
   /* CSS border triangles */