+
diff --git a/Website/components/attributes/StatusAttribute.tsx b/Website/components/attributes/StatusAttribute.tsx
index 41974bb..4d05c28 100644
--- a/Website/components/attributes/StatusAttribute.tsx
+++ b/Website/components/attributes/StatusAttribute.tsx
@@ -1,31 +1,48 @@
-import { StatusAttributeType, StatusOption } from "@/lib/Types"
-import { formatNumberSeperator } from "@/lib/utils"
+import { StatusAttributeType, StatusOption } from "@/lib/Types";
+import { formatNumberSeperator } from "@/lib/utils";
+import { Circle } from "lucide-react";
export default function StatusAttribute({ attribute }: { attribute: StatusAttributeType }) {
const groupedOptions = attribute.Options.reduce((acc, option) => {
if (!acc[option.State]) {
- acc[option.State] = []
+ acc[option.State] = [];
}
- acc[option.State].push(option)
- return acc
- }, {} as Record
{isMobile ? (
) : (
- 
+ showElement ? (
+
+ ) : (
+
+ )
)}
+ {/* Vertically centered sidebar toggle button (desktop only) */}
+ {!isMobile && (
+
+ )}
+
{/* Content */}
) : (
-
+ showElement ? (
+
+ ) : (
+
+ )
)}
- State/Status
+
+
+ State/Status
+ {/* No DefaultValue for StatusAttributeType, so no default badge */}
+
{Object.entries(groupedOptions).map(([state, options]) => (
{state}
- ("displayName")
const [sortDirection, setSortDirection] = useState("asc")
const [typeFilter, setTypeFilter] = useState("all")
const [hideStandardFields, setHideStandardFields] = useState(true)
- const [searchQuery, setSearchQuery] = useState("")
const handleSort = (column: SortColumn) => {
if (sortColumn === column) {
@@ -56,14 +57,13 @@ export const Attributes = ({ entity }: IAttributeProps) => {
filteredAttributes = filteredAttributes.filter(attr => attr.AttributeType === typeFilter)
}
- if (searchQuery) {
- const query = searchQuery.toLowerCase()
+ // Filter by search prop (from parent)
+ if (search && search.length >= 3) {
+ const query = search.toLowerCase();
filteredAttributes = filteredAttributes.filter(attr =>
attr.DisplayName.toLowerCase().includes(query) ||
- attr.SchemaName.toLowerCase().includes(query) ||
- attr.AttributeType.toLowerCase().includes(query) ||
- (attr.Description?.toLowerCase().includes(query) ?? false)
- )
+ attr.SchemaName.toLowerCase().includes(query)
+ );
}
if (hideStandardFields) filteredAttributes = filteredAttributes.filter(attr => attr.IsCustomAttribute || attr.IsStandardFieldModified);
@@ -103,6 +103,15 @@ export const Attributes = ({ entity }: IAttributeProps) => {
})
}
+ const sortedAttributes = getSortedAttributes();
+
+ // Notify parent of visible count
+ React.useEffect(() => {
+ if (onVisibleCountChange) {
+ onVisibleCountChange(sortedAttributes.length);
+ }
+ }, [onVisibleCountChange, sortedAttributes.length]);
+
const SortIcon = ({ column }: { column: SortColumn }) => {
if (sortColumn !== column) return
+
- )
+ );
}
\ No newline at end of file
diff --git a/Website/components/datamodelview/Attributes.tsx b/Website/components/datamodelview/Attributes.tsx
index 6e18c35..c89d934 100644
--- a/Website/components/datamodelview/Attributes.tsx
+++ b/Website/components/datamodelview/Attributes.tsx
@@ -4,9 +4,8 @@ import { EntityType, AttributeType } from "@/lib/Types"
import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table } from "../ui/table"
import { Button } from "../ui/button"
import { useState } from "react"
-import { ArrowUpDown, ArrowUp, ArrowDown, Search, X, EyeOff, Eye } from "lucide-react"
+import { ArrowUpDown, ArrowUp, ArrowDown, EyeOff, Eye } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./../ui/select"
-import { Input } from "./../ui/input"
import { AttributeDetails } from "./../entity/AttributeDetails"
import BooleanAttribute from "./../attributes/BooleanAttribute"
import ChoiceAttribute from "./../attributes/ChoiceAttribute"
@@ -18,20 +17,22 @@ import IntegerAttribute from "./../attributes/IntegerAttribute"
import LookupAttribute from "./../attributes/LookupAttribute"
import StatusAttribute from "./../attributes/StatusAttribute"
import StringAttribute from "./../attributes/StringAttribute"
+import React from "react"
+import { highlightMatch } from "../datamodelview/List";
type SortDirection = 'asc' | 'desc' | null
type SortColumn = 'displayName' | 'schemaName' | 'type' | 'description' | null
interface IAttributeProps {
entity: EntityType
+ onVisibleCountChange?: (count: number) => void
}
-export const Attributes = ({ entity }: IAttributeProps) => {
+export const Attributes = ({ entity, onVisibleCountChange, search = "" }: IAttributeProps & { search?: string }) => {
const [sortColumn, setSortColumn] = useState
{options.map(option => (
-
))}
- {option.Name}
- {formatNumberSeperator(option.Value)}
+
+
))}
+
+ {/* No Description property */}
+
+
+ {/* No DefaultValue, so always show Circle icon */}
+
+
+
+ {formatNumberSeperator(option.Value)}
+
+
+
-
-
-
+ {/* Removed internal search input, now using parent search */}
- {getSortedAttributes().length === 0 ? (
-
-
+ )}
}
diff --git a/Website/components/datamodelview/DatamodelView.tsx b/Website/components/datamodelview/DatamodelView.tsx
index 85f60da..f6daa03 100644
--- a/Website/components/datamodelview/DatamodelView.tsx
+++ b/Website/components/datamodelview/DatamodelView.tsx
@@ -1,34 +1,209 @@
'use client'
-import { useEffect } from "react";
import { AppSidebar } from "../AppSidebar";
import { TooltipProvider } from "../ui/tooltip";
import { useSidebarDispatch } from "@/contexts/SidebarContext";
import { SidebarDatamodelView } from "./SidebarDatamodelView";
-import { DatamodelViewProvider } from "@/contexts/DatamodelViewContext";
+import { DatamodelViewProvider, useDatamodelView, useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext";
+import { SearchPerformanceProvider } from "@/contexts/SearchPerformanceContext";
import { List } from "./List";
+import { TimeSlicedSearch } from "./TimeSlicedSearch";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { useDatamodelData, useDatamodelDataDispatch } from "@/contexts/DatamodelDataContext";
export function DatamodelView() {
const dispatch = useSidebarDispatch();
useEffect(() => {
- dispatch({ type: "SET_ELEMENT", payload:
-
- {searchQuery || typeFilter !== "all" ? (
-
- ) : (
-
-
- ) : (
- - {searchQuery && typeFilter !== "all" - ? `No ${typeFilter.replace("Attribute", "")} attributes found matching "${searchQuery}"` - : searchQuery - ? `No attributes found matching "${searchQuery}"` - : `No ${typeFilter.replace("Attribute", "")} attributes available` - } -
- -No attributes available for this entity
- )} -
-
-
+
+
+
+ );
+}
+
+function DatamodelViewContent() {
+ const { scrollToSection } = useDatamodelView();
+ const datamodelDispatch = useDatamodelViewDispatch();
+ const { groups, filtered } = useDatamodelData();
+ const datamodelDataDispatch = useDatamodelDataDispatch();
+ const workerRef = useRef(null);
+ const [currentSearchIndex, setCurrentSearchIndex] = useState(0);
+
+ // Calculate total search results
+ const totalResults = filtered.length > 0 ? filtered.filter(item => item.type === 'entity').length : 0;
+
+ // Isolated search handlers - these don't depend on component state
+ const handleSearch = useCallback((searchValue: string) => {
+ if (workerRef.current && groups) {
+ workerRef.current.postMessage(searchValue.length >= 3 ? searchValue : "");
+ }
+ datamodelDataDispatch({ type: "SET_SEARCH", payload: searchValue.length >= 3 ? searchValue : "" });
+ setCurrentSearchIndex(searchValue.length >= 3 ? 1 : 0); // Reset to first result when searching, 0 when cleared
+ }, [groups, datamodelDataDispatch]);
+
+ const handleLoadingChange = useCallback((isLoading: boolean) => {
+ datamodelDispatch({ type: "SET_LOADING", payload: isLoading });
+ }, [datamodelDispatch]);
+
+ // Navigation handlers
+ const handleNavigateNext = useCallback(() => {
+ if (currentSearchIndex < totalResults) {
+ const nextIndex = currentSearchIndex + 1;
+ setCurrentSearchIndex(nextIndex);
+
+ // Find the next entity in filtered results
+ const entityResults = filtered.filter(item => item.type === 'entity');
+ const nextEntity = entityResults[nextIndex - 1];
+ if (nextEntity) {
+ datamodelDispatch({ type: "SET_CURRENT_SECTION", payload: nextEntity.entity.SchemaName });
+ datamodelDispatch({ type: "SET_CURRENT_GROUP", payload: nextEntity.group.Name });
+
+ // Scroll to the section
+ scrollToSection(nextEntity.entity.SchemaName);
+ }
+ }
+ }, [currentSearchIndex, totalResults, filtered, datamodelDispatch, scrollToSection]);
+
+ const handleNavigatePrevious = useCallback(() => {
+ if (currentSearchIndex > 1) {
+ const prevIndex = currentSearchIndex - 1;
+ setCurrentSearchIndex(prevIndex);
+
+ // Find the previous entity in filtered results
+ const entityResults = filtered.filter(item => item.type === 'entity');
+ const prevEntity = entityResults[prevIndex - 1];
+ if (prevEntity) {
+ datamodelDispatch({ type: "SET_CURRENT_SECTION", payload: prevEntity.entity.SchemaName });
+ datamodelDispatch({ type: "SET_CURRENT_GROUP", payload: prevEntity.group.Name });
+
+ // Scroll to the section
+ scrollToSection(prevEntity.entity.SchemaName);
+ }
+ }
+ }, [currentSearchIndex, filtered, datamodelDispatch, scrollToSection]);
+
+ useEffect(() => {
+ if (!workerRef.current) {
+ workerRef.current = new Worker(new URL("./searchWorker.js", import.meta.url));
+ }
+
+ // Initialize or re-initialize worker with groups when groups change
+ if (workerRef.current && groups && groups.length > 0) {
+ workerRef.current.postMessage({ type: "init", groups });
+ }
+
+ const worker = workerRef.current;
+ if (!worker) return;
+
+ const handleMessage = (e: MessageEvent) => {
+ const message = e.data;
+
+ if (message.type === 'started') {
+ datamodelDispatch({ type: "SET_LOADING", payload: true });
+ // setSearchProgress(0);
+ setCurrentSearchIndex(0);
+ // Start with empty results to show loading state
+ datamodelDataDispatch({ type: "SET_FILTERED", payload: [] });
+ }
+ else if (message.type === 'results') {
+ // setSearchProgress(message.progress || 0);
+
+ // For chunked results, append to existing
+ if (message.complete) {
+ datamodelDataDispatch({ type: "SET_FILTERED", payload: message.data });
+ datamodelDispatch({ type: "SET_LOADING", payload: false });
+ // Set to first result if we have any and auto-navigate to it
+ const entityResults = message.data.filter((item: { type: string }) => item.type === 'entity');
+ if (entityResults.length > 0) {
+ setCurrentSearchIndex(1);
+ const firstEntity = entityResults[0];
+ datamodelDispatch({ type: "SET_CURRENT_SECTION", payload: firstEntity.entity.SchemaName });
+ datamodelDispatch({ type: "SET_CURRENT_GROUP", payload: firstEntity.group.Name });
+ // Small delay to ensure virtual list is ready
+ setTimeout(() => {
+ scrollToSection(firstEntity.entity.SchemaName);
+ }, 100);
+ }
+ } else {
+ datamodelDataDispatch({ type: "APPEND_FILTERED", payload: message.data });
+ }
+ }
+ else {
+ // Handle legacy format for backward compatibility
+ datamodelDataDispatch({ type: "SET_FILTERED", payload: message });
+ datamodelDispatch({ type: "SET_LOADING", payload: false });
+ // Set to first result if we have any and auto-navigate to it
+ const entityResults = message.filter((item: { type: string }) => item.type === 'entity');
+ if (entityResults.length > 0) {
+ setCurrentSearchIndex(1);
+ const firstEntity = entityResults[0];
+ datamodelDispatch({ type: "SET_CURRENT_SECTION", payload: firstEntity.entity.SchemaName });
+ datamodelDispatch({ type: "SET_CURRENT_GROUP", payload: firstEntity.group.Name });
+ // Small delay to ensure virtual list is ready
+ setTimeout(() => {
+ scrollToSection(firstEntity.entity.SchemaName);
+ }, 100);
+ }
+ }
+ };
+
+ worker.addEventListener("message", handleMessage);
+ return () => worker.removeEventListener("message", handleMessage);
+ }, [datamodelDispatch, datamodelDataDispatch, groups]);
+
+ if (!groups) {
+ return (
+ ("name")
const [sortDirection, setSortDirection] = useState("asc")
const [searchQuery, setSearchQuery] = useState("")
@@ -74,6 +81,14 @@ function Keys({ entity }: { entity: EntityType }) {
})
}
+ const sortedKeys = getSortedKeys();
+
+ React.useEffect(() => {
+ if (onVisibleCountChange) {
+ onVisibleCountChange(sortedKeys.length);
+ }
+ }, [onVisibleCountChange, sortedKeys.length]);
+
const SortIcon = ({ column }: { column: SortColumn }) => {
if (sortColumn !== column) return
-
-
-
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
}
\ No newline at end of file
diff --git a/Website/components/datamodelview/Keys.tsx b/Website/components/datamodelview/Keys.tsx
index f8dcc2c..9795319 100644
--- a/Website/components/datamodelview/Keys.tsx
+++ b/Website/components/datamodelview/Keys.tsx
@@ -6,11 +6,18 @@ import { useState } from "react"
import { ArrowUpDown, ArrowUp, ArrowDown, Search, X } from "lucide-react"
import { Input } from "../ui/input"
import { Button } from "../ui/button"
+import React from "react"
+import { highlightMatch } from "../datamodelview/List";
type SortColumn = 'name' | 'logicalName' | 'attributes' | null
type SortDirection = 'asc' | 'desc' | null
-function Keys({ entity }: { entity: EntityType }) {
+interface IKeysProps {
+ entity: EntityType;
+ onVisibleCountChange?: (count: number) => void;
+}
+
+function Keys({ entity, onVisibleCountChange, search = "" }: IKeysProps & { search?: string }) {
const [sortColumn, setSortColumn] = useState
+
-
- )
+
+ {/* LOADING BAR - currently deprecated */}
+ {/* {loading && (
+
+
+
+
+
+ )} */}
+
- {getSortedKeys().length === 0 ? (
+ {sortedKeys.length === 0 ? (
- {getSortedKeys().map((key, index) => (
+ {sortedKeys.map((key, index) => (
- {key.Name}
- {key.LogicalName}
+
+ {highlightMatch(key.Name, search)}
+
+
+ {highlightMatch(key.LogicalName, search)}
+
(null);
- const lastSectionRef = useRef(null);
+ const lastScrollHandleTime = useRef(0);
const scrollTimeoutRef = useRef();
+ const sectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+
+ const getSectionRefCallback = (schemaName: string) => (el: HTMLDivElement | null) => {
+ sectionRefs.current[schemaName] = el;
+ };
+
+ const remeasureSection = (schemaName: string) => {
+ const el = sectionRefs.current[schemaName];
+ if (el) rowVirtualizer.measureElement(el);
+ };
+ // Only recalculate items when filtered or search changes
const flatItems = useMemo(() => {
+ if (filtered && filtered.length > 0) return filtered;
+ const lowerSearch = search.trim().toLowerCase();
const items: Array<
- | { type: 'group'; group: (typeof Groups)[number] }
- | { type: 'entity'; group: (typeof Groups)[number]; entity: (typeof Groups)[number]['Entities'][number] }
+ | { type: 'group'; group: GroupType }
+ | { type: 'entity'; group: GroupType; entity: EntityType }
> = [];
- for (const group of Groups) {
- items.push({ type: 'group', group });
- for (const entity of group.Entities) {
- items.push({ type: 'entity', group, entity });
- }
+ for (const group of groups) {
+ // Filter entities in this group
+ const filteredEntities = group.Entities.filter((entity: EntityType) => {
+ const typedEntity = entity;
+ if (!lowerSearch) return true;
+ // Match entity schema or display name
+ const entityMatch = typedEntity.SchemaName.toLowerCase().includes(lowerSearch) ||
+ (typedEntity.DisplayName && typedEntity.DisplayName.toLowerCase().includes(lowerSearch));
+ // Match any attribute schema or display name
+ const attrMatch = typedEntity.Attributes.some((attr: AttributeType) =>
+ attr.SchemaName.toLowerCase().includes(lowerSearch) ||
+ (attr.DisplayName && attr.DisplayName.toLowerCase().includes(lowerSearch))
+ );
+ return entityMatch || attrMatch;
+ });
+ if (filteredEntities.length > 0) {
+ items.push({ type: 'group', group });
+ for (const entity of filteredEntities) {
+ items.push({ type: 'entity', group, entity });
+ }
+ }
}
return items;
- }, []);
+ }, [filtered, search, groups]);
const rowVirtualizer = useVirtualizer({
count: flatItems.length,
getScrollElement: () => parentRef.current,
- overscan: 20,
- estimateSize: () => 300,
+ overscan: 5, // Reduce overscan to improve performance
+ estimateSize: (index) => {
+ const item = flatItems[index];
+ if (!item) return 100;
+ return item.type === 'group' ? 92 : 300;
+ },
});
const scrollToSection = useCallback((sectionId: string) => {
@@ -91,66 +134,54 @@ export const List = ({ }: IListProps) => {
});
}, [flatItems]);
+ // Throttled scroll handler to reduce calculations
+ const handleScroll = useCallback(() => {
+ const now = Date.now();
+ if (now - lastScrollHandleTime.current < 100) return; // Only process every 100ms
+ lastScrollHandleTime.current = now;
+
+ const scrollElement = parentRef.current;
+ if (!scrollElement || isScrollingToSection) return;
+
+ const scrollOffset = scrollElement.scrollTop;
+ const virtualItems = rowVirtualizer.getVirtualItems();
+
+ // Find the first visible item
+ const firstVisibleItem = virtualItems.find(v => {
+ return v.start <= scrollOffset && v.end >= scrollOffset;
+ });
+
+ if (firstVisibleItem) {
+ const item = flatItems[firstVisibleItem.index];
+ if (item?.type === 'entity') {
+ if (item.entity.SchemaName !== datamodelView.currentSection) {
+ dispatch({ type: "SET_CURRENT_GROUP", payload: item.group.Name });
+ dispatch({ type: "SET_CURRENT_SECTION", payload: item.entity.SchemaName });
+ }
+ }
+ }
+ }, [dispatch, flatItems, rowVirtualizer, datamodelView.currentSection, isScrollingToSection]);
+
+ // Throttled scroll event listener
useEffect(() => {
const scrollElement = parentRef.current;
if (!scrollElement) return;
-
- let ticking = false;
- let lastScrollTop = 0;
-
- const handleScroll = () => {
- if (!ticking) {
- ticking = true;
- window.requestAnimationFrame(() => {
- const currentScrollTop = scrollElement.scrollTop;
- if (Math.abs(currentScrollTop - lastScrollTop) < 10) {
- ticking = false;
- return;
- }
- lastScrollTop = currentScrollTop;
-
- const virtualItems = rowVirtualizer.getVirtualItems();
- const scrollOffset = scrollElement.scrollTop;
- const containerHeight = scrollElement.clientHeight;
- const target = containerHeight / 3;
-
- let best: { id: string; group: string; distance: number } | null = null;
-
- for (const v of virtualItems) {
- const item = flatItems[v.index];
- if (item.type !== "entity") continue;
-
- const itemTop = v.start;
- const distance = Math.abs(itemTop - scrollOffset - target);
-
- if (!best || distance < best.distance) {
- best = {
- id: item.entity.SchemaName,
- group: item.group.Name,
- distance,
- };
- }
- }
-
- if (best && best.id !== lastSectionRef.current) {
- lastSectionRef.current = best.id;
- dispatch({ type: "SET_CURRENT_GROUP", payload: best.group });
- dispatch({ type: "SET_CURRENT_SECTION", payload: best.id });
- }
-
- ticking = false;
- });
- }
+ let scrollTimeout: number;
+ const throttledScrollHandler = () => {
+ if (scrollTimeout) return;
+ scrollTimeout = window.setTimeout(() => {
+ handleScroll();
+ scrollTimeout = 0;
+ }, 100);
};
-
- scrollElement.addEventListener("scroll", handleScroll, { passive: true });
- handleScroll();
-
+
+ scrollElement.addEventListener("scroll", throttledScrollHandler, { passive: true });
return () => {
- scrollElement.removeEventListener("scroll", handleScroll);
+ scrollElement.removeEventListener("scroll", throttledScrollHandler);
+ clearTimeout(scrollTimeout);
};
- }, [dispatch, flatItems, rowVirtualizer]);
+ }, [handleScroll]);
useEffect(() => {
dispatch({ type: 'SET_SCROLL_TO_SECTION', payload: scrollToSection });
@@ -162,31 +193,65 @@ export const List = ({ }: IListProps) => {
};
}, [dispatch, scrollToSection]);
+ useEffect(() => {
+ // When the current section is in view, set loading to false
+ if (datamodelView.currentSection) {
+ // Check if the current section is rendered in the virtualizer
+ const isInView = rowVirtualizer.getVirtualItems().some(vi => {
+ const item = flatItems[vi.index];
+ return item.type === 'entity' && item.entity.SchemaName === datamodelView.currentSection;
+ });
+ if (isInView) {
+ console.log("List: setting loading false");
+ dispatch({ type: 'SET_LOADING', payload: false });
+ }
+ }
+ }, [datamodelView.currentSection, flatItems, rowVirtualizer, dispatch]);
+
return (
{searchQuery ? (
) : (
@@ -157,15 +172,19 @@ function Keys({ entity }: { entity: EntityType }) {
@@ -120,7 +135,7 @@ function Keys({ entity }: { entity: EntityType }) {
) : (
- No keys available for this entity
+No keys available for this table
)}
{key.KeyAttributes.map((attr, i) => (
@@ -173,7 +192,7 @@ function Keys({ entity }: { entity: EntityType }) {
key={i}
className="inline-flex items-center px-1.5 py-0.5 text-xs rounded-md font-medium bg-blue-50 text-blue-700 md:px-2 md:py-1 md:text-sm"
>
- {attr}
+ {highlightMatch(attr, search)}
))}
diff --git a/Website/components/datamodelview/List.tsx b/Website/components/datamodelview/List.tsx
index 76abb85..f301d07 100644
--- a/Website/components/datamodelview/List.tsx
+++ b/Website/components/datamodelview/List.tsx
@@ -1,40 +1,83 @@
import { useEffect, useMemo, useRef, useCallback, useState } from "react";
-import { Groups } from "../../generated/Data";
-import { useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext";
+import { useDatamodelView, useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext";
import React from "react";
import { useVirtualizer } from '@tanstack/react-virtual';
import { Section } from "./Section";
-import { Loader2 } from "lucide-react";
+import { useDatamodelData } from "@/contexts/DatamodelDataContext";
+import { AttributeType, EntityType, GroupType } from "@/lib/Types";
-interface IListProps { }
+interface IListProps {
+}
+
+// Helper to highlight search matches
+export function highlightMatch(text: string, search: string) {
+ if (!search || search.length < 3) return text;
+ const idx = text.toLowerCase().indexOf(search.toLowerCase());
+ if (idx === -1) return text;
+ return <>{text.slice(0, idx)}{text.slice(idx, idx + search.length)}{text.slice(idx + search.length)};
+}
export const List = ({ }: IListProps) => {
const dispatch = useDatamodelViewDispatch();
+ const datamodelView = useDatamodelView();
const [isScrollingToSection, setIsScrollingToSection] = useState(false);
-
+ const { groups, filtered, search } = useDatamodelData();
const parentRef = useRef
- {isScrollingToSection && (
-
- ("name")
const [sortDirection, setSortDirection] = useState("asc")
const [typeFilter, setTypeFilter] = useState("all")
@@ -114,6 +117,14 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
{ value: "one-to-many", label: "One-to-Many" }
]
+ const sortedRelationships = getSortedRelationships();
+
+ React.useEffect(() => {
+ if (onVisibleCountChange) {
+ onVisibleCountChange(sortedRelationships.length);
+ }
+ }, [onVisibleCountChange, sortedRelationships.length]);
+
return <>
) : (
@@ -233,14 +244,16 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
- {getSortedRelationships().map((relationship, index) =>
+ {sortedRelationships.map((relationship, index) =>
- {relationship.Name}
+
+ {highlightMatch(relationship.Name, search)}
+
{relationship.LookupDisplayName}
diff --git a/Website/components/datamodelview/Section.tsx b/Website/components/datamodelview/Section.tsx
index 60b5e66..9536ec7 100644
--- a/Website/components/datamodelview/Section.tsx
+++ b/Website/components/datamodelview/Section.tsx
@@ -13,13 +13,35 @@ import React from "react"
interface ISectionProps {
entity: EntityType;
group: GroupType;
+ onContentChange?: () => void;
+ search?: string;
}
-export const Section = React.memo(({ entity, group }: ISectionProps) =>
- {
+export const Section = React.memo(
+ ({ entity, group, onContentChange, search }: ISectionProps) => {
+ // Use useRef to track previous props for comparison
+ const prevSearch = React.useRef(search);
+
+ const [tab, setTab] = React.useState("attributes");
+
+ // Only compute these counts when needed
+ const visibleAttributeCount = React.useMemo(() => entity.Attributes.length, [entity.Attributes]);
+ const visibleRelationshipCount = React.useMemo(() => entity.Relationships.length, [entity.Relationships]);
+ const visibleKeyCount = React.useMemo(() => entity.Keys.length, [entity.Keys]);
+
+ // Only call onContentChange when something actually changes
+ React.useEffect(() => {
+ if (onContentChange &&
+ (prevSearch.current !== search ||
+ tab !== "attributes")) {
+ prevSearch.current = search;
+ onContentChange();
+ }
+ }, [tab, search, onContentChange]);
+
return (
-
+ {/* Add skeleton loading state */}
+ {flatItems.length === 0 && datamodelView.loading && (
+
+ {[...Array(5)].map((_, i) => (
+
)}
+
+ {/* Virtualized list */}
+
+ ))}
+
+
+
+
+
+
+
+
{rowVirtualizer.getVirtualItems().map((virtualItem) => {
const item = flatItems[virtualItem.index];
+ const sectionRef = item.type === 'entity' ? getSectionRefCallback(item.entity.SchemaName) : undefined;
return (
diff --git a/Website/components/datamodelview/Relationships.tsx b/Website/components/datamodelview/Relationships.tsx
index 8b48d73..38cfe0c 100644
--- a/Website/components/datamodelview/Relationships.tsx
+++ b/Website/components/datamodelview/Relationships.tsx
@@ -9,15 +9,18 @@ import { ArrowUpDown, ArrowUp, ArrowDown, Search, X } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
import { Input } from "../ui/input"
import { useDatamodelView, useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext"
+import React from "react"
+import { highlightMatch } from "../datamodelview/List";
type SortDirection = 'asc' | 'desc' | null
type SortColumn = 'name' | 'tableSchema' | 'lookupField' | 'type' | 'behavior' | 'schemaName' | null
interface IRelationshipsProps {
- entity: EntityType
+ entity: EntityType;
+ onVisibleCountChange?: (count: number) => void;
}
-export const Relationships = ({ entity }: IRelationshipsProps) => {
+export const Relationships = ({ entity, onVisibleCountChange, search = "" }: IRelationshipsProps & { search?: string }) => {
const [sortColumn, setSortColumn] = useState {
+ if (sectionRef) sectionRef(el);
+ if (el) rowVirtualizer.measureElement(el);
+ }
+ : rowVirtualizer.measureElement
+ }
style={{
position: 'absolute',
top: 0,
@@ -205,7 +270,12 @@ export const List = ({ }: IListProps) => {
) : (
-
+ remeasureSection(item.entity.SchemaName)}
+ search={search}
+ />
)}
@@ -177,7 +188,7 @@ export const Relationships = ({ entity }: IRelationshipsProps) => {
) : (
- No relationships available for this entity
+No relationships available for this table
)}
- >(new Set());
@@ -37,7 +39,7 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
setSearchTerm(term);
if (term.trim()) {
const newExpandedGroups = new Set();
- Groups.forEach(group => {
+ groups.forEach(group => {
const hasMatchingEntity = group.Entities.some(entity =>
entity.SchemaName.toLowerCase().includes(term.toLowerCase()) ||
entity.DisplayName.toLowerCase().includes(term.toLowerCase())
@@ -79,6 +81,8 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
};
const handleSectionClick = (sectionId: string) => {
+ console.log("Loading true for section click");
+ dataModelDispatch({ type: 'SET_LOADING', payload: true });
if (scrollToSection) {
scrollToSection(sectionId);
}
@@ -123,7 +127,25 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
>
{group.Name}
handleGroupClick(group.Name)}/>
+ {
+ e.stopPropagation();
+ if (group.Entities.length > 0) handleSectionClick(group.Entities[0].SchemaName);
+ }}
+ aria-label={`Link to first entity in ${group.Name}`}
+ tabIndex={0}
+ >
+ {
+ e.stopPropagation();
+ if (group.Entities.length > 0) handleGroupClick(group.Name);
+ }} />
+
@@ -170,8 +192,8 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
+
)
+ },
+ // Custom comparison function to prevent unnecessary re-renders
+ (prevProps, nextProps) => {
+ // Only re-render if entity, search or group changes
+ return prevProps.entity.SchemaName === nextProps.entity.SchemaName &&
+ prevProps.search === nextProps.search &&
+ prevProps.group.Name === nextProps.group.Name;
}
);
diff --git a/Website/components/datamodelview/SidebarDatamodelView.tsx b/Website/components/datamodelview/SidebarDatamodelView.tsx
index 67936c2..b55545b 100644
--- a/Website/components/datamodelview/SidebarDatamodelView.tsx
+++ b/Website/components/datamodelview/SidebarDatamodelView.tsx
@@ -1,14 +1,14 @@
import { EntityType, GroupType } from "@/lib/Types";
-import { Groups } from "../../generated/Data"
import { useTouch } from '../ui/hybridtooltop';
import { useSidebarDispatch } from '@/contexts/SidebarContext';
import { cn } from "@/lib/utils";
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@radix-ui/react-collapsible";
import { Slot } from "@radix-ui/react-slot";
-import { ChevronDown, Puzzle, Search, X } from "lucide-react";
+import { ExternalLink, Puzzle, Search, X } from "lucide-react";
import { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { useDatamodelView, useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext";
+import { useDatamodelData } from "@/contexts/DatamodelDataContext";
interface ISidebarDatamodelViewProps {
@@ -24,6 +24,8 @@ export const SidebarDatamodelView = ({ }: ISidebarDatamodelViewProps) => {
const dispatch = useSidebarDispatch();
const { currentSection, currentGroup, scrollToSection } = useDatamodelView();
const dataModelDispatch = useDatamodelViewDispatch();
+
+ const { groups } = useDatamodelData();
const [searchTerm, setSearchTerm] = useState("");
const [expandedGroups, setExpandedGroups] = useState{/* Removed conditional styling and indicator */}
+
{entity.Relationships.length ?
: <>
}
-
-
-
{group.Entities.length}
-
{
- Groups.map((group) =>
+ groups.map((group) =>
(null);
+
+ const searchTimeoutRef = useRef();
+ const typingTimeoutRef = useRef();
+ const frameRef = useRef();
+
+ // Time-sliced debouncing using requestAnimationFrame
+ const scheduleSearch = useCallback((value: string) => {
+ if (searchTimeoutRef.current) {
+ clearTimeout(searchTimeoutRef.current);
+ }
+
+ searchTimeoutRef.current = window.setTimeout(() => {
+ // Use MessageChannel for immediate callback without blocking main thread
+ const channel = new MessageChannel();
+ channel.port2.onmessage = () => {
+ onSearch(value);
+
+ // Reset typing state in next frame
+ frameRef.current = requestAnimationFrame(() => {
+ setIsTyping(false);
+ });
+ };
+ channel.port1.postMessage(null);
+ }, 350);
+ }, [onSearch]);
+
+ const handleChange = useCallback((e: React.ChangeEvent) => {
+ const value = e.target.value;
+
+ // Immediate visual update (highest priority)
+ setLocalValue(value);
+
+ // Manage typing state
+ if (!isTyping) {
+ setIsTyping(true);
+ onLoadingChange(true);
+ }
+
+ // Reset typing timeout
+ if (typingTimeoutRef.current) {
+ clearTimeout(typingTimeoutRef.current);
+ }
+
+ // Schedule search
+ scheduleSearch(value);
+
+ // Auto-reset typing state if user stops typing
+ typingTimeoutRef.current = window.setTimeout(() => {
+ setIsTyping(false);
+ }, 2000);
+
+ }, [isTyping, onLoadingChange, scheduleSearch]);
+
+ // Handle keyboard navigation
+ const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ onNavigateNext?.();
+ if ('vibrate' in navigator) {
+ navigator.vibrate(50);
+ }
+ } else if (e.key === 'Enter' && e.shiftKey) {
+ e.preventDefault();
+ onNavigatePrevious?.();
+ if ('vibrate' in navigator) {
+ navigator.vibrate(50);
+ }
+ } else if (e.key === 'ArrowDown' && e.ctrlKey) {
+ e.preventDefault();
+ onNavigateNext?.();
+ } else if (e.key === 'ArrowUp' && e.ctrlKey) {
+ e.preventDefault();
+ onNavigatePrevious?.();
+ }
+ }, [onNavigateNext, onNavigatePrevious]);
+
+ const hasResults = totalResults > 0;
+ const showNavigation = hasResults && localValue.length >= 3;
+
+ // Cleanup
+ useEffect(() => {
+ return () => {
+ if (searchTimeoutRef.current) {
+ clearTimeout(searchTimeoutRef.current);
+ }
+ if (typingTimeoutRef.current) {
+ clearTimeout(typingTimeoutRef.current);
+ }
+ if (frameRef.current) {
+ cancelAnimationFrame(frameRef.current);
+ }
+ };
+ }, []);
+
+ // Portal setup
+ useEffect(() => {
+ let container = document.getElementById('time-sliced-search-portal');
+ if (!container) {
+ container = document.createElement('div');
+ container.id = 'time-sliced-search-portal';
+ container.style.position = 'fixed';
+ container.style.top = '0';
+ container.style.left = '0';
+ container.style.width = '100%';
+ container.style.height = '100%';
+ container.style.pointerEvents = 'none';
+ container.style.zIndex = '9999';
+ document.body.appendChild(container);
+ }
+
+ const searchContainer = document.createElement('div');
+ searchContainer.style.pointerEvents = 'auto';
+ container.appendChild(searchContainer);
+ setPortalRoot(searchContainer);
+
+ return () => {
+ if (searchContainer && container?.contains(searchContainer)) {
+ container.removeChild(searchContainer);
+ }
+ };
+ }, []);
+
+ const searchInput = (
+ (initialState);
+const DatamodelDataDispatchContext = createContext>(() => {});
+
+const datamodelDataReducer = (state: DatamodelDataState, action: any): DatamodelDataState => {
+ switch (action.type) {
+ case "SET_GROUPS":
+ return { ...state, groups: action.payload };
+ case "SET_SEARCH":
+ return { ...state, search: action.payload };
+ case "SET_FILTERED":
+ return { ...state, filtered: action.payload };
+ case "APPEND_FILTERED":
+ return { ...state, filtered: [...state.filtered, ...action.payload] };
+ default:
+ return state;
+ }
+};
+
+export const DatamodelDataProvider = ({ children }: { children: ReactNode }) => {
+ const [state, dispatch] = useReducer(datamodelDataReducer, initialState);
+
+ React.useEffect(() => {
+ const worker = new Worker(new URL("../components/datamodelview/dataLoaderWorker.js", import.meta.url));
+ worker.onmessage = (e) => {
+ dispatch({ type: "SET_GROUPS", payload: e.data });
+ worker.terminate();
+ };
+ worker.postMessage({});
+ return () => worker.terminate();
+ }, []);
+
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+export const useDatamodelData = () => useContext(DatamodelDataContext);
+export const useDatamodelDataDispatch = () => useContext(DatamodelDataDispatchContext);
\ No newline at end of file
diff --git a/Website/contexts/DatamodelViewContext.tsx b/Website/contexts/DatamodelViewContext.tsx
index a67c9de..3d9b756 100644
--- a/Website/contexts/DatamodelViewContext.tsx
+++ b/Website/contexts/DatamodelViewContext.tsx
@@ -8,18 +8,21 @@ export interface DatamodelViewState {
currentGroup: string | null;
currentSection: string | null;
scrollToSection: (sectionId: string) => void;
+ loading: boolean;
}
const initialState: DatamodelViewState = {
currentGroup: null,
currentSection: null,
scrollToSection: () => { throw new Error("scrollToSection not initialized yet!"); },
+ loading: true,
}
type DatamodelViewAction =
| { type: 'SET_CURRENT_GROUP', payload: string | null }
| { type: 'SET_CURRENT_SECTION', payload: string | null }
| { type: 'SET_SCROLL_TO_SECTION', payload: (sectionId: string) => void }
+ | { type: 'SET_LOADING', payload: boolean }
const datamodelViewReducer = (state: DatamodelViewState, action: DatamodelViewAction): DatamodelViewState => {
@@ -30,6 +33,8 @@ const datamodelViewReducer = (state: DatamodelViewState, action: DatamodelViewAc
return { ...state, currentSection: action.payload }
case 'SET_SCROLL_TO_SECTION':
return { ...state, scrollToSection: action.payload }
+ case 'SET_LOADING':
+ return { ...state, loading: action.payload }
default:
return state;
}
diff --git a/Website/contexts/SearchPerformanceContext.tsx b/Website/contexts/SearchPerformanceContext.tsx
new file mode 100644
index 0000000..4825503
--- /dev/null
+++ b/Website/contexts/SearchPerformanceContext.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import React, { createContext, useContext, useRef, useCallback, ReactNode } from 'react';
+
+interface SearchPerformanceContextType {
+ scheduleImmediateUpdate: (callback: () => void) => void;
+ scheduleBackgroundUpdate: (callback: () => void) => void;
+ cancelScheduledUpdate: (id: number) => void;
+}
+
+const SearchPerformanceContext = createContext(null);
+
+export const SearchPerformanceProvider = ({ children }: { children: ReactNode }) => {
+ const immediateUpdatesRef = useRef void>>(new Set());
+ const backgroundUpdatesRef = useRef void>>(new Set());
+
+ const immediateUpdateMap = useRef>(new Map());
+ const scheduleImmediateUpdate = useCallback((callback: () => void): number => {
+ const id = Date.now() + Math.random(); // Generate a unique id
+ const channel = new MessageChannel();
+ channel.port2.onmessage = () => {
+ callback();
+ immediateUpdateMap.current.delete(id); // Clean up after execution
+ };
+ immediateUpdateMap.current.set(id, channel);
+ channel.port1.postMessage(null);
+ return id;
+ }, []);
+
+ const scheduleBackgroundUpdate = useCallback((callback: () => void): number => {
+ if ('requestIdleCallback' in window) {
+ const id = (window as any).requestIdleCallback(callback, { timeout: 1000 });
+ return id;
+ } else {
+ const id = setTimeout(callback, 0);
+ return id as unknown as number; // Ensure consistent type
+ }
+ }, []);
+
+ const cancelScheduledUpdate = useCallback((id: number) => {
+ if (immediateUpdateMap.current.has(id)) {
+ const channel = immediateUpdateMap.current.get(id);
+ if (channel) {
+ channel.port1.close();
+ channel.port2.close();
+ }
+ immediateUpdateMap.current.delete(id);
+ } else if ('cancelIdleCallback' in window) {
+ (window as any).cancelIdleCallback(id);
+ } else {
+ clearTimeout(id);
+ }
+ }, []);
+
+ const value = {
+ scheduleImmediateUpdate,
+ scheduleBackgroundUpdate,
+ cancelScheduledUpdate
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useSearchPerformance = () => {
+ const context = useContext(SearchPerformanceContext);
+ if (!context) {
+ throw new Error('useSearchPerformance must be used within SearchPerformanceProvider');
+ }
+ return context;
+};
diff --git a/Website/lib/utils.ts b/Website/lib/utils.ts
index 7493c66..16a0c90 100644
--- a/Website/lib/utils.ts
+++ b/Website/lib/utils.ts
@@ -10,4 +10,55 @@ export function formatNumberSeperator(value: number): string {
const parts = value.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
return parts.join(',');
+}
+
+/**
+ * Creates a debounced function that delays invoking func until after wait milliseconds
+ */
+export function debounce unknown>(
+ func: T,
+ wait: number
+): (...args: Parameters) => void {
+ let timeout: ReturnType | null = null;
+
+ return function(...args: Parameters): void {
+ const later = () => {
+ timeout = null;
+ func(...args);
+ };
+
+ if (timeout) clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ };
+}
+
+/**
+ * Creates a throttled function that only invokes func at most once per every wait milliseconds
+ */
+export function throttle unknown>(
+ func: T,
+ wait: number
+): (...args: Parameters) => void {
+ let timeout: ReturnType | null = null;
+ let previous = 0;
+
+ return function(...args: Parameters): void {
+ const now = Date.now();
+ const remaining = wait - (now - previous);
+
+ if (remaining <= 0 || remaining > wait) {
+ if (timeout) {
+ clearTimeout(timeout);
+ timeout = null;
+ }
+ previous = now;
+ func(...args);
+ } else if (!timeout) {
+ timeout = setTimeout(() => {
+ previous = Date.now();
+ timeout = null;
+ func(...args);
+ }, remaining);
+ }
+ };
}
\ No newline at end of file
+ {/* Search Input Container */}
+
+ );
+
+ return portalRoot ? createPortal(searchInput, portalRoot) : null;
+};
diff --git a/Website/components/datamodelview/dataLoaderWorker.js b/Website/components/datamodelview/dataLoaderWorker.js
new file mode 100644
index 0000000..df2f774
--- /dev/null
+++ b/Website/components/datamodelview/dataLoaderWorker.js
@@ -0,0 +1,5 @@
+import { Groups } from '../../generated/Data';
+
+self.onmessage = function() {
+ self.postMessage(Groups);
+};
\ No newline at end of file
diff --git a/Website/components/datamodelview/searchWorker.js b/Website/components/datamodelview/searchWorker.js
new file mode 100644
index 0000000..2ac5573
--- /dev/null
+++ b/Website/components/datamodelview/searchWorker.js
@@ -0,0 +1,65 @@
+let groups = null;
+const CHUNK_SIZE = 20; // Process results in chunks
+
+self.onmessage = async function(e) {
+ if (e.data && e.data.type === 'init') {
+ groups = e.data.groups;
+ return;
+ }
+
+ const search = (e.data || '').trim().toLowerCase();
+ if (!groups) {
+ self.postMessage({ type: 'results', data: [], complete: true });
+ return;
+ }
+
+ // First quickly send back a "started" message
+ self.postMessage({ type: 'started' });
+
+ const allItems = [];
+
+ // Find all matches
+ for (const group of groups) {
+ const filteredEntities = group.Entities.filter(entity => {
+ if (!search) return true;
+ const entityMatch = entity.SchemaName.toLowerCase().includes(search) ||
+ (entity.DisplayName && entity.DisplayName.toLowerCase().includes(search));
+ const attrMatch = entity.Attributes.some(attr =>
+ attr.SchemaName.toLowerCase().includes(search) ||
+ (attr.DisplayName && attr.DisplayName.toLowerCase().includes(search))
+ );
+ return entityMatch || attrMatch;
+ });
+
+ if (filteredEntities.length > 0) {
+ allItems.push({ type: 'group', group });
+ for (const entity of filteredEntities) {
+ allItems.push({ type: 'entity', group, entity });
+ }
+ }
+ }
+
+ // Send results in chunks to prevent UI blocking
+ for (let i = 0; i < allItems.length; i += CHUNK_SIZE) {
+ const chunk = allItems.slice(i, i + CHUNK_SIZE);
+ const isLastChunk = i + CHUNK_SIZE >= allItems.length;
+
+ self.postMessage({
+ type: 'results',
+ data: chunk,
+ complete: isLastChunk,
+ progress: Math.min(100, Math.round((i + CHUNK_SIZE) / allItems.length * 100))
+ });
+
+ // Small delay between chunks to let the UI breathe
+ if (!isLastChunk) {
+ // Use a proper yielding mechanism to let the UI breathe
+ await sleep(5);
+ }
+ }
+
+ // Helper function to pause execution for a specified duration
+ function sleep(ms) {
+ return new Promise(resolve => setTimeout(resolve, ms));
+ }
+};
\ No newline at end of file
diff --git a/Website/contexts/DatamodelDataContext.tsx b/Website/contexts/DatamodelDataContext.tsx
new file mode 100644
index 0000000..708f8e8
--- /dev/null
+++ b/Website/contexts/DatamodelDataContext.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React, { createContext, useContext, useReducer, ReactNode } from "react";
+import { GroupType } from "@/lib/Types";
+
+interface DatamodelDataState {
+ groups: GroupType[];
+ search: string;
+ filtered: any[];
+}
+
+const initialState: DatamodelDataState = {
+ groups: [],
+ search: "",
+ filtered: []
+};
+
+const DatamodelDataContext = createContext
+
+
+ {/* Results Counter */}
+ {showNavigation && (
+
+
+
+ {/* Navigation Buttons */}
+ {showNavigation && (
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+
+ {totalResults > 0 ? (
+ `${currentIndex} of ${totalResults} sections`
+ ) : (
+ 'No results'
+ )}
+
+
+ )}
+
+ Enter next section •
+ Shift+Enter prev section •
+ Ctrl+↑↓ navigate
+
+