display node contents inside universe canvas (#226)

* complete * feat: drag control revert * feat: clean up * feat: rm component husk * feat: cleanup * feat: follow linting rules * feat: remove comments * feat: fix typescript compiling errors * feat: pr requests * feat: styling format change * feat: fix typescript error * fix: fix merge * feat: add recenter button * feat: recenter button * feat: fix eslint * fix: component HtmlPanel types * fix: drei float types * feat: fix scroll on html panel * fix: fix typescript error --------- Co-authored-by: Emberist <[email protected]> Co-authored-by: kevkevin <[email protected]>
stakwork · Apr 26, 2023 · 98d1090 · 98d1090
1 parent 0b13552
commit 98d1090
Show file tree

Hide file tree

Showing 26 changed files with 883 additions and 508 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -151,4 +151,4 @@ module.exports = {
       version: "detect",
     },
   },
-};
+};
diff --git a/.yarn/releases/yarn-3.4.1.cjs → .yarn/releases/yarn-3.5.0.cjs b/.yarn/releases/yarn-3.4.1.cjs → .yarn/releases/yarn-3.5.0.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+yarnPath: .yarn/releases/yarn-3.5.0.cjs
diff --git a/package.json b/package.json
@@ -91,7 +91,7 @@
     "@types/react-dom": "^18.0.0",
     "@types/react-input-mask": "3.0.2",
     "@types/styled-components": "^5.1.25",
-    "@types/three": "^0.141.0",
+    "@types/three": "^0.150.2",
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "craco-alias": "^3.0.1",
@@ -109,5 +109,5 @@
     "prettier": "^2.7.1",
     "typescript": "^4.4.2"
   },
-  "packageManager": "yarn@3.4.1"
+  "packageManager": "yarn@3.5.0"
 }
diff --git a/src/components/App/SideBar/Creator/index.tsx b/src/components/App/SideBar/Creator/index.tsx
@@ -56,13 +56,6 @@ export const Creator = () => {
         </>
       )}
 
-      <Relevance
-        header={
-          <Flex px={20} py={16}>
-            <Text kind="medium">More like this...</Text>
-          </Flex>
-        }
-      />
     </>
   );
 };
diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx
@@ -146,45 +146,14 @@ export const Episode = ({
                 </Text>
               )}
             </Flex>
-
-            {isSelected && (
-              <Flex>
-                <Actions />
-              </Flex>
-            )}
           </Flex>
 
           <Flex pb={4}>
             <Text color="primaryText1">{description}</Text>
           </Flex>
-
-          {!isSelected && (
-            <Text color="mainBottomIcons" kind="tiny">
-              {title}
-            </Text>
-          )}
-
-          {isSelected && !hasYouTubeType && (
-            <Flex style={{ marginTop: "4px" }}>
-              <Audio
-                controls
-                id="audio-player"
-                onEnded={onAudioEnds}
-                onError={() => setIsTimestampLoaded(true)}
-                onLoadedMetadata={() => setIsTimestampLoaded(true)}
-                src={selectedTimestamp.link}
-                volume={1}
-              />
-            </Flex>
-          )}
         </Flex>
       </Flex>
 
-      {isSelected && hasYouTubeType && (
-        <Flex style={{ marginTop: "4px" }}>
-          <YouTube />
-        </Flex>
-      )}
     </EpisodeWrapper>
   );
 };
