To implement Engelbart's "Level Clipping" feature into Seed Hypermedia with a focus on weblinks, the idea is to allow users to view and interact with hierarchical content at a specified depth (level) within a document or across linked documents. Here's how you could implement it:
1. Core Idea for Weblinks
Level Clipping in a web-based system like Seed involves dynamically rendering only the content up to a specified depth of the hierarchy:
Level 1: Top-level headings or nodes.
Level 2: Subsections or children of Level 1.
Level n: Descendants down to the nth depth.
For weblinks, this means:
Links can include a level parameter to specify the clipping depth.
When a user navigates to the linked document, only the specified levels of content are displayed.
2. Storing and Saving State
Document Metadata
The document's metadata should store information about its hierarchical structure:
{
"title": "Document Title",
"hierarchy": {
"levels": 4,
"defaultClipLevel": 3
},
"content": [
{ "id": "1", "level": 1, "text": "Main Heading" },
{ "id": "1.1", "level": 2, "text": "Subsection 1" },
{ "id": "1.1.1", "level": 3, "text": "Detail 1.1" }
]
}
Linking System
Links between documents should support the clipLevel parameter:
Example link: https://seedhypermedia.com/doc1?clipLevel=2
This parameter determines the maximum depth of content displayed when the document is rendered.
3. Rendering Logic
The rendering system should:
Parse the clipLevel from the link or use the document's defaultClipLevel.
Traverse the hierarchical structure and only render nodes up to the specified depth.
Provide UI elements (like expand/collapse toggles) to allow users to adjust the clipping level dynamically.
Example Pseudocode
function renderDocument(document, clipLevel) {
const clippedContent = document.content.filter(item => item.level <= clipLevel);
renderHierarchy(clippedContent);
}
4. Example UI Implementation
UI Elements
Add a slider or dropdown to adjust the clipping level dynamically.
Display visual cues (e.g., ellipsis ...) to indicate clipped content.
Example Interface
A user opens a link like: https://seedhypermedia.com/doc1?clipLevel=2.
The system shows only Level 1 and Level 2 content:
Main Heading
Subsection 1
Subsection 2
...
The user adjusts the clipping level to 3, revealing additional details:
Main Heading
Subsection 1
Detail 1.1
Subsection 2
Detail 2.1
5. Dynamic Interaction with Links
Expandable Links
Weblinks can also include interactions for clipping:
When hovering over or clicking a link, a dropdown shows a preview of the clipped content.
Example: Hovering over doc2 at clipLevel=1 might show:
Document Title
Section 1
Section 2
Clicking on the link takes the user to the document with content clipped at Level 1.
Bidirectional Linking
The linking system can store clip-level preferences in both the source and destination documents:
Source document metadata stores how the target is displayed when linked.
Destination document metadata stores its default clipping behavior.
6. Benefits and Use Cases
Focused Navigation
Level Clipping allows users to:
See a concise summary of linked documents.
Drill down into details only when necessary.
Collaboration Context
Workers can link to overview-only versions of documents for high-level discussion.
Deep linking enables referencing specific sections with precise depth.
Example Implementation in Practice
Link Format
<a href="https://seedhypermedia.com/doc1?clipLevel=2">
View Summary of Document
</a>
Dynamic View Update
Allow users to toggle clipping levels without refreshing:
function updateClipLevel(level) {
renderDocument(document, level);
history.pushState({}, '', `?clipLevel=${level}`);
}
Would you like to dive into the technical implementation of any part of this (e.g., rendering, metadata structure, or link design)?