From 438a1e5a9f2352c051e0c04a1fc0d054f24da498 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Mon, 2 Dec 2024 03:20:49 +0300 Subject: [PATCH 1/3] feat: add scrapper --- .../mindset/components/LandingPage/index.tsx | 19 +++++++++- .../mindset/components/Marker/index.tsx | 25 +++++-------- .../PlayerContols/ProgressBar/index.tsx | 37 +++++++++++-------- .../Sidebar/Transcript/Viewer/index.tsx | 10 +++-- 4 files changed, 56 insertions(+), 35 deletions(-) diff --git a/src/components/mindset/components/LandingPage/index.tsx b/src/components/mindset/components/LandingPage/index.tsx index 7550b5bfd..6227d6146 100644 --- a/src/components/mindset/components/LandingPage/index.tsx +++ b/src/components/mindset/components/LandingPage/index.tsx @@ -1,11 +1,13 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import { FieldValues } from 'react-hook-form' import styled from 'styled-components' import { Flex } from '~/components/common/Flex' import { NODE_ADD_ERROR } from '~/constants' import { api } from '~/network/api' +import { getSchemaAll } from '~/network/fetchSourcesData' import { useDataStore } from '~/stores/useDataStore' import { useMindsetStore } from '~/stores/useMindsetStore' +import { useSchemaStore } from '~/stores/useSchemaStore' import { SubmitErrRes } from '~/types' import { colors } from '~/utils/colors' import { ChevronRight } from '../Icon/ChevronRight' @@ -44,6 +46,21 @@ export const LandingPage = () => { const [requestError, setRequestError] = useState('') const { setRunningProjectId } = useDataStore((s) => s) const { setSelectedEpisodeId, setSelectedEpisodeLink } = useMindsetStore((s) => s) + const { setSchemas } = useSchemaStore((s) => s) + + useEffect(() => { + const fetchSchemaData = async () => { + try { + const response = await getSchemaAll() + + setSchemas(response.schemas.filter((schema) => !schema.is_deleted)) + } catch (err) { + console.error('Error fetching schema:', err) + } + } + + fetchSchemaData() + }, [setSchemas]) const handleInputChange = (e: React.ChangeEvent) => { const { value } = e.target diff --git a/src/components/mindset/components/Marker/index.tsx b/src/components/mindset/components/Marker/index.tsx index 2685a39a3..4b1d19c0c 100644 --- a/src/components/mindset/components/Marker/index.tsx +++ b/src/components/mindset/components/Marker/index.tsx @@ -1,13 +1,11 @@ import { memo } from 'react' import styled from 'styled-components' import { Flex } from '~/components/common/Flex' -import { Tooltip } from '~/components/common/ToolTip' import { useSchemaStore } from '~/stores/useSchemaStore' import { colors } from '~/utils/colors' type Props = { type: string - name: string left: number img: string } @@ -18,24 +16,22 @@ type BadgeProps = { label: string } -export const Marker = memo(({ type, name, left, img }: Props) => { +export const Marker = memo(({ type, left, img }: Props) => { const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType]) const primaryColor = normalizedSchemasByType[type]?.primary_color const primaryIcon = normalizedSchemasByType[type]?.icon - const icon = primaryIcon ? `svg-icons/${primaryIcon}.svg` : 'thing_badge.svg' + const icon = primaryIcon ? `svg-icons/${primaryIcon}.svg` : '' const badgeProps: Omit = { - iconStart: img ?? icon, + iconStart: img || icon, color: primaryColor ?? colors.THING, } return ( - - - + ) }) @@ -44,7 +40,7 @@ Marker.displayName = 'Marker' const Badge = ({ iconStart, color, label }: BadgeProps) => ( - {label} + {iconStart && {label}} ) @@ -57,7 +53,6 @@ const EpisodeWrapper = styled(Flex).attrs({ overflow: hidden; justify-content: center; align-items: center; - padding: 0 4px; .badge__img { width: 10px; @@ -68,12 +63,12 @@ const EpisodeWrapper = styled(Flex).attrs({ const MarkerWrapper = styled.div` position: absolute; - top: -4px; /* Adjust as needed to center above the progress bar */ - width: 8px; - height: 8px; + top: -6px; + width: 12px; + height: 12px; + border-radius: 4px; background-color: ${colors.white}; - border-radius: 50%; - transform: translateX(-50%); /* Center the marker horizontally */ + transform: translateX(-50%); transform: translateX(-50%) translateY(-50%); top: 50%; display: flex; diff --git a/src/components/mindset/components/PlayerContols/ProgressBar/index.tsx b/src/components/mindset/components/PlayerContols/ProgressBar/index.tsx index e0527b3da..72d5814f2 100644 --- a/src/components/mindset/components/PlayerContols/ProgressBar/index.tsx +++ b/src/components/mindset/components/PlayerContols/ProgressBar/index.tsx @@ -12,26 +12,29 @@ type Props = { handleProgressChange: (_: Event, value: number | number[]) => void } -export const ProgressBar = ({ duration, markers, handleProgressChange, playingTIme }: Props) => ( - - - {markers.map((node) => { - const position = ((node?.start || 0) / duration) * 100 - const type = node?.node_type || '' - const name = node?.properties?.name || '' - const img = node?.properties?.image_url || '' +export const ProgressBar = ({ duration, markers, handleProgressChange, playingTIme }: Props) => { + const thumbWidth = (10 / duration) * 100 - return - })} - -) + return ( + + + {markers.map((node) => { + const position = ((node?.start || 0) / duration) * 100 + const type = node?.node_type || '' + const img = node?.properties?.image_url || '' + + return + })} + + ) +} const ProgressWrapper = styled(Flex)` position: relative; flex: 1 1 100%; ` -const ProgressSlider = styled(Slider)` +const ProgressSlider = styled(Slider)<{ thumbWidth: number }>` && { z-index: 20; color: ${colors.white}; @@ -42,9 +45,11 @@ const ProgressSlider = styled(Slider)` border: none; } .MuiSlider-thumb { - width: 10px; - height: 10px; - background-color: ${colors.white}; + width: ${({ thumbWidth }) => `${thumbWidth}%`}; + height: 54px; + border-radius: 8px; + background-color: ${colors.primaryBlue}; + opacity: 0.2; &:before { box-shadow: '0 4px 8px rgba(0,0,0,0.4)'; } diff --git a/src/components/mindset/components/Sidebar/Transcript/Viewer/index.tsx b/src/components/mindset/components/Sidebar/Transcript/Viewer/index.tsx index e3c154cc9..c02049605 100644 --- a/src/components/mindset/components/Sidebar/Transcript/Viewer/index.tsx +++ b/src/components/mindset/components/Sidebar/Transcript/Viewer/index.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from 'react' import styled from 'styled-components' import { usePlayerStore } from '~/stores/usePlayerStore' import { colors } from '~/utils' +import { secondsToMediaTime } from '~/utils/secondsToMediaTime' type Props = { transcriptString: string @@ -51,11 +52,11 @@ export const Viewer = ({ transcriptString }: Props) => { return ( {transcriptData.map((i) => { - const start = i.start.toFixed(2) - const end = i.end.toFixed(2) + const start = secondsToMediaTime(i.start) + const end = secondsToMediaTime(i.end) return ( - + {start}:{end} @@ -82,6 +83,9 @@ const Paragraph = styled.div` const Wrapper = styled.div` width: 100%; + height: 100%; + overflow: scroll; + padding-right: 4px; ` const Start = styled.span`` From 172f10a666618cdeacf3c0e438ad64c91789189d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Mon, 2 Dec 2024 03:55:27 +0300 Subject: [PATCH 2/3] feat: remove redundant api --- src/network/teach/index.ts | 48 -------------------------------------- 1 file changed, 48 deletions(-) delete mode 100644 src/network/teach/index.ts diff --git a/src/network/teach/index.ts b/src/network/teach/index.ts deleted file mode 100644 index 1a28913f0..000000000 --- a/src/network/teach/index.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { getLSat } from '~/utils/getLSat' -import { payLsat } from '~/utils/payLsat' -import { api } from '../api' - -type TeachData = { - term: string - transcripts: string -} - -export const postInstagraph = async (data: TeachData, setBudget: (value: number | null) => void): Promise => { - const lsatToken = await getLSat() - - try { - await api.post(`/instagraph`, JSON.stringify(data), { Authorization: lsatToken }) - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (error: any) { - if (error.status === 402) { - await payLsat(setBudget) - - await postInstagraph(data, setBudget) - - return - } - - throw error - } -} - -export const postTeachMe = async (data: TeachData, setBudget: (value: number | null) => void): Promise => { - const lsatToken = await getLSat() - - try { - await api.post(`/teachme`, JSON.stringify(data), { Authorization: lsatToken }) - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (error: any) { - if (error.status === 402) { - await payLsat(setBudget) - - await postTeachMe(data, setBudget) - - return - } - - throw error - } -} From 9fd82984550324e458ce39630378cd4753dadf8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Mon, 2 Dec 2024 04:07:44 +0300 Subject: [PATCH 3/3] feat: remove extra api --- src/network/askQuestion/index.ts | 30 ----------------------------- src/network/fetchGraphData/const.ts | 27 +------------------------- 2 files changed, 1 insertion(+), 56 deletions(-) delete mode 100644 src/network/askQuestion/index.ts diff --git a/src/network/askQuestion/index.ts b/src/network/askQuestion/index.ts deleted file mode 100644 index 028c5d800..000000000 --- a/src/network/askQuestion/index.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { getLSat, payLsat } from '~/utils' -import { api } from '../api' - -/* eslint-disable camelcase */ -export type QuestionData = { - search_term: string - transcripts: string - expertise_level: string - question_text: string -} - -export const postAskQuestion = async (data: QuestionData, setBudget: (value: number | null) => void): Promise => { - const lsatToken = await getLSat() - - try { - await api.post(`/ask_question`, JSON.stringify(data), { Authorization: lsatToken }) - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (error: any) { - if (error.status === 402) { - await payLsat(setBudget) - - await postAskQuestion(data, setBudget) - - return - } - - throw error - } -} diff --git a/src/network/fetchGraphData/const.ts b/src/network/fetchGraphData/const.ts index eb1453074..f3fd82757 100644 --- a/src/network/fetchGraphData/const.ts +++ b/src/network/fetchGraphData/const.ts @@ -1,31 +1,6 @@ -import { GraphStyle } from '~/stores/useDataStore' -import { generateEarthGraphPositions } from '~/transformers/earthGraph' -import { generateForceGraphPositions } from '~/transformers/forceGraph' -import { generateSphereGraphPositions } from '~/transformers/sphereGraph' -import { generateSplitGraphPositions } from '~/transformers/splitGraph' -import { GraphData, Link, NodeExtended } from '~/types' - -export const shouldIncludeTopics = true -export const maxScale = 26 +import { GraphData } from '~/types' export const defaultData: GraphData = { links: [], nodes: [], } - -export const getGraphDataPositions = (graphStyle: GraphStyle, nodes: NodeExtended[], links: Link[]) => { - // give nodes and links positions based on graphStyle - if (graphStyle === 'split') { - return generateSplitGraphPositions(nodes, links) - } - - if (graphStyle === 'sphere') { - return generateSphereGraphPositions(nodes) - } - - if (graphStyle === 'earth') { - return generateEarthGraphPositions(nodes) - } - - return generateForceGraphPositions(nodes, links) -}