diff --git a/src/components/App/SideBar/Transcript/index.tsx b/src/components/App/SideBar/Transcript/index.tsx
@@ -44,65 +44,53 @@ export const Transcript = () => {
 
   return (
     <Wrapper style={{ left: MENU_WIDTH }}>
-      <CloseButton
-        onClick={() => {
-          setTranscriptOpen(false);
-        }}
-        style={{ left: MENU_WIDTH + 250 - 45 }}
-      >
-        <MdClose fontSize={15} />
-      </CloseButton>
-      {selectedNode?.text && (
-        <CopyButton
-          className="copy-button"
-          kind="small"
-          onPointerDown={() => copyNodeText(selectedNode?.text)}
-          type="button"
-        >
-          Copy text
-        </CopyButton>
-      )}
-
-      <Box py={40}>&quot;{selectedNode?.text || "No transcript"}&quot;</Box>
+      <Flex direction="row" justify="space-between">
+        {selectedNode?.text ? (
+          <CopyButton
+            className="copy-button"
+            kind="small"
+            onPointerDown={() => copyNodeText(selectedNode?.text)}
+            type="button"
+          >
+            Copy text
+          </CopyButton>
+          ) : <div />}
+
+          <CloseButton
+            onClick={() => {
+              setTranscriptOpen(false);
+            }}
+          >
+            <MdClose fontSize={35} />
+          </CloseButton>
+        </Flex>
+
+      <Box>&quot;{selectedNode?.text || "No transcript"}&quot;</Box>
     </Wrapper>
   );
 };
 
 const Wrapper = styled(Flex)`
-  padding: 0 40px;
-  overflow: auto;
-  position: absolute;
-  top: 0px;
-  left: 200px;
-  height: 100%;
-  width: 250px;
-  transition: opacity 0.2s;
-  background: #f0f6ff;
-  box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.2);
-  z-index: 100;
+  display: flex;
 `;
 
 const CloseButton = styled(Flex).attrs({
-  p: 10,
+
 })`
   color: ${colors.mainBottomIcons};
   cursor: pointer;
-  position: fixed;
-
   &:hover {
     color: ${colors.lightBlue500};
   }
 `;
 
 const CopyButton = styled(Button)`
-  position: fixed;
-  top: 10px;
 
   &.copied::after {
     content: "Copied!";
     position: absolute;
-    top: 9px;
-    right: -55px;
+    top: 10px;
+    left: 10px;
     background: ${colors.lightGray};
     border-radius: 4px;
     padding: 2px 3px;
@@ -112,10 +100,10 @@ const CopyButton = styled(Button)`
 `;
 
 const Box = styled(Flex)`
-  color: ${colors.lightBlue500};
+  color: ${colors.white};
   margin-top: 10px;
   font-weight: 400;
-  font-size: 13px;
-  line-height: 18px;
+  font-size: 20px;
+  line-height: 24px;
   font-style: italic;
 `;
diff --git a/src/components/App/SideBar/View/index.tsx b/src/components/App/SideBar/View/index.tsx
@@ -1,5 +1,3 @@
-import { useGraphData } from "~/components/DataRetriever";
-import { useAppStore } from "~/stores/useAppStore";
 import { useSelectedNode } from "~/stores/useDataStore";
 import { Creator } from "../Creator";
 import { Data } from "../Data";
@@ -8,29 +6,28 @@ import { Relevance } from "../Relevance";
 import { TwitData } from "../TwitData";
 import { Twitter } from "../Twitter";
 
-export const View = () => {
-  const data = useGraphData();
+type Props = {
+  isSelectedView?: boolean
+}
 
+export const View = ({isSelectedView}: Props) => {
   const selectedNode = useSelectedNode();
-  const relevanceIsSelected = useAppStore((s) => s.relevanceIsSelected);
-
-  const isBaseSearchView = !selectedNode && data?.nodes?.length;
-  const isRelevanceView = relevanceIsSelected;
-
-  if (isBaseSearchView || isRelevanceView) {
-    return <Relevance />;
+
+  if (isSelectedView) {
+    switch (selectedNode?.type) {
+      case "twitter":
+        return <Twitter />;
+      case "guest":
+        return <Person />;
+      case "data_series":
+        return <Data />;
+      case "tweet":
+        return <TwitData />;
+      default:
+        return <Creator />;
+    }
   }
-
-  switch (selectedNode?.type) {
-    case "twitter":
-      return <Twitter />;
-    case "guest":
-      return <Person />;
-    case "data_series":
-      return <Data />;
-    case "tweet":
-      return <TwitData />;
-    default:
-      return <Creator />;
+  else {
+    return <Relevance />;
   }
 };
diff --git a/src/components/App/SideBar/index.tsx b/src/components/App/SideBar/index.tsx
@@ -1,4 +1,3 @@
-import { useFormContext } from 'react-hook-form'
 import { MdClose, MdKeyboardDoubleArrowLeft } from 'react-icons/md'
 import styled from 'styled-components'
 import { CategorySelect } from '~/components/App/SideBar/CategorySelect'
@@ -10,34 +9,24 @@ import { useDataStore, useSelectedNode } from '~/stores/useDataStore'
 import { colors } from '~/utils/colors'
 import { media } from '~/utils/media'
 import { Tab } from './Tab'
-import { Transcript } from './Transcript'
 import { View } from './View'
 
 export const MENU_WIDTH = 433
 
 type Props = { onSubmit?: () => void }
 
 const Content = ({ onSubmit }: Props) => {
-  const setFlagErrorOpen = useAppStore((s) => s.setFlagErrorOpen)
-  const setRelevanceSelected = useAppStore((s) => s.setRelevanceSelected)
-  const setSelectedNode = useDataStore((s) => s.setSelectedNode)
   const isLoading = useDataStore((s) => s.isFetching)
   const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
 
-  const { setValue } = useFormContext()
-
   return (
     <Wrapper id="sidebar-wrapper">
       <SearchWrapper>
         <SearchBar onSubmit={onSubmit} />
 
         <CloseButton
           onClick={() => {
-            setFlagErrorOpen(false)
-            setSelectedNode(null)
-            setRelevanceSelected(false)
-            setValue('search', null)
-            onSubmit?.()
+            setSidebarOpen(false)
           }}
         >
           <MdClose fontSize={20} />
@@ -54,13 +43,12 @@ const Content = ({ onSubmit }: Props) => {
 
       {isLoading ? <Loader color="primaryText1" /> : <View />}
 
-      <Transcript />
-
       <CategoryWrapper direction="row">
         <Flex basis="154px">
           <CategorySelect />
         </Flex>
       </CategoryWrapper>
+
     </Wrapper>
   )
 }

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -21,6 +21,7 @@ import { SecondarySideBar } from './SecondarySidebar'
 import { SideBar } from './SideBar'
 import { Toasts } from './Toasts'
 
+
 const Wrapper = styled(Flex)`
   height: 100%;
   width: 100%;
