Skip to content

feat: Added ui feedback when adding type in typesync #512

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+59 −4
Open

feat: Added ui feedback when adding type in typesync #512

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c004f00
feat: Added ui feedback when adding type in typesync
Aug 23, 2025
0284a1b
fix: removed useEffect for scroll
unniznd Aug 26, 2025
1e0a4ca
fix: clean up code formatting and improve readability in SchemaBuilde…
unniznd Aug 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 59 additions & 4 deletions packages/typesync-studio/src/routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
import { createFormHook, useStore } from '@tanstack/react-form';
import { createFileRoute } from '@tanstack/react-router';
import { Array as EffectArray, String as EffectString, Option, pipe, Schema } from 'effect';
import { useState } from 'react';
import { useRef, useState } from 'react';

import { Arrow } from '@/Components/Arrow.tsx';
import { Checkbox } from '@/Components/Form/Checkbox.tsx';
Expand Down Expand Up @@ -113,6 +113,12 @@ function SchemaBuilderComponent() {
});
},
});

// Create a ref to store DOM references for each type
const typeRefs = useRef<Map<number, HTMLDivElement>>(new Map());
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still does not feel like the right answer to me. Especially not the way it is being set

// State to track the index of the newly added type
const [_newTypeIndex, setNewTypeIndex] = useState<number | null>(null);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we aren't reading the state variable here: _newTypeIndex, which I am assuming we are not because you prepended it with an underscore, then why do we need to set the state at all? It isn't being used, is it?


const appTypes = useStore(createSchemaForm.store, (state) =>
pipe(
state.values.types,
Expand Down Expand Up @@ -427,6 +433,10 @@ function SchemaBuilderComponent() {
} satisfies Typesync.TypesyncHypergraphSchemaTypeProperty;
}),
});

// Calculate the index where the new type will be added
let newIndex = field.state.value.length;

// if schema is currently empty, set as first type
if (field.state.value.length === 1) {
const initialType = field.state.value[0];
Expand All @@ -439,6 +449,7 @@ function SchemaBuilderComponent() {
EffectArray.match(relationSchemaTypes, {
onEmpty() {
field.replaceValue(0, selectedMappedToType as never);
newIndex = 0;
},
onNonEmpty(mappedRelationTypes) {
EffectArray.forEach(mappedRelationTypes, (mapped, idx) => {
Expand All @@ -448,12 +459,15 @@ function SchemaBuilderComponent() {
knowledgeGraphId: mapped.knowledgeGraphId,
properties: mapped.properties,
} as never);
newIndex = 0;
return;
}
field.pushValue(mapped as never);
newIndex = idx;
});
// push selected type
field.pushValue(selectedMappedToType as never);
newIndex = field.state.value.length - 1;
},
});
return;
Expand All @@ -471,11 +485,25 @@ function SchemaBuilderComponent() {
knowledgeGraphId: mapped.knowledgeGraphId,
properties: mapped.properties,
} as never);
newIndex = field.state.value.length - 1;
});
// push selected type
field.pushValue(selectedMappedToType as never);
newIndex = field.state.value.length - 1;
},
});
setTimeout(() => {
const element = typeRefs.current.get(newIndex);
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, 0);
setNewTypeIndex(newIndex);
toastManager.add({
title: 'Type added to schema',
description: selected.name,
type: 'success',
});
return;
}}
/>
Expand All @@ -495,6 +523,13 @@ function SchemaBuilderComponent() {
return (
<div
key={typeEntryKey}
ref={(el) => {
if (el) {
typeRefs.current.set(idx, el);
} else {
typeRefs.current.delete(idx);
}
}}
className="border-l-2 border-indigo-600 dark:border-indigo-400 pl-2 py-2 flex flex-col gap-y-4"
>
<div className="flex items-start justify-between gap-x-3">
Expand Down Expand Up @@ -860,12 +895,25 @@ function SchemaBuilderComponent() {
<Toast.Root
key={t.id}
toast={t}
className="pointer-events-auto w-full max-w-md rounded-lg bg-white shadow-lg outline-1 outline-black/5 transition data-closed:opacity-0 data-enter:transform data-enter:duration-300 data-enter:ease-out data-closed:data-enter:translate-y-2 data-leave:duration-100 data-leave:ease-in data-closed:data-enter:sm:translate-x-2 data-closed:data-enter:sm:translate-y-0 dark:bg-gray-800 dark:-outline-offset-1 dark:outline-white/10 p-4"
className={classnames(
'pointer-events-auto w-full max-w-md rounded-lg shadow-lg outline-1 transition data-closed:opacity-0 data-enter:transform data-enter:duration-300 data-enter:ease-out data-closed:data-enter:translate-y-2 data-leave:duration-100 data-leave:ease-in data-closed:data-enter:sm:translate-x-2 data-closed:data-enter:sm:translate-y-0 p-4',
t.type === 'success'
? 'bg-green-50 dark:bg-green-900 outline-green-500/20'
: t.type === 'error'
? 'bg-red-50 dark:bg-red-900 outline-red-500/20'
: 'bg-white dark:bg-gray-800 outline-black/5 dark:outline-white/10',
)}
>
<div className="p-4">
<div className="flex items-start">
<div className="shrink-0">
<WarningIcon aria-hidden="true" className="size-6 text-red-400" />
{t.type === 'success' ? (
<CheckIcon aria-hidden="true" className="size-6 text-green-400" />
) : t.type === 'error' ? (
<ExclamationMarkIcon aria-hidden="true" className="size-6 text-red-400" />
) : (
<WarningIcon aria-hidden="true" className="size-6 text-yellow-400" />
)}
</div>
<div className="ml-3 w-0 flex-1 pt-0.5">
<Toast.Title className="text-sm font-medium text-gray-900 dark:text-white" />
Expand All @@ -874,7 +922,14 @@ function SchemaBuilderComponent() {
<div className="ml-4 flex shrink-0">
<Toast.Close
aria-label="Close"
className="inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:outline-2 focus:outline-offset-2 focus:outline-red-600 dark:hover:text-white dark:focus:outline-red-500"
className={classnames(
'inline-flex rounded-md focus:outline-2 focus:outline-offset-2',
t.type === 'success'
? 'text-green-400 hover:text-green-500 focus:outline-green-600 dark:focus:outline-green-500'
: t.type === 'error'
? 'text-red-400 hover:text-red-500 focus:outline-red-600 dark:focus:outline-red-500'
: 'text-gray-400 hover:text-gray-500 focus:outline-gray-600 dark:hover:text-white dark:focus:outline-gray-500',
)}
>
<XIcon className="size-4" aria-hidden="true" />
</Toast.Close>
Expand Down
Loading