fix: minor bugs in right pane (#43)

Co-authored-by: Amaresh  S M <[email protected]>

src/components/scope/index.tsx

@@ -45,14 +45,21 @@ export const Scope: FC = () => {
 				<>
 					{scopeManager.scopes.map((subScope, index) => (
 						<ScopeItem
+							isArray={Array.isArray(scopeManager.scopes)}
 							key={index}
 							data={subScope}
+							path={index.toString()}
 							index={index + 1}
 						/>
 					))}
 				</>
 			) : (
-				<ScopeItem data={scopeManager.globalScope} index={-1} />
+				<ScopeItem
+					isArray={Array.isArray(scopeManager.globalScope)}
+					data={scopeManager.globalScope}
+					path={"-1"}
+					index={-1}
+				/>
 			)}
 		</Accordion>
 	);

src/components/scope/scope-item.tsx

@@ -8,35 +8,50 @@ import { TreeEntry } from "../tree-entry";
 import type { FC } from "react";
 
 type ScopeItemProperties = {
+	isArray: boolean;
 	readonly index: number;
+	readonly path: string;
 	readonly data: Scope | Variable | Reference | null;
 };
 
-export const ScopeItem: FC<ScopeItemProperties> = ({ data, index }) => {
+export const ScopeItem: FC<ScopeItemProperties> = ({
+	data,
+	index,
+	path,
+	isArray,
+}) => {
 	if (!data) {
 		return null;
 	}
 
-	let key = "unknown";
+	let key;
 
 	if (data instanceof Scope) {
 		key = data.type;
 	} else if (data instanceof Variable) {
 		key = data.name;
+	} else if (data instanceof Reference) {
+		key = data.identifier.name;
+	} else {
+		key = (data as Record<string, string>)?.type ?? typeof data;
 	}
 
 	return (
 		<AccordionItem
-			value={`${index}-${key}`}
+			value={path + "." + index + "." + key}
 			className="border rounded-lg overflow-hidden"
 		>
 			<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
-				{Math.max(index, 0)}. {key}
+				{isArray && `${Math.max(index, 0)}.`} {key}
 			</AccordionTrigger>
 			<AccordionContent className="p-4 border-t">
 				<div className="space-y-1">
-					{Object.entries(data).map(item => (
-						<TreeEntry key={item[0]} data={item} />
+					{Object.entries(data).map((item, index) => (
+						<TreeEntry
+							key={item[0]}
+							data={item}
+							path={path + "." + index}
+						/>
 					))}
 				</div>
 			</AccordionContent>

src/components/tree-entry.tsx

@@ -7,6 +7,7 @@ import type { FC, ReactNode } from "react";
 
 type TreeEntryProperties = {
 	readonly data: [string, unknown];
+	readonly path?: string;
 };
 
 const isProbablyNode = (value: unknown) => {
@@ -20,14 +21,32 @@ const isProbablyNode = (value: unknown) => {
 	);
 };
 
-const sanitizeValue = (value: unknown): ReactNode => {
+const SanitizeValue = ({
+	value,
+	path,
+	isArray,
+	index,
+}: {
+	value: unknown;
+	isArray: boolean;
+	path?: string;
+	index: number;
+}): ReactNode => {
 	if (!value) {
 		return null;
 	}
 
 	if (Array.isArray(value)) {
 		if (typeof value[0] === "object") {
-			return value.map(sanitizeValue);
+			return value.map((item, index) => (
+				<SanitizeValue
+					key={index}
+					path={path + "." + index}
+					value={item}
+					index={index}
+					isArray={Array.isArray(value)}
+				/>
+			));
 		}
 
 		return (
@@ -45,20 +64,30 @@ const sanitizeValue = (value: unknown): ReactNode => {
 		isProbablyNode(value)
 	) {
 		return (
-			<div className="mt-3 space-y-3 ml-2">
-				<ScopeItem data={value as Scope} index={0} />
+			<div className="mt-3 space-y-3 ml-6">
+				<ScopeItem
+					path={path + "." + index}
+					isArray={isArray}
+					data={value as Scope}
+					index={index}
+				/>
 			</div>
 		);
 	}
 
 	return (
-		<pre className="ml-8 max-h-44 bg-card border overflow-auto rounded-lg p-3">
-			{JSON.stringify(value, null, 2)}
-		</pre>
+		<div className="ml-8">
+			<ScopeItem
+				path={path + "." + index}
+				isArray={isArray}
+				data={value as Scope}
+				index={index}
+			/>
+		</div>
 	);
 };
 
-export const TreeEntry: FC<TreeEntryProperties> = ({ data }) => {
+export const TreeEntry: FC<TreeEntryProperties> = ({ data, path }) => {
 	const [key, value] = data;
 	const [open, setOpen] = useState(false);
 	const Icon = open ? MinusSquareIcon : PlusSquareIcon;
@@ -68,7 +97,9 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data }) => {
 	return (
 		<>
 			<div className="flex items-center gap-3">
-				{typeof value === "object" || Array.isArray(value) ? (
+				{(typeof value === "object" &&
+					Object.values(value ?? {}).length) ||
+				(Array.isArray(value) && value.length) ? (
 					<button
 						onClick={toggleOpen}
 						aria-label="Toggle"
@@ -79,7 +110,7 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data }) => {
 				) : (
 					<div className="w-4 h-4" />
 				)}
-				<span>{key}</span>
+				{key && <span>{key}</span>}
 				{renderValue(value).map((part, partIndex) => (
 					<span
 						key={partIndex}
@@ -91,7 +122,14 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data }) => {
 					</span>
 				))}
 			</div>
-			{open ? sanitizeValue(value) : null}
+			{open ? (
+				<SanitizeValue
+					path={path}
+					value={value}
+					isArray={Array.isArray(value)}
+					index={0}
+				/>
+			) : null}
 		</>
 	);
 };

src/lib/render-value.ts

@@ -6,7 +6,7 @@ export const renderValue = (value: unknown): string[] => {
 	if (typeof value === "object" && value !== null) {
 		const keys = Object.keys(value);
 		return [
-			value.constructor.name,
+			(value as { type: string })?.type,
 			keys.length > 3
 				? `{${keys.slice(0, 3).join(", ")}, ...}`
 				: `{${keys.join(", ")}}`,