@@ -126,6 +127,7 @@ export const App = () => {
         <Toasts />
 
         <BudgetExplanationModal />
+
       </Wrapper>
     </>
   )

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -64,6 +64,7 @@ const Wrapper = styled(Flex).attrs({
 })<Pick<Props, "kind" | "disabled" | "shape">>`
   border: none;
   cursor: pointer;
+  pointer-events: auto;
 
   ${getButtonKindDimensions}
 

diff --git a/src/components/ScrollView/index.tsx b/src/components/ScrollView/index.tsx
@@ -3,7 +3,7 @@ import { Flex } from "~/components/common/Flex";
 import { colors } from "~/utils/colors";
 
 export const ScrollView = styled(Flex)`
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: hidden;
   background: ${colors.body};
 `;
diff --git a/src/components/Universe/Controls/CameraAnimations/useAutoNavigate.ts b/src/components/Universe/Controls/CameraAnimations/useAutoNavigate.ts
@@ -3,7 +3,7 @@ import type { CameraControls } from "@react-three/drei";
 import { useFrame, Camera } from "@react-three/fiber";
 import { RefObject, useEffect, useState } from "react";
 import * as THREE from "three";
-import { useSelectedNode } from "~/stores/useDataStore";
+import { useDataStore, useSelectedNode } from "~/stores/useDataStore";
 import { useControlStore } from "~/stores/useControlStore";
 import { NodeExtended } from "~/types";
 
@@ -14,6 +14,7 @@ export const useAutoNavigate = (
 ) => {
 
   const selectedNode = useSelectedNode();
+  const cameraFocusTrigger = useDataStore(s=>s.cameraFocusTrigger)
 
   const { isUserDragging } = useControlStore();
 
@@ -23,6 +24,12 @@ export const useAutoNavigate = (
   // camera movement to selection params
   const [minDistance] = useState(180)
 
+  useEffect(() => {
+    setDistanceReached(false)
+    setLookAtReached(false)
+    useControlStore.setState({ userMovedCamera: false })
+  },[cameraFocusTrigger])
+
   useEffect(() => {
     // stop navigation when user interacts
     if (isUserDragging) {
@@ -57,6 +64,7 @@ export const useAutoNavigate = (
 
       setDistanceReached(false)
       setLookAtReached(false)      
+      useControlStore.setState({ userMovedCamera: false })
     }
 
     return ()=> clearTimeout(lookAtAnimationTimer)
-Original file line number
+Diff line change
@@ Expand Up / @@ -151,4 +151,4 @@ module.exports = { @@
           version: "detect",
         },
       },
-    };
+    };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		nodeLinker: node-modules
		yarnPath: .yarn/releases/yarn-3.5.0.cjs