Skip to content

Commit

Permalink
fix dialog and floating tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@thewbuk
thewbuk committed Jul 31, 2024
1 parent c309204 commit f67073a
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 65 deletions.
35 changes: 22 additions & 13 deletions packages/toolkit/src/view/knowledge/components/CreateKnowledgeBaseCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ const Menu = ({ onDelete, onEdit, onDuplicate, disabled }: MenuProps) => {
</React.Fragment>
);
};

type CreateKnowledgeBaseCardProps = {
knowledgeBase: KnowledgeBase;
onCardClick: () => void;
Expand All @@ -101,6 +100,7 @@ export const CreateKnowledgeBaseCard = ({
const [deleteDialogIsOpen, setDeleteDialogIsOpen] = React.useState(false);
const [editDialogIsOpen, setEditDialogIsOpen] = React.useState(false);
const [isHovered, setIsHovered] = React.useState(false);
const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 });

const { accessToken, enabledQuery } = useInstillStore(
useShallow((store: InstillStore) => ({
Expand All @@ -127,12 +127,12 @@ export const CreateKnowledgeBaseCard = ({
: [];

return `
Converting pipeline ID: ${knowledgeBase.convertingPipelines?.[0] || "N/A"}
Splitting pipeline ID: ${knowledgeBase.splittingPipelines?.[0] || "N/A"}
Embedding pipeline ID: ${knowledgeBase.embeddingPipelines?.[0] || "N/A"}
Files #: ${knowledgeBase.totalFiles || "N/A"}
Text Chunks #: ${textChunks.length}
`;
Converting pipeline ID: ${knowledgeBase.convertingPipelines?.[0] || "N/A"}
Splitting pipeline ID: ${knowledgeBase.splittingPipelines?.[0] || "N/A"}
Embedding pipeline ID: ${knowledgeBase.embeddingPipelines?.[0] || "N/A"}
Files #: ${knowledgeBase.totalFiles || "N/A"}
Text Chunks #: ${textChunks.length}
`.trim();
}, [isHovered, isLoadingChunks, chunks, knowledgeBase]);

const handleDelete = (e: React.MouseEvent) => {
Expand All @@ -159,6 +159,13 @@ export const CreateKnowledgeBaseCard = ({
await onUpdateKnowledgeBase(data, knowledgeBase.kbId);
setEditDialogIsOpen(false);
};
const handleMouseMove = (e: React.MouseEvent) => {
const rect = e.currentTarget.getBoundingClientRect();
setMousePosition({
x: e.clientX - rect.left - 300,
y: e.clientY - rect.top - 150,
});
};

return (
<React.Fragment>
Expand All @@ -170,6 +177,7 @@ export const CreateKnowledgeBaseCard = ({
onClick={onCardClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onMouseMove={handleMouseMove}
>
<div className="flex items-center justify-between">
<div className="product-headings-heading-4">
Expand All @@ -195,14 +203,15 @@ export const CreateKnowledgeBaseCard = ({
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className="w-[360px] rounded-md bg-semantic-bg-primary p-4 shadow-lg !z-10"
sideOffset={5}
side="bottom"
align="end"
className="absolute w-[300px] max-w-[300px] rounded-md bg-semantic-bg-primary p-4 shadow-lg !z-10"
style={{
left: `${mousePosition.x}px`,
top: `${mousePosition.y}px`,
}}
>
<pre className="whitespace-pre-wrap text-xs">
<div className="whitespace-pre-wrap text-xs break-words">
{tooltipContent}
</pre>
</div>
<Tooltip.Arrow className="fill-semantic-bg-primary" />
</Tooltip.Content>
</Tooltip.Portal>
Expand Down
107 changes: 55 additions & 52 deletions packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,59 +102,62 @@ export const CreateKnowledgeDialog = ({
});
})}
>
<Form.Field
control={form.control}
name="namespaceId"
render={({ field }) => (
<Form.Item>
<Form.Label className="text-semantic-fg-primary product-button-button-2">
Owner
</Form.Label>
<Form.Control>
<EntitySelector
value={field.value}
onChange={(value: string) => {
setValue("namespaceId", value, {
shouldValidate: true,
});
}}
data={userNamespaces}
/>
</Form.Control>
<Form.Message />
</Form.Item>
)}
/>
<Icons.SlashDivider className="h-8 w-8 stroke-semantic-fg-secondary stroke-1" />
<Form.Field
control={form.control}
name="name"
render={({ field }) => (
<Form.Item className="-ml-4 w-1/2">
<Form.Label className="text-semantic-fg-primary product-button-button-2">
Knowledge base name
</Form.Label>
<Form.Control>
<Input.Root>
<Input.Core
{...field}
id={field.name}
placeholder="Knowledge base name"
<div className="flex items-center justify-start gap-4">
<Form.Field
control={form.control}
name="namespaceId"
render={({ field }) => (
<Form.Item className="w-1/2">
<Form.Label className="text-semantic-fg-primary product-button-button-2">
Owner
</Form.Label>
<Form.Control>
<EntitySelector
value={field.value}
onChange={(value: string) => {
setValue("namespaceId", value, {
shouldValidate: true,
});
}}
data={userNamespaces}
/>
</Input.Root>
</Form.Control>
<div className="h-6">
{nameValue && !isNameValid && (
<p className="!mt-0.5 text-semantic-fg-secondary product-body-text-4-regular">
Name will be transformed to: {formattedName}
</p>
)}
<Form.Message className="!mt-0.5 product-body-text-4-regular" />
</div>
</Form.Item>
)}
/>

</Form.Control>
<div className="h-6">
<Form.Message className="!mt-0.5 product-body-text-4-regular" />
</div>
</Form.Item>
)}
/>
<Icons.SlashDivider className="h-8 w-8 stroke-semantic-fg-secondary stroke-1" />
<Form.Field
control={form.control}
name="name"
render={({ field }) => (
<Form.Item className="-ml-4 w-1/2">
<Form.Label className="text-semantic-fg-primary product-button-button-2">
Knowledge base name
</Form.Label>
<Form.Control>
<Input.Root>
<Input.Core
{...field}
id={field.name}
placeholder="Knowledge base name"
/>
</Input.Root>
</Form.Control>
<div className="h-6">
{nameValue && !isNameValid && (
<p className="!mt-0.5 text-semantic-fg-secondary product-body-text-4-regular">
Name will be transformed to: {formattedName}
</p>
)}
<Form.Message className="!mt-0.5 product-body-text-4-regular" />
</div>
</Form.Item>
)}
/>
</div>
<Form.Field
control={form.control}
name="description"
Expand Down

0 comments on commit f67073a

Please sign in to comment.