diff options
Diffstat (limited to 'ts_files_with_summaries.txt')
| -rw-r--r-- | ts_files_with_summaries.txt | 623 |
1 files changed, 623 insertions, 0 deletions
diff --git a/ts_files_with_summaries.txt b/ts_files_with_summaries.txt new file mode 100644 index 000000000..1f36cf1ff --- /dev/null +++ b/ts_files_with_summaries.txt @@ -0,0 +1,623 @@ +├── packages +│ └── components +│ └── src +│ ├── components +│ │ ├── Button +│ │ │ ├── Button.stories.tsx – This file defines storybook stories for the Button component used in the Dash project. It exports multiple button stories with different properties such as type, size, text, and icon position, demonstrating the component's versatility. Each story is constructed using a template pattern, which binds specific arguments to show various button configurations like Primary, Secondary, and Tertiary, as well as size variations (Small, Medium, Large). Additionally, examples of buttons with icons positioned to the left or right are included. +│ │ │ ├── Button.tsx – This TypeScript file defines a Button component in a React context, enhancing user interface capabilities with various properties such as onClick, onDoubleClick, and styling options. The Button can display text, an icon, or both, and includes a Tooltip for additional UI guidance. Styling is managed through properties like size, color, alignment, and more, allowing for customization and dynamic theming. Additionally, the component can handle mouse interactions and is capable of being integrated with forms via a formLabel feature. +│ │ │ └── index.ts – This file serves as a module re-exporter for the Button component within the Dash project's component library. It uses a TypeScript export statement to re-export all the exports from the './Button' module. This is a common practice in codebases to simplify module accessibility and to create cleaner import paths for other parts of the application that may need the Button component, contributing to a more organized file structure. +│ │ ├── ColorPicker +│ │ │ ├── ColorPicker.stories.tsx – This file contains Storybook configurations for the ColorPicker component in the Dash codebase. It defines a default export setting with the title 'Dash/Color Picker' and specifies the component as ColorPicker. Two story templates, Primary and Icon, are created using the Storybook's Story utility. These templates configure variations of the ColorPicker with different properties such as icon, type, and event handlers, allowing developers to interactively test and showcase the component's appearance and behavior in a controlled environment. +│ │ │ ├── ColorPicker.tsx – This TypeScript file defines a React component named `ColorPicker`, which allows users to select colors using different interfaces such as Classic, Chrome, GitHub, Block, and Slider pickers. It uses the `react-color` library to integrate these pickers and provides a customizable UI with options for text, icons, and form labels. The component handles color selection and updates using state management, accommodating both immediate color changes and finalized selections. It also includes a popup mechanism for toggling the color picker visibility and interaction. +│ │ │ └── index.ts – This file re-exports all exports from the 'ColorPicker' module, which allows other parts of the application to access these exports through a single entry point. It functions as an index file for the ColorPicker component, simplifying and organizing the import paths within the codebase. Such a structure is common in modular TypeScript/React projects to enhance maintainability and scalability. +│ │ ├── Dropdown +│ │ │ ├── Dropdown.stories.tsx – This file defines storybook stories for the Dropdown component of the Dash project. It imports necessary modules, including Dropdown and icon components, and sets up a storybook configuration under the title 'Dash/Dropdown'. Two stories, 'Select' and 'Click', are created using a template function that takes dropdown properties. The 'Select' configuration presents a dropdown with a list of companies, styling attributes, and a selection mechanism. The 'Click' story includes additional interaction details, such as logging events on item selection. +│ │ │ ├── Dropdown.tsx – This file defines a Dropdown component in TypeScript using React. The component provides a customizable dropdown menu that supports two types: 'select' and 'click'. It includes functionality for displaying a list of items, selecting values, and showing tooltips. The component supports various styling options through props such as size, color, and background, and it can integrate with icon providers for customizing dropdown toggles. It handles user interactions, such as clicking and item selection, possibly triggering events passed as props. +│ │ │ └── index.ts – This index file exports all the modules from the 'Dropdown' file located in the same directory. By re-exporting these modules, it simplifies the import path for other parts of the application, allowing them to import components directly from the 'Dropdown' directory. This is a common pattern in TypeScript projects to maintain organized and easily accessible component structures. +│ │ ├── DropdownSearch +│ │ │ ├── DropdownSearch.stories.tsx – This file defines storybook stories for the DropdownSearch component within the Dash framework. It imports necessary dependencies such as React, storybook utilities, and icons. The file sets up two stories: 'Select' and 'Click', each using the DropdownSearch component with different configurations for type, items, and size. The items list includes various company names, each with associated icons and shortcuts to enrich the dropdown options. These stories aid in visually testing and showcasing different functionalities of the DropdownSearch component in isolation. +│ │ │ ├── DropdownSearch.tsx – This TypeScript file defines a React component, DropdownSearch, which provides a searchable dropdown interface. The component supports different usage modes, such as selection and click, managed through the DropdownSearchType enum. It uses various states to handle search terms, editing status, and active state. A Popup component is utilized to display a ListBox containing the dropdown items, with the ability to filter these items based on search input. The component includes a placeholder for future enhancements like multi-select and searchability support. +│ │ │ └── index.ts – This file is an index entry point for the DropdownSearch component. It re-exports all exports from the './DropdownSearch' module, facilitating a simpler import path for consumers of the component. This pattern is commonly used in React projects to streamline module exports and improve code organization. +│ │ ├── EditableText +│ │ │ ├── EditableText.stories.tsx – This file is a Storybook configuration for the 'EditableText' component in the Dash project. It provides a template for creating stories by exporting a default object that sets the title as 'Dash/Editable Text' and defines 'EditableText' as the component to demonstrate. The file includes a primary story example with predefined arguments like type, size, and behavior functions ('onchange' and 'onEdit'). It also features a commented-out story variant, suggesting alternative configuration possibilities. +│ │ │ ├── EditableText.tsx – This file defines a React component called 'EditableText' which allows inline text editing in a user interface. It transforms static text into an editable input field when clicked or focused, and includes features such as placeholder text, text alignment, and password toggling. The component is customizable through various properties like size, height, and color. It supports password masking and toggling visibility. The component is styled using imported CSS classes and integrates with other UI components like 'Toggle' for password visibility management. +│ │ │ └── index.ts – This file simplifies the import process by re-exporting all exports from the 'EditableText' module. This design pattern is typical in TypeScript projects to organize and streamline access to component functionalities. The file itself does not contain any implementation code, but serves as an entry point to access the EditableText component's features and potentially serve them to other parts of the application efficiently. +│ │ ├── FormInput +│ │ │ ├── FormInput.stories.tsx – This file defines and exports a Storybook configuration for the FormInput component, part of the Dash project's component library. It designates the title 'Dash/Form Input' to categorize the story under Dash components and specifies FormInput as the component being demonstrated. A template function is created using the Story interface to render the FormInput with provided arguments. Presently, no specific examples or variations of FormInput, such as 'Primary', are defined or exported, as indicated by the commented-out section. +│ │ │ ├── FormInput.tsx – This TypeScript file defines a React component called `FormInput` designed for use as an input field within forms. The component accepts props such as `placeholder`, `value`, `title`, `type`, and an `onChange` event handler. It renders an HTML input element within a container, applying a default 'text' type if none is provided. The input field is always marked as required and is accompanied by a label displaying the `title`. It uses associated SCSS styles from 'FormInput.scss' for styling. +│ │ │ └── index.ts – This file is a module re-export file located in the Dash hypermedia code-base. It exports all the exports from the 'FormInput' module, effectively allowing users to access any components or functions defined in './FormInput' through this index file. This pattern is commonly used to simplify import statements in other parts of the application by providing a single entry point for related modules. +│ │ ├── Group +│ │ │ ├── Group.stories.tsx – This file defines a Storybook story for the 'Group' component in the Dash project. It sets up a default export with Storybook metadata, specifying the title as 'Dash/Group' and pointing to the 'Group' component. The story template demonstrates how the 'Group' component can be populated with various UI elements, including dropdowns, icon buttons, and popups, by integrating several other components such as 'Dropdown', 'IconButton', and 'Popup'. The primary story uses these components to showcase their interaction within a grouped layout. +│ │ │ ├── Group.tsx – This file defines a React component named 'Group', which provides a flexible container for arranging child elements. The component accepts various props such as 'rowGap', 'columnGap', 'padding', and 'width' to control spacing and layout. Additionally, it can include a label when 'formLabel' is specified, with customizable label placement and sizing. The component applies predefined styles from a SCSS file and utilizes utility functions for consistent styling. It facilitates organized and adaptable UI composition within the Dash system. +│ │ │ └── index.ts – This file is an index module for the Group component, re-exporting all exports from the 'Group' module located in the same directory. It serves as an entry point to make the exports available for easier access from other parts of the application. By organizing components this way, it facilitates better module management and import paths, contributing to a cleaner and more efficient code structure. +│ │ ├── IconButton +│ │ │ ├── IconButton.stories.tsx – This file defines Storybook stories for the `IconButton` component in the Dash project. It specifies a collection of example use cases, showcasing various types and sizes of icon buttons: Primary, Secondary, Tertiary, and those with labels. Each story demonstrates a specific configuration for the `IconButton` with different types (such as primary or secondary) and sizes (from extra small to large). These examples help developers visualize and test the `IconButton` component's appearance and behavior in different scenarios. +│ │ │ ├── IconButton.tsx – The IconButton component is a customizable and interactive React component designed to handle user interactions such as clicks and double clicks. It utilizes Material-UI's Tooltip for enhanced user experience, providing feedback on hover. The component can adjust its appearance based on various props including type, color, and size, supporting styles for a primary, secondary, or tertiary button. It includes support for additional features like labels, tooltips, and color pickers, configured through its props to offer flexibility for developers. +│ │ │ └── index.ts – This file serves as an entry point for the IconButton component by re-exporting all exports from the './IconButton' module. This allows the IconButton functionality to be accessed from the directory path without needing to specify the file explicitly, thus simplifying import statements for consumers of this component. This is a common pattern in module organization to improve maintainability and modularity in TypeScript and React projects. +│ │ ├── ListBox +│ │ │ ├── ListBox.stories.tsx – This file is a Storybook configuration for the ListBox component in a Dash project. It defines a story for the ListBox component, using a selection of dropdown items. Each item includes details like text, value, keyboard shortcut, icon, and description. Icons from the 'react-icons/fa' library are used to visually represent each dropdown item. The primary story is set up with these dropdown items, showcasing the ListBox component's capabilities in a visual testing environment. +│ │ │ ├── ListBox.tsx – This file defines a ListBox component in TypeScript for a React application. The ListBox component is designed to render a list of items passed in through props, which can include properties like filters, selection values, and event handlers for item interaction. The component also supports optional styling and behavior customization, such as colors and item selection management. There is mention of potential additional features like multi-selection and searchability. The component utilizes a separate ListItem component to represent each list item. +│ │ │ └── index.ts – This file serves as a barrel file for the ListBox component by re-exporting everything from the './ListBox' module. Its primary function is to simplify imports elsewhere in the codebase by providing a single entry point for all exports from the ListBox module. This pattern enhances modularity and maintainability of the code, making it easier for developers to manage and access ListBox-related functionalities throughout the Dash application. +│ │ ├── ListItem +│ │ │ ├── ListItem.stories.tsx – This file defines a Storybook story for the ListItem component in the Dash hypermedia system. It imports necessary libraries and the ListItem component, then configures Storybook with metadata, including the title and component reference. A template story is created using generic ListItem props, and a primary story instance is defined with specific example props such as text, description, and a shortcut. This setup facilitates visual testing and development of the ListItem component within the Storybook environment. +│ │ │ ├── ListItem.tsx – The ListItem component in this file is a React component designed to display items within a list with various customizable features. It supports icons, descriptions, shortcuts, and nested items, which can be toggled using popups. The component also handles interactions like clicking and pointer events, and visual states such as selection and hovering. Additionally, it allows flexibility in styling through properties, and it has potential plans for features like multi-select and searchability, indicated by the TODO comment in the code. +│ │ │ └── index.ts – This file is an entry point for the ListItem component in the codebase. It re-exports all exports from the './ListItem' file, making them available for import in other parts of the application. Such a setup is often used to simplify imports and maintain organized code structure by consolidating multiple exports into a single module interface. This approach enhances modularity and eases integration with other components or modules within the project. +│ │ ├── Modal +│ │ │ ├── Modal.stories.tsx – This file defines a Storybook story for a Modal component in the Dash project. The story is organized under the title 'Dash/Modal' and uses the Modal component from the project's Modal module. A template for rendering the Modal is created, which displays a simple message "HELLO WORLD!" inside the Modal. The 'Primary' story instance initializes the Modal with a title of 'Hello World!' and sets it to be open initially. +│ │ │ ├── Modal.tsx – This TypeScript file defines a React component named `Modal` that is used to render a modal dialog in the Dash hypermedia system. The component accepts properties for its initial open state, title, background color, and children content. It manages its open/close state using React hooks. The modal includes a close button implemented using an `IconButton` component with an icon from `react-icons/fa`, and clicking outside the modal or on the close button will dismiss the modal. Additionally, the modal appearance can be customized using CSS. +│ │ │ └── index.ts – This file serves as a re-export module for the 'Modal' component within the Dash hypermedia project. It exports all the publicly available members from the 'Modal' module located in the same directory. This index file simplifies import statements for users of the component by allowing the 'Modal' functionalities to be imported from a single, centralized file path. +│ │ ├── MultiToggle +│ │ │ ├── MultiToggle.stories.tsx – This TypeScript file defines two Storybook stories for the `MultiToggle` component, located in the Dash project's components library. The first story, `MultiToggleOne`, is configured to handle text alignment changes with a default selection of 'center', allowing single selection among options like 'left', 'center', 'right', and 'justify'. The second story, `MultiToggleTwo`, allows multiple selections with options labeled 'Like', 'Todo', and 'Idea', and features a green background with white text, showcasing the component's flexibility for different use cases. +│ │ │ ├── MultiToggle.tsx – This TypeScript file defines a React component named `MultiToggle`, which is designed to manage the selection of multiple items through a toggle interface. It incorporates user interactions by utilizing React's state management to track selected items either singly or in multiple mode, as determined by props. The component is wrapped in a Popup container and uses other components like `Group`, `IconButton`, and `Toggle` to render toggle items, allowing for customizable look and interaction. It also provides handlers for selection change events. +│ │ │ └── index.ts – This file serves as an entry point for the MultiToggle component within the Dash hypermedia system. Its main function is to re-export all exports from the 'MultiToggle' module, allowing them to be imported conveniently from other parts of the application. This approach simplifies the import paths and helps maintain a clean and organized structure in the codebase. The file contains no other logic or implementation details beyond the re-export statement. +│ │ ├── NumberDropdown +│ │ │ ├── NumberDropdown.stories.tsx – This file is a Storybook configuration for the `NumberDropdown` component within the Dash project. It defines two story templates, `NumberInputOne` and `NumberInputTwo`, which demonstrate the `NumberDropdown` component with varying properties. The stories illustrate how the component can function both as a slider and a dropdown, with different steps, sizes, and dimensions. This setup helps in visually testing and verifying the behavior of the `NumberDropdown` component under different configurations. +│ │ │ ├── NumberDropdown.tsx – The NumberDropdown.tsx file defines a React component that provides a dropdown UI for selecting numerical values. It supports different interaction types such as slider, dropdown list, and direct input, which users can specify through props. The component allows for incremental adjustments using plus and minus icons, and can display the current value with an optional unit. It integrates with other components like Popup, Toggle, and Slider for enhanced functionality and user experience. The styling and display are customizable through properties such as color, size, and fill width. +│ │ │ └── index.ts – This TypeScript file is an entry point for the NumberDropdown component, re-exporting everything from the './NumberDropdown' module. Such a structure centralizes export references and simplifies import paths for other modules using NumberDropdown, enhancing organization and module management within the Dash codebase. +│ │ ├── NumberInput +│ │ │ ├── NumberInput.stories.tsx – This file defines storybook configurations for the `NumberInput` component in the Dash project. It uses Storybook's `Meta` and `Story` types to establish the stories, with `NumberInput` serving as the component under test. Two story variations, `NumberInputOne` and `NumberInputTwo`, are set up using the same base story function, allowing experimentation with different props. Currently, no specific arguments are defined in either story, indicating a potential placeholder for future props customization. +│ │ │ ├── NumberInput.tsx – This file defines a React component named `NumberInput` for the Dash system, which allows users to input and manipulate numerical values. The component uses the EditableText component for text input and provides optional plus and minus buttons for incrementing or decrementing the number value. It supports features such as setting minimum and maximum values, customizing the display color and size, and including any unit alongside the number. The component also allows optional form label placement and adaptive width fitting based on specified properties. +│ │ │ └── index.ts – This file acts as an entry point for the NumberInput component by re-exporting everything from the './NumberInput' module. It serves to aggregate and simplify imports for users of the component, making it easier to manage dependencies within the overall project. By structuring the code this way, developers can import the NumberInput functionality from a single, unified location rather than dealing with multiple paths. +│ │ ├── Overlay +│ │ │ ├── Overlay.tsx – This file defines a simple React functional component called `Overlay`. It accepts props adhering to the `IOverlayProps` interface, which optionally includes a map of elements. The component itself currently renders an empty `div` with the ID `browndashComponents-overlay` and a class name `overlay-container`. The accompanying SCSS file is likely used to style this component, but the component's functionality and rendering logic appear incomplete or minimal at this stage. +│ │ │ └── index.ts – This file serves as an entry point for the Overlay component, re-exporting all exports from the 'Overlay' module. This approach is typically used to organize and simplify imports, allowing other parts of the application to access the Overlay-related functionalities through a single path. It helps in maintaining a clean and more manageable code structure. +│ │ ├── Popup +│ │ │ ├── Popup.stories.tsx – This file defines Storybook stories for the Popup component in the Dash project. It sets up the visual presentation and interaction of the Popup component using a Storybook template. There are three stories created: 'Primary', 'Text', and 'Hover', each demonstrating different configurations and appearances of the Popup component, such as icon usage, tooltip display, and settings for trigger actions (e.g., on hover). These stories allow developers to visually test and experiment with the Popup component's features and properties. +│ │ │ ├── Popup.tsx – This file defines a Popup component in a TypeScript/React code-base. The Popup component allows elements to open a pop-up or tooltip when triggered by a click, hover, or hover with a delay. It uses React useState and useEffect hooks to manage its open state and integrates the Popper component for positioning. The Popup component supports customization through properties such as placement, size, and background, and can stay open until a specified toggle is clicked, managed via a position observer to update its state. +│ │ │ └── index.ts – This file serves as an index module for exporting all functionalities from the 'Popup' component, located in the same directory. By using export *, it re-exports everything from the './Popup' module, simplifying imports for modules that need to use the Popup component. This approach helps in organizing the codebase by consolidating exports and making it easier to manage component imports in larger applications. +│ │ ├── Slider +│ │ │ ├── Slider.stories.tsx – This file defines Storybook stories for the Slider component in the Dash codebase. It sets up two stories, "Value" and "MultiThumb", each demonstrating different configurations of the Slider. The "Value" story illustrates a single thumb slider with specified minimum, maximum, and step values, and logs pointer events. The "MultiThumb" story demonstrates a multi-thumb slider with its own configuration, including a minimum difference constraint and additional logging for pointer events. These stories help visualize and test the Slider component's functionality and options. +│ │ │ ├── Slider.tsx – This TypeScript file defines a React component named "Slider", which enables users to interact with a range-based slider input. The component supports single and multi-thumb interactions and dynamic min/max adjustments through an "autorange" feature. It handles various properties like step size, decimals, and custom label placement, providing flexibility for integration. Additionally, it includes the ability to style and position the slider using external CSS, while observing window resize events to maintain the correct slider width responsively. +│ │ │ └── index.ts – This TypeScript file located in the Dash project serves as an entry point for exporting all functionalities from the 'Slider' module. By using a re-export statement, it allows other parts of the application to import any elements available from the 'Slider' component without having to directly reference its internal structure. This approach encapsulates the module's implementation details while promoting a clean and organized codebase structure. +│ │ ├── Template +│ │ │ ├── Template.stories.tsx – This file defines Storybook stories for the 'Template' component in the Dash project. It sets up two exportable stories, 'TemplateOne' and 'TemplateTwo', which utilize a predefined 'TemplateStory' that accepts component props of type 'ITemplateProps'. Both story exports are bound to the 'TemplateStory' and initially have empty argument objects. This setup is used for visual testing and documentation purposes within the Storybook environment, facilitating the development and showcasing of component variations in isolation. +│ │ │ ├── Template.tsx – This file defines a simple React functional component called 'Template' using TypeScript. The component extends 'IGlobalProps' and uses a 'template-container' CSS class for styling. It is intended to be a reusable layout component within the application. The header includes imports for React and utility functions, indicating potential integration into a larger global system or project theme. +│ │ │ └── index.ts – This file is a TypeScript module within the Dash hypermedia code-base, specifically within the components section. It exports all the entities from the './Template' module, making them available for import in other parts of the application. This kind of file is often used to simplify imports and manage module structure by consolidating exports into a single entry point. +│ │ ├── Toggle +│ │ │ ├── Toggle.stories.tsx – This file defines Storybook stories for the Toggle component in the Dash application. It imports necessary modules including React, icon components, and the Toggle component itself. The file exports a default configuration for the story with a title and component type. Three story templates are provided: Button, Checkbox, and Switch, each configuring the Toggle component with different properties to showcase its various types such as BUTTON, CHECKBOX, and SWITCH, along with additional attributes like icons and tooltips. +│ │ │ ├── Toggle.tsx – The 'Toggle.tsx' file defines a React functional component used to create toggle elements which can be customized as buttons, checkboxes, or switches. It manages the toggled state and provides event handling for interactions such as pointer down and single click, ensuring proper state updates and preventing event propagation when inactive. The component supports optional properties like icons, tooltips, and various styling parameters, enabling flexibility in its presentation and behavior within the user interface. +│ │ │ └── index.ts – This TypeScript file is part of the Dash project's components and serves as an entry point for the Toggle component by re-exporting all exports from the './Toggle' module. This allows other parts of the application to import the Toggle component functionality from this directory index, promoting a clean and organized structure for module accessibility. The file itself contains minimal code, focusing solely on managing exports. +│ │ └── index.ts – This TypeScript file serves as an index for exporting various UI components in the Dash hypermedia project. It consolidates and re-exports components such as buttons, sliders, dropdowns, modals, and more from their respective files. This organization aids in simplifying imports elsewhere in the codebase by allowing developers to import multiple components from a single source. This structure is typical in component-based projects to improve maintainability and ease of access. +│ ├── global +│ │ ├── globalCssVariables.scss.d.ts – This TypeScript declaration file defines the structure for a set of global CSS variables used in the Dash project. It includes an interface, 'IGlobalScss', which specifies various layout and styling properties such as 'contextMenuZindex', 'SCHEMA_DIVIDER_WIDTH', and 'LEFT_MENU_WIDTH', among others. These variables control dimensions and layout features like icon size, border width, and menu heights, ensuring consistent styling throughout the application. The file exports these style definitions as 'globalCssVariables' for use across the project. +│ │ ├── globalEnums.tsx – This TypeScript file defines several enumerations used for styling in the Dash project. It includes the Colors enum which specifies various color codes for use in the system, such as black, white, different shades of gray and blue, along with specific colors for errors and success states. The FontSize enum defines a set of font sizes for different text elements, while Padding and IconSizes enumerate standard padding sizes and icon sizes, respectively. Additionally, Borders and Shadows provide standardized border styles and shadow effects used across the user interface. +│ │ ├── globalTypes.ts – This TypeScript file defines several types and interfaces used for global properties in the Dash application. It includes enumerations for component types and detailed type definitions for various alignments and placements. The main interface, IGlobalProps, outlines common props like size, color, and interactive events, applicable to components globally. Additionally, a specialized interface, INumberProps, extends IGlobalProps to include properties pertinent to numeric fields, such as min, max, and step values, facilitating the creation and management of numeric input components. +│ │ ├── globalUtils.tsx – This TypeScript file defines utility functions and interfaces for global usage in the Dash project. It provides an interface for location properties, such as width and height. The file includes functions to determine form label sizes, font sizes with optional icon adjustments, and default heights based on size enums. It also includes color conversion and analysis functions, like checking if a color is dark. These utilities aid in consistent styling and color management for the application's components. +│ │ └── index.ts – This file acts as an entry point for re-exporting modules within the global directory of the Dash project's components package. It consolidates exports from three other files: 'globalEnums', 'globalUtils', and 'globalTypes'. By doing so, it simplifies imports in other parts of the application, allowing developers to import global enums, utilities, and types from a single location rather than multiple paths. +│ └── index.ts – This file serves as an entry point for the components package by re-exporting all exports from the './components' and './global' modules. This allows for easier access and centralized management of exports at a higher module level, facilitating the import of these components and global utilities elsewhere in the application. Structuring the exports in this manner is a common practice in TypeScript/React projects to maintain organized and scalable code architecture. +├── src +│ ├── ClientUtils.ts – This TypeScript file, `ClientUtils.ts`, contains utilities for the Dash hypermedia system, providing a range of functions and tools to manage colors, events, DOM elements, file uploads, and transformations. It includes functions for handling colors, like determining lightness or darkness and converting color formats. Event-related functions manage mouse and pointer events, supporting interactions like smooth scrolling and click detection. Additionally, the file offers tools for manipulating and extracting data from HTML documents and utility functions for working with document dimensions, file inputs, and URL formatting. +│ ├── ServerUtils.ts – The ServerUtils module provides utility functions for socket communication in a server environment. It includes methods to emit messages and add handlers for server-side socket events using Socket.IO. The Emit function sends messages with optional arguments, and the AddServerHandler and AddServerHandlerCallback functions add listeners for incoming messages, with the latter supporting callback arguments. Additionally, it defines types related to room management on the server, including adding handlers for room-related events. +│ ├── Utils.ts – This TypeScript file, part of the Dash hypermedia system, includes a variety of utility functions used throughout the application. Functions cover mathematical operations such as clamping numbers, calculating distances, and rotating points. The file also provides utilities for logging, working with unique identifiers via UUIDs, handling JSON parsing, and geometric calculations involving rectangles and lines. These utilities facilitate various operations like logging, data transformation, and graphical calculations, supporting the non-linear workflow of the Dash system. +│ ├── client +│ │ ├── DocServer.ts – The file defines the `DocServer` namespace which handles data synchronization and caching for documents across clients in a web application. It establishes WebSocket connections with a server to manage document caching and updates using unique client identifiers. The code offers features to emit and receive real-time updates, manage document creation, updates, and deletion, and supports different write modes for handling permissions. Additionally, it addresses cache management and deserialization to improve data retrieval efficiency from the server. +│ │ ├── Network.ts – The Network.ts file facilitates communication between the Dash client and server. It provides methods for fetching data from the server, posting data to the server, and uploading files, including YouTube videos. These functionalities include functions for sending general data requests, handling file uploads with size constraints, and tracking upload progress through GUIDs. The module ensures efficient handling of both single and multiple file uploads, and includes provisions for communicating with local or external servers. +│ │ ├── apis +│ │ │ ├── GoogleAuthenticationManager.tsx – The `GoogleAuthenticationManager` component in this file manages Google authentication via OAuth2 within the Dash hypermedia system. It uses MobX for state management and React for rendering. The class provides methods for generating or retrieving access tokens, monitoring authentication code input, and handling the UI logic for displaying prompts and success states. It includes functionality to open an authorization page, capture authentication codes, and manage cached user credentials, offering a seamless integration for users to connect their Google accounts to the application. +│ │ │ ├── IBM_Recommender.ts – This TypeScript file defines a namespace IBM_Recommender for integrating IBM's Natural Language Understanding service into the Dash system. The file sets up a NaturalLanguageUnderstandingV1 instance with authentication via an API key and configures it to analyze text for keywords, sentiments, and emotions. It includes an async function 'analyze' that processes given parameters to extract keyword-related data, handling errors by returning undefined if analysis fails. The file appears to be part of a feature for extracting keyword insights from text. Import statements are commented out, indicating a focus on setup and testing. +│ │ │ ├── google_docs +│ │ │ │ ├── GoogleApiClientUtils.ts – This file defines utility functions for interfacing with Google Docs through their API from within the Dash system. It encapsulates actions such as creating, retrieving, and updating Google Docs documents, as well as extracting and manipulating document content. The utility functions deal with document structure, including text and paragraphs, and manage document content operations like writing and initializing documents. The file ensures error handling through promises, providing results or undefined values if operations fail. +│ │ │ │ └── GooglePhotosClientUtils.ts – This TypeScript file, part of a web-based hypermedia system, provides utility functions for integrating with Google Photos. It manages the authentication with Google and performs operations like uploading and managing albums, retrieving media, and tagging image contents with specified categories. It defines multiple namespaces, such as Export, Import, Query, Create, and Transactions, to logically organize functionalities including creating albums, searching for content, and handling media transactions. Overall, it facilitates interaction between the application and Google's photo services to enrich documents with media elements. +│ │ │ └── gpt +│ │ │ ├── GPT.ts – This TypeScript file defines an interface for interacting with the OpenAI API, specifically using various GPT models to perform tasks like generating summaries, editing text, creating flashcards, and more. It maps different API call types to specific configuration options like model version and prompts, which guide how the AI processes requests. The file includes functions for making API calls to generate text completions, images, embeddings, and handling specific tasks like image description and sorting document descriptions. Caching responses to reduce repeated API calls is also implemented. +│ │ │ ├── PresCustomization.ts – This TypeScript file defines a system for customizing presentation slides within a trail-style presentation. It includes an enumeration for customization types, specifically the customization of trail slides, and provides functionality to register properties that can be customized. The file describes the structure of prompts for customizing slide properties, such as title, transition effects, and animation settings, using OpenAI's API for generating suggestions. Functions like `getSlideTransitionSuggestions` and `gptTrailSlideCustomization` facilitate interaction with the AI to modify slide properties based on user input and set constraints. +│ │ │ └── setup.ts – This TypeScript file sets up and exports an instance of the OpenAI client configured for use within the Dash system. It imports necessary components from the 'openai' library and defines a configuration object that includes an API key sourced from environment variables. The configuration also allows the OpenAI client to be used in a browser environment, despite potential security risks associated with this setting, as indicated by the 'dangerouslyAllowBrowser' option. +│ │ ├── cognitive_services +│ │ │ └── CognitiveServices.ts – This TypeScript file manages interactions with Microsoft Azure's Cognitive Services APIs for media analytics. It defines various services including image analysis, handwriting recognition, text analysis, and Bing search, utilizing different namespaces for each type. The file includes utility functions to handle API requests and responses, converting data to necessary formats and processing results. Specific service managers and appliers further define how to send requests and apply results to documents within the application, thus integrating machine learning analytics into the Dash system. +│ │ ├── documents +│ │ │ ├── DocFromField.ts – This file defines two functions, ResetLayoutFieldKey and DocumentFromField, for manipulating and creating document objects in the Dash hypermedia system. ResetLayoutFieldKey modifies the layout string of a document to set a specified field key, while DocumentFromField generates a new document based on the contents of a specified field in an existing document. The new document can vary in type, such as Image, Video, Pdf, or Audio, depending on the field content. The functions facilitate document handling and field management within Dash's flexible media canvas. +│ │ │ ├── DocUtils.ts – The DocUtils file in the Dash codebase provides various utility functions related to document handling and manipulation. It includes functions for filtering and matching document fields, creating document links, and managing document settings like scripts and options. The file supports dynamic document creation by attributing correct metadata and file type handling. It also includes functionalities to process file uploads, convert between coordinate systems for geographical data, and handle document exports to a zip format, ensuring seamless interaction within the Dash system. +│ │ │ ├── DocumentTypes.ts – This TypeScript file defines two enumerations, `DocumentType` and `CollectionViewType`, which categorize different types of documents and collection views within the Dash hypermedia system. `DocumentType` enumerates various types of media and interactive elements (e.g., PDFs, images, audio, scripts, and maps) that users can work with. `CollectionViewType` outlines different display layouts and organizational structures for collections of documents, such as grids, carousels, and timelines. Additionally, the file separates special collection types for specific handling in the application. +│ │ │ ├── Documents.ts – This TypeScript file is primarily responsible for defining various document types and their corresponding options within the Dash hypermedia system. Document types range from simple text and multimedia types to more complex configurations such as maps and scrapbooks. Each document type has its own set of configurable properties, encapsulated in the 'DocumentOptions' class. The file also outlines several classes implementing document field information, aiding in document configuration and functionality within the Dash environment, with functions to initialize prototypes and create instances based on different document types. +│ │ │ └── Gitlike.ts – The 'Gitlike.ts' file provides functionality for synchronizing, pulling, and merging documents in a version control style system within the Dash hypermedia framework. It includes functions for synchronizing documents across branches, pulling documents onto a branch from the master branch, and merging branches with the master. The file supports creating branch clones and updating document layouts based on modification timestamps. It aims to mirror some capabilities of Git, such as handling branches and merges, within the context of document version control, but currently lacks individual field timestamps for fine-grained updates. +│ │ ├── goldenLayout.d.ts – This TypeScript declaration file defines a module for 'GoldenLayout', indicating it as an external entity with any type. It exports the 'GoldenLayout' variable, allowing it to be imported and used in other parts of the application. This suggests that 'GoldenLayout' is a potentially complex external library or code whose type definitions are not explicitly included, providing flexibility in its integration with TypeScript code. +│ │ ├── theme.ts – This file, `src/client/theme.ts`, defines the theme configuration for the Dash project's client-side application. It outlines color schemes, typography, and potentially other UI styling settings to maintain a consistent look and feel throughout the application. The file plays a crucial role in ensuring that all components adhere to a unified design language, enhancing both aesthetic coherence and user experience within the Dash interface. +│ │ ├── util +│ │ │ ├── BranchingTrailManager.tsx – The `BranchingTrailManager` class is a React component using MobX to manage the user's interaction history as a trail of documents within the Dash hypermedia system. It tracks presentation and document changes, updating a stack of document IDs (`slideHistoryStack`) and ensuring that previous interactions are compared and handled correctly. The component presents a breadcrumb trail of interactions using document titles, allowing navigation back through the document history. Additionally, it maintains a singleton instance to ensure consistent state management across multiple uses or instances within the app. +│ │ │ ├── CalendarManager.tsx – The `CalendarManager` class in this TypeScript file is responsible for managing calendar documents within the Dash application. It provides functionality to add documents to either a new or existing calendar, format and handle date ranges, and manage calendar interfaces through user interaction. The component makes use of MobX for state management, allowing it to efficiently observe and react to changes. It interacts with React Spectrum and other UI libraries to render date pickers and handle inputs and selections, ensuring smooth user experiences for calendar management tasks. +│ │ │ ├── CaptureManager.tsx – The CaptureManager is a React component that manages the display and functionality of a modal interface for capturing media. It utilizes MobX for state management, tracking whether the manager is open and which document is being processed. The component includes features for setting a document's visibility, displaying links associated with the document, and saving or canceling actions. The interface incorporates user interactive elements such as radio buttons and clickable save and cancel buttons, all rendered within a styled modal dialogue. +│ │ │ ├── CurrentUserUtils.ts – This TypeScript file defines utility functions and setups for managing user-specific operations and interfaces in the Dash hypermedia system. It includes functions to initialize various document templates, tools, and menus that are available to users, such as creator buttons, context menus, and import options. The file sets up user document fields, themes, and shares options, ensuring that user's personalized settings and data are correctly managed and integrated into the Dash system. Additionally, it handles user account loading and document importing functionalities. +│ │ │ ├── DictationManager.ts – The 'DictationManager.ts' file provides a singleton instance of a manager for handling user speech listening and converting it to text within the Dash hypermedia system. It includes functionalities for recording and processing speech using Webkit's built-in speech recognition capabilities. The DictationManager allows users to execute voice commands by interpreting user speech and matches it against a library of pre-defined commands. It supports both independent and dependent command registration, enabling dynamic interaction with documents based on recognized voice commands. +│ │ │ ├── DocumentManager.ts – The `DocumentManager` class in this file is a singleton designed to manage document views in the Dash hypermedia system. It utilizes MobX for state management to handle collections of `DocumentView` instances. The class provides methods for adding, removing, and retrieving document views, as well as for focusing views within a document path. It also includes utilities for handling lightbox views, triggering actions when documents are loaded, and integrating audio annotations via the Howler library. Overall, the class supports complex document management and rendering in a dynamic, interactive environment. +│ │ │ ├── DragManager.ts – The DragManager module manages internal dragging operations within the Dash environment, handling document movement events like drag pauses, pre-drops, and drop completions. It provides functions to initiate different types of drag operations, including document drags, button drags, and column drags. The module utilizes MobX for observable state management and ensures drag interactions can be aborted using the Escape key. Additional functionality includes snapping dragged elements to predefined grid lines and performing drag completions with custom logic. +│ │ │ ├── DropActionTypes.ts – This TypeScript file defines an enumeration, `dropActionType`, which outlines various drop actions for documents in the Dash system. The actions include 'embed', 'copy', 'move', 'add', 'same', 'inPlace', and 'proto', each representing different behaviors for how a dragged document can be handled when dropped. These actions allow for embedding, copying, moving, adding to a location, restricting drops to the same collection, or keeping items in place. This enum facilitates the management of document manipulation within the user interface. +│ │ │ ├── DropConverter.ts – This TypeScript file defines functions to convert document templates for rendering and interaction within the Dash system. The `makeTemplate` function recursively turns a document into a template that can be reused for customizing other documents' rendering. The `MakeTemplate` function applies this conversion and flags the document as a template. The `makeUserTemplateButtonOrImage` function facilitates the creation of draggable buttons or images representing template document instances. Additionally, it includes `convertDropDataToButtons`, which organizes dropped document data into buttons, enhancing the user interaction experience. +│ │ │ ├── GroupManager.tsx – The GroupManager component in Dash is responsible for managing user groups within the application. It utilizes MobX for state management, allowing real-time updates to the UI when group data changes. The component facilitates creating, editing, and deleting groups, and allows users to add or remove members. Key features include a modal for creating new groups, dropdown options populated via database user data, and sorting functionality for group display. The component also checks user permissions for editing group documents, ensuring only authorized users can make changes. +│ │ │ ├── GroupMemberView.tsx – The GroupMemberView component in TypeScript/React is designed to manage group membership within a hypermedia application. It uses MobX for state management and FontAwesome for icons. The component provides UI controls for sorting, adding, and deleting group members and groups, conditioned on user permissions accessed through GroupManager. The group members are displayed in a modal interface with sortable email listings and options to remove members if the user has edit access, allowing streamlined management of group interactions. +│ │ │ ├── History.ts – This file, within the Dash hypermedia system, manages URL history and state handling for documents. It defines a namespace HistoryUtil, with types like DocInitializerList and DocUrl for URL-related tasks. Key functions include pushState, replaceState, and parseUrl to handle URL transitions and state updates, supporting features like document sharing and readonly flags. Parsers and stringifiers are utilized for parsing URLs and constructing them. The file also contains logic to initialize documents with specific state and open them in the DashboardView. +│ │ │ ├── HypothesisUtils.ts – This TypeScript file in the Dash hypermedia system provides utility functions for integrating with the Hypothes.is plugin, which allows annotations on web documents. It includes functions to find or create web documents from a URI, link or unlink annotations to documents, and scroll to specific annotations. The file prioritizes interactions with existing views and documents on the screen, and uses event listeners and MobX actions to handle asynchronous operations. This integration facilitates tracking and linking annotations within Dash's nonlinear workflows. +│ │ │ ├── Import & Export +│ │ │ │ ├── DirectoryImportBox.tsx – This TypeScript React component `DirectoryImportBox` is part of the Dash hypermedia system, facilitating the import of directories containing media files. It utilizes MobX for state management, handling file selection, validation, and asynchronous batch uploading to the Dash platform and Google Photos. The component also allows users to add metadata entries to imported documents and integrates progress tracking for upload completion. UI elements are dynamically rendered based on the uploading status, while ensuring user interactions are smooth and informative. +│ │ │ │ ├── ImageUtils.ts – This TypeScript file defines a namespace `ImageUtils` that provides utility functions for handling images in the Dash hypermedia system. It includes asynchronous functions to extract image information from a given document by sending a request to the server and receive detailed inspection results. The extracted image data, such as dimensions and metadata, can be assigned to the document fields. Additionally, it includes functionality to export a collection's hierarchy to the file system as a zipped file, facilitating external use or backup of the collection data. +│ │ │ │ └── ImportMetadataEntry.tsx – This file defines a React component called ImportMetadataEntry, which is utilized within the Dash system to manage metadata entries representing key-value pairs. The component leverages MobX for state management, providing computed properties to validate input and synchronize with a backing data object. EditableView components enable interactive editing of keys and values, while user actions can remove entries or mark them as part of the data document. It enhances user interaction by maintaining focus control and facilitating smooth transitions between input fields. +│ │ │ ├── InteractionUtils.tsx – The InteractionUtils.tsx file in Dash's codebase defines utility functions and constants for handling pointer events and creating graphical shapes based on different gesture types. It supports interaction types such as mouse, touch, pen, and eraser, and includes functions like makePolygon to generate predefined shapes like rectangles, triangles, and circles from a set of points. The file also provides functions to create SVG polyline elements, check pointer event types, calculate Euclidean distances between points, determine point centroids, and detect pinching or pinning gestures, which are crucial for dynamic graphic manipulation in Dash. +│ │ │ ├── KeyCodes.ts – The KeyCodes.ts file defines a TypeScript class named KeyCodes that serves as a collection of static properties representing key codes for various keyboard keys. These properties correspond to integer values typically used in event handling to identify specific keys, such as arrows, function keys, number pad keys, and alphabetical characters. This utility class facilitates easier code completion and consistency when handling keyboard events in development. It essentially maps human-readable key names to their respective numeric keycodes. +│ │ │ ├── LinkFollower.ts – This TypeScript file defines the `LinkFollower` class, part of a hypermedia system. Its purpose is to handle navigation or "following" between linked documents. When a link is followed, the target document is either highlighted or opened, depending on its visibility and properties. The `FollowLink` method determines how navigation happens, and the `traverseLink` method manages the link traversal logic, handling forward and reverse link navigation. It also interacts with view options to manage document presentation during link following. +│ │ │ ├── LinkManager.ts – The `LinkManager.ts` file defines the `LinkManager` class, responsible for managing links between documents in the Dash hypermedia system. It utilizes MobX for state management and provides functionality to add, delete, and observe links. The class handles user link databases, resolves link anchors to avoid incremental updates, and groups related links. It also manages the synchronization between local documents and the server cache. This allows for structured, interconnected document organization, and supports metadata handling for linking operations within the system. +│ │ │ ├── PingManager.ts – The PingManager class is responsible for managing server connectivity in the Dash application by sending periodic pings to the server. It utilizes MobX decorators to maintain the state of server connectivity, specifically through an observable property 'IsBeating'. The class sends a ping request every second to check the server status, updating the state and triggering an alert to inform the user about the connection status. It also interacts with SnappingManager to update the server version upon successful connection. +│ │ │ ├── RTFMarkup.tsx – The RTFMarkup component in this file is a React class component used to manage and display a rich-text formatting cheat sheet within a modal interface. It utilizes the MobX library to manage observable states, such as whether the modal is open, and actions to modify them. The cheat sheet provides users with various commands for text management and formatting within the Dash hypermedia system, covering features like text styling, embedding code snippets, and setting metadata. The component's appearance is consistent with user-defined styles from the SnappingManager. +│ │ │ ├── ReplayMovements.ts – The `ReplayMovements` class in this TypeScript file manages the replaying of user movements within a presentation, enabling pausing and resuming functionalities. It uses MobX for state management, reacting to user interactions like changes in the selected views and user panning actions. Key methods include `playMovements()` for starting playback from a specified time, `pauseMovements()` to stop playback, and `setVideoBox()` to manage the video box containing the replay data. The class also handles loading presentation data, opening necessary document tabs, and executing movement actions at scheduled times. +│ │ │ ├── ScriptManager.ts – The ScriptManager class in this file is responsible for managing scripts in the Dash environment. It implements a singleton pattern to ensure only one instance exists throughout the application. The class provides methods to retrieve all scripts, add a new script, and delete an existing one, while maintaining an internal script document. It also integrates scripts into global scripting parameters using ScriptingGlobals, allowing dynamic function creation and management based on script data and associated parameters. This design facilitates script lifecycle management in a collaborative digital canvas. +│ │ │ ├── Scripting.ts – The Scripting.ts file in Dash facilitates the compilation and execution of scripts within the browser-based hypermedia system. It defines interfaces and types for handling script results, compilation errors, and script parameters. The core function, CompileScript, takes a script and options for its execution, performing type checking and transformation using TypeScript libraries. It employs a custom ScriptingCompilerHost class to interact with the file system. The file supports plugins for traverser and transformer functions to customize script processing and caching of compiled scripts. +│ │ │ ├── ScriptingGlobals.ts – This TypeScript file is part of the Dash hypermedia system, focusing on managing scripting globals. It defines and exports several objects that store global variables, descriptions, and parameters for scripts. The `ScriptingGlobals` namespace provides methods to add, retrieve, and manipulate these global entities. The key functions include adding new globals, copying globals, and resetting them. It also includes a utility function for printing the type of TypeScript nodes, and a decorator-like function `scriptingGlobal` for registering constructors as globals. +│ │ │ ├── SearchUtil.ts – The 'SearchUtil.ts' file provides utilities for searching through collections of documents within the Dash hypermedia system. It includes the `SearchCollection` function, which searches a given collection of documents for specific query terms, taking into account options like matching key names and filtering by document types and fields. The file defines auxiliary methods such as `documentKeys` to retrieve keys for a document, and `foreachRecursiveDoc` to recursively traverse and apply functions to nested documents. This functionality supports flexible and efficient navigation and search capabilities within Dash's document management system. +│ │ │ ├── SelectionManager.ts – The SelectionManager module manages the selection state of document views in a hypermedia system, utilizing MobX for state management. It provides static methods to select, deselect, and manage views, including selecting specific schema documents. The manager maintains an observable list of selected views and a flag for drag operations. The module integrates with other modules like LinkManager and ScriptingGlobals for augmented functionality, such as supporting undo operations and scripting custom behaviors related to document selection. +│ │ │ ├── SerializationHelper.ts – This TypeScript file provides serialization and deserialization utilities using the 'serializr' library. It includes a SerializationHelper namespace with functions to check if serialization is in progress and to serialize or deserialize objects, ensuring type consistency through a registration mechanism. An error is thrown if a non-registered type is encountered during serialization or deserialization. A Deserializable decorator function is defined to register classes for deserialization, enforcing unique type registration. Additionally, an 'autoObject' function is provided to facilitate automatic serialization of objects. +│ │ │ ├── ServerStats.tsx – The `ServerStats` component, a React component enhanced with MobX for state management, provides server connection information and user statistics. It maintains an observable state indicating whether the SharingManager modal is open and stores user statistics data fetched from the server. This component offers a user interface displaying active server status and a list of connected users. Users can open or close the modal to view current connections and connection health facilitated by real-time data updates from the server. +│ │ │ ├── SettingsManager.tsx – The `SettingsManager` component in this file manages various user settings in the Dash application. It allows users to customize themes with different color schemes and toggles features such as playground mode, document settings, and user modes like 'Novice' and 'Developer'. The component utilizes MobX for state management and enables theme customization through direct interactions with user settings in the store. Additionally, it provides mechanisms for user authentication and password management, integrating with external services like Google for authentication. +│ │ │ ├── SharingManager.tsx – The SharingManager.tsx file implements a React component that manages the sharing of documents within the Dash hypermedia system. This component allows users to share documents with individuals or groups, specifying different levels of access permissions. It uses MobX for state management and reacts to user interactions like selecting users or changing permissions via a user interface built with React-Select. The SharingManager handles user population, document access changes, and group sharing management, providing a comprehensive interface for collaborative document sharing. +│ │ │ ├── SnappingManager.ts – The file defines a SnappingManager class for handling UI snapping features within the Dash application. It employs MobX for state management, using observable properties to track user interactions like dragging, resizing, or pressing modifier keys (shift, ctrl, etc.). The class also manages visual settings such as colors and UI visibility, while providing methods to set and clear snap lines. It's implemented as a singleton, ensuring consistent state management across different parts of the application. +│ │ │ ├── TrackMovements.ts – This TypeScript file defines a class named `TrackMovements` which is used to monitor and record movements, such as panning and zooming, for documents in a collection. It uses MobX for state management, allowing the dynamic tracking of changes in document views. The class supports starting and stopping this recording process, resetting stored data, and combining multiple recordings into a unified presentation. Overall, it plays a key role in managing interactive user activity within the Dash hypermedia system. +│ │ │ ├── Transform.ts – This TypeScript file defines a `Transform` class used for handling geometric transformations in a 2D space. It manages translation, scaling, and rotation operations, supporting both absolute and relative transformations. The class offers methods for applying and chaining transformations like translation and scaling about a point, as well as converting rotation between radians and degrees. Additionally, it provides functionality to transform points and dimensions, and allows for copying and inversing transformations to enable flexible re-use of transformation states. +│ │ │ ├── TypedEvent.ts – This TypeScript file defines a utility class, TypedEvent, and associated interfaces for event handling in a type-safe way. The Listener interface represents a function that handles events of a specific type, and the Disposable interface provides a mechanism for disposing listeners. TypedEvent allows adding listeners that can respond to events, as well as "once" listeners that are triggered only once. The class also provides methods to emit events to all current listeners and to remove listeners as needed. +│ │ │ ├── UndoManager.ts – The file `UndoManager.ts` defines a utility in TypeScript that manages undo and redo operations in a software application. It employs an observable stack pattern, using MobX for state management to track and execute changes that can be undone or redone by the user. Key functions and decorators, such as `undoBatch` and `undoable`, facilitate the creation of undo-able tasks by wrapping operations in manageable batches. The `UndoManager` namespace supports batch handling, allowing temporary and permanent modifications to be logically reversed, enhancing the app's editing capabilities. +│ │ │ ├── bezierFit.ts – This TypeScript file provides functions and utility classes related to Bezier curve fitting and manipulation. It defines a SmartRect class used for bounding box operations and intersections, as well as various mathematical functions for Bezier curve evaluation and tangent computation. The file includes methods for parameterizing and reparameterizing points for Bezier curve optimizations, and functions to convert SVG elements into Bezier format. Key functions like FitCurve and FitCubic are designed to fit Bezier curves to given data points with a specified error tolerance, while the recursive intersection methods handle curve intersections. +│ │ │ ├── reportManager +│ │ │ │ ├── ReportManager.tsx – The ReportManager component in Dash is responsible for reporting and viewing GitHub issues directly within the application. It uses MobX for state management and provides a UI for users to submit and filter issues. The component allows users to attach media files and sets the issue's type and priority. It integrates with GitHub's API via Octokit to post and fetch issues, maintaining a local state to manage the current view and form data. UI elements support dynamic updates and media previews to facilitate issue reporting and management. +│ │ │ │ ├── ReportManagerComponents.tsx – This TypeScript file defines several React components used in managing report issues in a user interface. It includes components for filtering issues with tags, displaying compact issue cards, and providing detailed views of individual issues. It also handles dynamic styling based on dark or light mode, the user's color preferences, and ensures media validity (images, videos, and audio) in issue descriptions. Utility functions and components like tags and form inputs enable user interactions, while the main components handle parsing markdown and displaying multimedia within issue bodies. +│ │ │ │ ├── reportManagerSchema.ts – This TypeScript file defines a comprehensive schema for representing GitHub issues, users, repositories, and associated entities in a TypeScript application. It includes multiple interfaces such as Issue, Milestone, Repository, and various user types to encapsulate detailed attributes and relationships within GitHub's ecosystem. Enumerations provide predefined values for specific fields, helping to manage state and association. This schema facilitates the structured handling and integration of GitHub data in a TypeScript environment, ensuring consistency and type-safety. +│ │ │ │ └── reportManagerUtils.ts – This TypeScript file defines utility functions and constants related to managing reports in the Dash system. It includes functionalities to fetch issues from a GitHub repository using the Octokit library, format issue titles, and transform file links to server URLs for uploading media files. The file also provides helper functions like filtering issues by priority and type, color coding for different issue priorities and types, and defines UI elements for priority and bug dropdowns. Additionally, it includes utilities for handling color schemes, such as determining if text should be light or dark based on background color. +│ │ │ └── request-image-size.ts – This TypeScript file exports a function called `requestImageSize` that determines the dimensions of an image from a given URL. It uses the `request` library to make HTTP requests and listens for the 'response' event to handle the image data. The image's size is calculated using the `image-size` module, and the function returns a promise that either resolves with the image dimensions or rejects with an error. The function includes error handling for HTTP response issues and data processing errors. +│ │ └── views +│ │ ├── AntimodeMenu.tsx – The file defines an abstract React component class, `AntimodeMenu`, which serves as a base for creating menus with PDF-style or Marquee-style interfaces in the Dash application. It extends the `ObservableReactComponent` and uses MobX to manage state, including positioning, opacity, and transitions of the menu. The class handles user interactions such as dragging to reposition and pointer events to show/hide the menu. It provides methods for displaying the menu in various layouts and positions, customizing the appearance based on user actions. +│ │ ├── ComponentDecorations.tsx – This file defines the `ComponentDecorations` class, a React component that uses MobX for state management. It extends `React.Component` and takes `boundsTop` and `boundsLeft` as props, and maintains a `value` in its state. The component's `render` method maps over selected documents obtained from `DocumentView.Selected()`, invoking a `componentUI` method if available, with the provided `boundsLeft` and `boundsTop` as arguments. This essentially allows for dynamic UI rendering based on selected document components. +│ │ ├── ContextMenu.tsx – The `ContextMenu` component in this Dash hypermedia code-base file is an observable React component leveraging MobX for state management. It facilitates the display and interaction of a context menu in a web application. The menu supports dynamic positioning relative to mouse pointer events and offers search functionality within menu items. Several actions ensure the correct lifecycle and event-handling, such as adding/removing items, managing focus, and handling keyboard navigation. The UI appearance dynamically adapts to user-defined settings from the `SnappingManager`, maintaining a consistent look and feel. +│ │ ├── ContextMenuItem.tsx – This TypeScript file defines a React component called `ContextMenuItem`, which is part of a broader context menu system. It leverages MobX for state management and incorporates FontAwesome icons to enhance the user interface. The component manages subitems and controls their display, either as inline elements or flyout menus based on user interaction. It also includes an optional undo functionality that wraps event actions in a batch for rollback, and dynamically adjusts submenu positioning depending on cursor location on the screen. +│ │ ├── DashboardView.tsx – The DashboardView component, rendered when the Dash app first loads, provides a user interface for managing and navigating dashboards. It supports creating, viewing, sharing, and deleting dashboards, distinguishing between personal and shared ones. With MobX observables and actions, it tracks user interactions such as selecting dashboard groups or setting new dashboard attributes. The component includes functions for creating new dashboards, configuring their layouts, and managing permissions. Various helper methods, like openSharedDashboard, focus on user interface updates and state management, enhancing dashboards' functionality within the app. +│ │ ├── DictationButton.tsx – The DictationButton.tsx file defines a React component for a dictation button used in the Dash hypermedia system. This component uses MobX to manage state, specifically whether it is recording audio input or not. The button, when clicked, toggles the recording state and interacts with the DictationManager to start or stop listening to voice input. If recording, the captured text is set into an input field via a prop method, and the button's appearance updates to reflect its active state. +│ │ ├── DictationOverlay.tsx – The DictationOverlay component in this TypeScript React file is an observer class that manages the state and behavior of a dictation overlay interface. It uses MobX to handle observable state properties related to dictation state, success, visibility, and listening status. The component renders an overlay with a modal, updating its appearance based on dictation success and listening status. It also includes a method to fade out the overlay, resetting certain states after a dictated phrase has been processed. +│ │ ├── DocComponent.tsx – The DocComponent.tsx file defines React base classes for components that render document views in the Dash system, utilizing MobX for observability. It includes the `DocComponent`, `ViewBoxBaseComponent`, and `ViewBoxAnnotatableComponent` classes, each catering to different document rendering scenarios. These components manage document properties, such as root documents, layout, and data, and are structured to handle non-annotatable and annotatable views. They also provide methods for document manipulation, including adding, moving, or removing documents, and ensure interactivity when necessary. +│ │ ├── DocViewUtils.ts – This TypeScript file defines utilities related to document views within the Dash hypermedia system. It introduces the 'DocViewUtils' namespace, which contains an 'ActiveRecordings' array to maintain active audio recordings with associated properties. The file provides a function, 'MakeLinkToActiveAudio', that creates links between the document being referenced and active audio recordings, optionally triggering a recording event broadcast. The utility integrates with the 'SetActiveAudioLinker' function to ensure proper audio recording management. +│ │ ├── DocumentButtonBar.tsx – The `DocumentButtonBar` component in the Dash hypermedia system provides interactive controls for managing documents in a non-linear workflow environment. It utilizes MobX for state management and React for rendering, offering buttons for document linking, following links, pinning documents, sharing, opening menus, and recording annotations. These buttons offer contextual interactions like tooltips and state-dependent styling. Additionally, the component interacts with various managers such as `CalendarManager`, `DictationManager`, and `SharingManager` to provide feature-rich document manipulation. +│ │ ├── DocumentDecorations.tsx – The `DocumentDecorations` component in `DocumentDecorations.tsx` provides interactive features for managing document decorations in the Dash hypermedia system. It includes facilities for resizing, rotating, and modifying document layouts. The component listens for pointer events to enable users to interactively manipulate document properties, such as resizing with snapping and rotation centers. It employs MobX for state management, enabling reactive updates during user interactions. The component also interfaces with other dash components like `DocumentButtonBar` and `SnappingManager` to enhance document interaction capabilities. +│ │ ├── EditableView.tsx – The EditableView component in the Dash code-base is a customizable view that allows users to toggle between viewing and editing a particular field. It uses MobX observables to manage its editing state and reactively update the rendered output. The component supports various editing functionalities, like autosuggest, handling input events, and custom key actions. It provides methods for finalizing edits and integrates optional callback mechanisms for external control over editing behaviors, including entering and exiting the editing mode. +│ │ ├── ExtractColors.ts – The "ExtractColors" class in this TypeScript file is responsible for extracting and manipulating colors from images. It provides methods for loading images from files or URLs and extracting a list of colors from these images using the 'extract-colors' library. Additionally, it includes color sorting methods based on hue and saturation, as well as a more advanced sort using CIELAB color space for smooth transitions. The class also converts hexadecimal color codes into a detailed color profile containing various properties like hue, saturation, and lightness. +│ │ ├── FieldsDropdown.tsx – The FieldsDropdown component in this TypeScript file creates a dropdown menu for selecting field names associated with documents. It utilizes MobX for observable state management and React for rendering, providing a dynamically populated list of field keys gathered from a specified document and its descendants. The selection options are refined to include only filterable fields, with additional customization options such as placeholder text and user-defined styles. A Select component from 'react-select' library is used to render the dropdown, allowing users to interactively choose field values. +│ │ ├── FilterPanel.tsx – The `FilterPanel.tsx` file in this code defines a React component that facilitates the filtering and management of document properties in a dashboard environment. The `FilterPanel` component, which is observer-based and utilizes MobX, allows users to interact with and customize filters using various UI elements such as sliders, checkboxes, and icon panels. It also includes the `HotKeyIconButton` component for customizing and managing hotkey buttons for quick actions, making it a dynamic and interactive part of the interface for handling documents in a non-linear workflow setting. +│ │ ├── GestureOverlay.tsx – The GestureOverlay.tsx file defines the GestureOverlay class, which is responsible for recognizing and processing user-drawn gestures in the Dash platform. This class extends the ObservableReactComponent and uses various Mobx decorators for state management. It handles pointer events to manage ink strokes that are drawn on the canvas, recognizing specific gesture patterns, such as scribbles or predefined shapes, and handling them accordingly. The class allows transformations of ink strokes into documented shapes and provides methods to convert ink drawings into text using recognizers in the Dash application. +│ │ ├── GlobalKeyHandler.ts – This TypeScript file defines a key management system for handling keyboard events in the Dash application. The `KeyManager` class maintains a singleton instance and routes different keyboard combinations to specific handlers using a mapping of modifier keys like control, shift, alt, and meta. These handlers govern how the application handles various keyboard inputs such as arrow keys, backspace, and specific character keys, which allow users to perform actions like document navigation, grouping, nudge movements, and application settings adjustments. Key event management supports both Mac and non-Mac platforms. +│ │ ├── InkControlPtHandles.tsx – The `InkControlPtHandles.tsx` file in the Dash codebase implements React components for handling interactive ink control points on a canvas. The `InkControlPtHandles` component enables users to select, drag, and manipulate control points for an ink stroke, employing MobX for state management and offering undo functionality via the `UndoManager`. It provides features like moving control points, snapping them to align, and deleting points through keyboard inputs. Another component, `InkEndPtHandles`, manages the start and end points of ink strokes, allowing for rotation and stretching interactions. +│ │ ├── InkStrokeProperties.ts – This TypeScript file defines the `InkStrokeProperties` class, which manages various functionalities for handling ink strokes in the Dash hypermedia system. It provides methods to apply transformations like rotation, scaling, and smoothing to ink strokes, as well as adding, deleting, and adjusting control points. The class employs MobX for reactive state management and uses Bezier curves for precise manipulation of ink data. It also includes snapping features to align control points and handles broken ink indices for seamless curve editing. +│ │ ├── InkTangentHandles.tsx – The 'InkTangentHandles' class in this file manages the rendering and interaction of control points, or handles, for ink strokes on a canvas. The component supports dragging handles to adjust the ink's shape and can detect when tangent handles are split using the 'Alt' key. It utilizes features from MobX for state management and reacts to pointer events to allow users to visually manipulate ink data. The rendered handles and lines are enhanced with visual feedback based on the current interaction state. +│ │ ├── InkTranscription.tsx – This TypeScript file defines the InkTranscription component responsible for handling ink input and transcription within the Dash hypermedia system. It utilizes the iink-ts library to support ink and mathematical input recognition, employing MobX observables for state management. The component enables transcription of ink strokes into text or mathematical expressions and organizes these into groupings based on ink input. It also supports interactions with the Dash document model, facilitating translations of ink data to structured document objects and leveraging asynchronous APIs for advanced handwriting recognition. +│ │ ├── InkingStroke.tsx – The 'InkingStroke' component in this TypeScript file represents an individual vector stroke drawn as a Bezier curve on a document. It handles Bezier data, translates ink coordinates to screen coordinates, and manages rendering interaction controls for editing strokes. The component offers functionalities for stroke analysis, toggling between regular and overlay mask displays, and managing user interactions such as pointer moves and clicks. Additionally, it implements utilities for transforming points between ink and screen coordinates and supports undo operations for user edits. +│ │ ├── LightboxView.tsx – The `LightboxView.tsx` file defines the LightboxView component, which manages the display and navigation of documents within an interactive lightbox interface. This component uses MobX for state management and provides functionalities such as setting a new document, moving forward and backward in document history, and rendering the lightbox frame with navigation buttons and overlays. It includes features like toggling views, exploring modes, and handling pen annotations. Additionally, the component is integrated with user-interface enhancements like sticker palettes and gesture overlays, providing a comprehensive document viewing experience. +│ │ ├── Main.tsx – This file serves as the main entry point for the Dash client application. It initializes various components and utilities necessary for rendering the main view within a React application, utilizing the ReactDOM library for rendering. The setup includes loading environment variables, user document data, and configuring extensions and utilities like trail management, face recognition, and movement tracking. It checks for certain URL parameters to modify behavior, such as 'live' or 'safe' modes, and sets up event listeners to prevent browser zooming. +│ │ ├── MainView.tsx – The MainView.tsx file defines the MainView class, a React component that manages the main dashboard interface of the Dash hypermedia system. It uses MobX for state management and integrates with various managers and utilities to handle document interactions, user inputs, and UI rendering. The component dynamically adjusts the layout and visibility of UI elements based on actions and document states. It also supports functionalities like document tab management, layout resizing, and embedding different types of content such as presentations and folders. +│ │ ├── MainViewModal.tsx – The MainViewModal component in this TypeScript file is an observer component using MobX-React. It is designed to display a modal overlay in a web application, with properties to control its visibility, interactivity, and styling. It allows custom contents to be passed, handles external clicks to close the modal, and applies different background colors based on the user's theme preference. The file also incorporates a SnappingManager utility and styles applied via a separate CSS file. +│ │ ├── MarqueeAnnotator.tsx – The MarqueeAnnotator class in 'src/client/views/MarqueeAnnotator.tsx' is a React component wrapped with MobX observables to enable interactions for creating and managing annotations within a document. It supports functionalities like highlighting text, creating linked annotations, and previewing marquee selections through interactions with the AnchorMenu and DocumentView components. The component also handles drag-and-drop events to facilitate annotation placement within a PDF document's viewport. The behaviors for annotation creation are encapsulated within actions, ensuring state updates are batched and observable. +│ │ ├── ObservableReactComponent.tsx – The `ObservableReactComponent` is an abstract React component base class designed for components that manage wheel events, commonly used in menu interfaces like PDF or Marquee menus. It utilizes `mobx` for state management, specifically handling prop changes with observables and actions. The class includes functionality to prevent wheel events from bubbling up the component hierarchy, addressing nested scrolling issues. Additionally, the file exports a modified version of `JsxParser` using `mobx-react`'s observer, enhancing component reactivity. +│ │ ├── OverlayView.tsx – The OverlayView.tsx file defines two main classes, OverlayWindow and OverlayView, for managing and displaying interactive overlay elements in a React application. OverlayWindow allows for the creation of resizable and movable windows with customizable properties, such as position, size, and visibility, using observable state to track changes. OverlayView manages these OverlayWindow instances and other overlay elements, providing methods to add, remove, and render such windows. It uses MobX for state management and supports document drag-and-drop functionalities for flexible user interaction. +│ │ ├── PinFuncs.ts – The file defines functions and interfaces to handle pinning aspects of documents (Docs) in the Dash hypermedia system. It includes interfaces for customizing the pinning behavior, such as 'PinProps' and 'pinDataTypes', which specify properties related to document views, layouts, and data visualization. The main function, 'PinDocView', transfers specified metadata from a target Doc to a pinDoc. This allows users to save and restore specific states of documents, enhancing navigational and viewing capabilities on the Dash canvas. +│ │ ├── PreviewCursor.tsx – The `PreviewCursor` component in this file is a React component that manages the visibility and behavior of a cursor used for previewing content in a Dash application. It is built using MobX for state management, allowing for reactive updates to its observable properties. The component includes functionality for pasting various types of content, such as text, URLs, YouTube videos, and images, onto the Dash canvas. It also handles keyboard events to enable content manipulation and navigation, and manages focus to show or hide the cursor appropriately. +│ │ ├── PropertiesButtons.tsx – The "PropertiesButtons" component in the Dash hypermedia system provides a suite of UI controls for toggling various document properties. Each control is represented as a button or toggle switch, allowing users to change document settings like title visibility, lock status, image display, and more. Controls are context-sensitive, displaying or hiding based on the current document type and layout. The component leverages MobX for state management, React for rendering, and implements undoable actions for reversible state changes. +│ │ ├── PropertiesDocBacklinksSelector.tsx – The `PropertiesDocBacklinksSelector` component in the Dash codebase is a React component that utilizes MobX for state management, and provides functionality for handling document backlinks in a user interface. It accepts properties such as the current document, an optional stack, and visibility settings, and includes a method for handling click actions on links. The component renders a menu of links that allow users to manage document relationships by opening or modifying document views, using styles and configurations from its settings manager. +│ │ ├── PropertiesDocContextSelector.tsx – The file defines the `PropertiesDocContextSelector` component, which is an observable React component utilizing MobX for state management. It takes in properties such as `DocView`, `Stack`, and handling methods like `addDocTab` and is responsible for rendering context options related to a document within the application. The component computes related document contexts using embeddings and filters out system or collection documents. It also provides click handlers to focus or open documents based on user interactions. +│ │ ├── PropertiesSection.tsx – The `PropertiesSection` component in this TypeScript file is a React component that serves as a collapsible section in the user interface, utilizing MobX for state management. It requires a title and handles the conditional rendering of its children elements based on its open/closed state. The component also handles click and double-click events to toggle its visibility and modify its appearance using color properties from the `SettingsManager`. FontAwesome icons are used for visual indicators of the section's state. +│ │ ├── PropertiesView.tsx – The 'PropertiesView' component in this TypeScript file is a core part of the Dash hypermedia system, managing the detailed properties and interactions of documents and their elements. It leverages MobX for state management to observe and react to changes in document properties. The component provides a rich interface for users to manipulate properties such as sharing permissions, layout, ink properties, and interactions like transitions and animations. It also includes dynamic menus for various functionalities, reflecting the adaptive nature of the Dash interface. +│ │ ├── ScriptBox.tsx – The `ScriptBox` component is a React class component that provides a text area for editing scripts. It uses MobX for state management, allowing the `_scriptText` to be observable and actions like `onChange` to update this state. The component supports focus and blur events to manage overlay display for document icons. It also provides save and cancel functionalities through buttons that trigger respective props methods. The static method `EditButtonScript` creates and manages an instance of `ScriptBox` tied to a document field for scripting purposes. +│ │ ├── ScriptingRepl.tsx – The ScriptingRepl.tsx file defines a set of React components that implement a Read-Eval-Print Loop (REPL) interface for scripting within the Dash browser-based hypermedia system. Central to this is the `ScriptingRepl` component which manages the input and execution of commands, maintaining a command history and handling key events for navigation. The components utilize MobX for state management and TypeScript for code transformations. The REPL's result display is managed by components like `ScriptingValueDisplay` and `ScriptingObjectDisplay`, which provide structured visual presentations of command outputs. +│ │ ├── SidebarAnnos.tsx – The "SidebarAnnos" component in the Dash hypermedia system is a React and MobX-based interactive component that handles the display and management of annotations in a sidebar. It is designed to show metadata, hashtags, and user information associated with documents. The component allows users to interact with tags and document data, supporting actions like adding, moving, and removing documents within the sidebar. It also manages the visual presentation of the sidebar, adjusting dimensions and content layout dynamically based on user interactions and document properties. +│ │ ├── StyleProp.ts – The file defines an enumeration, StyleProp, which specifies various style-related properties for a document view in the Dash hypermedia system. These properties include visual attributes such as color, opacity, and box shadow, which can be applied to enhance the appearance and functionality of document views. The enumeration also includes properties for managing text styles like font color, size, family, and weight, as well as other attributes like pointer events and context menu items. These style properties allow for a customizable and dynamic user interface. +│ │ ├── StyleProvider.tsx – This TypeScript file defines various functions to handle and apply styles for documents in the Dash hypermedia system. It imports multiple utilities and components like dropdowns, icons, and fields from different modules. The file includes functions for toggling document features, generating style objects from document layouts, and managing document borders. It also provides style providers for specific scenarios like default styles, dashboard-specific styles, and more. The styles cover properties such as shadows, colors, transparency, and pointers, considering various conditions and document attributes. +│ │ ├── StyleProviderQuiz.tsx – This TypeScript file defines functionality related to handling quizzes on image documents in the Dash hypermedia system. It introduces functions for recognizing text in images, creating label boxes over identified text, and utilizing AI (specifically a GPT API) to evaluate user input against expected answers. The code supports two modes of quiz operation (SMART and NORMAL) and integrates utilities to compare string similarities based on Levenshtein and Jaccard algorithms. It includes UI components for editing and checking answers within the Dash interface. +│ │ ├── TagsView.tsx – The `TagsView.tsx` file defines two main components: `TagItem` and `TagsView`. `TagItem` is an interactive component that displays and manages metadata tags for documents, allowing users to drag and drop tags to create collections of documents sharing similar metadata. It includes methods for creating, finding, and managing tag collections. `TagsView` acts as a panel for displaying and editing tags associated with a document, providing a UI for adding/removing tags through a dropdown interface. It manages the visibility of the editing UI and handles user interactions to update the tags on documents. +│ │ ├── TemplateMenu.tsx – This file defines a React component, `TemplateMenu`, which utilizes MobX for state management and is observed with `@observer`. The component manages document templates within a user interface, allowing users to toggle document layouts and add custom template keys. `TemplateMenu` uses a computed MobX property to generate a script field that switches document views. Additionally, it provides user interactions for toggling layouts via checkboxes and integrates a `CollectionTreeView` to display and interact with document templates. The file also includes a smaller `OtherToggle` component to support checkbox rendering. +│ │ ├── UndoStack.tsx – The UndoStack component is a React class component that displays an interactive undo/redo stack in the Dash application. It utilizes MobX to observe changes in the undo stack, dynamically adjusting styles based on the batch counter state from the UndoManager. The interface consists of a tooltip and a popup that details the sequence of commands available for undoing or redoing actions. This component also enables user interaction to execute undo/redo operations effectively, providing visual cues for available actions. +│ │ ├── ViewBoxInterface.ts – The `ViewBoxInterface` in this file is an abstract class extending `ObservableReactComponent` that acts as a base for React components rendering the contents of a document (`Doc`). It outlines various methods for document management, such as handling annotations, updating icons, managing media playbacks, and handling UI interactions like dragging and clicking. The methods are designed to be general but are primarily applicable to specific `ViewBox` components that implement this interface. It facilitates flexible document interaction and rendering within the Dash hypermedia environment. +│ │ ├── animationtimeline +│ │ │ ├── Region.tsx – This TypeScript file defines a React component, `Region`, for rendering and managing a graphical timeline region associated with animation data. It utilizes MobX for state management, including observables and computed properties to track and calculate the region's position, duration, and keyframes. The `RegionHelpers` namespace provides utility functions for manipulating keyframes and converting pixel times. The `Region` class handles user interactions such as dragging and resizing regions, creating and moving keyframes, and updating context menus for timeline regions, thereby providing a rich interface for animation timeline management. +│ │ │ ├── Timeline.tsx – This TypeScript file defines the Timeline component, which manages the timeline functionality in the Dash system. This component handles user interactions such as zooming, panning, and moving the playhead/scrubber. It also coordinates the display of tracks and regions within a timeline context, allowing for playing and authoring modes to view and edit document annotations. The UI features are controlled mostly through SCSS and the component utilizes MobX for state management and Font Awesome for icons. The file encourages edit focus mainly on UI aspects rather than core logic. +│ │ │ ├── TimelineMenu.tsx – The "TimelineMenu.tsx" file defines a React component called TimelineMenu which is an observable class using MobX decorators. It manages a context menu's visibility and position on the animation timeline view. The component includes methods for opening, closing, and adding items to the menu, which can be either input fields or buttons. Interactions with the menu trigger assigned events, and the menu's layout is styled through a separate CSS file. FontAwesome icons are used for menu items, providing a visual indication for each action type. +│ │ │ ├── TimelineOverview.tsx – The `TimelineOverview` component in this file is a React component designed to visualize a timeline in the Dash hypermedia system. It supports both authoring and playback modes, adjusting the visible section of the timeline accordingly. The component utilizes MobX for state management, allowing for observable states like the width of overview and playbars. User interactions, such as scrubbing and panning, are managed through event listeners for pointer events. The component calculates and renders positions for visual elements like scrubbing and playback indicators relative to the timeline's length and state. +│ │ │ └── Track.tsx – The `Track` component in this file represents a visual timeline track for animations, utilizing the MobX library for state management. It is responsible for handling keyframe creation, saving, and interpolation based on the current time position within a timeline. The component uses several MobX reactions to trigger updates when relevant properties change, such as scrubber bar position or timeline visibility. The Track also includes UI interactions, like double-clicking to create regions for animations, and manages the rendering of these regions within the timeline. +│ │ ├── collections +│ │ │ ├── CollectionCardDeckView.tsx – This file defines the `CollectionCardView` component for Dash, a hypermedia system that allows dynamic study and organization of documents. The component is responsible for rendering documents within a card deck format, allowing for reordering, sorting, and filtering with a focus on user interaction, such as dragging and dropping documents. It utilizes MobX for state management to track document interactions and animations tailored to user actions, such as focusing a document within the deck or adapting the layout based on preset configurations. Additionally, the component integrates with other parts of the Dash system, like the drag and drop manager and style manager, to ensure smooth user experiences. +│ │ │ ├── CollectionCarousel3DView.tsx – The `CollectionCarousel3DView` class extends a `CollectionSubView` and provides a 3D carousel interface for displaying documents in Dash. It manages drag-and-drop functionality, handling document positioning, and visualization using MobX for state management. The component can auto-scroll and navigate through documents using buttons and keyboard input, with animation and layout transformations. It supports the integration of document-specific actions, such as annotations, and adjusts based on user interaction, maintaining a responsive rendering experience. +│ │ │ ├── CollectionCarouselView.tsx – The `CollectionCarouselView` component in the Dash project extends a subcollection view to present documents in a carousel format. This component is designed with MobX for state management, allowing dynamic updates to the carousel's position and display settings, such as visibility of captions and document transitions. The carousel enables users to navigate through documents using navigation buttons and is responsive to drag-and-drop events managed by the `DragManager`. Additionally, the view supports customization through style providers and incorporates focus and anchor mechanisms for document interactions. +│ │ │ ├── CollectionDockingView.tsx – The `CollectionDockingView` component in this file extends a `CollectionSubView` and serves as a docking interface for managing document tabs within a dashboard-like layout employing the Golden Layout library. It includes methods for initializing, adding, closing, replacing, and toggling document tabs, providing a flexible environment for doc handling. This component also manages undo and redo operations using the `UndoManager`. Dynamic layout adjustments are supported through resize and drag-and-drop functionalities, alongside component lifecycle methods for mounting and unmounting, ensuring smooth operation and state management. +│ │ │ ├── CollectionMasonryViewFieldRow.tsx – This TypeScript file defines the CollectionMasonryViewFieldRow class, a React component that extends ObservableReactComponent to manage the behavior of a masonry-style collection of documents. It utilizes MobX for state management, allowing for dynamic updates of its properties such as heading, color, and collapse state. Key functionalities include handling document drag-and-drop, color changes, and dynamic resizing based on content. Additionally, it provides user interactions such as adding documents, changing column colors, and collapsing sections, enhancing the flexibility and usability of the collection view. +│ │ │ ├── CollectionMenu.tsx – This file defines a series of components for managing and displaying collection menus and views in Dash, a hypermedia system. The primary class, 'CollectionMenu', extends AntimodeMenu and utilizes MobX to manage state and actions for elements such as pinning the menu and managing document selections. It features methods for manipulating the user interface dynamically, like toggling visibility and responsiveness to document interactions. Additional components like 'CollectionViewBaseChrome', 'CollectionNoteTakingViewChrome', and 'CollectionGridViewChrome' provide specific interfaces for different view types, including freeform, note-taking, and grid views, supporting custom interactions and layout control. +│ │ │ ├── CollectionNoteTakingView.tsx – The CollectionNoteTakingView component in Dash is a column-based interface for displaying documents reminiscent of Kanban-style platforms like Trello. Users can manage columns by adding, removing, resizing, and moving documents across them. This view makes extensive use of MobX for state management and React for rendering. It implements drag-and-drop functionality with column resizing through dividers. The view supports dynamic document organization according to headers and includes features for auto-generating or resizing columns based on user interactions. +│ │ │ ├── CollectionNoteTakingViewColumn.tsx – The `CollectionNoteTakingViewColumn` component is a React class component that renders individual note-taking columns within a collection view. It utilizes MobX for state management, allowing for observable properties and computed values to handle column behaviors and layout. Key functionalities include dynamic column sizing, document dragging and dropping, and handling user interactions such as creating or deleting documents and using a context menu for additional options. The component also manages the visual representation of columns, including hover effects and configurable document-add buttons. +│ │ │ ├── CollectionNoteTakingViewDivider.tsx – This TypeScript file defines a React component, `CollectionNoteTakingViewDivider`, which is used in the Dash system to separate and resize columns in the Collection Note Taking View. The component utilizes MobX for state management, specifically to handle resizing interaction when a user adjusts column widths. It features two vertical divider lines that appear when multiple columns are present, and it supports user interaction to modify the layout. The component integrates with UndoManager to manage resizing actions, enabling a smooth and reversible user experience. +│ │ │ ├── CollectionPileView.tsx – The `CollectionPileView` component, part of the Dash hypermedia system, extends `CollectionSubView` to manage and display documents in a pile-up view with freeform layout capabilities. It utilizes the MobX library for state management and allows toggling between 'starburst' and 'compact' layouts, updating document positions and view scale accordingly. The component integrates event handling for multi-document manipulation, such as dragging out documents, and includes undo functionality via the `UndoManager`. The pile-up view is rendered using the `CollectionFreeFormView` component, supporting dynamic content interaction based on the active layout. +│ │ │ ├── CollectionPivotView.tsx – The `CollectionPivotView` class is a React component decorated with MobX observables and actions to manage a pivot view in a collection, allowing dynamic interaction with document fields. Upon mounting, it initializes scripts for handling specific document interactions. The class includes methods for toggling visibility, adjusting view filters, and navigating through document filters. The `contents` method defines the component's layout using `CollectionFreeFormView` and configures various properties related to the pivot view. Additionally, the file includes a global scripting function for handling column clicks, influencing document filters and pivots dynamically. +│ │ │ ├── CollectionStackedTimeline.tsx – This TypeScript file defines the CollectionStackedTimeline component, a specialized view for displaying and managing media timelines within collections. The component leverages the MobX library to manage observable state, including elements like trim boundaries, zoom levels, and marker positions for multimedia content. It includes functions for user interactions such as trimming media, setting markers, and handling timeline navigation through keyboard and pointer events. Additionally, the file implements functionalities for rendering markers, interacting with anchor documents, and managing playback controls, facilitating a dynamic and interactive timeline experience for users. +│ │ │ ├── CollectionStackingView.tsx – This TypeScript file defines the CollectionStackingView class, a React component that handles the rendering and behavior of a vertical stacking view for document collections within the Dash hypermedia system. It leverages MobX to manage observable state, computed properties, and reactions. The component facilitates sorting and organizing documents into sections based on pivot fields, allowing different views such as stacking or masonry. It also supports drag-and-drop functionality both within the application and from external sources, and offers various customization options through properties like auto-height and column width adjustments. +│ │ │ ├── CollectionStackingViewFieldColumn.tsx – This TypeScript file defines the `CollectionStackingViewFieldColumn` component, which is responsible for managing and rendering a single column in the collection stacking view of the application. It utilizes the MobX library for state management, including observable properties for managing the column's background, heading, and color. The component implements drag-and-drop functionality for documents and includes methods for handling column interactions, such as renaming headings, changing colors, and toggling column visibility. Additionally, it supports context menus for document creation and other actions, enhancing user interaction within the column's interface. +│ │ │ ├── CollectionSubView.tsx – The `CollectionSubView.tsx` file defines a React component named `CollectionSubViewInternal` using TypeScript and MobX for state management. This component is part of a hypermedia system that supports dynamic content rendering and interactivity, handling collections of documents that can be sorted, filtered, and manipulated through drag-and-drop gestures. It integrates features for managing and displaying child documents, including filters and sorting options, while also providing support for external file drops and rendering templated views. The file emphasizes extensibility with interfaces for different collection and sub-collection views. +│ │ │ ├── CollectionTimeView.tsx – The CollectionTimeView.tsx file is a React component that extends CollectionSubView, utilizing MobX for state management and decorated with the MobX-react observer. It provides a user interface to manage and interact with collections on a timeline view. The component manages state for visualization, such as collapsing sections and setting focus fields, and allows for dynamic manipulation of timeline bounds through pointer event handlers. It integrates a collection layout engine and renders a free-form view of documents with the ability to adjust timeline dimensions interactively. +│ │ │ ├── CollectionTreeView.tsx – The `CollectionTreeView.tsx` file defines the `CollectionTreeView` class, a React component that implements a tree view for collections in the Dash hypermedia system. It extends the `CollectionSubView` to manage document structures as hierarchical tree elements, integrating features like highlight, drag-and-drop, and context menus. The class uses MobX for state management, tracking properties such as the document title width and height, and rendering elements dynamically based on tree structure changes. The component manages events including document addition, removal, and context menu interactions, supporting customizable and interactive collection management within Dash. +│ │ │ ├── CollectionTreeViewType.ts – This TypeScript file defines an enumeration called TreeViewType, which represents different types of views for organizing collections in the Dash system. The enumeration includes three specific view types: 'outline', 'fileSystem', and 'default'. This allows the application to handle various ways of presenting and interacting with collections based on users' preferences or specific use cases. +│ │ │ ├── CollectionView.tsx – The CollectionView.tsx file defines a React component named CollectionView which is an observer-equipped class handling the rendering and behavior of different collection display types in a hypermedia system. This class uses MobX for state management, allowing dynamic and reactive updates based on the active content state. The component supports multiple collection view types like Freeform, Schema, and Tree, providing a versatile presentation of documents on a canvas. It also integrates context-menu functionality for user interactions, including document view type adjustments and additional options like exporting images. +│ │ │ ├── FlashcardPracticeUI.tsx – The `FlashcardPracticeUI` component in the Dash system provides functionality for practicing with flashcards in two modes: practice and quiz. It uses MobX for state management and allows users to track their progress by marking cards as "correct" or "missed," influencing future card display. The interface includes buttons for toggling practice modes and methods for displaying completion or filtering messages when no cards are available. The component employs the `MultiToggle` UI component for selecting practice settings, such as flashcard reveal methods, and ensures proper cleanup by resetting filters on unmount. +│ │ │ ├── KeyRestrictionRow.tsx – The KeyRestrictionRow component in this TypeScript file represents a React component that manages a key-value pair with conditional scripts for filtering collections. It uses MobX for state management, observing properties such as the key, value, and a Boolean 'contains' flag. The component renders a row with input fields for the key and value, and a button to toggle the contains condition, generating a script based on the inputs to be used elsewhere in the application. This structure allows users to create dynamic filters in a collection view interface. +│ │ │ ├── TabDocView.tsx – The `TabDocView.tsx` file defines two primary React components, `TabDocView` and `TabMinimapView`, using MobX for state management. `TabDocView` is responsible for rendering documents in a tabbed layout within the Dash application. It manages interactions with documents, tab switching, and integrations with the docking view layout. `TabMinimapView` provides a visual representation of document positioning within a minimap, enhancing navigation. The file also includes various methods for handling document pinning, styling, and component lifecycle events, contributing to the dynamic, interactive nature of the Dash interface. +│ │ │ ├── TreeSort.ts – This TypeScript file defines an enumeration, 'TreeSort', which lists the possible sorting options for a collection of items within the Dash system. The enumerated values allow for sorting items alphabetically either in ascending ('AlphaDown') or descending ('AlphaUp') order, by their Z-index ('Zindex'), or based on the time they were added ('WhenAdded'). This enumeration facilitates sorting functionality for managing how items are displayed in the user interface. +│ │ │ ├── TreeView.tsx – This file defines a React component named TreeView, which is designed to render and manage a tree view of a collection of documents within the Dash hypermedia system. It leverages MobX for state management and supports complex document operations like moving, adding, and removing documents within the hierarchy. Additionally, it includes functionality for handling drag and drop actions, document sorting, and customizable context menus. The TreeView component is highly interactive, offering users functionalities such as editing document titles, toggling document expansion, and dynamically updating the view in response to various actions. +│ │ │ ├── collectionFreeForm +│ │ │ │ ├── CollectionFreeFormBackgroundGrid.tsx – This TypeScript file defines a React component named `CollectionFreeFormBackgroundGrid`, which is used within the Dash system to render a background grid on a canvas element. The component supports zooming and panning functionalities, dynamically adjusting the grid spacing based on these transformations. It utilizes MobX to reactively observe changes in properties like panel dimensions, zoom scaling, and color. The grid rendering logic includes setting line styles and dash patterns, and adapts grid visibility on different zoom levels, either displaying dotted or solid grid lines. +│ │ │ │ ├── CollectionFreeFormClusters.ts – The `CollectionFreeFormClusters` class is a component of the Dash hypermedia system that manages document clustering within a free-form collection view. This class allows documents to be grouped into clusters based on their spatial arrangements, enhancing organization and user interaction through dragging and selection processes. It employs MobX observables for state management and provides methods to detect overlapping documents, handle pointer interactions, and update or manage cluster state. The class also interacts with various utilities for layout and document manipulation, ensuring seamless integration with the overall document view. +│ │ │ │ ├── CollectionFreeFormInfoState.tsx – This TypeScript file defines a component, `CollectionFreeFormInfoState`, used in a free-form collection view within the Dash system. It utilizes MobX for state management and supports a finite state automaton (FSA) architecture by defining `infoState` and `infoArc` to manage state transitions. The component observes these states and reacts to changes, updating its display of messages and animations accordingly. The `render` method handles UI interactions, including toggling additional information and closing the interface, integrating with React for real-time updates. +│ │ │ │ ├── CollectionFreeFormInfoUI.tsx – This TypeScript file defines a React component, `CollectionFreeFormInfoUI`, which manages the user interface for displaying information related to a free-form collection view within the Dash system. The component utilizes MobX for state management, allowing real-time observation and reaction to changes in documents and their states. It includes methods for initializing UI states, updating states based on user interactions and document conditions, and rendering the UI accordingly. The component supports interactive functionalities like document creation, linking, and management, guiding users through various transitions and actions with feedback and instructions. +│ │ │ │ ├── CollectionFreeFormLayoutEngines.tsx – This TypeScript file defines layout functions for organizing documents within Dash's free-form canvas. It imports various helper classes from the project to manage document properties and positions. The layout functions, such as computePassLayout and computeStarburstLayout, configure the spatial arrangement of documents based on parameters like width, height, and rotation, allowing dynamic visual organization. Additional utilities like measureText are used to calculate precise text dimensions, aiding in layout decisions. These layouts cater to different visual styles, supporting interactive and non-linear workflows on Dash's canvas. +│ │ │ │ ├── CollectionFreeFormPannableContents.tsx – This TypeScript file defines a React component, CollectionFreeFormPannableContents, for displaying collections in a freeform pannable view. It leverages MobX for state management and reactivity. The component allows for the addition of overlay plugins via a static method, which can display elements above the collection. It contains a method for visualizing viewport highlights, which are used for navigating to specific regions. The render method dynamically adjusts styling and viewport transformations, supporting functionalities like annotation overlays and presentation paths. +│ │ │ │ ├── CollectionFreeFormRemoteCursors.tsx – This TypeScript file defines a React component, `CollectionFreeFormRemoteCursors`, which manages and displays remote cursor data in a collaborative, free-form collection view. It uses MobX for state management to compute and filter a list of active cursors from document data, considering only recent, relevant cursor information. Each cursor is rendered as a styled canvas element and displayed on the interface at a specified position. The component visually represents cursor positions with a unique color and an initial letter from the user's identifier. +│ │ │ │ ├── CollectionFreeFormView.tsx – This TypeScript file defines the CollectionFreeFormView, a React component that represents a free-form collection within the Dash hypermedia system. The component is rich in features, enabling users to perform actions such as document manipulation, layout management, and ink drawing on the free-form canvas. It integrates MobX for state management and uses a variety of utility functions for tasks like gesture recognition and layout computation. The component also supports interactions with the rest of the library, such as document pinning, context menus, and scripting globals. +│ │ │ │ ├── FaceCollectionBox.tsx – This TypeScript file defines two key React components: UniqueFaceBox and FaceCollectionBox, which are used to manage collections of recognized faces in a hypermedia system. UniqueFaceBox facilitates the display and manipulation of images associated with a particular face, allowing users to add or remove images and adjust their display settings. FaceCollectionBox aggregates these face collections within the active dashboard, ensuring seamless drag-and-drop interactions and synchronization. Both components rely on observable properties to manage real-time updates and MobX for state management. +│ │ │ │ ├── ImageLabelBox.tsx – The "ImageLabelBox.tsx" file defines a React component that enables users to classify and organize images using tags. The component uses MobX for state management, allowing observable properties like image data and label groups. It provides functionality to drop images, automatically classify them with AI-generated labels via GPT, and group images by similar labels. The interactive UI allows users to add or remove labels, toggle image information visibility, and initiate sorting and classification of selected images, enhancing image management and organization in the application. +│ │ │ │ ├── ImageLabelHandler.tsx – The `ImageLabelHandler` is a React component that manages a user interface for displaying and manipulating labels associated with images on a canvas. It extends `ObservableReactComponent` and uses MobX for state management, including observable properties for display states and label data. The component allows users to add, remove, and group labels via interactive buttons. It displays itself based on user interactions, adjusting its position dynamically, and interfaces with `MarqueeOptionsMenu` for additional grouping functionality. +│ │ │ │ ├── MarqueeOptionsMenu.tsx – The `MarqueeOptionsMenu` component extends the `AntimodeMenu` and leverages MobX for state management and React for rendering. It provides a user interface with various icon buttons for managing document collections within the Dash hypermedia system, such as creating collections or groups, summarizing documents, deleting items, and pinning selections. Each button is tied to an action that is currently unimplemented. The menu utilizes the `SettingsManager` to obtain user-specific color settings for consistent UI theming. +│ │ │ │ ├── MarqueeView.tsx – The MarqueeView component provides functionality for selecting and manipulating documents on a freeform canvas within the Dash hypermedia system. It utilizes MobX for observable properties and computed values to manage state. The component supports various operations such as selecting, dragging, and grouping documents using a marquee or freehand lasso tool. It implements event handling for keyboard and pointer events to enable actions like document deletion, grouping, and text pasting. MarqueeView also integrates options for managing document collections, handling interactions, and displaying context-specific cursors and menus. +│ │ │ │ └── index.ts – This file serves as an index for exporting modules related to the free-form collection view in Dash. It re-exports components and utilities from several other files, including layout engines, remote cursors, and the main view of the free-form collection. Additionally, it provides exports for a marquee options menu and a marquee view. This setup allows for easier imports in other parts of the application by consolidating related exports in one place. +│ │ │ ├── collectionGrid +│ │ │ │ ├── CollectionGridView.tsx – The `CollectionGridView` class in Dash is a React component that manages the grid view of document collections within the hypermedia system. It leverages MobX for state management and React for rendering, and provides a flexible grid layout where documents can be arranged, resized, and repositioned. The class is also responsible for handling internal and external drag-and-drop events, as well as transformations and layout updates that occur due to user interactions. A variety of computed properties define grid attributes, and context menu options allow for customization of display settings. +│ │ │ │ ├── Grid.tsx – The Grid.tsx file defines a React component named Grid that utilizes the third-party library 'react-grid-layout' to create a customizable grid layout. This component takes several properties, including layout settings, number of columns, row height, and interaction options like draggable and resizable children. It supports customizable compact types ('vertical' or 'horizontal') and manages layout changes through the setLayout callback. Despite being designed to be responsive to transformations, a noted comment indicates issues with the transformScale property. +│ │ │ │ └── index.ts – This TypeScript module serves as an entry point for re-exporting components related to the collection grid functionality in the Dash hypermedia system. It specifically re-exports all exports from two other modules, "Grid" and "CollectionGridView", allowing them to be accessed from outside this directory. This structure helps organize and encapsulate related components while providing a clear API for other parts of the application to interact with the collection grid features. +│ │ │ ├── collectionLinear +│ │ │ │ ├── CollectionLinearView.tsx – CollectionLinearView.tsx defines the CollectionLinearView class, which is responsible for rendering a horizontal collection of documents in a user-friendly interface. The view can be either expandable or static, controlled by the `linearView_expandable` property. This component is integrated into Dash's UI as part of menus and toolbars. It uses MobX for state management and includes features for document linking and playing media. The class handles UI transformations, drop actions, and visibility toggles, providing a dynamic and interactive user experience. +│ │ │ │ └── index.ts – This file serves as an entry point for the 'collectionLinear' module by re-exporting all exports from the 'CollectionLinearView' file. It enables other parts of the application to access the functionalities and components defined in 'CollectionLinearView' through this centralized module interface. This practice promotes modularity and maintainability within the codebase. +│ │ │ ├── collectionMulticolumn +│ │ │ │ ├── CollectionMulticolumnView.tsx – This TypeScript/React component, `CollectionMulticolumnView`, manages the display of multiple documents within a collection using a multicolumn layout. It utilizes `MobX` for state management, enabling observable properties and computed values such as the width of columns in pixels or ratios. The layout adapts based on these computed values, and features resizable columns and drag-and-drop functionality for document management. The component also handles rendering individual document views, managing their layout properties, and responding to user interactions like clicks and drags. +│ │ │ │ ├── CollectionMultirowView.tsx – The CollectionMultirowView component extends the CollectionSubView class to manage a collection of documents displayed in a multi-row layout. It uses MobX for state management, calculating layout dimensions through computed properties to handle documents with both fixed and ratio-based widths. The class integrates functions to calculate the pixel height for documents, manage row units, and adjust layout dynamically, considering document drop actions and resizing. This ensures flexible, proportionate display and interaction in a user-customizable environment, leveraging React components for rendering individual document views. +│ │ │ │ ├── MulticolumnResizer.tsx – This TypeScript React component, `ResizeBar`, is part of the Dash hypermedia system's multi-column view functionality. It allows dynamic resizing of document columns by capturing pointer events and adjusting the width of adjacent columns accordingly. The component utilizes MobX for state management and integrates with an undo manager to allow for undoable resizing actions. Adjustable properties include the column width, active content status, and custom styles, all of which enhance user interaction in the multi-column arrangement. +│ │ │ │ ├── MulticolumnWidthLabel.tsx – This TypeScript file defines a React component named `WidthLabel`, which is observed by MobX for state management. The component is responsible for displaying and editing the width label of a layout within a collection, using two `EditableView` components to allow changes to the magnitude and unit of the dimension. The component only renders when the `showWidthLabels` boolean property of the `collectionDoc` is true. It includes validation for valid numerical input and supported dimension units. +│ │ │ │ ├── MultirowHeightLabel.tsx – This TypeScript file defines a React component called HeightLabel that is part of the Dash hypermedia system. The component is designed to display and edit height-related information in a collection view, specifically for multi-row layouts. It uses MobX for state management, providing observable computed properties to dynamically generate its content. The component includes editable fields for height magnitude and unit, ensuring values are valid before applying changes. It selectively renders based on a boolean property that indicates whether height labels should be shown. +│ │ │ │ └── MultirowResizer.tsx – This file defines a React component named ResizeBar, which is a multi-row resizer used in a collection's multi-column view. It uses MobX for state management and tracks user interactions with pointer movement to adjust the dimensions of grid rows. The component registers pointer events to facilitate resizing of rows either increasing or decreasing their height based on user movement. Additionally, it utilizes an UndoManager to batch resize actions for reversible operations, and dynamically adjusts styles based on externally provided style props. +│ │ │ └── collectionSchema +│ │ │ ├── CollectionSchemaView.tsx – The `CollectionSchemaView` component in this file provides a spreadsheet-like interface for users to manage documents in Dash. Each document corresponds to a row, and fields like author or title are represented as columns. Users can add, edit, filter, sort, and rearrange columns and rows. The view supports interactive features such as cell editing, contextual menus, document previews, and column dragging. It leverages MobX for state management and React for rendering, facilitating dynamic updates and user interactions. +│ │ │ ├── SchemaCellField.tsx – The SchemaCellField component in this TypeScript file is designed for rendering and managing the editing state of text within schema cells in the Dash hypermedia system. It supports functional features like user input handling, text parsing, cursor management, and visual updates based on equations. To achieve this, it utilizes MobX for state management and React for rendering. The component handles equations and reference selection, and also ensures safe rendering of content through DOMPurify sanitization. +│ │ │ ├── SchemaColumnHeader.tsx – This file defines the SchemaColumnHeader component, a TypeScript class implementing header functionalities for a schema table column in a React application. It uses MobX for state management and provides functionalities such as drag-and-drop support, column resizing, and context menu operations. The component is designed to manage interactions like editing column titles and toggling menu visibility. It also includes UI elements like the EditableView for inline editing and IconButton for actions like deleting or opening menus, enhancing user interactivity with schema tables. +│ │ │ ├── SchemaRowBox.tsx – The `SchemaRowBox` component is a React component designed to render a document as a row of fields, with each cell in the row displaying a specific field value from the document. It facilitates interaction between the `SchemaView` and individual `SchemaCell` components by passing relevant functions as props. This component extends from `ViewBoxBaseComponent` and includes MobX observables and computed values to manage document and schema state. It provides functionality for opening context menus, handling field selection, and managing field values within a collection schema view. +│ │ │ └── SchemaTableCell.tsx – The `SchemaTableCell.tsx` file defines React components for rendering different types of cells in a schema table within the Dash hypermedia application. The main `SchemaTableCell` component handles rendering and editing content for a cell, while specialized components like `SchemaImageCell`, `SchemaDateCell`, `SchemaRTFCell`, `SchemaBoolCell`, and `SchemaEnumerationCell` handle specific data types like images, dates, rich text, booleans, and enumerations, respectively. The components utilize MobX for state management and enable user interactions, such as editing and selecting cells, while maintaining a responsive and dynamic UI. +│ │ ├── global +│ │ │ ├── globalCssVariables.module.scss.d.ts – This TypeScript declaration file defines an interface named 'IGlobalScss' which lists a set of global CSS variables used across the Dash application. These variables include dimensions, sizes, colors, and z-index values for various UI components like context menus, images, side menus, and carousels. The interface ensures that these styling properties are consistently applied across different parts of the application, contributing to a cohesive visual design. The file exports these variable definitions as 'globalCssVariables' for use in the styling of the application's components. +│ │ │ ├── globalEnums.tsx – The file 'globalEnums.tsx' defines several enums used for styling in the Dash hypermedia system. These enums include 'Colors' for specifying different color codes, such as various shades of gray and blue, 'FontSizes' for different text sizes, and 'Padding' for varying padding dimensions. It also includes 'IconSizes' to set icon dimensions, 'Borders' for border styling, and 'Shadows' for shadow effects. Lastly, 'VideoThumbnails' is defined to indicate the density of video thumbnail displays. +│ │ │ └── globalScripts.ts – This TypeScript file, `globalScripts.ts`, is part of the Dash client application and defines multiple scripting functionalities for document manipulation. It integrates with the ScriptingGlobals module to add scripts for checking and setting properties of selected documents, such as border color, background color, and header color. It also includes functions for manipulating ink properties and configuring text attributes like font and highlighting. Additionally, it supports toggling features, such as document overlay and schema preview, contributing to the interactive and dynamic capabilities of the Dash application's canvas. +│ │ ├── linking +│ │ │ ├── LinkMenu.tsx – The 'LinkMenu' component is a React component that displays a menu for managing linked nodes within a document view in the Dash system. It is an observable component that reacts to changes using MobX. The menu handles interactions to clear the link editor when clicking outside the menu. It formats groups of links into JSX elements for rendering, and uses style settings from a 'SettingsManager' for appearance customization. This component provides a visual representation of linked documents, enhancing user interaction and navigation within the hypermedia system. +│ │ │ ├── LinkMenuGroup.tsx – The LinkMenuGroup component in this TypeScript file is a React component utilizing MobX for state management and designed to display a group of document links within a linking menu. It accepts properties such as the source document, a group of documents, and a document view, among others. The getBackgroundColor function determines the color based on the link relationship. The render method effectively organizes the links, allowing for a collapsible display of items, alongside handlers for interaction with each individual link. +│ │ │ ├── LinkMenuItem.tsx – This TypeScript file defines a React component named `LinkMenuItem` for the Dash hypermedia system. The component is designed to manage and display link items in a menu, allowing users to drag links, edit, and delete them. It includes interactive elements enabled by MobX for state management, such as toggling a detailed view or handling drag-and-drop operations. The component also utilizes various utilities and external libraries like FontAwesome and Material-UI to enhance its UI and functionality, offering tooltip support and iconography for better user interaction. +│ │ │ └── LinkPopup.tsx – The "LinkPopup.tsx" file defines a React component used for creating links between text and Dash documents within the application. The "LinkPopup" component is enhanced with MobX's observer to respond to data changes. It provides a GUI for searching documents and establishing links through a document search box, employing properties to set up link operations and styles. The component's design includes methods for setting panel dimensions and includes conditional rendering logic for certain elements within the popup. +│ │ ├── newlightbox +│ │ │ ├── ButtonMenu +│ │ │ │ ├── ButtonMenu.tsx – The ButtonMenu component in this TypeScript file creates a set of interactive buttons for the NewLightboxView in the Dash application. These buttons allow users to toggle the document view between fit width and default, open the document in a new tab, toggle pen annotations, and switch the explore mode for document navigation. Each button has a corresponding onClick event handler to modify the state interfaced by external modules like NewLightboxView, CollectionDockingView, and SnappingManager for document management. +│ │ │ │ ├── index.ts – This file exports everything from the 'ButtonMenu' module, serving as an entry point for functionalities contained within the 'ButtonMenu' file. It acts as a re-export which simplifies imports when this module is used elsewhere in the codebase. This is a structure often used to manage components or utilities within a project, providing a convenient way to access multiple exports through a single import statement. +│ │ │ │ └── utils.ts – This TypeScript file defines an interface `IButtonMenu`, which is currently an empty interface within the Dash codebase. It serves as a placeholder for the structure related to ButtonMenu functionality within the new lightbox view component. The empty interface likely indicates future expansion or implementation where specific properties or methods will be added to `IButtonMenu` as needed for the component's functionality. +│ │ │ ├── ExploreView +│ │ │ │ ├── ExploreView.tsx – This TypeScript file defines the ExploreView component for the Dash application, which is part of the New Lightbox feature set. The component takes a list of document recommendations (`recs`) and spatial bounds as props, rendering each document at a calculated position on a canvas based on their embedding coordinates. It normalizes these coordinates relative to provided bounds to place each document accurately. A central document with a default style is also displayed, potentially serving as a reference or focal point in the view. +│ │ │ │ ├── index.ts – This file functions as a barrel file, re-exporting all exports from the 'ExploreView' module. By centralizing exports in this manner, it simplifies import statements for modules requiring functionalities from 'ExploreView', promoting cleaner and more maintainable code throughout the codebase. Such practices are common in larger projects to enhance module management and accessibility. +│ │ │ │ └── utils.ts – This TypeScript file defines interfaces and constants used in the new lightbox's explore view component. It exports an `IExploreView` interface, which optionally includes a list of recommendations (`IRecommendation[]`) and position bounds (`IBounds`). Additionally, it provides default boundary values via the `emptyBounds` object. The `IBounds` interface specifies numerical boundaries for a rectangular area, with properties for maximum and minimum x and y coordinates. These structures are likely used for managing spatial layout or positioning of elements within the view. +│ │ │ ├── Header +│ │ │ │ ├── LightboxHeader.tsx – The `LightboxHeader.tsx` file defines the `NewLightboxHeader` React component for the Dash hypermedia system. This component renders the header section of a lightbox view, including the document's title, type, and interactive buttons for functions like bookmarking and toggling exploration mode. It uses several hooks to manage state, including the document being viewed and whether the title is being edited. The component employs styled elements through `scss` and uses a combination of custom components and icons for visual presentation. +│ │ │ │ ├── index.ts – This TypeScript file serves as an entry point for the LightboxHeader component, re-exporting all exports from the 'LightboxHeader' module. It allows other parts of the application to import from 'newlightbox/Header' without specifying 'LightboxHeader' directly. This approach facilitates modular code organization and helps maintainability by abstracting component exports. +│ │ │ │ └── utils.ts – This TypeScript file defines an interface named `INewLightboxHeader` within the Dash hypermedia system. The interface specifies two optional properties, `height` and `width`, both of which are numbers. This interface likely serves as a type contract for components or functions managing the header of a new lightbox view, providing flexibility in specifying dimensions without requiring them. The file is part of the client-side view utilities for the new lightbox feature in the system. +│ │ │ ├── NewLightboxView.tsx – The NewLightboxView.tsx file defines a React component that serves as the core of the 'New Lightbox' feature in the Dash application, used to display documents in a dynamic and interactive format. The component is integrated with MobX for state management and manages various states such as document filters, navigation history, and sidebar status. This file provides functionality to add documents to the lightbox, navigate through history, and manage document-specific settings like scaling and positioning. It also supports an observational mode, rendering documents within a gesture-enabled overlay, and includes a recommendation system and exploration mode for enhanced document interaction. +│ │ │ ├── RecommendationList +│ │ │ │ ├── RecommendationList.tsx – The RecommendationList component in this file is designed to display a list of document recommendations within the Dash hypermedia system. It uses React hooks, such as useState and useEffect, to manage state and side effects. The component fetches keywords and recommendations based on the text in the current Lightbox document. Keywords are displayed, and users can remove them using an icon button. The recommendations are sorted by their distance metric and rendered dynamically based on the document's text context and stored keywords. +│ │ │ │ ├── index.ts – This TypeScript file serves as a re-export module for the './RecommendationList' file. It exports all entities from the 'RecommendationList' module to make them accessible from other parts of the application. This practice is often used to simplify and centralize the import paths, improving modularization and maintainability of the codebase. By using such a structure, it is easier to manage dependencies and updates of shared components across different parts of a large application like Dash. +│ │ │ │ └── utils.ts – This TypeScript file defines an interface, IRecommendationList, aimed at structuring data for a recommendation list component in a new lightbox module. The interface includes optional properties like loading status, keywords array, an array of recommendations, and a function to fetch recommendations. It imports IRecommendation from a sibling components directory to ensure consistency in how recommendations are represented across the application. This setup supports modular and maintainable code by clearly specifying expected data structures for recommendation handling. +│ │ │ ├── components +│ │ │ │ ├── EditableText +│ │ │ │ │ ├── EditableText.tsx – This TypeScript file defines a React component named `EditableText`. Designed for inline text editing, it displays text as normal UI text which transforms into an input field when activated, allowing users to rename the text. Key props include `text`, `editing`, `onEdit`, and `setEditing` for managing the text state and handling changes. The component supports additional customization through optional props such as `backgroundColor`, `placeholder`, `size`, and `height`. It leverages inline styles for appearance and uses the `lb-editableText` CSS class for styling. +│ │ │ │ │ └── index.ts – This TypeScript file is a simple re-export module within the Dash hypermedia code-base. It re-exports all exports from the 'EditableText' component, which is likely located in the same directory. This file follows a common pattern in TypeScript projects to organize and simplify imports across different parts of the application, improving maintainability by centralizing the export declarations. +│ │ │ │ ├── Recommendation +│ │ │ │ │ ├── Recommendation.tsx – This file defines a React functional component called Recommendation, which incorporates several modules and utilities related to document handling within the Dash system. The component renders a UI element that presents document recommendations, handling various content types such as YouTube, Video, Webpage, HTML, Text, and PDF. When users click on a recommendation, the component attempts to create and possibly display a new document in the Lightbox. Additionally, the component provides visual elements to show the loading state, source, document type, distance metric, and related concepts. +│ │ │ │ │ ├── index.ts – This file is an entry point for the Recommendation component and its utilities within the Dash hypermedia system. It re-exports all exports from two files: './utils' and './Recommendation'. This setup allows for organized code management and convenient imports in other parts of the application that require functionalities or components related to recommendations. +│ │ │ │ │ └── utils.ts – This TypeScript file defines an interface called IRecommendation which provides the structure for recommendations in the Dash system. The interface includes various optional properties such as 'loading', 'type', 'data', 'title', 'text', 'source', 'previewUrl', 'transcript', 'embedding', and 'distance', which are used to describe recommended documents. Key elements include transcript information with timing, document embeddings for spatial positioning, and concepts related to the document, allowing for detailed recommendations and interactions within the system. +│ │ │ │ ├── SkeletonDoc +│ │ │ │ │ ├── SkeletonDoc.tsx – The "SkeletonDoc.tsx" file defines a React functional component named "SkeletonDoc" that is used within the Dash hypermedia system. This component takes props adhering to the "ISkeletonDoc" interface and renders a styled container with a header and content section. The header includes placeholder elements for a title, type, tags, and buttons, while the content section displays data passed through the props. The component relies on styles imported from a "SkeletonDoc.scss" file to control its appearance. +│ │ │ │ │ ├── index.ts – This file serves as a re-exporting module, allowing all exports from the './SkeletonDoc' file to be re-exported from this index. It simplifies the import paths for consumers of the module, allowing them to import directly from 'components/SkeletonDoc' rather than targeting a specific sub-file. This is a common practice in TypeScript projects to create cleaner and more maintainable module interfaces. +│ │ │ │ │ └── utils.ts – This TypeScript file defines an interface `ISkeletonDoc` that extends another interface `IRecommendation`. The `ISkeletonDoc` does not add any additional properties or methods to `IRecommendation`, suggesting that it is intended to be used where a recommendation is required, but within a specific context possibly related to a document skeleton in a new lightbox component. This setup allows for polymorphic behavior or type safety in parts of the Dash application that handle or interact with document recommendations. +│ │ │ │ ├── Template +│ │ │ │ │ ├── Template.tsx – This file defines a React functional component named `Template`, which imports its styles from 'Template.scss' and its props interface `ITemplate` from a utility file. The component returns a simple JSX layout, a `div` with the class `template-container`, but currently does not render any additional elements or logic. This component serves as a basic structure likely meant for further development in the Dash system's lightbox view functionality. +│ │ │ │ │ ├── index.ts – This file serves as an entry point for the Template component by re-exporting all exports from the './Template' file. It acts as a connector within the directory structure, ensuring that the functionalities and components defined in './Template' are accessible from other parts of the application. This is a common practice in code organization to maintain clean and manageable component imports and exports. +│ │ │ │ │ └── utils.ts – This TypeScript file defines an interface named `ITemplate`. It currently does not specify any properties or methods, indicating it is an empty interface at the moment. This suggests it might be a placeholder for future expansion or used in situations where syntactic type constraints are needed without specific implementation details. This pattern can be useful in large codebases where interfaces serve as contracts for expected structures. +│ │ │ │ └── index.ts – This file functions as an index module, re-exporting modules from other components such as 'Template', 'Recommendation', and 'SkeletonDoc'. It serves to consolidate and simplify imports, allowing other parts of the application to access these components more conveniently. This file supports the structure of the 'newlightbox' feature by bundling related components together, facilitating organized and efficient code management. +│ │ │ └── utils.ts – This TypeScript file defines utility functions for fetching recommendations and keywords, and determining document types within the Dash hypermedia system. The fetchRecommendations function sends a POST request to a local server to obtain content recommendations based on a source URL, query, and document list, with an optional dummy mode for testing. Similarly, fetchKeywords retrieves relevant keywords for a given text. The getType function maps various document types to user-friendly strings, accommodating both predefined and custom types. +│ │ ├── nodes +│ │ │ ├── AudioBox.tsx – The AudioBox.tsx file is a TypeScript and React component within the Dash hypermedia system. It facilitates the recording, playback, and management of audio files on the Dash canvas. AudioBox allows users to record new audio files using the MediaDevices API or import existing audio files, providing features such as play, pause, mute, volume control, and timeline trimming. The component integrates tightly with other parts of the system, displaying audio data through UI elements like waveforms and timelines, and using MobX for state management. +│ │ │ ├── CollectionFreeFormDocumentView.tsx – This TypeScript file defines a React component, `CollectionFreeFormDocumentView`, which is a specialized document view within the Dash hypermedia system. It extends `DocComponent` and uses MobX for state management, with observable properties for layout attributes like position, rotation, and opacity. The component allows for animated transitions of these properties and includes functions for managing keyframes to enable animations. It integrates with the document view hierarchy and supports conditional rendering of child document views, facilitating complex multimedia compositions on a free-form canvas. +│ │ │ ├── ComparisonBox.tsx – The ComparisonBox component in Dash is a versatile view that enables different modes of interaction with documents, such as sliding, flipping, and quiz modes. It provides functionality for animated transitions between two documents (before/after slide or question/answer flip) and integrates GPT API for generating flashcard content or evaluating quiz answers. The component also supports voice recognition for input and can fetch images from Unsplash for flashcard generation. It utilizes MobX for state management and React for rendering, allowing dynamic updates and interactions on a free-form canvas. +│ │ │ ├── DataVizBox +│ │ │ │ ├── DataVizBox.tsx – The DataVizBox.tsx file defines the DataVizBox class, a React component that extends ViewBoxAnnotatableComponent. It provides functionality for visualizing datasets in different formats such as tables, line charts, histograms, and pie charts. The component utilizes MobX for state management and observes changes in datasets to update visualizations in real-time. It includes interactive features such as a sidebar for adding documents, context menus for creating documents, and support for GPT-driven data analysis. It handles both live schema updates and dataset filtering for interactive data exploration. +│ │ │ │ ├── DocCreatorMenu +│ │ │ │ │ ├── DocCreatorMenu.tsx – The DocCreatorMenu component in this TypeScript file is a React component that manages a menu for creating documents with various layouts and fields, aiding in data visualization. It utilizes MobX for state management, with numerous observables to track the state of templates, fields, and layout configurations. Users can add templates, manage fields, and assign fields to predefined templates using GPT-generated content. The component also supports layout previews, resizing, and handles interactions like dragging and resizing through relevant event handlers. +│ │ │ │ │ ├── FieldTypes +│ │ │ │ │ │ ├── DynamicField.tsx – The DynamicField class is part of a TypeScript/React implementation and extends the Field interface to manage complex field types within a document creator menu. It handles subfields, initializes them based on their view type (such as CAROUSEL3D or FREEFORM), and maintains hierarchical relationships by optionally assigning a parent field. DynamicFields support setting titles and dimensions, and provide methods to render documents in specific view types, utilizing utility functions for dimension and basic option management. This design supports dynamic document structure and interactive user customization. +│ │ │ │ │ │ ├── Field.tsx – This TypeScript file defines the structure and types for fields used in data visualization components within the Dash application. It includes enums for field content types and view types, and interfaces for field dimensions and options to specify properties like color, rotation, and alignment. The main "Field" interface outlines methods for managing content, dimensions, subfields, and rendering of documents, allowing flexibility in implementing field properties across different visualization contexts. These components support interactive and customizable document creation in Dash's user interface. +│ │ │ │ │ │ ├── FieldUtils.tsx – This TypeScript file defines the `FieldUtils` class, which provides utility functions for handling field dimensions and settings in the context of document creation. The `getLocalDimensions` method calculates the dimensions of a field based on its corner coordinates, adjusting them relative to a parent field's dimensions. The `applyBasicOpts` function sets various properties of a document based on user settings and optionally, previous document settings. The `calculateFontSize` method computes an appropriate font size for text to fit within specified container dimensions, considering word splitting and line count. +│ │ │ │ │ │ └── StaticField.tsx – This file defines a TypeScript class `StaticField`, which is part of a system that handles document creation and manipulation within the Dash hypermedia application. The `StaticField` class stores metadata related to documents, including content, subfields, and settings. It handles the creation, customization, and rendering of documents based on their content type, such as text or image. The class also supports managing subfields, updating rendered content, and matching fields to certain criteria using provided methods. +│ │ │ │ │ ├── Template.tsx – This TypeScript file defines a Template class responsible for handling document templates in the Dash hypermedia system. It manages dynamic fields through the DynamicField class and maintains a set of field settings specified during initialization. Key functionalities include retrieving fields by ID or title, cloning template instances, rendering document content, and ensuring template validity with column matches. The class provides methods for compiling and summarizing field contents and descriptions, alongside utilities for rendering updates and resetting to base states. +│ │ │ │ │ ├── TemplateBackend.tsx – This TypeScript file defines several template layouts and configurations for data visualizations in the Dash hypermedia system. It includes enumerations for field types and sizes, such as text, visual, and unset types, and tiny to huge sizes. Multiple template layouts are detailed, each specifying the positioning, styling, and behavior of fields, which can include static text, visual elements, and decorative components. These templates facilitate the arrangement and presentation of multimedia content on customizable canvases within the application. +│ │ │ │ │ └── TemplateManager.tsx – The TemplateManager class is designed to manage a collection of Template objects within the application. It initializes these templates based on provided field settings using a constructor that accepts an array of FieldSettings. The class provides functionality to initialize the templates and filter them. The method getValidTemplates filters and returns templates that meet certain criteria based on the columns provided, utilizing the isValidTemplate method of the Template class. +│ │ │ │ ├── SchemaCSVPopUp.tsx – The SchemaCSVPopUp component is a React class component, enhanced with MobX for state management, used within the Dash environment to display a pop-up for a Data Visualization Document derived from a CSV schema. It maintains observable properties for the document, view, target, and visibility state, allowing dynamic updates and user interaction. The component includes functions for rendering a draggable data visualization image and a close button. Additionally, it uses the ClientUtils and DragManager for handling drag events and interactivity. +│ │ │ │ ├── TemplateDocTypes.tsx – This file defines the TypeScript component types for templates used in the DataVizBox view of the Dash client application. These types ensure that the template document components maintain consistent structures and properties, aiding in the rendering and manipulation of data visualization elements. The file supports the system's ability to handle various document templates effectively, ensuring interoperability and integration across different components within the Dash system. +│ │ │ │ ├── components +│ │ │ │ │ ├── Histogram.tsx – This TypeScript React component, `Histogram`, represents a histogram visualization within the Dash application. It leverages D3 for drawing the chart and MobX for state management. The component processes numerical and categorical data to render bars depicting frequencies or quantities. Users can interact with the histogram by selecting bars, altering bar colors, and updating the graph title. The component also synchronizes selections with a parent data visualization, supporting dynamic data visualization workflows on Dash's hypermedia canvas. +│ │ │ │ │ ├── LineChart.tsx – This file defines a TypeScript class `LineChart`, which is a React component observed by MobX to render and manage a line chart visualization. The component processes data records, calculates axes, and generates an SVG-based chart using D3.js. It supports user interaction such as tooltips, data selection, and annotations, with a focus on dynamic updates and user feedback. The class uses observables and computed values to optimize rendering and manage the chart state, ensuring interactive and responsive visual representation of data. +│ │ │ │ │ ├── PieChart.tsx – This TypeScript file defines a "PieChart" component for rendering pie charts using React, MobX, and D3. It provides various functionalities, including the ability to filter and organize pie chart data based on categories or numerical values, manage selections and hover states for individual pie slices, and update visual states dynamically in response to interactions. Additionally, it features configurable options such as customizable slice colors and the ability to toggle between standard and histogram mode for data organization. The component integrates with other parts of the system for dynamic document linkage and state management. +│ │ │ │ │ └── TableBox.tsx – The `TableBox` component in Dash is a React-based, observable component designed to manage and display data in a tabular format. It utilizes MobX for state management, enabling real-time data binding and reactions to changes. Key features include row selection and filtering, the ability to designate title columns, and handling user interactions like scrolling and dragging columns to create new visualizations. The component ensures that only relevant data is displayed, responding to updates from parent visualizations and managing selection states and filters. +│ │ │ │ └── utils +│ │ │ │ └── D3Utils.ts – This TypeScript file in the Dash project's codebase provides utility functions for data visualization using D3.js. It defines a utility to calculate the minimum and maximum values for x and y coordinates from a set of data points. The file includes functions to create categorical and numerical scales, as well as to generate line charts with specified x and y scales. Additional functions are provided for creating and formatting the x and y axes, establishing grid lines, and drawing lines on SVG paths. This file facilitates the integration of D3.js for dynamic and interactive visual data representations. +│ │ │ ├── DiagramBox.tsx – The DiagramBox component in the Dash hypermedia system extends the ViewBoxAnnotatableComponent class to integrate a diagram creation tool powered by Mermaid, a diagramming and charting library. It manages the state related to generating and displaying Mermaid code through user input or gestures on the canvas. The component initializes Mermaid configurations and reacts to document changes to render diagrams. It also utilizes GPT for generating Mermaid code from user-defined prompts and handles asynchronous rendering of the diagrams within the application, enhancing visual planning and arrangement capabilities. +│ │ │ ├── DocumentContentsView.tsx – The DocumentContentsView.tsx file defines React components for rendering the contents of documents in the Dash system. It utilizes MobX for state management and provides a range of properties for customizing document appearance and behavior, such as layout templates and interaction options like click and input scripts. The HTMLtag component translates customized HTML-like tags into actual HTML, processing embedded scripts within properties to dynamically render content. This setup allows for flexible, script-driven document rendering on a web-based canvas. +│ │ │ ├── DocumentIcon.tsx – The file defines two React components, `DocumentIcon` and `DocumentIconContainer`, utilizing MobX for state management and monitoring. `DocumentIcon` renders an icon for a document within a draggable canvas using a tooltip displaying the document's title. The component activates MobX observables to manage hover state. `DocumentIconContainer` wraps the `DocumentIcon` components and employs a TypeScript transformer to manage dynamic document references, allowing JavaScript access to document data within the application runtime. +│ │ │ ├── DocumentLinksButton.tsx – The `DocumentLinksButton` component is a React component in the Dash hypermedia system that facilitates the creation and management of links between documents on the canvas. It uses MobX for state management and supports functionalities like starting and stopping link creation, drag-and-drop linking, and displaying link counts. The component also integrates with other tools like the `DragManager` and `LinkManager` to handle complex interactions such as dragging and dropping links, as well as providing visual feedback through tooltips and completion notifications. +│ │ │ ├── DocumentView.tsx – The `DocumentView.tsx` file defines components for rendering and interacting with documents in the Dash hypermedia system. It primarily features the `DocumentViewInternal` and `DocumentView` classes, integrating TypeScript/React to manage document display, interactions, and animations. The components manage document rendering with styles and animations, handle user interactions such as clicking and dragging, and enable complex operations like contextual menus, managing document links, and adjusting display properties based on document attributes. Additionally, it supports features like AI-powered editing interfaces and custom document views. +│ │ │ ├── EquationBox.tsx – The `EquationBox` component extends the `ViewBoxBaseComponent` and is enhanced with MobX and React functionalities. It provides a UI for displaying and editing math equations using the `EquationEditor`. Features include setting focus when loaded, handling key events for navigation and document creation, and dynamically resizing based on content. The component integrates with the document system, allowing equations to be added or removed and maintaining aspect ratios during resizing. It also ensures proper style application through computed properties like `fontSize` and `fontColor`. +│ │ │ ├── FieldView.tsx – The FieldView component in this TypeScript/React file handles rendering different types of fields within a document context. It supports a variety of field types including Doc, DateField, List, and WebField, and displays them in different formats based on their type. The component uses MobX to compute field values and can perform actions like redrawing itself or handling specific user interactions such as clicks and drags. This file also defines specific properties and shared behaviors for FieldView components, particularly in the context of document display and interaction management. +│ │ │ ├── FocusViewOptions.ts – This TypeScript file defines the interface FocusViewOptions which provides various options for managing focus transitions in the Dash hypermedia system. The options include settings for panning, zooming, handling document transformations, and managing animations or effects when focusing on documents. Additional parameters such as whether to select the target document or play media upon focusing are also included. The file also contains a function, FocusEffectDelay, which calculates a delay based on the zoom time to allow the highlight effect to be more visible by centering the document beforehand. +│ │ │ ├── FontIconBox +│ │ │ │ ├── FontIconBadge.tsx – The FontIconBadge component is a React component enhanced with MobX for state management, used to display a badge containing a font icon in the application. The component accepts a single prop 'value', which can be a string or undefined, and conditionally renders the badge only if the value is defined. It includes a reference to a HTMLDivElement for potential DOM operations and features commented-out code for pointer event handling, suggesting intended functionality for drag-and-drop interactions, which is currently inactive. +│ │ │ │ ├── FontIconBox.tsx – The `FontIconBox.tsx` file defines a React component called `FontIconBox`, which is a UI component part of the Dash system. It inherits from `ViewBoxBaseComponent` and uses MobX for state management. The component renders various types of customizable buttons (e.g., dropdowns, toggle buttons, color pickers) using the `ButtonType` enum. It interacts with scripts defined within documents to manage its state and behavior. The component supports different features like templates, customizable dropdown and button items, and provides context menus and tooltips based on document properties. +│ │ │ │ └── TrailsIcon.tsx – The `TrailsIcon.tsx` file defines a React functional component named `TrailsIcon` that returns an SVG element representing a complex icon. The SVG's path elements detail the icon's intricate design and its fill color is customizable through the `fill` parameter. This component is likely used to render a specific icon within the application, possibly part of the trail creation or visualization feature in the Dash system. The component is exported as the default export, making it reusable throughout the application. +│ │ │ ├── FunctionPlotBox.tsx – The file `FunctionPlotBox.tsx` contains a React component that integrates with the `function-plot` library to render interactive mathematical plots. It utilizes MobX for state management and listens to changes in properties like graph functions and layout dimensions to update the graph accordingly. The component supports setting up drop targets for document interaction and provides utilities to extract anchor information for annotations. It extends `ViewBoxAnnotatableComponent` and includes computed properties and MobX reactions to manage its extensive functionality. +│ │ │ ├── IconTagBox.tsx – The IconTagBox component in the Dash hypermedia system renders interactive icon tags beneath documents. These icons are dynamically displayed based on document metadata. Users can add or remove tags via the setIconTag method, which updates the document metadata and supports undo functionality. The component also includes a method to render audio annotation controls, providing an interface to play annotations. Overall, IconTagBox facilitates user interaction with document tags and annotations on the Dash canvas. +│ │ │ ├── ImageBox.tsx – The ImageBox.tsx file defines a React component for managing and displaying images within the Dash hypermedia system. This component incorporates various features such as image caching, rotation, resizing, and outpainting using AI. The class uses MobX for state management, including observable properties and computed values to track changes and update the UI dynamically. The component supports image editing, implements a context menu for additional functionalities, and integrates AI-based image generation and editing capabilities. These features make it a versatile tool for handling images in nonlinear document workflows. +│ │ │ ├── KeyValueBox.tsx – The `KeyValueBox.tsx` file defines a React component named `KeyValueBox` that utilizes MobX for state management to facilitate key-value pair management in the Dash hypermedia system. This component allows users to interact with documents by adding, scripting, and arranging data as key-value pairs. The component supports both static key-value pairs and dynamically computed or scripted fields, facilitating advanced document customization. Additionally, the file provides utility functions for compiling and applying scripts to document fields and allows adjusting the UI layout through a draggable divider. +│ │ │ ├── KeyValuePair.tsx – This file defines a React component named KeyValuePair within the Dash hypermedia code-base. It represents a single row in a key-value display plane, using `mobx` to manage its state with observables and actions. The component allows interaction through a checkbox and a context menu, providing functionality like opening fields and undoing changes. Rendered with tooltips, the keys and values are styled and displayed based on their properties and hierarchy in the document, offering intuitive visual feedback to users. +│ │ │ ├── LabelBox.tsx – The LabelBox.tsx file defines a React component that extends the ViewBoxBaseComponent to render and manage label boxes within the Dash application. It utilizes MobX for state management, allowing it to observe and react to data changes. The component features functions for rendering text that fits within a box, managing drag-and-drop operations, and maintaining focus on specific elements. Additionally, it is capable of handling various styles and text transformations, and it integrates rich-text functionalities through the RichTextMenu and FormattedTextBox classes. It also supports undoable actions on text changes, enhancing user interaction flexibility. +│ │ │ ├── LinkBox.tsx – The LinkBox component in this TypeScript file is part of a hypermedia system allowing dynamic linking between document elements on a canvas. It uses MobX for state management and Xarrow to render arrows between linked items, keeping track of their positions and visibility. The component supports animated transitions, maintains focus during interactions, and conditionally renders arrows based on element visibility and parent relationships. Styles are applied dynamically based on various document properties, and the component integrates with other document systems like RichTextMenu for editing interactions. +│ │ │ ├── LinkDescriptionPopup.tsx – This TypeScript file defines a React component, LinkDescriptionPopup, which serves as a popup interface for adding or editing link descriptions. It uses the MobX library for state management, observing variables that track the popup's display status, position, and the description text. The component listens for pointer events to handle user interactions, such as dismissing the popup or updating link descriptions. The render method conditionally displays a structured HTML input form based on the component's state, enabling users to input link descriptions interactively. +│ │ │ ├── LinkDocPreview.tsx – This TypeScript file defines a React component, `LinkDocPreview`, which is part of the Dash hypermedia system. The component serves to preview documents linked via hyperlinks or URLs, adjusting display dimensions according to the linked document's dimensions. It supports features like rendering tooltips with summaries from Wikipedia and navigating through multiple hyperlinks. The component manages document linking and preview using MobX for state management and integrates utility functions for document handling and UI updates. +│ │ │ ├── LoadingBox.tsx – The LoadingBox component serves as a placeholder for documents being uploaded or fetched by the client in the Dash hypermedia system. It utilizes MobX for state management to track the upload progress and handles potential errors, such as upload interruptions, by providing user feedback. The component renders a loading spinner while a document is uploading and updates its state based on network queries. Additionally, it includes design considerations and outlines several TODOs for future improvement, including error handling and UI refinements. +│ │ │ ├── MapBox +│ │ │ │ ├── AnimationSpeedIcons.tsx – This TypeScript file defines three JSX elements: `slowSpeedIcon`, `mediumSpeedIcon`, and `fastSpeedIcon`, which are SVG graphics representing animation speed indicators in a map feature. Each icon is constructed using SVG path data to create distinct shapes and styles, with the medium and fast icons sharing a consistent template but differing in certain details. These icons are likely used within the application's interface to visually convey different animation speeds to the user. +│ │ │ │ ├── AnimationUtility.ts – This file defines the `AnimationUtility` class, designed to facilitate geographical animations and camera transitions using Mapbox features. It utilizes various packages like Turf.js for geometric computations and D3.js for easing transitions. The class manages animation states, such as bearing, pitch, and altitude, for both standard and street view animations. It features methods for updating animation speed, setting paths, and calculating camera positions during transitions, ensuring smooth visual experiences for route animations on maps. +│ │ │ │ ├── DirectionsAnchorMenu.tsx – The DirectionsAnchorMenu component is a React observer class extending the AntimodeMenu. It handles rendering a directions menu interface, including input fields for origin and destination, and icon buttons for adding routes or calendar events. The class utilizes MobX for reactive state management and manages lifecycle events through reaction(). Various placeholder or unimplemented methods suggest potential functionalities for handling interactions like dragging or highlighting. Additionally, setPinDoc sets the title based on a document's longitude and latitude or title properties, logged to the console. +│ │ │ │ ├── GeocoderControl.tsx – This TypeScript file defines a GeocoderControl component for integrating a geocoding feature within a Mapbox map using React. It imports necessary dependencies from the Mapbox GL and Mapbox Geocoder libraries and sets up a control with customizable props such as accessToken, marker, position, and event handlers for geocoding results. The component uses the `useControl` hook to manage the geocoder instance and adjusts various settings based on props. Default behaviors for the component are specified using defaultProps to provide flexibility in its usage. +│ │ │ │ ├── MapAnchorMenu.tsx – The file defines a `MapAnchorMenu` component, an extension of `AntimodeMenu`, used for managing map-related interactions like setting pins, routes, and customizing the MapBox view in the Dash hypermedia system. It includes functionality for selecting and setting map pins, creating routes with different transportation modes, customizing map marker icons and colors, and linking notes to map features. The component utilizes React and MobX for state management and reactivity, providing a user interface for managing map annotations with buttons for actions like adding routes to a calendar and toggling marker customization modes. +│ │ │ │ ├── MapBox.tsx – The MapBox.tsx file defines a React component, "MapBox", which extends the "ViewBoxAnnotatableComponent" within the Dash hypermedia system. This component integrates Mapbox features to allow users to interact with geospatial data on a map. It supports functionalities like adding and managing map markers, overlaying routes, and supporting animations along defined paths. The MapBox component allows users to drag and drop documents with EXIF data onto the map, creating markers and annotations. It interacts with the Mapbox API to provide dynamic map styling, terrain toggling, and geocoding capabilities for enhanced user engagement. +│ │ │ │ ├── MapBox2.tsx – The MapBox2 component in this file is an extension of the ViewBoxAnnotatableComponent and integrates Google Maps API for location functionality in the Dash application. It allows users to interact with maps by adding markers, panning, zooming, and using street view. The component also interfaces with the application's document architecture, enabling drag-and-drop functionality for documents with GPS data, which can be added to both the sidebar and map as markers. Additionally, it supports sidebar interactions for displaying and managing document annotations related to map markers. +│ │ │ │ ├── MapBoxInfoWindow.tsx – The 'MapBoxInfoWindow.tsx' file defines a React component 'MapBoxInfoWindow', which is an observer class designed to function within a MapBox environment. The component handles the display of an information window on a map that can render documents related to a specific location. It provides actions such as adding or removing notes or documents attached to a map marker. The component uses mobx for state management and interacts with document collections within the application, featuring a note-taking interface through events like 'addNoteClick'. +│ │ │ │ ├── MapPushpinBox.tsx – This TypeScript/React file defines a component called `MapPushpinBox` that extends `ViewBoxBaseComponent` with `FieldViewProps`. It is used to manage pushpin elements on a map within the Dash application. The component adds a pushpin to a map when it mounts and removes it upon unmounting, utilizing methods from the `MapBoxContainer`. It also provides a layout configuration for pushpin document types, associating the `MapPushpinBox` with specific data fields and options for document management. +│ │ │ │ ├── MapboxApiUtility.ts – This TypeScript file defines the MapboxApiUtility class, which provides utility functions to interact with the Mapbox API for geocoding and directions. It includes static methods for forward geocoding, reverse geocoding, and retrieving directions for different transportation types such as driving, cycling, and walking. The class converts raw data from the API into more readable formats by converting distances to miles and durations to hours and minutes. Error handling is minimal and requires improvement. +│ │ │ │ └── MarkerIcons.tsx – This TypeScript file defines a class `MarkerIcons` that manages icons for map markers using FontAwesome icons. It provides a static method `getFontAwesomeIcon` to retrieve a JSX element of a specific icon based on a key, size, and optional color parameters. The icons are mapped to various map features like restaurants, hotels, and transportation via a static object `FAMarkerIconsMap`, using FontAwesome's solid and branded icon sets. The file also includes commented-out code for generating a custom SVG map marker icon. +│ │ │ ├── MapboxMapBox +│ │ │ │ └── MapboxContainer.tsx – The MapBoxContainer component in Dash is a React component that incorporates map functionalities with document management. It integrates Mapbox and Bing Maps to allow users to add, remove, and manage map markers that can be linked to documents. The component handles map interactions, including geocoding, map view updates, and sidebar document manipulation, while supporting features like dragging to create map pins and toggling the sidebar for a non-linear workflow. Annotations and interactions with the map update the underlying data structure, providing a spatial arrangement to documents based on their geolocation data. +│ │ │ ├── OpenWhere.ts – This TypeScript file defines two enums, OpenWhereMod and OpenWhere, which specify different modes and locations for opening views in the Dash hypermedia system. OpenWhereMod lists various modifiers such as 'none', 'left', 'right', and 'always', which dictate adjustments or fixed strategies for opening views. OpenWhere includes options like 'lightbox', 'add', 'toggle', and 'replace' to specify how and where a document or media should be opened within the user interface. Together, these enums support dynamic and flexible arrangement of content on Dash's canvas-based environment. +│ │ │ ├── PDFBox.tsx – The PDFBox.tsx file defines the PDFBox component, a React class component that extends the ViewBoxAnnotatableComponent for rendering and interacting with PDF documents within the Dash system. It utilizes MobX for state management and supports features such as searching and navigation within PDFs, toggling a sidebar for additional document handling, and rendering PDF pages via the PDFViewer component. The component manages caching and loading of PDF documents, provides UI elements for user interaction, and handles various document integration aspects such as annotations and cropping. +│ │ │ ├── PhysicsBox +│ │ │ │ ├── PhysicsSimulationBox.tsx – The PhysicsSimulationBox component is a React-based implementation that simulates various physical scenarios, like inclines, pendulums, springs, and pulleys, using MobX for state management. It provides three modes: Tutorial, Freeform, and Review, each offering different levels of control and interaction for users to adjust simulation parameters such as forces and angles. The component allows for real-time adjustments and visualization of physical forces, calculations, and trajectories, enhancing the educational exploration of physical principles. It also includes a UI for visually controlling simulation elements and settings. +│ │ │ │ ├── PhysicsSimulationInputField.tsx – This TypeScript file defines an InputField React component designed for inputting simulation values, particularly for physics applications involving numerical ranges and units of measurement. It supports both degree and radian inputs, offering conversion between these units. Features include range constraints, optional label and icons for correctness indication, and configurable input fields. The component manages its state to handle input changes, and triggers side effects via a provided callback function when values are altered. +│ │ │ │ ├── PhysicsSimulationWall.tsx – This TypeScript file defines a React component for a "Wall" used in a physics simulation. It represents a wall with configurable position, length, and angle on a canvas. The component uses its properties to dynamically style a div element to visually represent the wall, either as a horizontal or vertical bar depending on the specified angle. The component ensures the wall is positioned and sized correctly as per the provided attributes, offering a visual cue in physics simulations. +│ │ │ │ └── PhysicsSimulationWeight.tsx – This TypeScript/React component, named 'Weight', simulates physical interactions of a weight object within a physics simulation environment, using the MobX state management library. The component handles different types of physical simulations, including inclined planes, pendulums, and circular motion, by calculating forces, positions, and velocities. It incorporates user-interaction features, allowing the weight to be dragged and dropped within the canvas. It also manages the visual rendering of forces, vectors, and other simulation elements, adapting to different user-specified simulation settings and physical parameters. +│ │ │ ├── RadialMenu.tsx – The `RadialMenu` component is a React-based interface element that provides a circular menu for users to interact with. It uses MobX for state management, featuring observable properties to track mouse positions and menu display states. The component handles pointer events to initiate and close the menu and selects items based on radial direction. Upon item selection, a user-defined event is triggered. The menu visuals are rendered on an HTML5 canvas, showing descriptions of the menu items within the circular element. +│ │ │ ├── RadialMenuItem.tsx – The RadialMenuItem.tsx file defines a React component, RadialMenuItem, which is part of a radial context menu in a web application. This component uses MobX for state management and FontAwesome for icons. It includes methods to set up and update a circular menu item on a canvas element, with position and color adjustments based on props. The component handles events, potentially logging them with an undo manager, and supports dynamic positioning of icons within the menu using trigonometric calculations for canvas animations. +│ │ │ ├── RecordingBox +│ │ │ │ ├── ProgressBar.tsx – The ProgressBar component in this file manages the visual representation of video segments for recording and editing. It uses React hooks to handle state such as the order of segments, tracking of dragged elements, and managing an undo stack for segment removals. The component adjusts the segments' appearance during recording or when segments are dragged and rearranged. Additionally, it logs segment removal and swap operations, providing visual feedback and drag-and-drop functionality, including re-ordering of video segments based on user interactions. +│ │ │ │ ├── RecordingBox.tsx – The RecordingBox component is a React component, leveraging MobX for state management, designed for capturing and managing screen or webcam recordings within the Dash hypermedia system. It allows users to start, stop, and manage recordings, converting recorded data into a structured video format. The component integrates with other system components to handle media controls and overlay management, ensuring recorded elements are correctly added and removed from the user's workspace. Additionally, it interacts with global scripting functions to automate recording processes and provide a seamless user experience. +│ │ │ │ ├── RecordingView.tsx – This TypeScript React component, `RecordingView`, provides functionality to record videos using the browser's media devices. It manages video recording sessions, allowing users to start, pause, and finish recordings. The component maintains and manipulates video segments, supporting video concatenation and presentation tracking via screen capture. Additionally, it handles recording state and updates a progress bar to reflect recording progress. The `RecordingView` supports browser-based media constraints and alerts users to unsupported configurations, ensuring compatibility and functionality across different environments. +│ │ │ │ └── index.ts – This file serves as an aggregation and re-export module for the components located in the same directory, specifically those from 'RecordingView' and 'RecordingBox'. By exporting these components from a single entry point, it simplifies the import statements in other parts of the application, making it easier to manage dependencies and maintain the codebase. This approach is common in TypeScript projects to streamline component usage and improve code organization. +│ │ │ ├── ScreenshotBox.tsx – The ScreenshotBox component in Dash is a React component that allows users to capture and manipulate screen recordings within the hypermedia environment. It extends functionality from the FieldView component and integrates media recording capabilities using the MediaRecorder API for both audio and video capture. The component handles the initialization and cleanup of media resources, saving captures to the server, and transitioning captured media into a playable video format. Additionally, it supports configuration and interaction through a specialized context menu and UI buttons for controlling recording operations. +│ │ │ ├── ScriptingBox.tsx – The ScriptingBox component in the Dash hypermedia system allows users to write, compile, and run scripts within a dynamic user interface. It uses MobX for state management of script-related properties, including error messages, parameters, and suggestions. The component provides features like parameter input, auto-completion, and type checking. It also supports script compilation and execution with error handling, enabling users to create and manage script functions directly within the application, enhancing the user interaction with scripting functionalities. +│ │ │ ├── SliderBox-components.tsx – The file defines several React components for a slider UI, including TooltipRail, Handle, Track, and Tick. TooltipRail manages mouse events to display a tooltip with the current slider value, while Handle renders a draggable slider element with a tooltip that appears when active or hovered over. Track creates the visual track between slider handles, adjusting its CSS for active or disabled states. Tick positions markers along the slider, formatting their labels with a customizable function. +│ │ │ ├── TaskCompletedBox.tsx – The TaskCompletedBox component is a React component utilizing MobX for state management, particularly for tracking the completion status of a task. The component uses the "@observer" decorator to observe changes, and it provides static observable properties to manage the position and displayed text of a popup box. The "@action" decorator is used for the toggleTaskCompleted method, which switches the task's completion status. The component renders a fade-in effect for the popup using the Fade component from Material-UI, positioned based on the static properties. +│ │ │ ├── VideoBox.tsx – The `VideoBox.tsx` file defines a React component `VideoBox`, which manages the playback, control, and annotation of video files within the Dash hypermedia system. It incorporates MobX for state management and features such as trimming, playing, pausing, seeking, and more, through methods such as `Play`, `Pause`, and `Seek`. It also provides functionality for full-screen playback and control toggling, as well as non-destructive video trimming and snapshot capturing. The component is part of a broader system supporting multimedia integration in a free-form digital workspace. +│ │ │ ├── WebBox.tsx – The WebBox component in the code handles the embedding and manipulation of web content within a Dash document. It allows for the integration of a web page inside an iframe, supporting features like bookmarking, searching, annotation, and navigation using actions like forward and back. The component manages the loading, resizing, and error handling of web content while ensuring a smooth user experience through functionalities such as smooth scrolling. It also interfaces with the sidebar for document annotation and navigation within a web-based collection. +│ │ │ ├── audio +│ │ │ │ ├── AudioWaveform.tsx – The `AudioWaveform` component in this TypeScript file visualizes audio waveforms for media clips in the Dash hypermedia application. It utilizes MobX for state management and reactively manages audio data processing based on clip boundaries and zoom levels. The component divides the audio data into buckets to generate the waveform visual, fetching and processing this data asynchronously via axios and the Web Audio API. As the component mounts, it sets up reactions to update waveforms when relevant clip or zoom properties change. +│ │ │ │ └── WaveCanvas.tsx – The `WaveCanvas` component is a React class component designed to render audio waveforms on a canvas element. It accepts several properties, including `barWidth`, `color`, `progress`, `progressColor`, optional `gradientColors`, `peaks`, `width`, `height`, and `pixelRatio`. The component provides methods to draw either bar or wave representations of audio peaks, supporting transformations for peak data to enhance visualization, such as reflecting negative peaks. The canvas rendering is dynamically adjusted based on the provided properties, ensuring crisp lines and scalable dimensions. +│ │ │ ├── calendarBox +│ │ │ │ └── CalendarBox.tsx – The CalendarBox component in this file is a React component leveraging FullCalendar to render and manage calendar views within the Dash hypermedia system. It supports multiple calendar views, including multi-month, day grid month, and time grid week/day, depending on the context data. The component makes use of MobX for state management, allowing events and date selections to dynamically react to data changes. The calendar handles various interactions such as event clicks, drops, and context menus, integrating deeply with the document management system. +│ │ │ ├── chatbot +│ │ │ │ ├── agentsystem +│ │ │ │ │ ├── Agent.ts – The "Agent" class in this file is responsible for managing interactions between a virtual assistant and various tools, leveraging OpenAI's capabilities. It initializes with components like a vector store and toolset, processes user queries, and manages the communication flow with the OpenAI client. The class supports real-time processing of streamed responses and ensures that the assistant's responses conform to a specific XML structure. It includes several tools for tasks such as calculations, data analysis, and document metadata handling, enabling complex decision-making and action execution based on user queries. +│ │ │ │ │ └── prompts.ts – This TypeScript file defines functions for creating prompts used in AI assistant interactions within the Dash system. It includes functions like `getReactPrompt`, which structures system messages that guide an AI in responding to user queries using tools and a predetermined rigid format to ensure consistency in structuring responses, using citations, and performing tasks. Additionally, `getSummarizedChunksPrompt` and `getSummarizedSystemPrompt` generate prompts for summarizing document chunks, aiming for conciseness and capturing the essence of provided text pieces. The file emphasizes proper format handling, citation, and workflow structure in AI responses. +│ │ │ │ ├── chatboxcomponents +│ │ │ │ │ ├── ChatBox.tsx – The ChatBox.tsx file defines a React component that handles interaction with an AI assistant for chat and document processing in the Dash hypermedia system. The component integrates with the OpenAI API for tasks such as document analysis and real-time chat responses, and manages various document types such as PDFs, videos, and audios using a vector store and MobX state management. Key features include document uploads, tracking chat history, and enabling follow-up question management. It provides a user interface offering functionality like font size adjustment, message input, and citation management. +│ │ │ │ │ └── MessageComponent.tsx – This file defines the MessageComponentBox, a React functional component enhanced with MobX for state management. It is responsible for rendering different types of content from assistant messages, such as grounded text with citations, normal text, and follow-up questions. The component handles user interactions like citation clicking and follow-up question triggers. Additionally, it can display processing information such as agent thoughts or actions, toggled via a dropdown interface. The component supports markdown rendering using the ReactMarkdown library. +│ │ │ │ ├── response_parsers +│ │ │ │ │ ├── AnswerParser.ts – The AnswerParser.ts file contains the AnswerParser class, which is designed to process XML-like structured responses from an AI system. It extracts core components such as grounded text, normal text, citations, follow-up questions, and loop summaries, transforming them into an AssistantMessage format. The parser utilizes regular expressions to parse various sections of the response, assigning unique identifiers to citation elements and organizing content accordingly. This structured approach facilitates the incorporation of extracted data into the assistant's workflow, enhancing response processing and user interaction. +│ │ │ │ │ └── StreamedAnswerParser.ts – The StreamedAnswerParser.ts file defines a class for parsing incoming character streams to differentiate between grounded and normal text, which are marked by specific tags in the stream. The parser maintains a state to distinguish when it is inside grounded text, normal text, or outside any tags, and processes characters to ensure correct formatting of AI responses. It manages a buffer for handling partial tag formations and processes each character to construct the final parsed result, with functionality to reset the parser state as needed. +│ │ │ │ ├── tools +│ │ │ │ │ ├── BaseTool.ts – The file `BaseTool.ts` defines an abstract class `BaseTool`, serving as a blueprint for implementing tools in an AI assistant system. This class outlines essential properties such as the tool's name, description, parameter definitions, and citation rules. It requires subclasses to implement the `execute` method, which performs the tool's primary function. Additionally, it provides mechanisms for action rule generation and input validation, facilitating dynamic documentation or runtime parameter exposure in the AI system. +│ │ │ │ │ ├── CalculateTool.ts – This TypeScript file defines a CalculateTool class that extends the BaseTool class, allowing for the execution of mathematical expressions. It specifies a single parameter, 'expression', required for the tool to function, which must be a string representing a mathematical calculation. The tool utilizes JavaScript's eval() function to execute the expression and returns the computed result as an Observation object. The eval function's use is noted to be potentially unsafe, suggesting a need for caution. +│ │ │ │ │ ├── CreateCSVTool.ts – The CreateCSVTool.ts file defines a class CreateCSVTool that extends BaseTool. This class is designed to create a CSV file from a given CSV string and save it to the server. The file includes parameters like 'csvData' and 'filename', and it ensures the filename ends with '.csv'. Upon execution, the tool sends data to the server using a POST request and handles the resulting URL and ID for the file, providing this information to a callback function for further processing. +│ │ │ │ │ ├── CreateLinksTool.ts – The CreateLinksTool.ts file defines a tool for creating visual links between multiple documents in the Dash system. It extends the BaseTool class and utilizes an AgentDocumentManager to manage document operations. The tool requires a list of document IDs to create links, ensuring at least two valid documents are specified. It verifies document existence and creates visual links by connecting related documents, returning confirmations or error messages based on the operation's success. The tool's parameters and information are defined in a static structure. +│ │ │ │ │ ├── DataAnalysisTool.ts – This TypeScript file defines the DataAnalysisTool class, which extends the BaseTool with a focus on analyzing CSV files. It uses a list of parameters that specify which CSV files to analyze, defined through the dataAnalysisToolParams. The class is designed to retrieve the content and ID of CSV files via a callback function, csv_files_function, and execute analysis by iterating over user-specified filenames. It returns textual observations including either the file content or a not-found message, integrated into a specialized HTML-like chunk format. +│ │ │ │ │ ├── DocumentMetadataTool.ts – The DocumentMetadataTool.ts file defines a class for managing document metadata within a Freeform view in the Dash system. This tool allows users to perform actions such as retrieving document metadata, editing document fields, getting field options, and creating new documents. The tool validates input parameters for these actions and provides detailed guidelines and examples for interacting with and modifying document properties. The class uses an AgentDocumentManager to interface with documents and ensures all operations handle dependencies and data types correctly. The file emphasizes ensuring edits are performed accurately by addressing field dependencies and providing structured responses. +│ │ │ │ │ ├── GetDocsTool.ts – This TypeScript file defines a class, `GetDocsTool`, extending from `BaseTool`. The class is part of a chatbot's tools in Dash, a hypermedia system. It facilitates the retrieval of document contents based on specified document IDs and organizes them into a collection with a given title. The class uses various utility functions to fetch and create document collections, and updates the document view by adding a new tab with the retrieved collection, enhancing the user's interaction and document management experience within the Dash platform. +│ │ │ │ │ ├── ImageCreationTool.ts – The code defines an ImageCreationTool class, which extends BaseTool, for generating images based on detailed textual prompts. It utilizes AI image generators to create images, with the process being initiated by sending the prompt to a server endpoint. On successful image generation, the image is processed and made accessible via a URL. If there's an error during generation, it provides a text-based error response. The class is designed to handle asynchronous operations and utilizes strict typing for parameters. +│ │ │ │ │ ├── NoTool.ts – The 'NoTool.ts' file defines a placeholder tool for a chatbot in the Dash system, which inherits from the BaseTool class. It serves as a null-operation tool, meaning it is used when no action is required, thereby ensuring other processes can complete their loops. The tool is defined with no parameters and returns a simple observation indicating that it performs no action. This setup allows the system to handle scenarios where an operation is technically required but no actual processing is needed. +│ │ │ │ │ ├── RAGTool.ts – The RAGTool class, extending the BaseTool, implements a Retrieval-Augmented Generation (RAG) mechanism to extract relevant content chunks from user documents such as PDFs, audio, and video. It uses a Vectorstore to search for document vectors that match a hypothetical document chunk and retrieve content, aiming to create grounded responses for user queries. The RAGTool also enforces strict citation guidelines to ensure that text chunks are accurately cited, maintaining the exact wording and offering structured responses. The tool requires specific input parameters and uses networking to format and return the relevant document chunks. +│ │ │ │ │ ├── SearchTool.ts – This TypeScript file defines a "SearchTool" class, which extends the "BaseTool" class and is designed to conduct web searches. It uses parameters such as a list of search queries to find websites, returning them as summarized results. The class makes HTTP requests using the "Networking" module to perform searches, adds search results to a document manager for indexing, and processes the responses in a structured format. The tool also ensures proper citation of search results when relevant to the content. +│ │ │ │ │ ├── WebsiteInfoScraperTool.ts – The WebsiteInfoScraperTool.ts file defines a tool for scraping detailed information from specified websites in response to user queries. It extends a BaseTool and utilizes an AgentDocumentManager to manage document scraping requests. The tool implements retry logic to handle failures in network requests or content retrieval, ensuring the return of meaningful text only when the quality of the data meets certain criteria. Additionally, the class enforces structured output tagging with guidelines for grounding citations to support the creation of informed, contextually supported responses. +│ │ │ │ │ └── WikipediaTool.ts – This file defines the `WikipediaTool` class, which extends the `BaseTool` class to interact with Wikipedia articles. It specifies that the tool accepts a parameter, the title of a Wikipedia article, and fetches a summary of the article. The tool uses the `Networking` module to post a request to a server endpoint '/getWikipediaSummary'. Upon successfully retrieving the article summary, it constructs a URL to the Wikipedia page, generates a unique ID, and adds a linked document reference. In case of errors, it logs the error and returns an error message. +│ │ │ │ ├── types +│ │ │ │ │ ├── tool_types.ts – This TypeScript file defines several types and an enumeration relevant to configuring parameters for tools in a chatbot context. The `Parameter` type outlines the configuration structure, specifying the parameter type, name, description, and requirement status, with optional max_inputs for array types. ToolInfo encapsulates metadata about a tool, including its parameter and citation rules. TypeMap maps string representations of types to their actual TypeScript counterparts, supporting the transformation of parameters into concrete types via ParamType and ParametersType. Additionally, supportedDocTypes enumerates various document formats that the system can handle. +│ │ │ │ │ └── types.ts – This TypeScript file defines types and interfaces for managing chatbot data in the Dash system. It includes enumerations for different roles, text types, chunk types, and processing types to categorize various aspects of messages and content handled by the chatbot. The file also provides interfaces for the structure of messages, such as 'AssistantMessage' and 'AgentMessage', which include details like message content, roles, citations, and processing information. Additionally, it defines structures for managing document-related data, such as 'RAGChunk', 'SimplifiedChunk', and 'AI_Document'. +│ │ │ │ ├── utils +│ │ │ │ │ └── AgentDocumentManager.ts – The `AgentDocumentManager` class in this TypeScript file manages documents within a freeform view in a hypermedia system. It uses MobX for observable state management and is responsible for initializing, processing, and handling metadata for documents connected to a ChatBox instance. The class handles linking documents, managing document IDs, and adding simplified chunks for citation. It provides methods to create new documents, extract and edit document metadata, and ensure proper linking and visibility within the document system, enhancing document manipulation and interaction capabilities in the application. +│ │ │ │ └── vectorstore +│ │ │ │ └── Vectorstore.ts – The Vectorstore.ts file defines a Vectorstore class that integrates with Pinecone for vector-based document indexing and OpenAI for text embeddings. It manages AI-related document processing tasks, such as adding documents, handling media files, combining document chunks, and indexing documents for efficient retrieval. The class supports retrieval of relevant document sections based on user queries by utilizing OpenAI to generate embeddings and Pinecone for vector similarity matching. It incorporates functionality for both media and regular text documents and handles various document states such as progress and completion. +│ │ │ ├── formattedText +│ │ │ │ ├── DailyJournal.tsx – The DailyJournal component in Dash is a React class component leveraging MobX for state management and enables users to create daily journal entries with predictive text features. It initializes with a formatted date as the title and offers a writing prompt area, supporting asynchronous GPT-generated text suggestions. The component includes functionality to dynamically add predictive questions after user pauses in typing, and it has cleanup mechanisms for removing suggested text. Additionally, it integrates GPT API calls for additional journal prompts with a user interface button. +│ │ │ │ ├── DashDocCommentView.tsx – This TypeScript file defines two classes, `DashDocCommentViewInternal` and `DashDocCommentView`, which facilitate inline commenting within a ProseMirror editor. The `DashDocCommentViewInternal` class extends React.Component to handle interactions such as pointer events for showing and hiding comments, and observes changes in document height via MobX reactions. The `DashDocCommentView` class is responsible for rendering these comments as DOM elements, managing their styles, and handling lifecycle methods like destroy and select. These classes provide functionality for creating, displaying, and interacting with comments attached to specific document nodes. +│ │ │ │ ├── DashDocView.tsx – This TypeScript file defines components for rendering a document view within the Dash system using React and MobX. The `DashDocViewInternal` class extends an observable React component and manages document updates, layout changes, and user interactions. The component utilizes MobX reactions to adjust the document's dimensions dynamically and handle document transformations and user inputs efficiently. The `DashDocView` class acts as a container and interface, setting up the DOM node and rendering the internal document view, while also managing node selection and lifecycle events. +│ │ │ │ ├── DashFieldView.tsx – The 'DashFieldView.tsx' file defines React components using MobX and ProseMirror to manage and render fields on a canvas within the Dash framework. It includes the main components 'DashFieldViewMenu' and 'DashFieldViewInternal', which handle user interactions like showing, hiding fields, and creating pivot views based on the fields' data. It leverages decorators to observe and react to state changes, and it integrates both a UI menu and interactive document field elements. This allows users to perform actions like toggling field visibility and interacting with document data in a dynamic, intuitive manner. +│ │ │ │ ├── EquationEditor.tsx – The "EquationEditor" component in this file is a React component that integrates a MathQuill-based equation editor into a React application. It uses jQuery and the MathQuill library to allow users to input mathematical formulas using LaTeX. The component takes props for managing changes, initial values, and configuration options like automatic command completion and operators. When the component mounts, it initializes the MathQuill field with the given configurations, allowing user interaction and triggering change events as necessary. +│ │ │ │ ├── EquationView.tsx – The `EquationView.tsx` file defines two classes, `EquationViewInternal` and `EquationView`, for rendering a mathematics equation editor within a ProseMirror editor. The `EquationViewInternal` component manages the instantiation and lifecycle of an `EquationEditor` instance, handling user interactions such as keyboard events. The outer `EquationView` class serves as a bridge, linking the ProseMirror node and editor to the React component, managing the DOM elements and their styling, and enabling focus and selection behaviors for the equation editor. +│ │ │ │ ├── FootnoteView.tsx – The FootnoteView class in this file is a custom ProseMirror view that manages the rendering and interaction of footnotes within the editor. It handles user interactions like selecting, deselecting, and toggling the visibility of footnotes through event listeners. It creates an "innerView" to display and edit the footnote content using a separate instance of EditorView. The class also manages transaction dispatching between the inner and outer editor views, ensuring seamless updates and changes are reflected appropriately. This component is crucial for allowing detailed and interactive footnotes in the Dash hypermedia system. +│ │ │ │ ├── FormattedTextBox.tsx – The FormattedTextBox component in the Dash hypermedia system integrates multiple functionalities to render, edit, and manage rich-text content. It leverages libraries such as ProseMirror for text editing, MobX for state management, and FontAwesome for UI icons. The component includes extensive support for text annotations, markdown options, and hyperlink management, with utility functions for handling input rules and layout settings. Additionally, it incorporates features for interacting with sidebars, enabling sidebar content management, and supporting drag-and-drop actions for text and documents. +│ │ │ │ ├── FormattedTextBoxComment.tsx – The FormattedTextBoxComment component is designed to handle comments and tooltips associated with formatted text in a document editor built with ProseMirror. It provides functionality to identify user and link marks within text, find start and end locations of these marks, and display a tooltip with relevant information, such as authorship details or hyperlink previews, when triggered by user interaction. Additionally, the component manages the preview setup for hyperlinks within the document, ensuring to differentiate whether internal or external links are used. It connects to other components like FormattedTextBox and DocServer for full functionality. +│ │ │ │ ├── OrderedListView.tsx – The OrderedListView TypeScript class in the Dash codebase is designed to manage the properties of an ordered list, specifically its attributes such as bullet style. The update method always returns false, ensuring that any changes to the attributes result in the DOM node being recreated. This recreation is necessary for properly updating bullet labels visually when attributes change. +│ │ │ │ ├── ParagraphNodeSpec.ts – This TypeScript file defines the ParagraphNodeSpec for a text editor built with the ProseMirror library, specifying a node type for paragraph elements represented as `<p>` tags in the DOM. It includes a NodeSpec definition with attributes for styling properties like alignment, indentation, line spacing, and padding, which can be parsed from or converted to DOM. Functions such as `getAttrs` and `toDOM` handle the translation between DOM attributes and the NodeSpec, using utility functions for CSS conversions and clamping indent levels. +│ │ │ │ ├── ProsemirrorExampleTransfer.ts – This TypeScript file is part of a larger system that utilizes ProseMirror, a toolkit for building rich text editors. It defines a set of customizable text manipulation and editing commands for a text editor component. These commands include managing lists, toggling text styles (bold, italic, underline), managing selections, and handling keyboard shortcuts. Additionally, the file provides a function to update the bullet styles in lists and defines logic for operations such as splitting and joining blocks, handling key events, and checking user permissions for editing. +│ │ │ │ ├── RichTextMenu.tsx – The `RichTextMenu` class is a complex component in the Dash hypermedia codebase, acting as an interface for text formatting features in the rich text editor. Leveraging ProseMirror for text editing operations, it manages various text styles such as bold, italic, underline, font size, and font color through observable states. It also supports advanced operations like hyperlink management and list styling, allowing users to format text dynamically. The component is integrated with MobX for state management and provides UI interactions using React components and FontAwesome icons. +│ │ │ │ ├── RichTextRules.ts – The RichTextRules class in this TypeScript file defines a variety of input rules for processing rich text content using the ProseMirror framework. It is designed to handle specific character sequences and convert them into structured text elements like blockquotes, ordered lists, bullet lists, code blocks, hyperlinks, and text attributes such as font size and alignment. The rules also support dynamic content generation, such as inserting annotations or creating hyperlinks to document titles. The class is part of Dash's custom text formatting capabilities, enhancing the interactive editing experience. +│ │ │ │ ├── SummaryView.tsx – This file defines two classes for handling summarized text within the Dash application. `SummaryViewInternal` is a simple React component that renders nothing, used internally by the `SummaryView` class to manage the display of summarized content. The `SummaryView` class handles user interactions to toggle the visibility of text blocks by expanding or collapsing them upon user clicks. It directly manipulates the ProseMirror editor's state by adjusting node attributes and facilitating user interaction with the document content through event handlers. +│ │ │ │ ├── marks_rts.ts – This TypeScript module defines mark specifications used in a rich-text schema for the Dash hypermedia system. It includes configurations for various text styles such as emphasis, strong, and code, as well as specialties like autoLinkAnchor and linkAnchor, which handle hyperlink metadata and display. The file uses ProseMirror libraries for parsing and rendering DOM elements associated with text marks, enabling features like text highlights, font manipulation, and user-specific annotations. These marks enhance text interaction and presentation within the Dash system, supporting complex document workflows. +│ │ │ │ ├── nodes_rts.ts – This TypeScript file defines various node specifications for a ProseMirror schema. These nodes include structures like paragraphs, headings, blockquotes, code blocks, and inline elements such as images, audio tags, and videos, allowing for rich-text formatting in the Dash hypermedia system. The file specifies both the DOM representation and parsing rules for each node, enabling conversion between HTML elements and editable content within the system. Notably, it also defines custom nodes for specific function, such as equations and Dash-specific comments and fields. +│ │ │ │ └── schema_rts.ts – This TypeScript file defines a document schema for formatted text using the ProseMirror library. The schema aligns with the CommonMark specification, excluding list elements, which are managed by another module. It imports nodes and marks from separate files to construct the schema. A modification is made to the nodeFromJSON method to handle summary nodes, converting serialized JSON into a runtime Slice. This adjustment involves a workaround for read-only attributes, reflecting customization for specific node types. +│ │ │ ├── imageEditor +│ │ │ │ ├── GenerativeFillButtons.tsx – This TypeScript file defines two React functional components, EditButtons and CutButtons, used in an image editor within the Dash hypermedia system. These components render a set of buttons for resetting, editing, and cutting images, with additional documentation links. The button functionality includes a loading indicator, displayed using the ReactLoading component, and relies on asynchronous actions triggered by onClick handlers. The components use a consistent color theme and integrate the ability to open documentation related to generative AI editing features. +│ │ │ │ ├── ImageEditor.tsx – The ImageEditor component in this file provides a React-based interface for editing images within the Dash hypermedia system. It integrates tools for generative fill, allowing users to use AI (GPT) to fill erased portions of an image based on custom prompts, and for cutting images in various ways to enhance creativity. The component supports undo and redo actions, as well as creating new collections for edited images. It also manages image transformation, including resizing, scaling, and applying edits on a canvas, and interfaces with the network to save and display edits. +│ │ │ │ ├── ImageEditorButtons.tsx – This file defines functional components for rendering buttons within an image editor in the Dash application. The `ApplyFuncButtons` component provides controls for applying edits, including a reset button, a customizable action button that indicates loading status, and a documentation link. The `ImageToolButton` component generates buttons for selecting image editing tools, highlighting active tools based on the user's selection. It leverages external icon libraries and user settings to customize button appearance and behavior, enhancing user interaction with the image editing features. +│ │ │ │ ├── imageEditorUtils +│ │ │ │ │ ├── BrushHandler.ts – The BrushHandler class in the provided TypeScript file manages the functionality related to drawing brush strokes on a canvas in the image editor component of the Dash application. It includes methods for overlaying brush circles and creating path overlays based on start and end points. Brush strokes are visualized as filled circles using the specified brush radius and color. It utilizes utility functions for calculating distances between points to generate smooth brush path overlays. +│ │ │ │ │ ├── GenerativeFillMathHelpers.ts – This TypeScript file defines a utility class, `GenerativeFillMathHelpers`, for the Dash project's image editor component. The class provides two static methods: `distanceBetween`, which calculates the Euclidean distance between two points, and `angleBetween`, which computes the angle between two points using the arctangent function. These methods are likely used to assist with geometric calculations needed for generative fill operations in the image editor. +│ │ │ │ │ ├── ImageHandler.ts – The ImageHandler.ts file defines the ImageUtility class, which provides a suite of static methods for managing and manipulating images within a web-based image editor. This utility can convert a canvas to a Blob, crop images, convert images to data URLs, and interact with the OpenAI API for image edits. Additionally, it offers mock API call functionality, image downloading, and canvas context management. Image padding with reflections is managed to fit images into square canvases, enhancing visual consistency in image editing processes. +│ │ │ │ │ ├── PointerHandler.ts – This TypeScript file defines the PointerHandler class which provides a utility method, getPointRelativeToElement. This static method calculates the position of a pointer event relative to a specified HTML element, considering a given scale factor. It uses the element's bounding box to accurately find the x and y coordinates based on the event's clientX and clientY properties. This utility aids in handling pointer interactions by translating raw event data into coordinates relevant to specific elements within the image editor context. +│ │ │ │ │ ├── imageEditorConstants.ts – This file defines several constants used in the image editor utility of the Dash system. It includes sizes for the canvas and rendering areas, as well as offsets for positioning elements. Additionally, it defines specific colors for active elements, the eraser, and the background, which are crucial for the visual configuration and user experience within the image editor component. +│ │ │ │ │ └── imageEditorInterfaces.ts – This TypeScript file defines interfaces and enumerations used in the image editing component of a hypermedia system. It includes ‘CursorData’ and ‘Point’ interfaces to represent geometric data, and enumerations ‘ImageToolType’ and ‘CutMode’ to categorize available image editing tools and cut modes. The ‘ImageEditTool’ interface allows definition of tools with associated properties and an application function. Additionally, it defines ‘ImageDimensions’ for specifying width and height of images. These structured interfaces and enumerations facilitate consistent tool functionality in image editing within the Dash system. +│ │ │ │ ├── imageMeshTool +│ │ │ │ │ ├── ImageMeshTool.ts – This file, located in the 'src/client/views/nodes/imageEditor/imageMeshTool/' directory, defines the ImageMeshTool component for the Dash hypermedia system. Its purpose is to provide functionality for editing images within the platform's canvas environment. The tool likely includes capabilities for manipulating image meshes, which may involve tasks such as resizing, rotating, or morphing images to fit within user-defined spatial arrangements. This aligns with Dash's focus on supporting complex, non-linear workflows with a variety of media types. +│ │ │ │ │ ├── imageMesh.tsx – This TypeScript file defines a functional React component, MeshTransformGrid, which is used to create a grid over an image for transformation purposes. The grid's dimensions are determined by the gridXSize and gridYSize properties, and it is composed of control points that can be interactively dragged if the isInteractive flag is set to true. The component calculates positions for these control points based on the image's dimensions and renders grid lines as well as draggable control points to manipulate the image appearance interactively. +│ │ │ │ │ └── imageMeshToolButton.tsx – This file defines the `MeshTransformButton` component, a React functional component within the Dash hypermedia system's image editor. It provides interactive controls for manipulating a grid overlay on an image to aid mesh transformations. The component includes a button to toggle the grid's visibility and interactivity, as well as a reset button. It also features an icon button for additional grid toggling, and displays the grid through another component, `MeshTransformGrid`. The grid’s size and image dimensions are configurable through props. +│ │ │ │ └── imageToolUtils +│ │ │ │ ├── BrushHandler.ts – The file BrushHandler.ts defines a utility class for handling brush operations in an image editor context within the Dash system. It includes an enumeration, BrushType, which specifies different brush modes such as generative fill and cut. The BrushHandler class provides static methods for creating visual brush strokes on a canvas, such as brushCircleOverlay for drawing circular overlays and createBrushPathOverlay for generating a path of brush strokes between two points. These methods employ canvas operations and integrate with other utility functions for distance calculations and style settings. +│ │ │ │ └── ImageHandler.ts – This file defines the ImageUtility class, which contains a collection of static methods for handling various image operations within the Dash hypermedia system. The class provides functionality to convert a canvas to a blob, crop images, generate canvas URLs, and handle image reflection for filling canvas padding. It also includes methods for interfacing with an OpenAI API for image edits, downloading images from a canvas, and converting URL images to base64 format. The utility supports operations such as drawing images to canvas and clearing canvas content. +│ │ │ ├── importBox +│ │ │ │ └── ImportElementBox.tsx – The ImportElementBox component is a React component that extends the ViewBoxBaseComponent class, using MobX for state management and observation. It's designed to render a document view, with components like DocumentView for displaying content. This component overrides a method to manipulate coordinate transformations using screenToLocalXf and conditionally renders the mainItem div only if the Document is an instance of Doc. It uses static methods for layout string formatting based on field keys, integrating with the FieldView layout system. +│ │ │ ├── scrapbook +│ │ │ │ ├── EmbeddedDocView.tsx – The `EmbeddedDocView` component in this TypeScript file is a React component that integrates with MobX for state management and is designed to display embedded documents in the Dash hypermedia system. The component utilizes a `DocumentView` to render documents, either using an existing embedding or creating a new one with specific dimensions and embed container slot IDs when necessary. It utilizes a series of functions and properties to manage document display attributes, including width, height, and transformation settings, while suppressing UI elements like delete buttons and resize handles. +│ │ │ │ ├── ScrapbookBox.tsx – This TypeScript file defines the 'ScrapbookBox' component as a part of the Dash hypermedia system. It extends the 'ViewBoxAnnotatableComponent' class and utilizes MobX for state management to manage observable properties like 'createdDate'. The component sets up a scrapbook view by arranging child items in a grid layout, initializing with placeholders for document types like images and summaries. It includes methods to handle document drop actions, updating placeholders accordingly, and rendering a styled 'CollectionView'. The file also registers the scrapbook template with specific layout and interaction options in the Dash system. +│ │ │ │ ├── ScrapbookContent.tsx – This TypeScript file defines a React functional component, ScrapbookContent, which is used to display the title and content of a document in the Scrapbook section of the Dash system. The component uses MobX for state management, as indicated by the observer decorator. It accepts a single prop, doc, which is of the type Doc, and displays the document's title and content. If the title or content fields are not strings, they are converted using the toString() method. This provides a straightforward view component for displaying document data. +│ │ │ │ ├── ScrapbookSlot.tsx – This TypeScript file defines interfaces and default configurations for scrapbook slots in the Dash system. The "SlotDefinition" interface outlines the properties of each slot, such as its ID, position, and default dimensions. The "SlotContentMap" interface associates slots with documents, while the "ScrapbookConfig" interface groups these definitions with slot content mappings. The "DEFAULT_SCRAPBOOK_CONFIG" constant provides a set of predefined slots with specific positions and dimensions but is currently not used in the scrapbook implementation. +│ │ │ │ └── ScrapbookSlotTypes.ts – This TypeScript file defines types and default configurations for a scrapbook component in the Dash hypermedia system. It includes the 'SlotDefinition' interface, which outlines the properties of a scrapbook slot such as id, title, position, and default dimensions. It also defines the 'ScrapbookConfig' interface for configuring multiple slots and their contents. The file sets up a default configuration, 'DEFAULT_SCRAPBOOK_CONFIG', which predefines three slots: Main Content, Notes, and Resources, specifying their positions and dimensions on the canvas. +│ │ │ └── trails +│ │ │ ├── CubicBezierEditor.tsx – The file defines a React component called `CubicBezierEditor`, enabling users to visually edit a Bezier curve through draggable control points. It accepts `setFunc` and `currPoints` as props to manipulate the control points of the cubic Bezier curve. The editor provides predefined easing functions and allows users to interact with control points using pointer events. It is rendered as an SVG graphic, with the ability to drag control points to adjust the curve, employing visual feedback when control points are active or hovered. +│ │ │ ├── PresBox.tsx – The 'PresBox' component in this file is a TypeScript React component for managing and displaying presentations within the Dash hypermedia system. It facilitates various functionalities such as creating, managing, and presenting slide trails, with features like slide transitions, effects, easing functions, and options to loop or autoplay. The component handles user interactions for navigation, editing, and presenting, while interfacing with GPT for generating slide transition effects. It makes extensive use of MobX for state management and provides several UI elements, such as sliders and dropdowns, for user control. +│ │ │ ├── PresEnums.ts – This TypeScript file defines several enumerations related to presentation movements, effects, and statuses within the Dash hypermedia system. 'PresMovement' enumeration includes various types of movement transitions like zoom and pan. 'PresEffect' specifies different presentation effects such as expand and fade. 'PresEffectDirection' provides directions for entrance effects like from left or top. Lastly, 'PresStatus' describes modes for playback or editing, such as autoplay and manual, enhancing the interactive presentation functionalities. +│ │ │ ├── PresSlideBox.tsx – The `PresSlideBox` component in this file is a React component that models the view of a document within a presentation, providing functionality for interactions with presentation slides. The class extends `ViewBoxBaseComponent` and leverages MobX for state management, allowing it to handle and compute properties that reflect the state and data of the presentation slides. It includes logic for dragging, dropping, and recording video overlays, as well as methods for slide selection and manipulation of slides' positions in a presentation. Additionally, it manages the rendering of slide previews and interactions with embedded media elements. +│ │ │ ├── SlideEffect.tsx – This TypeScript file defines a React component called `SpringAnimation` which utilizes `@react-spring/web` to animate visual effects on elements based on presentation directions and effects like fade, bounce, rotate, flip, roll, and expand. The component takes props for the document dimensions, animation direction, effect type, and spring animation settings, among others. It defines various configurations for these animations and applies them conditionally based on the selected effect. Additionally, an `inView` hook is used to trigger animations when the component is in view. +│ │ │ ├── SpringUtils.ts – This TypeScript file defines utilities and configurations for spring-based transitions in the Dash hypermedia system. It includes color settings for previewing springs, enums for different types of spring effects, and interfaces for spring settings, such as stiffness, damping, and mass. The file also provides configurations for animation settings, movement easing options, and dropdown items for selecting effects and their timings. Additionally, it includes default spring parameters for various effects like 'Expand', 'Bounce', and 'Fade', promoting consistent animation behavior across the application. +│ │ │ └── index.ts – This file serves as an index for exporting components related to 'trails' within the Dash system. It exports functionalities from 'PresBox', 'PresSlideBox', and 'PresEnums'. These modules likely deal with presentation slides and enumerations, suggesting they facilitate the organization or rendering of presentation-related features within the Dash application. By grouping these exports in a single index file, it aids in maintainability and ease of access when importing in other parts of the application. +│ │ ├── pdf +│ │ │ ├── AnchorMenu.tsx – The AnchorMenu component is a React class component using the MobX library for state management and is part of the Dash application, primarily for annotating PDF documents. It extends the AntimodeMenu, providing a user interface to perform actions like highlighting text, adding annotations, and interacting with AI (GPT) for text analysis. The component includes functionality for draggable annotations, audio recording annotations, and text linking. It also features color selection for highlights and offers controls to manage visibility toggles and deletion of link anchors. +│ │ │ ├── Annotation.tsx – This TypeScript file defines a React component for displaying and managing annotations on PDF documents in the Dash hypermedia system. The `Annotation` component, which is observable with MobX, allows users to interact with annotations through actions such as deleting, pinning, and toggling annotation links. It features context menu and pointer event handling, ensuring dynamic interactivity within the PDF viewer. The `RegionAnnotation` sub-component visually represents individual annotations by rendering them on a specified region of the document based on provided dimensions and styles. +│ │ │ ├── GPTPopup +│ │ │ │ └── GPTPopup.tsx – The GPTPopup.tsx file defines a React component using TypeScript to provide a popup interface that interacts with various OpenAI GPT models to enhance document functionalities. Users can utilize this component for tasks like text summarization, image creation via Firefly, document sorting, filtering, tagging, and even generating quiz responses about documents. It offers different modes such as SUMMARY, IMAGE, DATA, and GPT_MENU which control the type of interaction. The popup leverages MobX for state management and supports operations like generating document summaries, visual data analysis, and more through API calls. +│ │ │ └── PDFViewer.tsx – The PDFViewer component is responsible for rendering and managing PDF documents within the Dash hypermedia system. It integrates the pdfjs-dist library for PDF rendering and manages state using MobX for responsive updates. The component handles PDF loading, page navigation, and scaling, providing smooth scrolling and zooming functionalities. It also features a fuzzy search functionality to find and highlight text within the PDF, supporting annotations and allowing for interactive PDF manipulation by users. The component is designed to work seamlessly with other parts of the Dash system, providing integration with features like document annotations and audio linkage. +│ │ ├── search +│ │ │ ├── FaceRecognitionHandler.tsx – The FaceRecognitionHandler class in Dash is responsible for detecting and recognizing faces in image documents. It utilizes the face-api.js library to analyze images and compare detected faces with a stored collection of known faces, creating unique face documents as needed. This singleton class updates the dashboard with annotations, links recognized faces to their corresponding documents, and manages the addition and removal of face images from these collections. It also ensures the face detection models are loaded and ready for use. +│ │ │ └── SearchBox.tsx – This TypeScript file defines the SearchBox and SearchBoxItem components for managing search functionalities within a browser-based hypermedia system. The SearchBox component enables users to input search queries, filters results by document type, and ranks the results using a PageRank algorithm. It utilizes MobX for state management and provides methods for handling search string changes, initiating searches, and resetting searches. The SearchBoxItem component renders each search result, handling user interactions such as selecting documents or creating links between them in the search results view. +│ │ ├── selectedDoc +│ │ │ ├── SelectedDocView.tsx – This TypeScript file defines a React component called `SelectedDocView`, which is responsible for displaying a list of selected documents. It uses MobX for state management, computing the `selectedDocs` property from the props. The `render` method constructs a `ListBox` with items corresponding to the selected documents, customizing details such as text, color, and click actions using properties from imported utilities. FontAwesome icons and snapping manager configurations are applied for visual consistency and user interaction. +│ │ │ └── index.ts – This file serves as an entry point for the SelectedDocView component within the Dash hypermedia system. It re-exports everything from the 'SelectedDocView' module, making the exports from that module accessible through this file. This approach can help simplify the import statements in other parts of the application by bundling related exports into a single module namespace. It's a common pattern in TypeScript projects to improve code organization and readability. +│ │ ├── smartdraw +│ │ │ ├── DrawingFillHandler.tsx – The DrawingFillHandler class in Dash's code base facilitates the conversion of drawings to AI-generated images. It manages Dropbox authorization for storing these images and utilizes GPT's image description functionality to enhance user prompts. The class processes drawings by extracting tags and styles, which are used to generate images with specified dimensions and aspect ratios. Generated images can be associated with the original drawing and stored in a new document, creating a seamless integration between user-created content and AI enhancements. +│ │ │ ├── FireflyConstants.ts – This TypeScript file defines constants and utility functions for managing and validating Firefly image data within the Dash hypermedia code-base. It introduces an interface `FireflyImageData` with properties such as `prompt`, `seed`, and `pathname`. The function `isFireflyImageData` checks if an object conforms to this interface. The file also defines an enumeration, `FireflyImageDimensions`, with image dimension options like square, landscape, portrait, and widescreen, along with a mapping that specifies each dimension's width and height. Additionally, it includes a set of style presets for image visualization. +│ │ │ ├── SmartDrawHandler.tsx – The "SmartDrawHandler" component facilitates generating drawings using GPT based on text input. Users can specify parameters such as complexity, size, and whether the drawing should be auto-colored. The generated SVG drawings are converted to Bezier curves and added to the user's canvas. The handler includes functionalities for regenerating and editing existing drawings, as well as integrating Firefly API to generate images. Interactive features include displaying popups for drawing creation and modification, managing user input, and handling drawing metadata. +│ │ │ └── StickerPalette.tsx – This TypeScript file defines a React component named `StickerPalette` for the Dash hypermedia system. The `StickerPalette` component allows users to create, view, and manage "stickers" on documents, which can be generated using AI with customization options like complexity, size, and color. Users can save AI-generated drawings as stickers to apply them to documents. The component manages these operations using MobX observables and actions, providing both a view and creation mode for interaction. It integrates various UI elements like sliders and buttons for user input and interaction. +│ │ └── topbar +│ │ └── TopBar.tsx – The TopBar component in Dash serves as the main navigation and control panel in the application's interface, providing access to various features and settings. It offers visual buttons and interactive elements to navigate between home and active dashboards, change modes (like Explore and Tracking), and manage user settings. The top bar displays user-specific color themes, information related to the current dashboard, user settings, and utility features like documentation and issue reporting. It also monitors server status and provides real-time feedback to the user through reactivity via MobX. +│ ├── debug +│ │ ├── Repl.tsx – This file defines a React component called 'Repl' using TypeScript, which serves as a simple Read-Eval-Print Loop (REPL) interface. It uses MobX for state management and supports executing user-inputted scripts via a textarea. When a script is submitted with 'Enter', it is passed through a CompileScript utility, with results either displayed in a series of command and output pairs or annotated as 'Compile Error'. Lastly, the Repl component is rendered using ReactDOM within an asynchronous initialization function, setting up server communication via DocServer. +│ │ ├── Test.tsx – This TypeScript file defines a basic React component called `Test` that renders a simple "HELLO WORLD" message inside a `<div>`. The component is then used to initialize a React root, which attaches to a DOM element with the id 'root'. This file serves as a basic setup for rendering a React component using ReactDOM, demonstrating a minimal example of a React application structure. +│ │ └── Viewer.tsx – This file defines a React component framework for visualizing and interacting with fields and documents in a Dash hypermedia environment. It utilizes MobX for state management, observing interactions through action and observable annotations. Key components include ListViewer, DocumentViewer, and DebugViewer, each tailored to render lists, documents, and individual fields respectively, allowing users to toggle the expanded view of data. The Viewer component integrates user input to fetch and display document fields dynamically, and is bootstrapped on page load using the DocServer for data initialization. +│ ├── decycler +│ │ └── decycler.d.ts – This TypeScript declaration file defines two exported functions, `decycle` and `retrocycle`. These functions are likely intended for converting cyclic structures to a version that can be serialized (decycle) and then restoring the serialized data back to its original cyclic form (retrocycle). The file serves as a TypeScript type declaration to be used in other parts of the Dash codebase that require handling of cyclic data structures. +│ ├── extensions +│ │ ├── Extensions.ts – This TypeScript file is part of the Dash hypermedia system and is responsible for assigning extensions to built-in JavaScript objects. It imports two functions, `Assign` from `Extensions_Array` and `Extensions_String`, renaming them as `ArrayAssign` and `StringAssign`. The primary function, `AssignAllExtensions`, calls these two functions to extend JavaScript's array and string capabilities. It ensures that additional functionalities are available throughout the Dash system by exporting `AssignAllExtensions` for use in other parts of the codebase. +│ │ ├── ExtensionsTypings.ts – This TypeScript file extends the functionality of the built-in Array and String interfaces with additional methods. For arrays, it introduces 'lastElement' to retrieve the last item and 'getIndex' to obtain the index of a specified value, returning undefined if the value is not present. For strings, it provides 'removeTrailingNewlines' to eliminate newline characters at the end of a string, and 'hasNewline' to check for the presence of newline characters in the string. These extensions enhance array and string manipulation capabilities in the Dash hypermedia codebase. +│ │ ├── Extensions_Array.ts – This TypeScript file defines a class `ArrayExtension` used to add new methods to the JavaScript Array prototype. The class takes a method name and its corresponding function body, allowing users to add custom behaviors to all arrays. The file introduces two specific extensions: 'lastElement', which returns the last element of an array, and 'getIndex', which returns the index of a specified value or undefined if the value is not present. These extensions must have corresponding type definitions to be recognized by TypeScript. +│ │ └── Extensions_String.ts – This TypeScript file extends the native String prototype to add two new methods. The `removeTrailingNewlines` method removes any newline characters from the end of the string. The `hasNewline` method checks if the string ends with a newline character. These extensions are encapsulated within an 'Assign' function, which is exported for use in other parts of the application. This allows strings to be manipulated more conveniently in the Dash hypermedia application. +│ ├── fields +│ │ ├── CursorField.ts – This TypeScript file defines a CursorField class, which extends from ObjectField and represents a serializable field for handling cursor data. It utilizes the 'serializr' library to create simple schemas for serialization and deserialization of cursor position and metadata, including an ID, identifier, timestamp, and positional coordinates. The class includes methods for setting the position, updating the timestamp, and tracking changes. Additionally, it defines placeholders for methods that convert the data to different string formats, returning 'invalid' for these conversions. +│ │ ├── DateField.ts – The "DateField.ts" file defines a DateField class that extends the ObjectField class, providing functionality to handle and represent date information. This class includes serialization and deserialization capabilities using decorators from the 'serializr' library. It offers methods for copying instances, converting the date to different string formats, and returning the date object itself. Additionally, the file integrates with a scripting environment, allowing for the creation of DateField instances via the ScriptingGlobals utility. +│ │ ├── Doc.ts – This TypeScript file defines the core functionalities and structure of the "Doc" class within the Dash hypermedia system. It heavily utilizes MobX for state management, allowing document fields to be observable and reactive. The class supports complex operations like serialization, cloning of documents, and the creation of document links and embeddings, which are vital for maintaining interconnected document structures. Additionally, the file includes functions for handling document layouts, search queries, and access control levels, enhancing the Dash system's document management capabilities. +│ │ ├── DocSymbols.ts – This TypeScript file defines a series of symbols used for various operations on documents within the Dash system. The symbols correspond to different document permissions, such as read-only or admin access, and operations like server updates and caching. Additionally, it includes symbols for document model components like data and layout, as well as view-related symbols such as audio playback and highlighting. These symbols support managing document interactions, permissions, and rendering within the Dash hypermedia framework. +│ │ ├── FieldLoader.tsx – The `FieldLoader.tsx` file defines a React component named `FieldLoader` which is integrated with MobX for state management. This component is observable and keeps track of server load status, including the number of requests made and responses retrieved, along with a status message. The component renders this information within a div to provide feedback about the server load process. It also imports its styles from a dedicated SCSS file, `FieldLoader.scss`. +│ │ ├── FieldSymbols.ts – This TypeScript file declares several unique Symbols that are used as keys or identifiers for specific behaviors or properties related to fields within the Dash system. The exported symbols include functionalities for handling updates, tracking changes, identifying fields, managing parent-child relationships, copying values, and converting fields into various string formats such as script, JavaScript, plain text, and general strings. These symbols facilitate organized and consistent field manipulation and representation in the Dash hypermedia application. +│ │ ├── HtmlField.ts – The HtmlField file defines a TypeScript class, HtmlField, which extends from ObjectField and represents an HTML field in the system. It uses decorators from the 'serializr' library to make the html field serializable. The class includes a constructor that initializes an HTML string, along with methods for copying the field and converting it to different string formats, though the JavaScript and Script string methods return 'invalid'. This class supports the deserialization of HTML data for the application. +│ │ ├── IconField.ts – The file defines an `IconField` class, which extends from `ObjectField`, in the Dash hypermedia system. It uses the `serializr` library for serializing the `icon` property, which is a string. The class includes methods for copying the icon field and functions (`ToJavascriptString`, `ToScriptString`, `ToString`) that return predefined string representations. The class is marked as deserializable under the 'icon' key, enabling its integration within the broader serialization/deserialization framework. +│ │ ├── InkField.ts – This TypeScript file defines several enumerations and interfaces related to managing ink inputs within a hypermedia system. The "InkField" class extends "ObjectField" to handle ink data, defined as an array of points, which are utilized through bezier curve representations. It provides functions to extract bezier segments from ink data, clone itself, convert to different string representations, and calculate bounding boxes for ink strokes. Additionally, the class includes utility functions to determine intersections between bezier curves, particularly handling edge-cases with linear curves. +│ │ ├── List.ts – This TypeScript file defines a class, `ListImpl`, which is a specialized list structure for handling fields that extend `FieldType` within a hypermedia system. Utilizing MobX for observable state management, it provides an array-like interface with various mutator and accessor methods that manage `ProxyField` and `RefField` instances. The class ensures the proper handling of field relationships and changes, includes serialization support via the `serializr` library, and integrates with scripting globals to provide extended functionality such as list comparisons. The implementation supports reactive bindings for efficient DOM updates in a React context. +│ │ ├── ObjectField.ts – This TypeScript file defines an abstract class `ObjectField` that serves as a base for managing serialized data fields within Dash. The class outlines methods for copying objects and converting them to different string representations, such as JavaScript, scripting, and plain text. It uses several TypeScript types for serialized field and server operation handling. Additionally, it manages hierarchical relationships with parent fields through `RefField` or other `ObjectField` instances. The `ObjectField` class is also registered with `ScriptingGlobals` for broader system integration. +│ │ ├── Proxy.ts – This TypeScript file defines the ProxyField class, a specialized field type in a document management system, geared towards managing proxy objects. The class utilizes MobX for state management and includes serialization and deserialization capabilities for field caching. ProxyField interacts with a DocServer to fetch, cache, and provide reference fields. It also supports lazy-loading with a Promised field state and features action methods for setting field values. Additionally, PrefetchProxy extends ProxyField to enable prefetching capabilities. +│ │ ├── RefField.ts – The `RefField` is an abstract class in TypeScript that defines a blueprint for reference fields, using serialization and deserialization through the `serializr` library. Each `RefField` has a unique identifier (`__id`) generated or provided during construction, which is serialized with a custom deserialization function. The class includes abstract methods to convert the field to different string representations and may handle updates through an optional protected method. This design supports polymorphism and data manipulation flexibility in the Dash hypermedia system. +│ │ ├── RichTextField.ts – This TypeScript file defines the `RichTextField` class, which represents a rich text field, using the `ObjectField` as its base class. The class supports serialization and deserialization, and includes formatted text (`Data`) and its plain text representation (`Text`). It features methods for creating a deep copy, converting to JavaScript and script strings, and checking for emptiness. The class also incorporates static methods for converting plain text or text segments into Prosemirror documents, facilitating rich text editing and rendering in a structured format. +│ │ ├── RichTextUtils.ts – The RichTextUtils.ts file provides utilities for managing rich text content in the Dash application. It includes functions to initialize, synthesize, and convert rich text between plain text and ProseMirror's state representation. The module also contains utilities for importing and exporting content to and from Google Docs, handling various elements such as text styles and inline objects. It supports the integration of Google APIs for processing documents and images to maintain a consistent multimedia experience on Dash's platform. +│ │ ├── Schema.ts – This TypeScript file defines schema-related functionalities for a document-based system. It includes functions to create interfaces and strict interfaces based on specified schemas for document manipulation. The `makeInterface` function constructs interfaces that facilitate access and modification of document fields using JavaScript proxies. Additionally, the `listSpec` and `defaultSpec` functions provide auxiliary utilities for handling list specifications and default field constructors within schemas. Meta-programming techniques, such as type casting and proxy usage, are leveraged to maintain type safety and interface consistency. +│ │ ├── SchemaHeaderField.ts – The file defines a `SchemaHeaderField` class extending `ObjectField` for managing schema headers with attributes such as heading, color, type, width, description sorting, and collapsed state. The class uses decorators like `@scriptingGlobal` and `@Deserializable` to aid in scripting and serialization. Two color palettes, pastel and dark pastel, are provided for schema styling. The file also includes methods for copying and converting the field to string and JavaScript format, and a factory function for creating `SchemaHeaderField` instances. +│ │ ├── ScriptField.ts – The "ScriptField.ts" file implements a system for compiling and managing script-based fields within documents. It defines the ScriptField class, which extends an ObjectField and supports serialization, caching, and execution of JavaScript scripts with options for additional configuration like return statements and captured variables. Two primary methods, `MakeFunction` and `MakeScript`, allow creating script instances with inputs and capturing variables. The class also supports integration with GPT API calls to compute field values. Additionally, the file defines a ComputedField class for handling dynamic, computed fields that can be recalculated as needed. +│ │ ├── Types.ts – The `Types.ts` file in the Dash hypermedia system defines TypeScript types and utility functions to model various field types within documents. It includes type definitions like `ToConstructor`, `DefaultFieldConstructor`, and `InterfaceValue`, which help in transforming field types into constructors or default value settings. The `Cast` function is central, taking a field and constructor to attempt type casting, supporting various data types and handling promises. Additionally, functions like `NumCast`, `StrCast`, and `DateCast` provide specific casting utilities for different field types, integrating with document operations. +│ │ ├── URLField.ts – The file defines an abstract TypeScript class, `URLField`, which extends `ObjectField` and manages URL values. It includes methods to serialize and deserialize URL objects and represents the URLs as JavaScript or script strings. Several specific field classes like `AudioField`, `ImageField`, etc., inherit from `URLField`, demonstrating polymorphism in handling URL-based resources. The file also introduces a `url` custom serializable processor for handling URL strings, which adjusts URLs relative to the document's origin. +│ │ ├── documentSchemas.ts – This TypeScript file defines the schemas for documents and collections in the Dash browser-based hypermedia system. The `documentSchema` specifies a wide array of properties for individual documents, including content description, layout, appearance, interaction, and drag-and-drop behavior. It includes settings for document titles, authoring dates, positioning, visual attributes, and user interaction scripts. The `collectionSchema` outlines properties for managing children documents within collections, focusing on layout templates and interaction scripts for child documents. The file also includes type definitions for these schemas to be used throughout the application. +│ │ └── util.ts – This file contains utility functions and types for managing document fields and permissions in the Dash system. It defines the 'SharingPermissions' enum to categorize user access levels such as admin, edit, view, etc. The file includes various methods for handling field operations, like '_setterImpl' to control assignment and 'getter' to retrieve data. It also manages access control lists (ACLs) using functions like 'distributeAcls' and 'GetEffectiveAcl' to enforce document security and sharing policies, ensuring correct application of permissions across documents and users. +│ ├── pen-gestures +│ │ ├── GestureTypes.ts – This TypeScript file defines an enumeration called 'Gestures' that includes various types of pen gestures such as Line, Stroke, Text, Triangle, Circle, Rectangle, Arrow, and RightAngle. Additionally, it declares the 'PointData' interface, which specifies a point in an ink gesture with 'X' and 'Y' coordinates. The file is part of the pen-gestures module, supporting functionalities related to recognizing and interpreting different gestures and points within the Dash system. +│ │ ├── GestureUtils.ts – This file defines utilities for handling gesture events in the Dash hypermedia system. It includes a `GestureEvent` class encapsulating information about a gesture, such as gesture type, points, bounds, and optional text. A `MakeGestureTarget` function is provided to add or remove event listeners to HTML elements for gesture events. Additionally, it includes an instance of `NDollarRecognizer` for gesture recognition. These utilities facilitate handling complex user interactions via pen gestures within the application. +│ │ └── ndollar.ts – This TypeScript file implements the $N Multistroke Recognizer, a gesture recognition system originally developed in JavaScript. It leverages classes like Point, Rectangle, Unistroke, and Multistroke to model and process gesture strokes. The NDollarRecognizer class contains functions for recognizing gestures, adding new gestures, and deleting user-defined gestures. Helper functions handle tasks like point resampling, scaling, rotation, and calculating distances, which are all crucial for accurately recognizing user-drawn gestures against a set of predefined templates. +│ ├── server +│ │ ├── chunker +│ │ │ └── pdf_chunker.py – End-to-end PDF-processing pipeline: detects tables/images with YOLO, masks them, OCRs remaining text, chunks text (≤1 000 words each), embeds chunks via OpenAI embeddings, clusters with K-Means for representative selection, then asks GPT-4o for_ +│ │ ├── ActionUtilities.ts – This file provides a collection of utility functions for handling file operations, command execution, logging, and email dispatching within the Dash hypermedia system. It includes functions to read and write text files, execute command-line instructions, and manage logging with customizable messages and colors. Additionally, the file handles email sending using Nodemailer, supporting batch dispatch with error handling for each recipient. Utility functions for directory management, such as creating directories conditionally and removing directories or files, are also provided. +│ │ ├── ApiManagers +│ │ │ ├── ApiManager.ts – This TypeScript file defines an abstract class `ApiManager` that serves as a blueprint for managing API routes in the Dash system. It includes an abstract method `initialize`, which subclasses must implement to define how routes should be registered using the provided `Registration` type. The `ApiManager` class also includes a `register` method that invokes the `initialize` method, ensuring that the registration process is standardized across different API managers. This setup promotes a structured approach to extending route management functionality. +│ │ │ ├── AssistantManager.ts – The AssistantManager class in this file manages API routes related to various functionalities, such as file handling, web scraping, and integration with third-party APIs like OpenAI and Google Custom Search. It includes methods for handling job tracking, progress reporting, video-to-audio conversion, and content generation. The file defines utility functions for path manipulation and file operations, and implements retry logic for API calls. Key API routes include media processing, web search, content scraping, document creation, image generation, and CSV file handling. +│ │ │ ├── AzureManager.ts – The AzureManager class in this TypeScript file is responsible for managing Azure Blob Storage operations for a Dash project. It utilizes the Azure SDK to connect to a Blob Service Client and interact with containers and blobs in Azure. Key functionality includes uploading and deleting blobs, as well as listing blobs within a specified container. The class implements a singleton pattern to ensure only a single instance can manage Azure storage interactions, and it supports various file types for streamlined media handling. +│ │ │ ├── DataVizManager.ts – The DataVizManager class is a part of the server-side code that extends the ApiManager class to handle CSV data requests. It registers a new API endpoint '/csvData' with a secure GET method that processes CSV file requests. When accessed, it reads the CSV file specified by the URI query parameter, parses the CSV content, and sends the parsed data back in the response. This manager leverages utility functions for CSV parsing and string conversion, facilitating data visualization functionality within the application. +│ │ │ ├── DeleteManager.ts – The DeleteManager class in this TypeScript file extends the ApiManager to implement a deletion API within the Dash system. It registers a GET method route with a subscription listening for 'delete' requests, leveraging a secureHandler function to process deletions. Depending on the 'target' parameter, the handler can delete all data, specifically database records, files, or different schemas. It interacts with WebSocket for some deletions and uses rimraf and mkdirSync to manage file directories, ensuring the file structure is rebuilt if files are deleted. +│ │ │ ├── DownloadManager.ts – This file defines a DownloadManager class that extends an ApiManager and handles exporting Dash documents to the client's file system as ZIP files. It includes utility functions to traverse the database, build a hierarchical structure of documents and collections, and generate a zip file with the documents and associated data. The DownloadManager class registers three main routes: exporting image hierarchies, downloading documents by ID, and serializing documents for client-side consumption. It enables efficient organization and downloading of media and collection documents. +│ │ │ ├── FireflyManager.ts – The FireflyManager class in the Dash hypermedia code-base handles interactions with Adobe's Firefly API and Dropbox for generating and managing images. It includes methods to generate images from prompts and structures, upload images to Dropbox, and expand images using the Firefly API. Additionally, it facilitates handling image text extraction via Adobe's Sensei service and manages Dropbox authentication and token refreshing. The class integrates into the system by registering API endpoints for these functionalities, ensuring secure access and data handling. +│ │ │ ├── FlashcardManager.ts – The file `FlashcardManager.ts` defines the `FlashcardManager` class responsible for managing API routes for flashcard manipulation. It incorporates functionality to handle file processing, manage Python virtual environments, and run Python scripts. Key methods include creating and managing a virtual environment, installing dependencies, and executing Python scripts with optional parameters like `file`, `drag`, and `smart`. The class handles POST requests to create labels using a secure handler that runs the Python backend, ensuring the appropriate setup of the required environment for execution. +│ │ │ ├── GeneralGoogleManager.ts – The GeneralGoogleManager class extends the ApiManager and handles API interactions with Google services. It initializes routes for reading, writing, and revoking Google access tokens, utilizing secure handlers to manage user authentication and authorization. It also subscribes to a dynamic route for handling Google Docs actions, where it dynamically maps and executes actions such as 'create', 'retrieve', and 'update' through the GoogleApiServerUtils. The class ensures secure and seamless integration with Google services, maintaining user data privacy. +│ │ │ ├── GooglePhotosManager.ts – The GooglePhotosManager class in this file is responsible for managing routes related to Google Photos API integration within the Dash system. It handles uploading images stored locally on Dash to Google Photos and retrieving images from Google Photos to store locally on Dash. The process involves batching image uploads to optimize interactions with Google servers and ensuring authentication of users' Google accounts. Additionally, the file contains the Uploader namespace, which provides utility functions for uploading image bytes and creating media items in Google Photos. +│ │ │ ├── SessionManager.ts – The SessionManager class extends ApiManager and handles session-related API routes for a server application. It verifies session actions through secure routes and authorized handlers, ensuring only allowed users can perform operations such as debugging, backing up, killing, and deleting sessions. The class registers these operations with HTTP GET methods and utilizes session keys to authenticate requests, providing appropriate success or error responses. The functionality emphasizes a secure monitored environment for managing server sessions. +│ │ │ ├── UploadManager.ts – The UploadManager class extends ApiManager and is responsible for handling various upload-related API requests in the Dash hypermedia system. It registers multiple POST endpoints to manage tasks like video concatenation, YouTube video uploads, remote image uploads, and document uploads in various formats. Using the 'formidable' library, it parses and processes form data, handles file uploads, and manipulates file-related tasks such as resizing images and storing data in the database. The class ensures secure handling of data and responds with the appropriate success or error messages. +│ │ │ ├── UserManager.ts – The UserManager class in the Dash codebase is an API manager responsible for handling user-related server-side endpoints. It provides secure and public methods to interact with user data, such as retrieving user information, document IDs, and managing user cache. It also features a password reset functionality, ensuring password security via bcrypt verification and express-validator checks. Additionally, the class offers an endpoint for monitoring user activity, distinguishing between active and inactive users based on socket connections and timing metrics. +│ │ │ └── UtilManager.ts – The UtilManager class extends ApiManager to handle API endpoint registrations related to server utilities. It initializes two primary GET routes: '/pull', which executes a Git pull operation and redirects to the home page upon success, and '/version', which retrieves the current Git commit hash for version information. This setup facilitates server maintenance tasks like updating and version checking. Commented sections indicate potential future capabilities involving IBM analysis and a recommender system. +│ │ ├── Client.ts – This TypeScript file defines a simple `Client` class, which represents a client entity in the Dash hypermedia system. The class encapsulates a private field `_guid` that stores a globally unique identifier (GUID) for each client instance. It provides a computed getter `GUID` using MobX's `@computed` decorator to easily access the GUID in a reactive manner. This allows the GUID to be used in reactive data flows within the application, facilitating efficient state management. +│ │ ├── DashSession +│ │ │ ├── DashSessionAgent.ts – The DashSessionAgent class manages server sessions for the Dash hypermedia system. It distinguishes between monitor (master) and worker threads to execute server operations. Monitor threads initialize session management, including event hooks for commands like backup and crash handling, and distribute session keys through email. Worker threads handle server execution with logic for server exit notifications. Additionally, the class provides functionality for managing Solr commands, email notifications for crashes, and handling server backup operations, including creating compressed backups and dispatching them via email. +│ │ │ └── Session +│ │ │ ├── agents +│ │ │ │ ├── applied_session_agent.ts – This TypeScript file defines an abstract class `AppliedSessionAgent` responsible for handling session management in a clustered environment. It provides abstract methods `initializeMonitor` and `initializeServerWorker`, meant to be implemented for custom session initialization. The class manages session lifecycle with `launch` and `killSession` methods, dealing with instances of `Monitor` and `ServerWorker` based on whether the script is running on the primary or a worker thread. It enforces thread-specific access restrictions to these instances to avoid misuse. +│ │ │ │ ├── monitor.ts – The `monitor.ts` file implements a `Monitor` class responsible for managing server sessions in a clustered environment. It validates configurations from a JSON file, spawns worker processes, and ensures continuous operation by respawning processes if they exit. The `Monitor` handles application lifecycle events and customizes REPL commands for operational management. It also features error handling and logging functions, providing controlled termination or restarting of server workers. The system promotes resilience and customization through structured session management and command interfaces. +│ │ │ │ ├── process_message_router.ts – This TypeScript file defines an abstract class, `IPCMessageReceiver`, for handling inter-process communication in the Dash hypermedia system. It includes a `handlers` map for storing message handler functions. The class provides methods to add (`on`) and remove (`off`) handlers for specific message types, allowing dynamic management of listeners for inter-process messages. Additionally, it includes a `clearMessageListeners` method, which removes all listeners for given message types. The `IPCMessageReceiver` relies on a `PromisifiedIPCManager` for managing the communication. +│ │ │ │ ├── promisified_ipc_manager.ts – This TypeScript module defines a utility class `PromisifiedIPCManager` for managing inter-process communication (IPC) in a Node.js environment using promises. It handles message emission and response handling between parent and child processes, uniquely identifying each message to match responses with requests. The class also supports error tracking via custom error objects and includes a mechanism to gracefully destroy the IPC manager, resolving outstanding promises before termination. A convenience function, `manage`, is provided to instantiate the manager with target processes and optional handlers. +│ │ │ │ └── server_worker.ts – The `ServerWorker` class in this file is responsible for maintaining the server's consistent state in a multi-process environment. It ensures server connectivity, monitors health by polling at specified intervals, and handles any unplanned exits due to exceptions by notifying the master thread. It can initiate exit handlers and is equipped with IPC functionalities for communication between processes. The worker also manages the constraint that no more than one worker can exist per process, terminating with a notification if this rule is violated. +│ │ │ └── utilities +│ │ │ ├── repl.ts – This TypeScript file defines a REPL (Read-Eval-Print Loop) class for a command-line interface, designed to handle custom command inputs. The class supports configuration options such as command identifier, validation functions, and case sensitivity. Users can register commands with specific argument patterns and corresponding actions. Upon receiving input, the class parses and matches commands against registered patterns to execute the appropriate actions. If a command is not recognized or matches no patterns, it provides feedback based on the validity of the input. +│ │ │ ├── session_config.ts – This TypeScript file defines the configuration schema and default settings for a server session in the Dash hypermedia system. It includes a JSON schema to validate various configuration settings like server ports, identifiers with color labels, and polling parameters such as interval and route. The file also establishes a mapping of color labels to console colors, allowing customizable text display. Additionally, it provides a default configuration object specifying initial values for server output display, port numbers, identifier labels, and polling settings. +│ │ │ └── utilities.ts – This TypeScript file defines a namespace, Utilities, containing utility functions for the Dash hypermedia system. The 'guid' function generates a new UUID using the 'uuid' library, providing unique identifiers. The 'preciseAssignHelper' and 'preciseAssign' functions enhance object assignment operations. They allow the merging of objects where nested properties are deeply assigned, ensuring default values are applied if not explicitly set in the source, offering finer control compared to the standard Object.assign method. +│ │ ├── DashStats.ts – The DashStats module is responsible for tracking user session data in the Dash system, such as connection time, operations performed, and operation rates. It utilizes various helper functions to manage user statistics, update operation counts, and convert data to CSV format for storage. The module provides methods to handle statistics routes via Express, updating the frontend with current stats through websockets, and recording user login/logout events to a CSV file. Server traffic levels are classified as not busy, busy, or very busy based on user connections. +│ │ ├── DashUploadUtils.ts – This TypeScript module, "DashUploadUtils.ts", provides utilities for handling file uploads, primarily focusing on images and videos, in a server environment. It includes functions to check file extensions, manage file directories, and process image resizing using tools like Jimp and worker threads. The module supports video concatenation with ffmpeg and video downloads from YouTube using yt-dlp. It integrates Azure functionalities for image processing and offers utilities for extracting and utilizing metadata such as EXIF data and file size. The module ensures compatibility with specific media formats and handles unsupported formats appropriately. +│ │ ├── DataVizUtils.ts – The file provides utility functions for handling CSV data within the Dash hypermedia system. It includes a function `csvParser` that converts a CSV string into an array of objects, each representing a row in the CSV with keys derived from the header row. The `csvToString` function reads a CSV file from a given file path and returns its contents as a string. These utilities support data visualization tasks by transforming and accessing CSV data programmatically. +│ │ ├── GarbageCollector.ts – This TypeScript module implements a garbage collection system for managing documents and associated files in a hypermedia application. The main function, GarbageCollect, identifies unused document IDs and files from the database and file system, then deletes or marks them as deleted depending on the mode (full or partial). It retrieves documents from the database, extracts relevant IDs and file paths, and determines which entries can be safely removed. Efficient deletion strategies, such as batch processing in chunks, help optimize the cleanup process. +│ │ ├── IDatabase.ts – This TypeScript file defines the interface 'IDatabase' for managing interactions with a MongoDB database in the Dash hypermedia system. It outlines methods for performing common database operations such as updating, deleting, inserting, and querying documents. The interface is designed to handle both individual and multiple document operations, including support for document retrieval and schema management. Additionally, it specifies asynchronous behavior using Promises and callbacks to handle database results and errors. +│ │ ├── MemoryDatabase.ts – The MemoryDatabase class in this file is a simplistic, in-memory implementation of the IDatabase interface, simulating a MongoDB-like database without actual external storage. It manages collections and performs operations such as insertion, updating, replacing, deletion, and schema dropping within a memory-resident database structure. The class provides collection management through methods like getCollectionNames, insert, update, delete, and others. Certain methods like updateMany and query intentionally throw errors due to the limitations of operating solely in memory. +│ │ ├── Message.ts – This TypeScript file defines a class and several interfaces related to messaging in a server context. The `Message` class is used for creating messages with unique identifiers, generated using a UUID v5 hash derived from a given seed. Several message-related interfaces such as `Reference`, `Diff`, `GestureContent`, and `RoomMessage` are also defined to structure different types of information. Additionally, the `MessageStore` namespace contains various predefined messages that can be used throughout the application, each representing different server operations or states. +│ │ ├── PdfTypes.ts – The file defines TypeScript interfaces for handling PDFs within the Dash hypermedia system. It includes the `PDFInfo` interface to store metadata about the PDF's format and features such as forms. The `PDFMetadata` interface outlines methods to parse and retrieve specific metadata entries. The `ParsedPDF` interface describes a fully parsed PDF, encompassing the number of pages, render count, metadata, and textual content, as well as the PDF version. +│ │ ├── ProcessFactory.ts – The ProcessFactory module is responsible for managing child processes in the Dash system, allowing for the creation and tracking of such processes. It includes a Logger namespace which helps set up logging infrastructure by ensuring the log directory exists and creating log files for command executions. The createWorker function in ProcessFactory spawns a child process, optionally using custom stdio configurations or logging output to a dedicated file. This setup supports detached process spawning, useful for asynchronous or long-running backend tasks. +│ │ ├── RouteManager.ts – This TypeScript file defines a RouteManager class used in a server environment to manage HTTP routes for an Express application. The class allows developers to add routes with varying levels of security through supervised routes, distinguishing between public and secure handlers based on user presence. It handles errors, success, and permission conditions with specific functions and outputs, logging any registration failures. Routes can be dynamically added and managed, with the capability to handle admin-specific routes, specifically in release environments. +│ │ ├── RouteSubscriber.ts – This TypeScript file defines a class `RouteSubscriber` used in Dash's server-side implementation. This class manages URL route construction by allowing root paths to be set and additional request parameters to be appended. The `add` method enables chaining of route parameters, while the `build` method constructs and returns a formatted route string. The `_root` and `requestParameters` properties encapsulate the basic elements needed to generate dynamic and parameterized routing paths in a web application. +│ │ ├── Search.ts – This file defines the `Search` namespace which provides functions for interacting with a Solr-based search server. It includes methods to update a single document (`updateDocument`) or multiple documents (`updateDocuments`) in the search index. The `search` function performs queries against the index, returning document IDs and metadata. The `clear` function removes all documents from the index, while `deleteDocuments` can remove specific documents by their IDs. Error handling is implemented for each function, though some log the error without breaking functionality. +│ │ ├── SharedMediaTypes.ts – This file defines various TypeScript interfaces and functions related to media handling in the Dash system. It outlines acceptable media types for images, videos, applications, and audio through the `AcceptableMedia` namespace. The `Upload` namespace provides type-checking functions to determine if uploaded files are text, image, or video, and defines interfaces for structured data related to file information, EXIF data, and inspection results of media files. Additionally, it declares an `AudioAnnoState` enumeration to track the state of audio annotation playbacks. +│ │ ├── SocketData.ts – This TypeScript file establishes configurations and utility functions for managing file paths and socket communications in the Dash system. It defines file paths for different media types using enums and handles server and socket port resolutions. The file also tracks user operations and socket connections with maps, designating configurations for file path resolution both server and client-side. It provides a structure for interfacing with directories, ensuring smooth operation of the server's file management system. +│ │ ├── apis +│ │ │ ├── google +│ │ │ │ ├── CredentialsLoader.ts – This TypeScript file is responsible for loading Google and SSL credentials for server operations. It defines interfaces and functions under two namespaces: GoogleCredentialsLoader and SSL. The GoogleCredentialsLoader namespace includes an interface for installed credentials and an asynchronous function to load these credentials from a JSON file. The SSL namespace manages loading SSL credentials such as private keys and certificates, handling errors, and performing checks to ensure the SSL credentials are available. This management includes providing appropriate feedback and exit messages if credentials are missing. +│ │ │ │ ├── GoogleApiServerUtils.ts – This file, part of the Dash hypermedia system, handles server-side authentication for interacting with various Google APIs, such as Google Docs and Slides. It defines utilities for managing OAuth2 authentication, creating and retrieving OAuth2 clients associated with Dash users, and generating URLs for Google authentication. It features functions to process project-specific credentials, generate authentication URLs, handle new user integrations, and refresh access tokens as needed. This facilitates seamless integration of Google services with the Dash system while ensuring secure and efficient user authentication. +│ │ │ │ └── SharedTypes.ts – This file defines TypeScript interfaces for handling media items in the context of Google API integrations. The 'MediaItem' interface describes a media item with properties for identification, description, URLs, MIME type, media metadata like creation time, and dimensions. The 'NewMediaItemResult' interface outlines the result of creating a new media item, containing an upload token, status code with a message, and a 'MediaItem'. Finally, 'MediaItemCreationResult' is a type alias that groups these results in an array, facilitating handling of batch operations. +│ │ │ └── youtube +│ │ │ └── youtubeApiSample.d.ts – This file declares a constant named `YoutubeApi` with a type of `any`. It is then exported using CommonJS module syntax. This suggests that the file is serving as a placeholder or a simple pass-through for a YouTube API module, indicating that `YoutubeApi` can be of any type until more specific type definitions are provided or imported elsewhere in the codebase. +│ │ ├── authentication +│ │ │ ├── AuthenticationManager.ts – This TypeScript file implements authentication management for the Dash hypermedia system using the Express framework. It includes handlers for rendering and processing signup and login pages, supporting user registration and login via email and password. The file also manages password reset processes with token-based verification and sends reset notifications via email, utilizing nodemailer for email delivery. Additionally, it handles user session management, including logout functionality, ensuring secure access to the platform's features. +│ │ │ ├── DashUserModel.ts – This file defines a DashUserModel using MongoDB's Mongoose schema to represent user accounts in the Dash system. It includes user attributes such as email, password, and various IDs for document management, as well as profile details. Passwords are hashed using bcrypt for security, and a method for comparing passwords is implemented. Additionally, a function to initialize a guest user is provided, which creates a default user with pre-set identifiers and password. +│ │ │ └── Passport.ts – This TypeScript file sets up authentication for the Dash system using the 'passport' library. It employs a local strategy, authenticating users based on their email and password. User sessions are managed through serialization and deserialization functions, where user IDs are used to retrieve user data from the database. The authentication strategy checks for the existence of a user with a matching email and, subsequently, verifies the password, handling errors and success scenarios appropriately. +│ │ ├── database.ts – This TypeScript file facilitates database management for the Dash hypermedia system, primarily using MongoDB via mongoose. It defines functions to connect to the database, manage operations such as insert, update, replace, and delete documents, and manage collections. Additionally, the file provides auxiliary functions for handling Google Photos upload history and Google API access tokens. Connection states and error handling are also outlined to ensure stable database interactions. The module supports both an actual MongoDB instance and an in-memory database option for testing or development. +│ │ ├── index.ts – This file is responsible for initializing and launching the server for the Dash hypermedia system. It imports various utility and manager modules necessary for the operation of the server, configures environment variables using dotenv, and defines preliminary functions needed before the server starts, such as initializing directories, loggers, and database connections. The main function, `launchServer`, coordinates the startup sequence by calling these preliminary functions and setting the server routes using the `routeSetter` function, which registers various API endpoints for managing sessions, users, and more. +│ │ ├── remapUrl.ts – This TypeScript file is part of the server-side code in the Dash hypermedia system. It performs a URL remapping function where it updates document URLs hosted on 'localhost' to a cloud-based URL using a specific Azure endpoint. The script queries a database for documents, modifies URLs of specific types ('video', 'pdf', 'audio', etc.) if they match criteria, and updates them accordingly. After processing each document, it updates the database asynchronously and logs the status of each update operation. +│ │ ├── server_Initialization.ts – This file is responsible for setting up and initializing the server in the Dash hypermedia system. It includes essential middleware configurations such as session management, body parsing, flash messages, and Passport authentication. Additionally, it provides functionality for CORS proxy and authentication routes. The server environment is determined by checking the release status, and the server is set to listen on specified ports. The file also configures Webpack middleware for development purposes and initializes WebSocket communication for real-time data exchange among clients. +│ │ ├── updateProtos.ts – This TypeScript file is responsible for updating a list of prototype entities in a database. It defines an array of prototype identifiers and iterates over them, performing an asynchronous update operation using the 'Database' instance. Each prototype is updated with a specific field set to indicate it is a base prototype. The operations are executed in parallel using 'Promise.all', and upon completion, a message 'done' is logged to the console. +│ │ └── websocket.ts – This TypeScript file manages WebSocket communication in the Dash hypermedia system. It handles incoming socket connections, manages active users, and processes messages related to database operations like document creation, updating, and deletion. The file defines several functions for handling list field modifications and ensuring data consistency between the client and server. It uses a variety of async operations to interact with the database and uses Socket.io for real-time communication, supporting multi-user interactions and data updates in real-time. +│ └── typings +│ ├── connect-flash +│ │ └── index.d.ts – This file declares an ambient module for 'connect-flash', a middleware used in web applications to store flash messages in session which can be displayed to users on redirected pages. By declaring the module, it informs the TypeScript compiler about the existence of the module, allowing other parts of the code to import and use 'connect-flash' without type errors. This is typically used to provide type safety in projects that utilize libraries without their own TypeScript type definitions. +│ ├── connect-mongo +│ │ └── index.d.ts – This file is a TypeScript declaration module for 'connect-mongo', which is a middleware for session management in Node.js applications that use MongoDB for session storage. The file itself is minimal, containing only the module declaration without any specific type definitions or implementations. It serves to inform TypeScript of the existence of the 'connect-mongo' module, allowing developers to smoothly integrate it into their TypeScript projects without type-checking errors. +│ ├── express-flash +│ │ └── index.d.ts – This file is a TypeScript declaration file for the 'express-flash' module. It serves to inform the TypeScript compiler about the existence of the 'express-flash' module, enabling the use of its features within a TypeScript project without the need for additional source code. By declaring the module, it helps in managing type safety and providing better integration within projects that utilize the express-flash middleware for session-based flash messaging capabilities in Express applications. +│ ├── image-data-uri +│ │ └── index.d.ts – This file is a TypeScript declaration module for 'image-data-uri', indicating that a third-party module exists with this name. It also references Node.js types to integrate Node.js functionalities like buffers in type-checking, which could be relevant for processing image data URIs. Such declaration files allow TypeScript to understand module contents without needing specific implementation details, thereby facilitating seamless TypeScript integration with JavaScript libraries. +│ ├── index.d.ts – This TypeScript declaration file provides type definitions for various modules used in the Dash hypermedia system. It includes external modules such as 'googlephotos' and 'cors', and defines an extensive namespace, ReactPDF, for the '@react-pdf/renderer' package. The ReactPDF namespace includes interfaces and classes for creating and managing PDF components within a React application, such as Document, Page, View, and more. It also defines utility objects like Font and StyleSheet for handling fonts and styles in PDF documents. +│ └── jpeg-autorotate +│ └── index.d.ts – This file is a TypeScript declaration file for the 'jpeg-autorotate' module. It includes a reference to Node.js types, suggesting integration with Node.js environments. The declaration allows TypeScript to recognize and correctly type-check the installation and usage of the 'jpeg-autorotate' library in the Dash hypermedia system, facilitating type-safety and autocompletion features during development. +└── test + └── test.ts – This TypeScript test file is part of the Dash hypermedia system and uses Mocha and Chai for testing. It primarily verifies the behavior of a `Doc` class and schema-related functionalities. The tests check for the proper initialization and update of fields within documents using MobX reactions. Different test schemas are created using `createSchema` and `makeInterface`, and their interaction with `Doc` instances is validated to ensure type safety and correct default values. Additionally, the file configures a JSDOM environment to simulate browser-like conditions. |