Skip to content

Commit

Permalink
chore: added modal information correctly loaded
Browse files Browse the repository at this point in the history
  • Loading branch information
@raulMarvanWizeline
raulMarvanWizeline committed Mar 25, 2024
1 parent 1bd9ff7 commit 4b99201
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 127 deletions.
8 changes: 7 additions & 1 deletion app/components/charts/BubbleChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { useScreenSize } from "~/context/ScreenSizeContext";

interface BubbleChartProps {
data: NodeType;
modalData: any;
onSelectNode?: (args: any) => void;
}

Expand All @@ -23,7 +24,11 @@ const colors = [
];
const minNodeRadius = 100;

const BubbleChart: FC<BubbleChartProps> = ({ data, onSelectNode }) => {
const BubbleChart: FC<BubbleChartProps> = ({
data,
modalData,
onSelectNode,
}) => {
const svgRef = useRef<SVGSVGElement>(null);
const [isSVGRendered, setIsSVGRendered] = useState(false);
const [zoomPercentage, setZoomPercentage] = useState(100);
Expand Down Expand Up @@ -255,6 +260,7 @@ const BubbleChart: FC<BubbleChartProps> = ({ data, onSelectNode }) => {
<ModalInformation
onClose={handleIsInfoModalClose}
node={selectedNode}
modalData={modalData}
/>
)}
<div className="hidden sm:block absolute bottom-0 right-0 mb-4 mr-4">
Expand Down
1 change: 1 addition & 0 deletions app/components/charts/SunburstChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ const SunburstChart = (props: SunburstElementProps) => {
<ModalInformation
onClose={handleIsInfoModalClose}
node={selectedNode}
modalData={{}}
/>
)}
</>
Expand Down
282 changes: 160 additions & 122 deletions app/components/information/ModalInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<ModalInformationProps> = ({ node, onClose }) => {
const ModalInformation: FC<ModalInformationProps> = ({
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 (
<div className="fixed top-4 right-4 w-96 h-auto max-h-[90vh] bg-secondary rounded-md p-2 gap-2 overflow-auto z-50">
<div className="flex justify-between items-center mb-2">
<h2 className="text-white border border-primary p-4 mr-2 w-full rounded-md">
{node?.data?.name ?? node?.name}
</h2>
<div className="border border-primary rounded-md p-4">
<IconButton className="!p-0" onClick={onClose}>
<CloseIcon className="!fill-white" />
</IconButton>
</div>
</div>
<a href="https://fireflies.ai/" target="_blank" rel="noreferrer">
<div className="border border-primary rounded-md p-2 mb-2 flex justify-between p-4 items-center">
<p className="text-blue500 font-montserrat font-medium text-sm leading-[18px]">
Fireflies.ai
</p>
<OpenInNew className="!fill-primary" />
</div>
</a>
<div className="border border-primary rounded-md p-4 mb-2 grid grid-cols-2 gap-4">
<div>
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Company
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
Fireflies.ai Corp.
</p>
</div>
<div>
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
AI Model
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
Data and Integration Services
</p>
</div>
<div>
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Category
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
Data and Simulation Generation
</p>
product && (
<div className="fixed top-4 right-4 w-96 h-auto max-h-[90vh] bg-secondary rounded-md p-2 gap-2 overflow-auto z-50">
<div className="flex justify-between items-center mb-2">
<h2 className="text-white border border-primary p-4 mr-2 w-full rounded-md">
{product?.name}
</h2>
<div className="border border-primary rounded-md p-4">
<IconButton className="!p-0" onClick={onClose}>
<CloseIcon className="!fill-white" />
</IconButton>
</div>
</div>
<div>
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Industry
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
Customer Segmentation
</p>
</div>
</div>
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
About
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt mb-4">
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.{" "}
</p>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
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.{" "}
</p>
</div>
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Best features
</h3>
<div className="font-normal text-[14px] leading-[18px] text-white-alt pl-4">
<ul className="list-disc">
{features.map((feature, index) => (
<li key={`${feature}-${index}`}>{feature}</li>
))}
</ul>
</div>
</div>
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Pricing
</h3>
<p className="text-[14px] leading-[18px] text-white-alt">
<span className="font-bold">Personal:</span>
<span className="font-normal"> Free</span>
</p>
<p className="text-[14px] leading-[18px] text-white-alt">
<span className="font-bold">Professional:</span>
<span className="font-normal"> $10 per month</span>
</p>
<p className="text-[14px] leading-[18px] text-white-alt">
<span className="font-bold">Team:</span>
<span className="font-normal"> $20 per user, per month</span>
</p>
</div>
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Related tools
</h3>
<div className="flex flex-wrap gap-2">
{tools.map((tool, index) => (
<Pill key={`${tool}-${index}`}>{tool}</Pill>
))}
<a href={product?.link} target="_blank" rel="noreferrer">
<div className="border border-primary rounded-md p-2 mb-2 flex justify-between p-4 items-center">
<p className="text-blue500 font-montserrat font-medium text-sm leading-[18px]">
{cleanProductLink(product?.link)}
</p>
<OpenInNew className="!fill-primary" />
</div>
</a>
<div className="border border-primary rounded-md p-4 mb-2 grid grid-cols-2 gap-4">
{product?.name?.length > 0 && (
<div>
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Company
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
{product?.name}
</p>
</div>
)}
{product?.ecosystem?.length > 0 && (
<div>
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
AI Model
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
{product?.ecosystem}
</p>
</div>
)}
{product?.category?.length > 0 && (
<div>
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Category
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
{product?.category?.join(", ")}
</p>
</div>
)}
{product?.enterprise_categories?.length > 0 && (
<div>
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Industry
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt">
{product?.enterprise_categories?.join(", ")}
</p>
</div>
)}
</div>
{product?.description?.length > 0 && (
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
About
</h3>
<p className="font-normal text-[14px] leading-[18px] text-white-alt mb-4 text-justify">
{product?.description}
</p>
</div>
)}
{bestFeatures?.length > 0 && (
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Best features
</h3>
<div className="font-normal text-[14px] leading-[18px] text-white-alt pl-4">
<ul className="list-disc">
{bestFeatures.map((feature, index) => (
<li key={`${feature}-${index}`}>{feature}</li>
))}
</ul>
</div>
</div>
)}
{product.licence.length > 0 && (
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
License
</h3>
<p className="text-[14px] leading-[18px] text-white-alt">
<span className="font-bold">License:</span>
<span className="font-normal"> {product.licence}</span>
</p>
{product.state && (
<p className="text-[14px] leading-[18px] text-white-alt">
<span className="font-bold">State:</span>
<span className="font-normal"> {product.state}</span>
</p>
)}
</div>
)}
{pricing?.length > 0 && (
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Pricing
</h3>
<p className="text-[14px] leading-[18px] text-white-alt">
<span className="font-bold">Personal:</span>
<span className="font-normal"> Free</span>
</p>
<p className="text-[14px] leading-[18px] text-white-alt">
<span className="font-bold">Professional:</span>
<span className="font-normal"> $10 per month</span>
</p>
<p className="text-[14px] leading-[18px] text-white-alt">
<span className="font-bold">Team:</span>
<span className="font-normal"> $20 per user, per month</span>
</p>
</div>
)}
{relatedTools.length > 0 && (
<div className="border border-primary rounded-md p-4 mb-2">
<h3 className="font-bold text-[12px] leading-[16px] text-blue300 mb-2">
Related tools
</h3>
<div className="flex flex-wrap gap-2">
{relatedTools.map((tool, index) => {
return (
index < 10 && <Pill key={`${tool}-${index}`}>{tool}</Pill>
);
})}
</div>
</div>
)}
</div>
</div>
)
);
};

Expand Down
23 changes: 19 additions & 4 deletions app/routes/_index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<NotificationType[]>([]);
const newNotifications =
notifications.length > 0 &&
Expand All @@ -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([
Expand Down Expand Up @@ -66,11 +73,19 @@ export default function Index() {
/>
</div>
{/*!jsonData ? <Loader /> : <div className="min-h-screen flex flex-col justify-between items-center"><SunburstChart data={jsonData} onSelectNode={setNodeAncestors} /></div>*/}
{!jsonData ? <Loader /> : <div className="min-h-screen flex flex-col justify-between items-center"><BubbleChart data={jsonData} onSelectNode={setNodeAncestors} /></div>}
{!jsonData ? (
<Loader />
) : (
<div className="min-h-screen flex flex-col justify-between items-center">
<BubbleChart
data={jsonData}
modalData={jsonModalData}
onSelectNode={setNodeAncestors}
/>
</div>
)}
<div className="hidden sm:block absolute bottom-0 left-0 mb-4 ml-4">
<Breadcrumb
path={nodeAncestors}
/>
<Breadcrumb path={nodeAncestors} />
</div>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions app/types/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// src/types/index.ts
export * from "./notificationTypes";
export * from "./nodeTypes";
export * from "./productTypes";
1 change: 1 addition & 0 deletions app/types/nodeTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export type NodeType = {
name: string;
value: number;
data: NodeType;
parent: NodeType | null;
__dataNode: DataNodeType;
children?: NodeType[] | null;
};
Expand Down
Loading

0 comments on commit 4b99201

Please sign in to comment.