From 4b99201a66f6258fae5e35a4238de85484d4398b Mon Sep 17 00:00:00 2001 From: Raul Marvan Date: Mon, 25 Mar 2024 17:55:18 -0600 Subject: [PATCH] chore: added modal information correctly loaded --- app/components/charts/BubbleChart.tsx | 8 +- app/components/charts/SunburstChart.tsx | 1 + .../information/ModalInformation.tsx | 282 ++++++++++-------- app/routes/_index.tsx | 23 +- app/types/index.ts | 1 + app/types/nodeTypes.ts | 1 + app/types/productTypes.ts | 28 ++ 7 files changed, 217 insertions(+), 127 deletions(-) create mode 100644 app/types/productTypes.ts diff --git a/app/components/charts/BubbleChart.tsx b/app/components/charts/BubbleChart.tsx index d950d1f..5aaf6c1 100644 --- a/app/components/charts/BubbleChart.tsx +++ b/app/components/charts/BubbleChart.tsx @@ -10,6 +10,7 @@ import { useScreenSize } from "~/context/ScreenSizeContext"; interface BubbleChartProps { data: NodeType; + modalData: any; onSelectNode?: (args: any) => void; } @@ -23,7 +24,11 @@ const colors = [ ]; const minNodeRadius = 100; -const BubbleChart: FC = ({ data, onSelectNode }) => { +const BubbleChart: FC = ({ + data, + modalData, + onSelectNode, +}) => { const svgRef = useRef(null); const [isSVGRendered, setIsSVGRendered] = useState(false); const [zoomPercentage, setZoomPercentage] = useState(100); @@ -255,6 +260,7 @@ const BubbleChart: FC = ({ data, onSelectNode }) => { )}
diff --git a/app/components/charts/SunburstChart.tsx b/app/components/charts/SunburstChart.tsx index 3e99876..446828e 100644 --- a/app/components/charts/SunburstChart.tsx +++ b/app/components/charts/SunburstChart.tsx @@ -131,6 +131,7 @@ const SunburstChart = (props: SunburstElementProps) => { )} diff --git a/app/components/information/ModalInformation.tsx b/app/components/information/ModalInformation.tsx index 44b46c6..3c4b058 100644 --- a/app/components/information/ModalInformation.tsx +++ b/app/components/information/ModalInformation.tsx @@ -3,141 +3,179 @@ import { OpenInNew } from "@mui/icons-material"; import CloseIcon from "@mui/icons-material/Close"; import { IconButton } from "@mui/material"; import { FC } from "react"; -import { NodeType } from "~/types"; +import { AIProducts, NodeType } from "~/types"; import Pill from "../common/Pill"; interface ModalInformationProps { node: NodeType | null; + modalData: AIProducts; onClose: () => void; } -const ModalInformation: FC = ({ node, onClose }) => { +const ModalInformation: FC = ({ + node, + modalData, + onClose, +}) => { + const name = node?.data?.name ?? node?.name; + const product = modalData.find((product) => product.name === name); + const relatedTools = modalData + ?.filter((p) => p.name !== name && p.ecosystem === product?.ecosystem) + .map((p) => p.name); // TODO - Replace information with actual data from the node - const features = [ - "Integrations to connect Fireflies with other meeting platforms like Google Meet, Zoom, Microsoft Teams, Skype, and more.", - "Rich text editing features to correct, comment, annotate, and format transcripts as needed.", - "Smart summaries to grab the key points, next steps, questions, and discussion highlights from your meeting.", - "Search and organization features to isolate words, phrases, and topics in your transcripts.", - ]; - const tools = [ - "ClickUp", - "ChatGPT", - "Jasper", - "Spinach", - "GrammarlyGO", - "Figstack", - ]; + const bestFeatures: any[] = []; + // TODO - Replace information with actual data from the node + const pricing: any[] = []; + + const cleanProductLink = (link: string | undefined) => { + // remove http, https, :, //, www., and trailing / + // and added capital leter to firstletter + return link + ? link + .replace(/(^\w+:|^)\/\/|www.|\/$/g, "") + .replace(/^\w/, (c) => c.toUpperCase()) + : ""; + }; return ( -
-
-

- {node?.data?.name ?? node?.name} -

-
- - - -
-
- -
-

- Fireflies.ai -

- -
- -
-
-

- Company -

-

- Fireflies.ai Corp. -

-
-
-

- AI Model -

-

- Data and Integration Services -

-
-
-

- Category -

-

- Data and Simulation Generation -

+ product && ( +
+
+

+ {product?.name} +

+
+ + + +
-
-

- Industry -

-

- Customer Segmentation -

-
-
-
-

- About -

-

- Fireflies is an AI meeting assistant software for note-taking and - transcribing voices in real-time. Whether you’re in the midst of a - brainstorming session or uploading files from a customer interview, - Fireflies can instantly capture your conversations in writing.{" "} -

-

- Regardless of accent, dialect, industry, or language, this meeting - assistant can detect even the smallest differences in speech for - precise transcriptions on the first try.{" "} -

-
-
-

- Best features -

-
-
    - {features.map((feature, index) => ( -
  • {feature}
    • - ))} -
-
-
-
-

- Pricing -

-

- Personal: - Free -

-

- Professional: - $10 per month -

-

- Team: - $20 per user, per month -

-
-
-

- Related tools -

-
- {tools.map((tool, index) => ( - {tool} - ))} + +
+

+ {cleanProductLink(product?.link)} +

+ +
+ +
+ {product?.name?.length > 0 && ( +
+

+ Company +

+

+ {product?.name} +

+
+ )} + {product?.ecosystem?.length > 0 && ( +
+

+ AI Model +

+

+ {product?.ecosystem} +

+
+ )} + {product?.category?.length > 0 && ( +
+

+ Category +

+

+ {product?.category?.join(", ")} +

+
+ )} + {product?.enterprise_categories?.length > 0 && ( +
+

+ Industry +

+

+ {product?.enterprise_categories?.join(", ")} +

+
+ )}
+ {product?.description?.length > 0 && ( +
+

+ About +

+

+ {product?.description} +

+
+ )} + {bestFeatures?.length > 0 && ( +
+

+ Best features +

+
+
    + {bestFeatures.map((feature, index) => ( +
  • {feature}
    • + ))} +
+
+
+ )} + {product.licence.length > 0 && ( +
+

+ License +

+

+ License: + {product.licence} +

+ {product.state && ( +

+ State: + {product.state} +

+ )} +
+ )} + {pricing?.length > 0 && ( +
+

+ Pricing +

+

+ Personal: + Free +

+

+ Professional: + $10 per month +

+

+ Team: + $20 per user, per month +

+
+ )} + {relatedTools.length > 0 && ( +
+

+ Related tools +

+
+ {relatedTools.map((tool, index) => { + return ( + index < 10 && {tool} + ); + })} +
+
+ )}
-
+ ) ); }; diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index a9af4d5..1c14a12 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -20,6 +20,7 @@ export const meta: MetaFunction = () => { export default function Index() { const [jsonData, setJsonData] = useState(null); + const [jsonModalData, setJsonModalData] = useState(null); const [notifications, setNotifications] = useState([]); const newNotifications = notifications.length > 0 && @@ -38,6 +39,12 @@ export default function Index() { .then((data) => setJsonData(data)); }, []); + useEffect(() => { + fetch("https://gen-ai-tools-public.s3.amazonaws.com/gen-ai-map.json") + .then((response) => response.json()) + .then((data) => setJsonModalData(data)); + }, []); + useEffect(() => { // TODO: Fetch notifications from the API ? setNotifications([ @@ -66,11 +73,19 @@ export default function Index() { />
{/*!jsonData ? :
*/} - {!jsonData ? :
} + {!jsonData ? ( + + ) : ( +
+ +
+ )}
- +
); diff --git a/app/types/index.ts b/app/types/index.ts index 22b1d91..a1b8084 100644 --- a/app/types/index.ts +++ b/app/types/index.ts @@ -1,3 +1,4 @@ // src/types/index.ts export * from "./notificationTypes"; export * from "./nodeTypes"; +export * from "./productTypes"; diff --git a/app/types/nodeTypes.ts b/app/types/nodeTypes.ts index ad33b63..b5a14ee 100644 --- a/app/types/nodeTypes.ts +++ b/app/types/nodeTypes.ts @@ -2,6 +2,7 @@ export type NodeType = { name: string; value: number; data: NodeType; + parent: NodeType | null; __dataNode: DataNodeType; children?: NodeType[] | null; }; diff --git a/app/types/productTypes.ts b/app/types/productTypes.ts new file mode 100644 index 0000000..538c7a9 --- /dev/null +++ b/app/types/productTypes.ts @@ -0,0 +1,28 @@ +// TODO: Add more types as needed +export type Category = + | "Text Generation" + | "Image and Video Generation" + | "Music and Sound Generation"; + +// TODO: Add more categories as needed +export type EnterpriseCategory = + | "Marketing/Content Creation" + | "Developer tools" + | "Design tools"; + +export interface AIProduct { + licence: string; + ecosystem: string; + last_update: string; + // TODO: use Category instead string + category: string[]; + link: string; + description: string; + // TODO: use EnterpriseCategory instead string + enterprise_categories: string[]; + id: string; + name: string; + state: string; +} + +export type AIProducts = AIProduct[];