Add DECK Frontend - Vite + TypeScript migration
- Migrated vanilla JS frontend to Vite + TypeScript - Modular architecture: views, components, utils, api, state - Three-panel layout: libraries (left), content (center), detail (right) - Group name resolution via hstTags (set_hst -> readable name) - Name priority: name_es -> alias -> ref -> hash truncated - D3.js lazy loading in GraphView - Hash-based routing - Deployed to tzzrdeck.me Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
ARCHITECT
24
hst-frontend-new/.gitignore
vendored
Normal file
24
hst-frontend-new/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
184
hst-frontend-new/README.md
Normal file
184
hst-frontend-new/README.md
Normal file
@@ -0,0 +1,184 @@
|
||||
# DECK Frontend - Vite + TypeScript
|
||||
|
||||
Frontend modular para visualización de tags semánticos TZZR (HST/FLG/ITM/LOC/PLY).
|
||||
|
||||
## Stack
|
||||
|
||||
- **Vite** - Bundler con HMR
|
||||
- **TypeScript** - Tipado estático
|
||||
- **ES6 Modules** - import/export
|
||||
- **D3.js** - Lazy loading solo en GraphView
|
||||
|
||||
## Estructura
|
||||
|
||||
```
|
||||
src/
|
||||
├── main.ts # Bootstrap y App principal
|
||||
├── types/ # Interfaces TypeScript
|
||||
│ ├── tag.ts # Tag, Group, Library, ChildTag, RelatedTag
|
||||
│ ├── state.ts # AppState, ViewType, BaseType
|
||||
│ └── graph.ts # GraphNode, GraphEdge, EdgeType
|
||||
├── config/ # Constantes
|
||||
│ ├── api.ts # API_BASE
|
||||
│ ├── categories.ts # CATS (colores por categoría)
|
||||
│ └── edges.ts # EDGE_COLORS
|
||||
├── state/ # Store reactivo
|
||||
│ ├── store.ts # createStore<T>()
|
||||
│ └── index.ts # Estado inicial
|
||||
├── api/ # Fetch tipado
|
||||
│ ├── client.ts # apiClient<T>(), apiClientSafe<T>()
|
||||
│ ├── tags.ts # fetchTags, fetchHstTags, fetchChildren, fetchRelated
|
||||
│ ├── groups.ts # fetchGroups
|
||||
│ ├── libraries.ts # fetchLibraries, fetchLibraryMembers
|
||||
│ └── graph.ts # fetchGraphEdges, fetchTreeEdges
|
||||
├── utils/ # Helpers puros
|
||||
│ ├── dom.ts # $, $$, createElement, delegateEvent
|
||||
│ ├── i18n.ts # getName, getImg, createNameMap, resolveGroupName
|
||||
│ ├── filters.ts # filterTags
|
||||
│ ├── clipboard.ts # copyToClipboard, copyMrf
|
||||
│ └── toast.ts # toast()
|
||||
├── components/ # Componentes reutilizables
|
||||
│ ├── Component.ts # Clase base
|
||||
│ ├── Card/
|
||||
│ ├── TagChip/
|
||||
│ └── Toast/
|
||||
├── views/ # Vistas principales
|
||||
│ ├── View.ts # Clase base
|
||||
│ ├── GridView/ # Vista de tarjetas
|
||||
│ ├── TreeView/ # Vista de árbol agrupado
|
||||
│ ├── GraphView/ # Grafo D3 (lazy load)
|
||||
│ └── DetailPanel/ # Panel lateral de detalle
|
||||
├── router/ # Hash routing
|
||||
│ └── index.ts # Router con parseHash/updateHash
|
||||
└── styles/
|
||||
└── main.css # Estilos globales
|
||||
```
|
||||
|
||||
## Resolución de Nombres
|
||||
|
||||
### Prioridad de campos para mostrar nombres
|
||||
|
||||
1. `name_es` / `name_en` / `name_ch` (según idioma)
|
||||
2. `alias`
|
||||
3. `ref`
|
||||
4. `mrf.slice(0, 8)` (fallback a hash truncado)
|
||||
|
||||
### Resolución de grupos (set_hst)
|
||||
|
||||
El campo `set_hst` contiene el MRF de un tag HST que representa la categoría.
|
||||
Para resolver el nombre del grupo:
|
||||
|
||||
1. Se cargan siempre los tags de HST (`fetchHstTags`)
|
||||
2. Se crea un mapa `mrf → nombre` con `createNameMap(hstTags, lang)`
|
||||
3. Se resuelve el nombre con `resolveGroupName(set_hst, nameMap)`
|
||||
|
||||
Esto permite que al ver cualquier base (flg, itm, loc, ply), los grupos
|
||||
muestren nombres legibles en lugar de hashes.
|
||||
|
||||
## API Endpoints
|
||||
|
||||
| Endpoint | Descripción |
|
||||
|----------|-------------|
|
||||
| `GET /api/{base}` | Lista tags (hst, flg, itm, loc, ply) |
|
||||
| `GET /api/hst?select=...` | Tags HST para resolver nombres |
|
||||
| `POST /api/rpc/api_children` | Hijos de un tag |
|
||||
| `POST /api/rpc/api_related` | Tags relacionados |
|
||||
| `GET /api/graph_hst` | Relaciones del grafo |
|
||||
| `GET /api/tree_hst` | Jerarquías |
|
||||
| `GET /api/groups` | Grupos disponibles |
|
||||
| `GET /api/library_hst` | Bibliotecas |
|
||||
| `POST /api/rpc/library_members` | Miembros de biblioteca |
|
||||
|
||||
## Comandos
|
||||
|
||||
```bash
|
||||
# Desarrollo
|
||||
npm run dev
|
||||
|
||||
# Build producción
|
||||
npm run build
|
||||
|
||||
# Preview build
|
||||
npm run preview
|
||||
|
||||
# Lint
|
||||
npm run lint
|
||||
```
|
||||
|
||||
## Despliegue
|
||||
|
||||
```bash
|
||||
# Build
|
||||
npm run build
|
||||
|
||||
# Deploy a DECK
|
||||
scp -r dist/* root@72.62.1.113:/opt/hst/web/
|
||||
```
|
||||
|
||||
## URLs
|
||||
|
||||
- **DECK**: https://tzzrdeck.me
|
||||
- **HST**: https://hst.tzzrdeck.me
|
||||
- **API**: https://tzzrdeck.me/api/
|
||||
|
||||
## Layout
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ TOPBAR: Logo | Lang | API | SEL | GET | Bases | Search | View │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ GROUPS BAR: Todos | Grupo1 | Grupo2 | ... │
|
||||
├────────┬────────────────────────────────────┬───────────────┤
|
||||
│ │ │ │
|
||||
│ LEFT │ CONTENT AREA │ DETAIL │
|
||||
│ PANEL │ (Grid / Tree / Graph) │ PANEL │
|
||||
│ │ │ │
|
||||
│ Libs │ │ (slide-in) │
|
||||
│ │ │ │
|
||||
└────────┴────────────────────────────────────┴───────────────┘
|
||||
```
|
||||
|
||||
## State
|
||||
|
||||
```typescript
|
||||
interface AppState {
|
||||
// Navegación
|
||||
base: 'hst' | 'flg' | 'itm' | 'loc' | 'ply';
|
||||
lang: 'es' | 'en' | 'ch';
|
||||
view: 'grid' | 'tree' | 'graph';
|
||||
|
||||
// Filtros
|
||||
search: string;
|
||||
group: string; // MRF del grupo o 'all'
|
||||
library: string; // MRF de biblioteca o 'all'
|
||||
libraryMembers: Set<string>;
|
||||
|
||||
// Selección
|
||||
selectionMode: boolean;
|
||||
selected: Set<string>;
|
||||
selectedTag: Tag | null;
|
||||
|
||||
// Datos
|
||||
tags: Tag[]; // Tags de la base actual
|
||||
hstTags: Tag[]; // Tags HST para resolver nombres de grupos
|
||||
groups: Group[];
|
||||
libraries: Library[];
|
||||
graphEdges: GraphEdge[];
|
||||
treeEdges: TreeEdge[];
|
||||
|
||||
// Grafo
|
||||
graphFilters: { cats: Set, edges: Set };
|
||||
graphSettings: { nodeSize, linkDist, showImg, showLbl };
|
||||
}
|
||||
```
|
||||
|
||||
## Changelog
|
||||
|
||||
### 2026-01-13
|
||||
|
||||
- Migrado de vanilla JS a Vite + TypeScript
|
||||
- Añadido panel izquierdo de bibliotecas
|
||||
- Implementada resolución de nombres para grupos (set_hst → nombre)
|
||||
- Prioridad de nombres: name_es → alias → ref → hash
|
||||
- D3 lazy loading en GraphView
|
||||
- Layout de 3 paneles (left, center, detail)
|
||||
101
hst-frontend-new/index.html
Normal file
101
hst-frontend-new/index.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<title>DECK</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- TOPBAR -->
|
||||
<div class="topbar">
|
||||
<div class="topbar-left">
|
||||
<span class="logo">DECK</span>
|
||||
<select id="lang-select" class="btn btn-sm">
|
||||
<option value="es">ES</option>
|
||||
<option value="en">EN</option>
|
||||
<option value="ch">CH</option>
|
||||
</select>
|
||||
<button class="btn btn-sm" id="btn-api">API</button>
|
||||
<button class="btn btn-sm" id="btn-sel">SEL</button>
|
||||
<span id="sel-count"></span>
|
||||
<button class="btn btn-sm" id="btn-get">GET</button>
|
||||
</div>
|
||||
<div class="topbar-center">
|
||||
<div class="base-buttons">
|
||||
<button class="base-btn active" data-base="hst">HST</button>
|
||||
<button class="base-btn" data-base="flg">FLG</button>
|
||||
<button class="base-btn" data-base="itm">ITM</button>
|
||||
<button class="base-btn" data-base="loc">LOC</button>
|
||||
<button class="base-btn" data-base="ply">PLY</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<div class="search-box">
|
||||
<input type="text" id="search" class="search-input" placeholder="Buscar...">
|
||||
</div>
|
||||
<div class="view-tabs">
|
||||
<button class="view-tab active" data-view="grid">Grid</button>
|
||||
<button class="view-tab" data-view="tree">Tree</button>
|
||||
<button class="view-tab" data-view="graph">Graph</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GROUPS BAR -->
|
||||
<div id="groups-bar" class="groups-bar"></div>
|
||||
|
||||
<!-- MAIN LAYOUT -->
|
||||
<div class="main-layout">
|
||||
<!-- LEFT PANEL - Libraries -->
|
||||
<div class="left-panel" id="left-panel">
|
||||
<div class="lib-icon active" data-lib="all" title="Todos"><span>ALL</span></div>
|
||||
</div>
|
||||
|
||||
<!-- CENTER PANEL -->
|
||||
<div class="center-panel">
|
||||
<div id="content-area" class="content-area grid-view">
|
||||
<div class="loading">Cargando...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT PANEL - Detail -->
|
||||
<div id="detail-panel" class="detail-panel"></div>
|
||||
</div>
|
||||
|
||||
<!-- API MODAL -->
|
||||
<div id="api-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>API Reference</h3>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="api-item">
|
||||
<div class="api-endpoint">GET /api/{base}</div>
|
||||
<div class="api-desc">Lista tags (base: hst, flg, itm, loc, ply)</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<div class="api-endpoint">POST /api/rpc/api_children</div>
|
||||
<div class="api-desc">Obtener hijos de un tag</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<div class="api-endpoint">POST /api/rpc/api_related</div>
|
||||
<div class="api-desc">Obtener tags relacionados</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<div class="api-endpoint">GET /api/graph_hst</div>
|
||||
<div class="api-desc">Relaciones del grafo</div>
|
||||
</div>
|
||||
<div class="api-item">
|
||||
<div class="api-endpoint">GET /api/tree_hst</div>
|
||||
<div class="api-desc">Jerarquias</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
1872
hst-frontend-new/package-lock.json
generated
Normal file
1872
hst-frontend-new/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
hst-frontend-new/package.json
Normal file
19
hst-frontend-new/package.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "deck-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/d3": "^7.4.3",
|
||||
"typescript": "~5.9.3",
|
||||
"vite": "^7.2.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"d3": "^7.9.0"
|
||||
}
|
||||
}
|
||||
38
hst-frontend-new/src/api/client.ts
Normal file
38
hst-frontend-new/src/api/client.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { API_BASE } from '@/config/index.ts';
|
||||
|
||||
interface FetchOptions {
|
||||
method?: 'GET' | 'POST';
|
||||
body?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export async function apiClient<T>(
|
||||
endpoint: string,
|
||||
options: FetchOptions = {}
|
||||
): Promise<T> {
|
||||
const { method = 'GET', body } = options;
|
||||
|
||||
const config: RequestInit = {
|
||||
method,
|
||||
headers: body ? { 'Content-Type': 'application/json' } : undefined,
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
};
|
||||
|
||||
const response = await fetch(`${API_BASE}${endpoint}`, config);
|
||||
if (!response.ok) {
|
||||
throw new Error(`API Error: ${response.status}`);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function apiClientSafe<T>(
|
||||
endpoint: string,
|
||||
options: FetchOptions = {},
|
||||
fallback: T
|
||||
): Promise<T> {
|
||||
try {
|
||||
return await apiClient<T>(endpoint, options);
|
||||
} catch {
|
||||
console.error(`API call failed: ${endpoint}`);
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
8
hst-frontend-new/src/api/graph.ts
Normal file
8
hst-frontend-new/src/api/graph.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { apiClientSafe } from './client.ts';
|
||||
import type { GraphEdge, TreeEdge } from '@/types/index.ts';
|
||||
|
||||
export const fetchGraphEdges = (): Promise<GraphEdge[]> =>
|
||||
apiClientSafe<GraphEdge[]>('/graph_hst', {}, []);
|
||||
|
||||
export const fetchTreeEdges = (): Promise<TreeEdge[]> =>
|
||||
apiClientSafe<TreeEdge[]>('/tree_hst', {}, []);
|
||||
5
hst-frontend-new/src/api/groups.ts
Normal file
5
hst-frontend-new/src/api/groups.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { apiClientSafe } from './client.ts';
|
||||
import type { Group } from '@/types/index.ts';
|
||||
|
||||
export const fetchGroups = (): Promise<Group[]> =>
|
||||
apiClientSafe<Group[]>('/api_groups', {}, []);
|
||||
5
hst-frontend-new/src/api/index.ts
Normal file
5
hst-frontend-new/src/api/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export { apiClient, apiClientSafe } from './client.ts';
|
||||
export { fetchTags, fetchHstTags, fetchChildren, fetchRelated } from './tags.ts';
|
||||
export { fetchGroups } from './groups.ts';
|
||||
export { fetchLibraries, fetchLibraryMembers } from './libraries.ts';
|
||||
export { fetchGraphEdges, fetchTreeEdges } from './graph.ts';
|
||||
14
hst-frontend-new/src/api/libraries.ts
Normal file
14
hst-frontend-new/src/api/libraries.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { apiClientSafe } from './client.ts';
|
||||
import type { Library } from '@/types/index.ts';
|
||||
|
||||
export const fetchLibraries = (): Promise<Library[]> =>
|
||||
apiClientSafe<Library[]>('/api_library_list', {}, []);
|
||||
|
||||
export const fetchLibraryMembers = async (mrf: string): Promise<string[]> => {
|
||||
const data = await apiClientSafe<Array<{ mrf_tag: string }>>(
|
||||
`/library_hst?mrf_library=eq.${mrf}`,
|
||||
{},
|
||||
[]
|
||||
);
|
||||
return data.map(d => d.mrf_tag);
|
||||
};
|
||||
21
hst-frontend-new/src/api/tags.ts
Normal file
21
hst-frontend-new/src/api/tags.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { apiClientSafe } from './client.ts';
|
||||
import type { Tag, ChildTag, RelatedTag, BaseType } from '@/types/index.ts';
|
||||
|
||||
export const fetchTags = (base: BaseType): Promise<Tag[]> =>
|
||||
apiClientSafe<Tag[]>(`/${base}?order=ref.asc`, {}, []);
|
||||
|
||||
// Fetch HST tags for group name resolution (set_hst points to hst tags)
|
||||
export const fetchHstTags = (): Promise<Tag[]> =>
|
||||
apiClientSafe<Tag[]>('/hst?select=mrf,ref,alias,name_es,name_en,name_ch', {}, []);
|
||||
|
||||
export const fetchChildren = (mrf: string): Promise<ChildTag[]> =>
|
||||
apiClientSafe<ChildTag[]>('/rpc/api_children', {
|
||||
method: 'POST',
|
||||
body: { parent_mrf: mrf }
|
||||
}, []);
|
||||
|
||||
export const fetchRelated = (mrf: string): Promise<RelatedTag[]> =>
|
||||
apiClientSafe<RelatedTag[]>('/rpc/api_related', {
|
||||
method: 'POST',
|
||||
body: { tag_mrf: mrf }
|
||||
}, []);
|
||||
47
hst-frontend-new/src/components/Card/Card.ts
Normal file
47
hst-frontend-new/src/components/Card/Card.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Component } from '../Component.ts';
|
||||
import type { Tag, LangType } from '@/types/index.ts';
|
||||
import { getName, getImg } from '@/utils/index.ts';
|
||||
|
||||
export interface CardProps {
|
||||
tag: Tag;
|
||||
lang: LangType;
|
||||
selected: boolean;
|
||||
selectionMode: boolean;
|
||||
onClick: (mrf: string) => void;
|
||||
onSelect: (mrf: string) => void;
|
||||
}
|
||||
|
||||
export class Card extends Component<CardProps> {
|
||||
protected template(): string {
|
||||
const { tag, lang, selected, selectionMode } = this.props;
|
||||
const img = getImg(tag);
|
||||
const name = getName(tag, lang);
|
||||
|
||||
return `
|
||||
<div class="card ${selected ? 'selected' : ''}" data-mrf="${tag.mrf}">
|
||||
${selectionMode ? `
|
||||
<input type="checkbox" class="card-checkbox" ${selected ? 'checked' : ''}>
|
||||
` : ''}
|
||||
${img
|
||||
? `<img class="card-img" src="${img}" alt="${tag.ref}" loading="lazy">`
|
||||
: `<div class="card-placeholder">${tag.ref?.slice(0, 2) || 'T'}</div>`
|
||||
}
|
||||
<div class="card-name">${name}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected bindEvents(): void {
|
||||
const { onClick, onSelect, selectionMode } = this.props;
|
||||
const mrf = this.props.tag.mrf;
|
||||
|
||||
this.element.addEventListener('click', (e) => {
|
||||
if (selectionMode) {
|
||||
e.preventDefault();
|
||||
onSelect(mrf);
|
||||
} else {
|
||||
onClick(mrf);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
42
hst-frontend-new/src/components/Component.ts
Normal file
42
hst-frontend-new/src/components/Component.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
export abstract class Component<P extends object = object> {
|
||||
protected element: HTMLElement;
|
||||
protected props: P;
|
||||
|
||||
constructor(props: P) {
|
||||
this.props = props;
|
||||
this.element = this.createElement();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
protected abstract template(): string;
|
||||
|
||||
protected createElement(): HTMLElement {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.innerHTML = this.template().trim();
|
||||
return wrapper.firstElementChild as HTMLElement;
|
||||
}
|
||||
|
||||
protected bindEvents(): void {
|
||||
// Override in subclasses
|
||||
}
|
||||
|
||||
public mount(container: HTMLElement): void {
|
||||
container.appendChild(this.element);
|
||||
}
|
||||
|
||||
public unmount(): void {
|
||||
this.element.remove();
|
||||
}
|
||||
|
||||
public update(props: Partial<P>): void {
|
||||
this.props = { ...this.props, ...props };
|
||||
const newElement = this.createElement();
|
||||
this.element.replaceWith(newElement);
|
||||
this.element = newElement;
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
public getElement(): HTMLElement {
|
||||
return this.element;
|
||||
}
|
||||
}
|
||||
46
hst-frontend-new/src/components/Modal/Modal.ts
Normal file
46
hst-frontend-new/src/components/Modal/Modal.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Component } from '../Component.ts';
|
||||
|
||||
export interface ModalProps {
|
||||
title: string;
|
||||
content: string;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export class Modal extends Component<ModalProps> {
|
||||
protected template(): string {
|
||||
const { title, content, isOpen } = this.props;
|
||||
return `
|
||||
<div class="modal ${isOpen ? 'open' : ''}">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>${title}</h3>
|
||||
<button class="modal-close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
${content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
protected bindEvents(): void {
|
||||
const closeBtn = this.element.querySelector('.modal-close');
|
||||
closeBtn?.addEventListener('click', this.props.onClose);
|
||||
|
||||
this.element.addEventListener('click', (e) => {
|
||||
if (e.target === this.element) {
|
||||
this.props.onClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public open(): void {
|
||||
this.element.classList.add('open');
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
this.element.classList.remove('open');
|
||||
}
|
||||
}
|
||||
25
hst-frontend-new/src/components/TagChip/TagChip.ts
Normal file
25
hst-frontend-new/src/components/TagChip/TagChip.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Component } from '../Component.ts';
|
||||
|
||||
export interface TagChipProps {
|
||||
mrf: string;
|
||||
label: string;
|
||||
title?: string;
|
||||
onClick: (mrf: string) => void;
|
||||
}
|
||||
|
||||
export class TagChip extends Component<TagChipProps> {
|
||||
protected template(): string {
|
||||
const { mrf, label, title } = this.props;
|
||||
return `
|
||||
<span class="tag-chip" data-mrf="${mrf}" title="${title || ''}">
|
||||
${label}
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
|
||||
protected bindEvents(): void {
|
||||
this.element.addEventListener('click', () => {
|
||||
this.props.onClick(this.props.mrf);
|
||||
});
|
||||
}
|
||||
}
|
||||
4
hst-frontend-new/src/components/index.ts
Normal file
4
hst-frontend-new/src/components/index.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export { Component } from './Component.ts';
|
||||
export { Card, type CardProps } from './Card/Card.ts';
|
||||
export { TagChip, type TagChipProps } from './TagChip/TagChip.ts';
|
||||
export { Modal, type ModalProps } from './Modal/Modal.ts';
|
||||
1
hst-frontend-new/src/config/api.ts
Normal file
1
hst-frontend-new/src/config/api.ts
Normal file
@@ -0,0 +1 @@
|
||||
export const API_BASE = '/api';
|
||||
15
hst-frontend-new/src/config/categories.ts
Normal file
15
hst-frontend-new/src/config/categories.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import type { CategoryKey } from '@/types/index.ts';
|
||||
|
||||
export interface CategoryConfig {
|
||||
name: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export const CATS: Record<CategoryKey, CategoryConfig> = {
|
||||
hst: { name: 'Hashtags', color: '#7c8aff' },
|
||||
spe: { name: 'Specs', color: '#FF9800' },
|
||||
vue: { name: 'Values', color: '#00BCD4' },
|
||||
vsn: { name: 'Visions', color: '#E91E63' },
|
||||
msn: { name: 'Missions', color: '#9C27B0' },
|
||||
flg: { name: 'Flags', color: '#4CAF50' }
|
||||
};
|
||||
14
hst-frontend-new/src/config/edges.ts
Normal file
14
hst-frontend-new/src/config/edges.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import type { EdgeType } from '@/types/index.ts';
|
||||
|
||||
export const EDGE_COLORS: Record<EdgeType, string> = {
|
||||
relation: '#8BC34A',
|
||||
specialization: '#9C27B0',
|
||||
mirror: '#607D8B',
|
||||
dependency: '#2196F3',
|
||||
sequence: '#4CAF50',
|
||||
composition: '#FF9800',
|
||||
hierarchy: '#E91E63',
|
||||
library: '#00BCD4',
|
||||
contextual: '#FFC107',
|
||||
association: '#795548'
|
||||
};
|
||||
3
hst-frontend-new/src/config/index.ts
Normal file
3
hst-frontend-new/src/config/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { CATS, type CategoryConfig } from './categories.ts';
|
||||
export { EDGE_COLORS } from './edges.ts';
|
||||
export { API_BASE } from './api.ts';
|
||||
310
hst-frontend-new/src/main.ts
Normal file
310
hst-frontend-new/src/main.ts
Normal file
@@ -0,0 +1,310 @@
|
||||
import { store } from '@/state/index.ts';
|
||||
import { Router } from '@/router/index.ts';
|
||||
import { fetchTags, fetchHstTags, fetchGroups, fetchLibraries, fetchLibraryMembers } from '@/api/index.ts';
|
||||
import { GridView, TreeView, GraphView, DetailPanel } from '@/views/index.ts';
|
||||
import { $, $$, delegateEvent, toast, createNameMap, resolveGroupName } from '@/utils/index.ts';
|
||||
import type { BaseType, ViewType } from '@/types/index.ts';
|
||||
import './styles/main.css';
|
||||
|
||||
class App {
|
||||
private router: Router;
|
||||
private currentView: GridView | TreeView | GraphView | null = null;
|
||||
private detailPanel: DetailPanel | null = null;
|
||||
|
||||
constructor() {
|
||||
this.router = new Router(store, () => this.init());
|
||||
}
|
||||
|
||||
async start(): Promise<void> {
|
||||
this.router.parseHash();
|
||||
await this.init();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
private async init(): Promise<void> {
|
||||
const contentArea = $('#content-area');
|
||||
const detailPanelEl = $('#detail-panel');
|
||||
if (!contentArea || !detailPanelEl) return;
|
||||
|
||||
// Update UI
|
||||
this.updateBaseButtons();
|
||||
this.updateViewTabs();
|
||||
|
||||
// Show loading
|
||||
contentArea.innerHTML = '<div class="loading">Cargando...</div>';
|
||||
|
||||
// Fetch data
|
||||
const state = store.getState();
|
||||
const [tags, hstTags, groups, libraries] = await Promise.all([
|
||||
fetchTags(state.base),
|
||||
fetchHstTags(), // Always load HST for group name resolution
|
||||
fetchGroups(),
|
||||
fetchLibraries()
|
||||
]);
|
||||
store.setState({ tags, hstTags, groups, libraries });
|
||||
|
||||
// Render groups
|
||||
this.renderGroups();
|
||||
this.renderLibraries();
|
||||
|
||||
// Setup detail panel
|
||||
if (!this.detailPanel) {
|
||||
this.detailPanel = new DetailPanel(detailPanelEl, store);
|
||||
}
|
||||
|
||||
// Render view
|
||||
this.renderView();
|
||||
}
|
||||
|
||||
private renderView(): void {
|
||||
const contentArea = $('#content-area');
|
||||
if (!contentArea) return;
|
||||
|
||||
const state = store.getState();
|
||||
const showDetail = (mrf: string) => this.detailPanel?.showDetail(mrf);
|
||||
|
||||
// Unmount current view
|
||||
this.currentView?.unmount();
|
||||
|
||||
// Clear and set class
|
||||
contentArea.innerHTML = '';
|
||||
contentArea.className = `content-area ${state.view}-view`;
|
||||
|
||||
// Mount new view
|
||||
switch (state.view) {
|
||||
case 'grid':
|
||||
this.currentView = new GridView(contentArea, store, showDetail);
|
||||
this.currentView.mount();
|
||||
break;
|
||||
case 'tree':
|
||||
this.currentView = new TreeView(contentArea, store, showDetail);
|
||||
this.currentView.mount();
|
||||
break;
|
||||
case 'graph':
|
||||
this.currentView = new GraphView(contentArea, store, showDetail);
|
||||
(this.currentView as GraphView).mount();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private renderGroups(): void {
|
||||
const container = $('#groups-bar');
|
||||
if (!container) return;
|
||||
|
||||
const state = store.getState();
|
||||
// Use hstTags for group name resolution (set_hst points to hst tags)
|
||||
const nameMap = createNameMap(state.hstTags, state.lang);
|
||||
|
||||
// Count tags per group
|
||||
const counts = new Map<string, number>();
|
||||
state.tags.forEach(tag => {
|
||||
const group = tag.set_hst || 'sin-grupo';
|
||||
counts.set(group, (counts.get(group) || 0) + 1);
|
||||
});
|
||||
|
||||
// Sort by count and take top 20
|
||||
const sorted = Array.from(counts.entries())
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, 20);
|
||||
|
||||
container.innerHTML = `
|
||||
<button class="group-btn ${state.group === 'all' ? 'active' : ''}" data-group="all">
|
||||
Todos (${state.tags.length})
|
||||
</button>
|
||||
${sorted.map(([groupMrf, count]) => {
|
||||
const groupName = resolveGroupName(groupMrf === 'sin-grupo' ? undefined : groupMrf, nameMap);
|
||||
return `
|
||||
<button class="group-btn ${state.group === groupMrf ? 'active' : ''}" data-group="${groupMrf}">
|
||||
${groupName} (${count})
|
||||
</button>
|
||||
`;
|
||||
}).join('')}
|
||||
`;
|
||||
|
||||
delegateEvent<MouseEvent>(container, '.group-btn', 'click', (_, target) => {
|
||||
const group = target.dataset.group || 'all';
|
||||
store.setState({ group });
|
||||
this.renderGroups();
|
||||
this.renderView();
|
||||
});
|
||||
}
|
||||
|
||||
private renderLibraries(): void {
|
||||
const container = $('#left-panel');
|
||||
if (!container) return;
|
||||
|
||||
const state = store.getState();
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="lib-icon ${state.library === 'all' ? 'active' : ''}" data-lib="all" title="Todos">
|
||||
<span>ALL</span>
|
||||
</div>
|
||||
${state.libraries.map(lib => {
|
||||
const icon = lib.img_thumb_url || lib.icon_url || '';
|
||||
const name = lib.name || lib.name_es || lib.alias || lib.ref || lib.mrf.slice(0, 6);
|
||||
return `
|
||||
<div class="lib-icon ${state.library === lib.mrf ? 'active' : ''}" data-lib="${lib.mrf}" title="${name}">
|
||||
${icon ? `<img src="${icon}" alt="">` : ''}
|
||||
<span>${name.slice(0, 8)}</span>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
`;
|
||||
|
||||
delegateEvent<MouseEvent>(container, '.lib-icon', 'click', async (_, target) => {
|
||||
const library = target.dataset.lib || 'all';
|
||||
|
||||
if (library === 'all') {
|
||||
store.setState({ library: 'all', libraryMembers: new Set() });
|
||||
} else {
|
||||
const members = await fetchLibraryMembers(library);
|
||||
store.setState({ library, libraryMembers: new Set(members) });
|
||||
}
|
||||
|
||||
this.renderLibraries();
|
||||
this.renderView();
|
||||
});
|
||||
}
|
||||
|
||||
private updateBaseButtons(): void {
|
||||
const state = store.getState();
|
||||
$$('.base-btn').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.base === state.base);
|
||||
});
|
||||
}
|
||||
|
||||
private updateViewTabs(): void {
|
||||
const state = store.getState();
|
||||
$$('.view-tab').forEach(tab => {
|
||||
tab.classList.toggle('active', tab.dataset.view === state.view);
|
||||
});
|
||||
}
|
||||
|
||||
private bindEvents(): void {
|
||||
// Base buttons
|
||||
delegateEvent<MouseEvent>(document.body, '.base-btn', 'click', async (_, target) => {
|
||||
const base = target.dataset.base as BaseType;
|
||||
if (!base) return;
|
||||
|
||||
store.setState({
|
||||
base,
|
||||
group: 'all',
|
||||
library: 'all',
|
||||
libraryMembers: new Set(),
|
||||
search: '',
|
||||
graphEdges: [],
|
||||
treeEdges: [],
|
||||
selected: new Set(),
|
||||
selectionMode: false
|
||||
});
|
||||
|
||||
this.router.updateHash();
|
||||
await this.init();
|
||||
});
|
||||
|
||||
// View tabs
|
||||
delegateEvent<MouseEvent>(document.body, '.view-tab', 'click', (_, target) => {
|
||||
const view = target.dataset.view as ViewType;
|
||||
if (!view) return;
|
||||
|
||||
store.setState({ view });
|
||||
this.router.updateHash();
|
||||
this.detailPanel?.close();
|
||||
this.updateViewTabs();
|
||||
this.renderView();
|
||||
});
|
||||
|
||||
// Search
|
||||
const searchInput = $('#search') as HTMLInputElement;
|
||||
if (searchInput) {
|
||||
let timeout: number;
|
||||
searchInput.addEventListener('input', () => {
|
||||
clearTimeout(timeout);
|
||||
timeout = window.setTimeout(() => {
|
||||
store.setState({ search: searchInput.value });
|
||||
this.renderView();
|
||||
}, 200);
|
||||
});
|
||||
}
|
||||
|
||||
// Language select
|
||||
const langSelect = $('#lang-select') as HTMLSelectElement;
|
||||
if (langSelect) {
|
||||
langSelect.addEventListener('change', () => {
|
||||
store.setState({ lang: langSelect.value as 'es' | 'en' | 'ch' });
|
||||
this.renderView();
|
||||
});
|
||||
}
|
||||
|
||||
// Selection mode
|
||||
const selBtn = $('#btn-sel');
|
||||
if (selBtn) {
|
||||
selBtn.addEventListener('click', () => {
|
||||
const state = store.getState();
|
||||
store.setState({
|
||||
selectionMode: !state.selectionMode,
|
||||
selected: state.selectionMode ? new Set() : state.selected
|
||||
});
|
||||
selBtn.classList.toggle('active', !state.selectionMode);
|
||||
this.updateSelectionCount();
|
||||
this.renderView();
|
||||
});
|
||||
}
|
||||
|
||||
// Get selected
|
||||
const getBtn = $('#btn-get');
|
||||
if (getBtn) {
|
||||
getBtn.addEventListener('click', () => {
|
||||
const state = store.getState();
|
||||
if (state.selected.size === 0) {
|
||||
toast('No hay seleccionados');
|
||||
return;
|
||||
}
|
||||
navigator.clipboard.writeText([...state.selected].join('\n'))
|
||||
.then(() => toast(`Copiados ${state.selected.size} mrfs`));
|
||||
});
|
||||
}
|
||||
|
||||
// API modal
|
||||
const apiBtn = $('#btn-api');
|
||||
const apiModal = $('#api-modal');
|
||||
if (apiBtn && apiModal) {
|
||||
apiBtn.addEventListener('click', () => apiModal.classList.add('open'));
|
||||
apiModal.addEventListener('click', (e) => {
|
||||
if (e.target === apiModal) apiModal.classList.remove('open');
|
||||
});
|
||||
const closeBtn = apiModal.querySelector('.modal-close');
|
||||
closeBtn?.addEventListener('click', () => apiModal.classList.remove('open'));
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
this.detailPanel?.close();
|
||||
$('#api-modal')?.classList.remove('open');
|
||||
if (store.getState().selectionMode) {
|
||||
store.setState({ selectionMode: false, selected: new Set() });
|
||||
$('#btn-sel')?.classList.remove('active');
|
||||
this.renderView();
|
||||
}
|
||||
}
|
||||
if (e.key === '/' && (e.target as HTMLElement).tagName !== 'INPUT') {
|
||||
e.preventDefault();
|
||||
($('#search') as HTMLInputElement)?.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private updateSelectionCount(): void {
|
||||
const counter = $('#sel-count');
|
||||
if (counter) {
|
||||
const count = store.getState().selected.size;
|
||||
counter.textContent = count > 0 ? `(${count})` : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new App().start();
|
||||
});
|
||||
1
hst-frontend-new/src/router/index.ts
Normal file
1
hst-frontend-new/src/router/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { Router } from './router.ts';
|
||||
62
hst-frontend-new/src/router/router.ts
Normal file
62
hst-frontend-new/src/router/router.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import type { Store } from '@/state/store.ts';
|
||||
import type { AppState, BaseType, ViewType } from '@/types/index.ts';
|
||||
|
||||
const VALID_BASES: BaseType[] = ['hst', 'flg', 'itm', 'loc', 'ply'];
|
||||
const VALID_VIEWS: ViewType[] = ['grid', 'tree', 'graph'];
|
||||
|
||||
export class Router {
|
||||
private store: Store<AppState>;
|
||||
private onNavigate: () => void;
|
||||
|
||||
constructor(store: Store<AppState>, onNavigate: () => void) {
|
||||
this.store = store;
|
||||
this.onNavigate = onNavigate;
|
||||
|
||||
window.addEventListener('hashchange', () => this.handleHashChange());
|
||||
}
|
||||
|
||||
parseHash(): void {
|
||||
const hash = window.location.hash
|
||||
.replace(/^#\/?/, '')
|
||||
.replace(/\/?$/, '')
|
||||
.split('/')
|
||||
.filter(Boolean);
|
||||
|
||||
const state = this.store.getState();
|
||||
let base = state.base;
|
||||
let view = state.view;
|
||||
|
||||
if (hash[0] && VALID_BASES.includes(hash[0].toLowerCase() as BaseType)) {
|
||||
base = hash[0].toLowerCase() as BaseType;
|
||||
}
|
||||
|
||||
if (hash[1] && VALID_VIEWS.includes(hash[1].toLowerCase() as ViewType)) {
|
||||
view = hash[1].toLowerCase() as ViewType;
|
||||
}
|
||||
|
||||
this.store.setState({ base, view });
|
||||
}
|
||||
|
||||
updateHash(): void {
|
||||
const state = this.store.getState();
|
||||
const parts: string[] = [state.base];
|
||||
if (state.view !== 'grid') {
|
||||
parts.push(state.view);
|
||||
}
|
||||
window.location.hash = '/' + parts.join('/') + '/';
|
||||
}
|
||||
|
||||
private handleHashChange(): void {
|
||||
this.parseHash();
|
||||
this.onNavigate();
|
||||
}
|
||||
|
||||
navigate(base?: BaseType, view?: ViewType): void {
|
||||
const state = this.store.getState();
|
||||
this.store.setState({
|
||||
base: base ?? state.base,
|
||||
view: view ?? state.view
|
||||
});
|
||||
this.updateHash();
|
||||
}
|
||||
}
|
||||
35
hst-frontend-new/src/state/index.ts
Normal file
35
hst-frontend-new/src/state/index.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { createStore } from './store.ts';
|
||||
import type { AppState, EdgeType } from '@/types/index.ts';
|
||||
import { EDGE_COLORS } from '@/config/index.ts';
|
||||
|
||||
const initialState: AppState = {
|
||||
base: 'hst',
|
||||
lang: 'es',
|
||||
view: 'grid',
|
||||
search: '',
|
||||
group: 'all',
|
||||
library: 'all',
|
||||
libraryMembers: new Set(),
|
||||
selectionMode: false,
|
||||
selected: new Set(),
|
||||
selectedTag: null,
|
||||
tags: [],
|
||||
hstTags: [],
|
||||
groups: [],
|
||||
libraries: [],
|
||||
graphEdges: [],
|
||||
treeEdges: [],
|
||||
graphFilters: {
|
||||
cats: new Set(['hst'] as const),
|
||||
edges: new Set(Object.keys(EDGE_COLORS) as EdgeType[])
|
||||
},
|
||||
graphSettings: {
|
||||
nodeSize: 20,
|
||||
linkDist: 80,
|
||||
showImg: true,
|
||||
showLbl: true
|
||||
}
|
||||
};
|
||||
|
||||
export const store = createStore(initialState);
|
||||
export { createStore } from './store.ts';
|
||||
27
hst-frontend-new/src/state/store.ts
Normal file
27
hst-frontend-new/src/state/store.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
type Listener<T> = (state: T, prevState: T) => void;
|
||||
|
||||
export interface Store<T extends object> {
|
||||
getState: () => Readonly<T>;
|
||||
setState: (partial: Partial<T>) => void;
|
||||
subscribe: (listener: Listener<T>) => () => void;
|
||||
}
|
||||
|
||||
export function createStore<T extends object>(initialState: T): Store<T> {
|
||||
let state = { ...initialState };
|
||||
const listeners = new Set<Listener<T>>();
|
||||
|
||||
return {
|
||||
getState: (): Readonly<T> => state,
|
||||
|
||||
setState: (partial: Partial<T>): void => {
|
||||
const prevState = state;
|
||||
state = { ...state, ...partial };
|
||||
listeners.forEach(fn => fn(state, prevState));
|
||||
},
|
||||
|
||||
subscribe: (listener: Listener<T>): (() => void) => {
|
||||
listeners.add(listener);
|
||||
return () => listeners.delete(listener);
|
||||
}
|
||||
};
|
||||
}
|
||||
575
hst-frontend-new/src/styles/main.css
Normal file
575
hst-frontend-new/src/styles/main.css
Normal file
@@ -0,0 +1,575 @@
|
||||
/* === RESET & VARIABLES === */
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
--bg-secondary: #12121a;
|
||||
--bg-card: #1a1a24;
|
||||
--border: #2a2a3a;
|
||||
--text: #e0e0e0;
|
||||
--text-muted: #888;
|
||||
--accent: #7c8aff;
|
||||
--card-width: 176px;
|
||||
--card-img-height: 176px;
|
||||
}
|
||||
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg-secondary); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #444; }
|
||||
|
||||
/* === APP LAYOUT === */
|
||||
.app { display: flex; flex-direction: column; height: 100vh; }
|
||||
|
||||
/* === TOPBAR === */
|
||||
.topbar {
|
||||
height: 50px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
.topbar-left { display: flex; align-items: center; gap: 10px; }
|
||||
.topbar-center { flex: 1; display: flex; justify-content: center; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 10px; }
|
||||
.logo { font-weight: 700; font-size: 1.2em; color: var(--accent); letter-spacing: 1px; }
|
||||
|
||||
/* === BUTTONS === */
|
||||
.btn {
|
||||
padding: 7px 14px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.btn:hover { border-color: var(--accent); color: var(--text); }
|
||||
.btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.btn-sm { padding: 5px 10px; font-size: 0.75em; }
|
||||
.sel-count { font-size: 0.7em; margin-left: 4px; opacity: 0.8; }
|
||||
|
||||
.search-input {
|
||||
width: 300px;
|
||||
padding: 9px 14px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.search-input:focus { outline: none; border-color: var(--accent); }
|
||||
.search-input::placeholder { color: var(--text-muted); }
|
||||
|
||||
.base-buttons { display: flex; gap: 2px; background: var(--bg-card); border-radius: 6px; padding: 3px; }
|
||||
.base-btn {
|
||||
padding: 6px 14px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.base-btn:hover { color: var(--text); }
|
||||
.base-btn.active { background: var(--accent); color: #fff; }
|
||||
|
||||
/* === GROUPS BAR === */
|
||||
.groups-bar {
|
||||
height: 44px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.group-btn {
|
||||
padding: 6px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.group-btn:hover { border-color: var(--accent); color: var(--text); }
|
||||
.group-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
|
||||
/* === MAIN LAYOUT === */
|
||||
.main-layout { display: flex; flex: 1; overflow: hidden; }
|
||||
|
||||
/* === LEFT PANEL === */
|
||||
.left-panel {
|
||||
width: 84px;
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border);
|
||||
overflow-y: auto;
|
||||
padding: 10px 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lib-icon {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
margin: 6px auto;
|
||||
border-radius: 10px;
|
||||
background: var(--bg-card);
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
transition: all 0.15s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lib-icon:hover { border-color: var(--accent); }
|
||||
.lib-icon.active { border-color: var(--accent); background: rgba(124, 138, 255, 0.15); }
|
||||
.lib-icon img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
|
||||
.lib-icon span {
|
||||
font-size: 0.6em;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
max-width: 60px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* === CENTER PANEL === */
|
||||
.center-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
|
||||
/* === VIEW TABS === */
|
||||
.view-tabs { display: flex; gap: 6px; }
|
||||
.view-tab {
|
||||
padding: 7px 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.view-tab:hover { color: var(--text); background: var(--bg-card); }
|
||||
.view-tab.active { background: var(--accent); color: #fff; }
|
||||
|
||||
/* === CONTENT AREA === */
|
||||
.content-area { flex: 1; overflow: hidden; position: relative; }
|
||||
|
||||
/* === GRID VIEW === */
|
||||
.grid-view {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: var(--card-width);
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
background: var(--bg-card);
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
position: relative;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
.card.selected {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(124, 138, 255, 0.4);
|
||||
}
|
||||
|
||||
.card-checkbox {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0,0,0,0.7);
|
||||
border: 2px solid var(--border);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.card-checkbox.visible { display: flex; }
|
||||
.card-checkbox.checked { background: var(--accent); border-color: var(--accent); }
|
||||
.card-checkbox.checked::after { content: "\2713"; color: #fff; font-size: 14px; font-weight: bold; }
|
||||
|
||||
.card-image {
|
||||
width: var(--card-width);
|
||||
height: var(--card-img-height);
|
||||
background: linear-gradient(145deg, #1a1a24 0%, #0a0a0f 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-placeholder {
|
||||
width: var(--card-width);
|
||||
height: var(--card-img-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5em;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
opacity: 0.5;
|
||||
text-transform: uppercase;
|
||||
background: linear-gradient(145deg, #1a1a24 0%, #0a0a0f 100%);
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: var(--card-width);
|
||||
height: var(--card-img-height);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card-body { padding: 12px; }
|
||||
.card-ref {
|
||||
font-size: 0.75em;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.card-name {
|
||||
font-size: 0.85em;
|
||||
color: var(--text);
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* === TREE VIEW === */
|
||||
.tree-view {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.tree-group { margin-bottom: 12px; }
|
||||
.tree-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-card);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.tree-header:hover { background: var(--bg-secondary); }
|
||||
.tree-toggle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tree-group-name { flex: 1; font-weight: 500; }
|
||||
.tree-count {
|
||||
font-size: 0.75em;
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-secondary);
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.tree-items { display: none; margin-left: 28px; margin-top: 4px; }
|
||||
.tree-items.expanded { display: block; }
|
||||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
margin: 3px 0;
|
||||
gap: 10px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.tree-item:hover { background: var(--bg-card); }
|
||||
.tree-item.selected { background: rgba(124,138,255,0.15); }
|
||||
.tree-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
.tree-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
}
|
||||
.tree-name { font-size: 0.9em; }
|
||||
|
||||
/* === GRAPH VIEW === */
|
||||
.graph-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.graph-view svg { width: 100%; height: 100%; display: block; background: var(--bg); }
|
||||
.node { cursor: pointer; }
|
||||
.node text { fill: var(--text-muted); pointer-events: none; font-size: 11px; }
|
||||
.node.selected circle { stroke: var(--accent); stroke-width: 4; }
|
||||
.link { stroke-opacity: 0.5; }
|
||||
|
||||
/* === DETAIL PANEL === */
|
||||
.detail-panel {
|
||||
width: 0;
|
||||
background: var(--bg-secondary);
|
||||
border-left: 1px solid var(--border);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
transition: width 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.detail-panel.open { width: 360px; }
|
||||
|
||||
.detail-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg) 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.detail-placeholder {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 5em;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
opacity: 0.4;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.detail-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.detail-close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0,0,0,0.7);
|
||||
border: none;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
z-index: 5;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.detail-close:hover { background: rgba(0,0,0,0.9); }
|
||||
|
||||
.detail-body { padding: 20px; }
|
||||
.detail-ref {
|
||||
font-size: 1.2em;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.detail-mrf {
|
||||
font-size: 0.7em;
|
||||
color: var(--text-muted);
|
||||
margin-top: 8px;
|
||||
font-family: monospace;
|
||||
word-break: break-all;
|
||||
cursor: pointer;
|
||||
padding: 8px 10px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 6px;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.detail-mrf:hover { color: var(--accent); }
|
||||
.detail-name { font-size: 1.3em; color: var(--text); margin-top: 16px; font-weight: 500; }
|
||||
.detail-desc { font-size: 0.9em; color: var(--text-muted); margin-top: 12px; line-height: 1.7; }
|
||||
|
||||
.detail-section { margin-top: 24px; }
|
||||
.detail-section h4 {
|
||||
font-size: 0.75em;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.tag-chip {
|
||||
padding: 7px 12px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.tag-chip:hover { border-color: var(--accent); color: var(--text); }
|
||||
|
||||
/* === TOAST === */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
padding: 14px 28px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast.show { opacity: 1; }
|
||||
|
||||
/* === MODAL === */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.85);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
}
|
||||
.modal.open { display: flex; }
|
||||
.modal-content {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
width: 90%;
|
||||
max-width: 620px;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal-header {
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-header h3 { font-size: 1.15em; color: var(--text); font-weight: 600; }
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.modal-close:hover { color: var(--text); }
|
||||
.modal-body { padding: 22px; overflow-y: auto; max-height: calc(80vh - 65px); }
|
||||
.api-item { margin-bottom: 18px; }
|
||||
.api-endpoint {
|
||||
font-family: monospace;
|
||||
font-size: 0.9em;
|
||||
color: var(--accent);
|
||||
background: var(--bg-card);
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.api-desc { font-size: 0.85em; color: var(--text-muted); margin-top: 8px; }
|
||||
|
||||
/* === EMPTY STATE === */
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-muted);
|
||||
gap: 16px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
/* === LOADING === */
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-muted);
|
||||
gap: 14px;
|
||||
font-size: 1em;
|
||||
}
|
||||
.loading::after {
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 3px solid var(--border);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* === SELECT === */
|
||||
select {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
font-size: 0.8em;
|
||||
cursor: pointer;
|
||||
}
|
||||
select:focus { outline: none; border-color: var(--accent); }
|
||||
37
hst-frontend-new/src/types/graph.ts
Normal file
37
hst-frontend-new/src/types/graph.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
export type EdgeType =
|
||||
| 'relation'
|
||||
| 'specialization'
|
||||
| 'mirror'
|
||||
| 'dependency'
|
||||
| 'sequence'
|
||||
| 'composition'
|
||||
| 'hierarchy'
|
||||
| 'library'
|
||||
| 'contextual'
|
||||
| 'association';
|
||||
|
||||
export type CategoryKey = 'hst' | 'spe' | 'vue' | 'vsn' | 'msn' | 'flg';
|
||||
|
||||
export interface GraphEdge {
|
||||
mrf_a: string;
|
||||
mrf_b: string;
|
||||
edge_type: EdgeType;
|
||||
weight?: number;
|
||||
}
|
||||
|
||||
export interface TreeEdge {
|
||||
mrf_parent: string;
|
||||
mrf_child: string;
|
||||
}
|
||||
|
||||
export interface GraphNode {
|
||||
id: string;
|
||||
ref: string;
|
||||
name: string;
|
||||
img: string;
|
||||
cat: CategoryKey;
|
||||
x?: number;
|
||||
y?: number;
|
||||
fx?: number | null;
|
||||
fy?: number | null;
|
||||
}
|
||||
16
hst-frontend-new/src/types/index.ts
Normal file
16
hst-frontend-new/src/types/index.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
export type { Tag, Group, Library, ChildTag, RelatedTag } from './tag.ts';
|
||||
export type {
|
||||
EdgeType,
|
||||
CategoryKey,
|
||||
GraphEdge,
|
||||
TreeEdge,
|
||||
GraphNode
|
||||
} from './graph.ts';
|
||||
export type {
|
||||
ViewType,
|
||||
BaseType,
|
||||
LangType,
|
||||
GraphFilters,
|
||||
GraphSettings,
|
||||
AppState
|
||||
} from './state.ts';
|
||||
48
hst-frontend-new/src/types/state.ts
Normal file
48
hst-frontend-new/src/types/state.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import type { Tag, Group, Library } from './tag.ts';
|
||||
import type { GraphEdge, TreeEdge, CategoryKey, EdgeType } from './graph.ts';
|
||||
|
||||
export type ViewType = 'grid' | 'tree' | 'graph';
|
||||
export type BaseType = 'hst' | 'flg' | 'itm' | 'loc' | 'ply';
|
||||
export type LangType = 'es' | 'en' | 'ch';
|
||||
|
||||
export interface GraphFilters {
|
||||
cats: Set<CategoryKey>;
|
||||
edges: Set<EdgeType>;
|
||||
}
|
||||
|
||||
export interface GraphSettings {
|
||||
nodeSize: number;
|
||||
linkDist: number;
|
||||
showImg: boolean;
|
||||
showLbl: boolean;
|
||||
}
|
||||
|
||||
export interface AppState {
|
||||
// Navigation
|
||||
base: BaseType;
|
||||
lang: LangType;
|
||||
view: ViewType;
|
||||
|
||||
// Filters
|
||||
search: string;
|
||||
group: string;
|
||||
library: string;
|
||||
libraryMembers: Set<string>;
|
||||
|
||||
// Selection
|
||||
selectionMode: boolean;
|
||||
selected: Set<string>;
|
||||
selectedTag: Tag | null;
|
||||
|
||||
// Data
|
||||
tags: Tag[];
|
||||
hstTags: Tag[]; // HST tags for group name resolution
|
||||
groups: Group[];
|
||||
libraries: Library[];
|
||||
graphEdges: GraphEdge[];
|
||||
treeEdges: TreeEdge[];
|
||||
|
||||
// Graph-specific
|
||||
graphFilters: GraphFilters;
|
||||
graphSettings: GraphSettings;
|
||||
}
|
||||
40
hst-frontend-new/src/types/tag.ts
Normal file
40
hst-frontend-new/src/types/tag.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
export interface Tag {
|
||||
mrf: string;
|
||||
ref: string;
|
||||
name_es?: string;
|
||||
name_en?: string;
|
||||
name_ch?: string;
|
||||
txt?: string;
|
||||
alias?: string;
|
||||
set_hst?: string;
|
||||
img_url?: string;
|
||||
img_thumb_url?: string;
|
||||
}
|
||||
|
||||
export interface Group {
|
||||
mrf: string;
|
||||
ref: string;
|
||||
name_es?: string;
|
||||
name_en?: string;
|
||||
}
|
||||
|
||||
export interface Library {
|
||||
mrf: string;
|
||||
ref?: string;
|
||||
name?: string;
|
||||
name_es?: string;
|
||||
alias?: string;
|
||||
icon_url?: string;
|
||||
img_thumb_url?: string;
|
||||
}
|
||||
|
||||
export interface ChildTag {
|
||||
mrf: string;
|
||||
ref?: string;
|
||||
alias?: string;
|
||||
name_es?: string;
|
||||
}
|
||||
|
||||
export interface RelatedTag extends ChildTag {
|
||||
edge_type: string;
|
||||
}
|
||||
14
hst-frontend-new/src/utils/clipboard.ts
Normal file
14
hst-frontend-new/src/utils/clipboard.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { toast } from './toast.ts';
|
||||
|
||||
export async function copyToClipboard(text: string, message?: string): Promise<void> {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
toast(message || 'Copiado');
|
||||
} catch {
|
||||
toast('Error al copiar');
|
||||
}
|
||||
}
|
||||
|
||||
export function copyMrf(mrf: string): void {
|
||||
copyToClipboard(mrf, `MRF copiado: ${mrf.slice(0, 8)}...`);
|
||||
}
|
||||
44
hst-frontend-new/src/utils/dom.ts
Normal file
44
hst-frontend-new/src/utils/dom.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
export const $ = <T extends HTMLElement>(
|
||||
selector: string,
|
||||
parent: ParentNode = document
|
||||
): T | null => parent.querySelector<T>(selector);
|
||||
|
||||
export const $$ = <T extends HTMLElement>(
|
||||
selector: string,
|
||||
parent: ParentNode = document
|
||||
): T[] => Array.from(parent.querySelectorAll<T>(selector));
|
||||
|
||||
export function createElement<K extends keyof HTMLElementTagNameMap>(
|
||||
tag: K,
|
||||
attrs?: Record<string, string>,
|
||||
children?: (HTMLElement | string)[]
|
||||
): HTMLElementTagNameMap[K] {
|
||||
const el = document.createElement(tag);
|
||||
if (attrs) {
|
||||
Object.entries(attrs).forEach(([key, value]) => {
|
||||
if (key === 'className') el.className = value;
|
||||
else if (key.startsWith('data-')) el.setAttribute(key, value);
|
||||
else el.setAttribute(key, value);
|
||||
});
|
||||
}
|
||||
if (children) {
|
||||
children.forEach(child => {
|
||||
el.append(typeof child === 'string' ? child : child);
|
||||
});
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
export function delegateEvent<T extends Event>(
|
||||
container: HTMLElement,
|
||||
selector: string,
|
||||
eventType: string,
|
||||
handler: (event: T, target: HTMLElement) => void
|
||||
): void {
|
||||
container.addEventListener(eventType, (event) => {
|
||||
const target = (event.target as HTMLElement).closest<HTMLElement>(selector);
|
||||
if (target && container.contains(target)) {
|
||||
handler(event as T, target);
|
||||
}
|
||||
});
|
||||
}
|
||||
39
hst-frontend-new/src/utils/filters.ts
Normal file
39
hst-frontend-new/src/utils/filters.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { Tag, LangType } from '@/types/index.ts';
|
||||
import { getName } from './i18n.ts';
|
||||
|
||||
export interface FilterOptions {
|
||||
search: string;
|
||||
group: string;
|
||||
library: string;
|
||||
libraryMembers: Set<string>;
|
||||
lang: LangType;
|
||||
}
|
||||
|
||||
export function filterTags(tags: Tag[], options: FilterOptions): Tag[] {
|
||||
const { search, group, library, libraryMembers, lang } = options;
|
||||
const q = search.toLowerCase();
|
||||
|
||||
return tags.filter(tag => {
|
||||
// Library filter
|
||||
if (library !== 'all' && !libraryMembers.has(tag.mrf)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Group filter
|
||||
if (group !== 'all' && tag.set_hst !== group) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Search filter
|
||||
if (q) {
|
||||
const name = getName(tag, lang).toLowerCase();
|
||||
const ref = (tag.ref || '').toLowerCase();
|
||||
const alias = (tag.alias || '').toLowerCase();
|
||||
if (!name.includes(q) && !ref.includes(q) && !alias.includes(q)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
31
hst-frontend-new/src/utils/i18n.ts
Normal file
31
hst-frontend-new/src/utils/i18n.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { Tag, LangType } from '@/types/index.ts';
|
||||
|
||||
export function getName(tag: Tag, lang: LangType): string {
|
||||
if (lang === 'es' && tag.name_es) return tag.name_es;
|
||||
if (lang === 'en' && tag.name_en) return tag.name_en;
|
||||
if (lang === 'ch' && tag.name_ch) return tag.name_ch;
|
||||
return tag.name_es || tag.name_en || tag.alias || tag.ref || tag.mrf.slice(0, 8);
|
||||
}
|
||||
|
||||
// Create a map of mrf -> display name for resolving groups
|
||||
export function createNameMap(tags: Tag[], lang: LangType): Map<string, string> {
|
||||
const map = new Map<string, string>();
|
||||
tags.forEach(tag => {
|
||||
map.set(tag.mrf, getName(tag, lang));
|
||||
});
|
||||
return map;
|
||||
}
|
||||
|
||||
// Resolve a group mrf to its display name
|
||||
export function resolveGroupName(mrf: string | undefined, nameMap: Map<string, string>): string {
|
||||
if (!mrf) return 'Sin grupo';
|
||||
return nameMap.get(mrf) || mrf.slice(0, 8);
|
||||
}
|
||||
|
||||
export function getImg(tag: Tag): string {
|
||||
return tag.img_thumb_url || '';
|
||||
}
|
||||
|
||||
export function getFullImg(tag: Tag): string {
|
||||
return tag.img_url || tag.img_thumb_url || '';
|
||||
}
|
||||
5
hst-frontend-new/src/utils/index.ts
Normal file
5
hst-frontend-new/src/utils/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export { $, $$, createElement, delegateEvent } from './dom.ts';
|
||||
export { getName, getImg, getFullImg, createNameMap, resolveGroupName } from './i18n.ts';
|
||||
export { filterTags, type FilterOptions } from './filters.ts';
|
||||
export { copyToClipboard, copyMrf } from './clipboard.ts';
|
||||
export { toast } from './toast.ts';
|
||||
21
hst-frontend-new/src/utils/toast.ts
Normal file
21
hst-frontend-new/src/utils/toast.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
let toastEl: HTMLElement | null = null;
|
||||
let toastTimeout: number | null = null;
|
||||
|
||||
export function toast(message: string, duration = 2000): void {
|
||||
if (!toastEl) {
|
||||
toastEl = document.createElement('div');
|
||||
toastEl.className = 'toast';
|
||||
document.body.appendChild(toastEl);
|
||||
}
|
||||
|
||||
if (toastTimeout) {
|
||||
clearTimeout(toastTimeout);
|
||||
}
|
||||
|
||||
toastEl.textContent = message;
|
||||
toastEl.classList.add('show');
|
||||
|
||||
toastTimeout = window.setTimeout(() => {
|
||||
toastEl?.classList.remove('show');
|
||||
}, duration);
|
||||
}
|
||||
115
hst-frontend-new/src/views/DetailPanel/DetailPanel.ts
Normal file
115
hst-frontend-new/src/views/DetailPanel/DetailPanel.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
import { View } from '../View.ts';
|
||||
import { getName, getFullImg, copyMrf, delegateEvent } from '@/utils/index.ts';
|
||||
import { fetchChildren, fetchRelated } from '@/api/index.ts';
|
||||
import type { Store } from '@/state/store.ts';
|
||||
import type { AppState, Tag } from '@/types/index.ts';
|
||||
|
||||
export class DetailPanel extends View {
|
||||
private panelEl: HTMLElement;
|
||||
|
||||
constructor(
|
||||
container: HTMLElement,
|
||||
store: Store<AppState>
|
||||
) {
|
||||
super(container, store);
|
||||
this.panelEl = container;
|
||||
}
|
||||
|
||||
async showDetail(mrf: string): Promise<void> {
|
||||
const state = this.getState();
|
||||
const tag = state.tags.find(t => t.mrf === mrf);
|
||||
if (!tag) return;
|
||||
|
||||
this.setState({ selectedTag: tag });
|
||||
this.panelEl.classList.add('open');
|
||||
await this.renderDetail(tag);
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.panelEl.classList.remove('open');
|
||||
this.setState({ selectedTag: null });
|
||||
}
|
||||
|
||||
render(): void {
|
||||
const state = this.getState();
|
||||
if (state.selectedTag) {
|
||||
this.renderDetail(state.selectedTag);
|
||||
}
|
||||
}
|
||||
|
||||
private async renderDetail(tag: Tag): Promise<void> {
|
||||
const state = this.getState();
|
||||
const img = getFullImg(tag);
|
||||
const name = getName(tag, state.lang);
|
||||
|
||||
this.panelEl.innerHTML = `
|
||||
<div class="detail-header">
|
||||
${img
|
||||
? `<img class="detail-img" src="${img}" alt="${tag.ref}">`
|
||||
: `<div class="detail-placeholder">${tag.ref?.slice(0, 2) || 'T'}</div>`
|
||||
}
|
||||
<button class="detail-close">×</button>
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<div class="detail-ref">${tag.ref || ''}</div>
|
||||
<div class="detail-mrf" data-mrf="${tag.mrf}">${tag.mrf}</div>
|
||||
<div class="detail-name">${name}</div>
|
||||
<div class="detail-desc">${tag.txt || tag.alias || ''}</div>
|
||||
<div id="children-section" class="detail-section" style="display:none">
|
||||
<h4>Hijos</h4>
|
||||
<div id="children-list" class="chip-list"></div>
|
||||
</div>
|
||||
<div id="related-section" class="detail-section" style="display:none">
|
||||
<h4>Relacionados</h4>
|
||||
<div id="related-list" class="chip-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.bindDetailEvents();
|
||||
await this.loadRelations(tag.mrf);
|
||||
}
|
||||
|
||||
private bindDetailEvents(): void {
|
||||
const closeBtn = this.panelEl.querySelector('.detail-close');
|
||||
closeBtn?.addEventListener('click', () => this.close());
|
||||
|
||||
const mrfEl = this.panelEl.querySelector('.detail-mrf');
|
||||
mrfEl?.addEventListener('click', () => {
|
||||
const mrf = (mrfEl as HTMLElement).dataset.mrf;
|
||||
if (mrf) copyMrf(mrf);
|
||||
});
|
||||
|
||||
delegateEvent<MouseEvent>(this.panelEl, '.tag-chip', 'click', (_, target) => {
|
||||
const mrf = target.dataset.mrf;
|
||||
if (mrf) this.showDetail(mrf);
|
||||
});
|
||||
}
|
||||
|
||||
private async loadRelations(mrf: string): Promise<void> {
|
||||
const [children, related] = await Promise.all([
|
||||
fetchChildren(mrf),
|
||||
fetchRelated(mrf)
|
||||
]);
|
||||
|
||||
const childrenSection = this.panelEl.querySelector('#children-section') as HTMLElement;
|
||||
const childrenList = this.panelEl.querySelector('#children-list') as HTMLElement;
|
||||
if (children.length > 0) {
|
||||
childrenSection.style.display = 'block';
|
||||
childrenList.innerHTML = children.map(c => {
|
||||
const label = c.name_es || c.alias || c.ref || c.mrf.slice(0, 8);
|
||||
return `<span class="tag-chip" data-mrf="${c.mrf}">${label}</span>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
const relatedSection = this.panelEl.querySelector('#related-section') as HTMLElement;
|
||||
const relatedList = this.panelEl.querySelector('#related-list') as HTMLElement;
|
||||
if (related.length > 0) {
|
||||
relatedSection.style.display = 'block';
|
||||
relatedList.innerHTML = related.map(r => {
|
||||
const label = r.name_es || r.alias || r.ref || r.mrf.slice(0, 8);
|
||||
return `<span class="tag-chip" data-mrf="${r.mrf}" title="${r.edge_type}">${label}</span>`;
|
||||
}).join('');
|
||||
}
|
||||
}
|
||||
}
|
||||
249
hst-frontend-new/src/views/GraphView/GraphView.ts
Normal file
249
hst-frontend-new/src/views/GraphView/GraphView.ts
Normal file
@@ -0,0 +1,249 @@
|
||||
import { View } from '../View.ts';
|
||||
import { filterTags, getName, getImg } from '@/utils/index.ts';
|
||||
import { fetchGraphEdges, fetchTreeEdges } from '@/api/index.ts';
|
||||
import { CATS, EDGE_COLORS } from '@/config/index.ts';
|
||||
import type { Store } from '@/state/store.ts';
|
||||
import type { AppState, GraphNode, CategoryKey, EdgeType } from '@/types/index.ts';
|
||||
|
||||
type D3Module = typeof import('d3');
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type D3Selection = any;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type D3Simulation = any;
|
||||
|
||||
export class GraphView extends View {
|
||||
private d3: D3Module | null = null;
|
||||
private simulation: D3Simulation | null = null;
|
||||
private showDetail: (mrf: string) => void;
|
||||
|
||||
constructor(
|
||||
container: HTMLElement,
|
||||
store: Store<AppState>,
|
||||
showDetail: (mrf: string) => void
|
||||
) {
|
||||
super(container, store);
|
||||
this.showDetail = showDetail;
|
||||
}
|
||||
|
||||
async mount(): Promise<void> {
|
||||
this.container.innerHTML = '<div class="loading">Cargando grafo...</div>';
|
||||
|
||||
// Lazy load D3
|
||||
if (!this.d3) {
|
||||
this.d3 = await import('d3');
|
||||
}
|
||||
|
||||
// Load graph data
|
||||
const state = this.getState();
|
||||
if (state.graphEdges.length === 0) {
|
||||
const [graphEdges, treeEdges] = await Promise.all([
|
||||
fetchGraphEdges(),
|
||||
fetchTreeEdges()
|
||||
]);
|
||||
this.store.setState({ graphEdges, treeEdges });
|
||||
}
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
render(): void {
|
||||
if (!this.d3) return;
|
||||
const d3 = this.d3;
|
||||
const state = this.getState();
|
||||
|
||||
// Build nodes from filtered tags
|
||||
const filtered = filterTags(state.tags, {
|
||||
search: state.search,
|
||||
group: state.group,
|
||||
library: state.library,
|
||||
libraryMembers: state.libraryMembers,
|
||||
lang: state.lang
|
||||
});
|
||||
|
||||
const nodeMap = new Map<string, GraphNode>();
|
||||
filtered.forEach(tag => {
|
||||
nodeMap.set(tag.mrf, {
|
||||
id: tag.mrf,
|
||||
ref: tag.alias || tag.ref || tag.mrf.slice(0, 8),
|
||||
name: getName(tag, state.lang),
|
||||
img: getImg(tag),
|
||||
cat: 'hst' as CategoryKey
|
||||
});
|
||||
});
|
||||
|
||||
// Build edges
|
||||
interface GraphLink {
|
||||
source: string | GraphNode;
|
||||
target: string | GraphNode;
|
||||
type: EdgeType;
|
||||
weight: number;
|
||||
}
|
||||
const edges: GraphLink[] = [];
|
||||
|
||||
state.graphEdges.forEach(e => {
|
||||
if (nodeMap.has(e.mrf_a) && nodeMap.has(e.mrf_b)) {
|
||||
if (state.graphFilters.edges.has(e.edge_type)) {
|
||||
edges.push({
|
||||
source: e.mrf_a,
|
||||
target: e.mrf_b,
|
||||
type: e.edge_type,
|
||||
weight: e.weight || 1
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
state.treeEdges.forEach(e => {
|
||||
if (nodeMap.has(e.mrf_parent) && nodeMap.has(e.mrf_child)) {
|
||||
if (state.graphFilters.edges.has('hierarchy')) {
|
||||
edges.push({
|
||||
source: e.mrf_parent,
|
||||
target: e.mrf_child,
|
||||
type: 'hierarchy',
|
||||
weight: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const nodes = Array.from(nodeMap.values());
|
||||
|
||||
if (nodes.length === 0) {
|
||||
this.container.innerHTML = '<div class="empty">Sin nodos para mostrar</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear and create SVG
|
||||
this.container.innerHTML = '';
|
||||
const width = this.container.clientWidth;
|
||||
const height = this.container.clientHeight || 600;
|
||||
|
||||
const svg: D3Selection = d3.select(this.container)
|
||||
.append('svg')
|
||||
.attr('width', '100%')
|
||||
.attr('height', '100%')
|
||||
.attr('viewBox', `0 0 ${width} ${height}`);
|
||||
|
||||
const g = svg.append('g');
|
||||
|
||||
// Zoom
|
||||
const zoom = d3.zoom()
|
||||
.scaleExtent([0.1, 4])
|
||||
.on('zoom', (event: { transform: string }) => {
|
||||
g.attr('transform', event.transform);
|
||||
});
|
||||
|
||||
svg.call(zoom);
|
||||
|
||||
// Simulation
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
this.simulation = d3.forceSimulation(nodes as any)
|
||||
.force('link', d3.forceLink(edges)
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
.id((d: any) => d.id)
|
||||
.distance(state.graphSettings.linkDist))
|
||||
.force('charge', d3.forceManyBody().strength(-150))
|
||||
.force('center', d3.forceCenter(width / 2, height / 2))
|
||||
.force('collision', d3.forceCollide().radius(state.graphSettings.nodeSize + 5));
|
||||
|
||||
// Links
|
||||
const link = g.append('g')
|
||||
.selectAll('line')
|
||||
.data(edges)
|
||||
.join('line')
|
||||
.attr('stroke', (d: GraphLink) => EDGE_COLORS[d.type] || '#999')
|
||||
.attr('stroke-width', (d: GraphLink) => Math.sqrt(d.weight))
|
||||
.attr('stroke-opacity', 0.6);
|
||||
|
||||
// Nodes
|
||||
const node = g.append('g')
|
||||
.selectAll('g')
|
||||
.data(nodes)
|
||||
.join('g')
|
||||
.attr('cursor', 'pointer')
|
||||
.call(this.createDrag(d3, this.simulation));
|
||||
|
||||
const nodeSize = state.graphSettings.nodeSize;
|
||||
|
||||
if (state.graphSettings.showImg) {
|
||||
node.append('image')
|
||||
.attr('xlink:href', (d: GraphNode) => d.img || '')
|
||||
.attr('width', nodeSize)
|
||||
.attr('height', nodeSize)
|
||||
.attr('x', -nodeSize / 2)
|
||||
.attr('y', -nodeSize / 2)
|
||||
.attr('clip-path', 'circle(50%)');
|
||||
|
||||
// Fallback for nodes without image
|
||||
node.filter((d: GraphNode) => !d.img)
|
||||
.append('circle')
|
||||
.attr('r', nodeSize / 2)
|
||||
.attr('fill', (d: GraphNode) => CATS[d.cat]?.color || '#7c8aff');
|
||||
} else {
|
||||
node.append('circle')
|
||||
.attr('r', nodeSize / 2)
|
||||
.attr('fill', (d: GraphNode) => CATS[d.cat]?.color || '#7c8aff');
|
||||
}
|
||||
|
||||
if (state.graphSettings.showLbl) {
|
||||
node.append('text')
|
||||
.text((d: GraphNode) => d.ref)
|
||||
.attr('dy', nodeSize / 2 + 12)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('font-size', 10)
|
||||
.attr('fill', 'var(--text-primary)');
|
||||
}
|
||||
|
||||
node.on('click', (_: MouseEvent, d: GraphNode) => {
|
||||
if (state.selectionMode) {
|
||||
const newSelected = new Set(state.selected);
|
||||
if (newSelected.has(d.id)) {
|
||||
newSelected.delete(d.id);
|
||||
} else {
|
||||
newSelected.add(d.id);
|
||||
}
|
||||
this.store.setState({ selected: newSelected });
|
||||
} else {
|
||||
this.showDetail(d.id);
|
||||
}
|
||||
});
|
||||
|
||||
// Tick
|
||||
this.simulation.on('tick', () => {
|
||||
link
|
||||
.attr('x1', (d: GraphLink) => (d.source as GraphNode).x!)
|
||||
.attr('y1', (d: GraphLink) => (d.source as GraphNode).y!)
|
||||
.attr('x2', (d: GraphLink) => (d.target as GraphNode).x!)
|
||||
.attr('y2', (d: GraphLink) => (d.target as GraphNode).y!);
|
||||
|
||||
node.attr('transform', (d: GraphNode) => `translate(${d.x},${d.y})`);
|
||||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
private createDrag(d3: D3Module, simulation: D3Simulation): any {
|
||||
return d3.drag()
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
.on('start', (event: any, d: any) => {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
})
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
.on('drag', (event: any, d: any) => {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
})
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
.on('end', (event: any, d: any) => {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
d.fx = null;
|
||||
d.fy = null;
|
||||
});
|
||||
}
|
||||
|
||||
unmount(): void {
|
||||
this.simulation?.stop();
|
||||
super.unmount();
|
||||
}
|
||||
}
|
||||
75
hst-frontend-new/src/views/GridView/GridView.ts
Normal file
75
hst-frontend-new/src/views/GridView/GridView.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import { View } from '../View.ts';
|
||||
import { filterTags, getName, getImg, delegateEvent } from '@/utils/index.ts';
|
||||
import type { Store } from '@/state/store.ts';
|
||||
import type { AppState } from '@/types/index.ts';
|
||||
|
||||
export class GridView extends View {
|
||||
private showDetail: (mrf: string) => void;
|
||||
|
||||
constructor(
|
||||
container: HTMLElement,
|
||||
store: Store<AppState>,
|
||||
showDetail: (mrf: string) => void
|
||||
) {
|
||||
super(container, store);
|
||||
this.showDetail = showDetail;
|
||||
}
|
||||
|
||||
render(): void {
|
||||
const state = this.getState();
|
||||
const filtered = filterTags(state.tags, {
|
||||
search: state.search,
|
||||
group: state.group,
|
||||
library: state.library,
|
||||
libraryMembers: state.libraryMembers,
|
||||
lang: state.lang
|
||||
});
|
||||
|
||||
if (filtered.length === 0) {
|
||||
this.container.innerHTML = '<div class="empty">Sin resultados</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
this.container.innerHTML = filtered.map(tag => {
|
||||
const img = getImg(tag);
|
||||
const name = getName(tag, state.lang);
|
||||
const isSelected = state.selected.has(tag.mrf);
|
||||
|
||||
return `
|
||||
<div class="card ${isSelected ? 'selected' : ''}" data-mrf="${tag.mrf}">
|
||||
${state.selectionMode ? `
|
||||
<input type="checkbox" class="card-checkbox" ${isSelected ? 'checked' : ''}>
|
||||
` : ''}
|
||||
${img
|
||||
? `<img class="card-img" src="${img}" alt="${tag.ref}" loading="lazy">`
|
||||
: `<div class="card-placeholder">${tag.ref?.slice(0, 2) || 'T'}</div>`
|
||||
}
|
||||
<div class="card-name">${name}</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
private bindEvents(): void {
|
||||
const state = this.getState();
|
||||
|
||||
delegateEvent<MouseEvent>(this.container, '.card', 'click', (_, target) => {
|
||||
const mrf = target.dataset.mrf;
|
||||
if (!mrf) return;
|
||||
|
||||
if (state.selectionMode) {
|
||||
const newSelected = new Set(state.selected);
|
||||
if (newSelected.has(mrf)) {
|
||||
newSelected.delete(mrf);
|
||||
} else {
|
||||
newSelected.add(mrf);
|
||||
}
|
||||
this.setState({ selected: newSelected });
|
||||
} else {
|
||||
this.showDetail(mrf);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
109
hst-frontend-new/src/views/TreeView/TreeView.ts
Normal file
109
hst-frontend-new/src/views/TreeView/TreeView.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import { View } from '../View.ts';
|
||||
import { filterTags, getName, getImg, delegateEvent, createNameMap, resolveGroupName } from '@/utils/index.ts';
|
||||
import type { Store } from '@/state/store.ts';
|
||||
import type { AppState, Tag } from '@/types/index.ts';
|
||||
|
||||
export class TreeView extends View {
|
||||
private showDetail: (mrf: string) => void;
|
||||
private expanded: Set<string> = new Set();
|
||||
|
||||
constructor(
|
||||
container: HTMLElement,
|
||||
store: Store<AppState>,
|
||||
showDetail: (mrf: string) => void
|
||||
) {
|
||||
super(container, store);
|
||||
this.showDetail = showDetail;
|
||||
}
|
||||
|
||||
render(): void {
|
||||
const state = this.getState();
|
||||
// Use hstTags for group name resolution (set_hst points to hst tags)
|
||||
const nameMap = createNameMap(state.hstTags, state.lang);
|
||||
const filtered = filterTags(state.tags, {
|
||||
search: state.search,
|
||||
group: state.group,
|
||||
library: state.library,
|
||||
libraryMembers: state.libraryMembers,
|
||||
lang: state.lang
|
||||
});
|
||||
|
||||
// Group by set_hst
|
||||
const groups = new Map<string, Tag[]>();
|
||||
filtered.forEach(tag => {
|
||||
const group = tag.set_hst || 'sin-grupo';
|
||||
if (!groups.has(group)) groups.set(group, []);
|
||||
groups.get(group)!.push(tag);
|
||||
});
|
||||
|
||||
if (groups.size === 0) {
|
||||
this.container.innerHTML = '<div class="empty">Sin resultados</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
this.container.innerHTML = Array.from(groups.entries()).map(([groupMrf, tags]) => {
|
||||
const isExpanded = this.expanded.has(groupMrf);
|
||||
const groupName = resolveGroupName(groupMrf === 'sin-grupo' ? undefined : groupMrf, nameMap);
|
||||
return `
|
||||
<div class="tree-group">
|
||||
<div class="tree-header" data-group="${groupMrf}">
|
||||
<span class="tree-toggle">${isExpanded ? '−' : '+'}</span>
|
||||
<span class="tree-group-name">${groupName}</span>
|
||||
<span class="tree-count">${tags.length}</span>
|
||||
</div>
|
||||
<div class="tree-items ${isExpanded ? 'expanded' : ''}">
|
||||
${tags.map(tag => {
|
||||
const img = getImg(tag);
|
||||
const name = getName(tag, state.lang);
|
||||
const isSelected = state.selected.has(tag.mrf);
|
||||
return `
|
||||
<div class="tree-item ${isSelected ? 'selected' : ''}" data-mrf="${tag.mrf}">
|
||||
${img
|
||||
? `<img class="tree-img" src="${img}" alt="${tag.ref}">`
|
||||
: `<div class="tree-placeholder">${tag.ref?.slice(0, 1) || 'T'}</div>`
|
||||
}
|
||||
<span class="tree-name">${name}</span>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
private bindEvents(): void {
|
||||
const state = this.getState();
|
||||
|
||||
delegateEvent<MouseEvent>(this.container, '.tree-header', 'click', (_, target) => {
|
||||
const group = target.dataset.group;
|
||||
if (!group) return;
|
||||
|
||||
if (this.expanded.has(group)) {
|
||||
this.expanded.delete(group);
|
||||
} else {
|
||||
this.expanded.add(group);
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
|
||||
delegateEvent<MouseEvent>(this.container, '.tree-item', 'click', (_, target) => {
|
||||
const mrf = target.dataset.mrf;
|
||||
if (!mrf) return;
|
||||
|
||||
if (state.selectionMode) {
|
||||
const newSelected = new Set(state.selected);
|
||||
if (newSelected.has(mrf)) {
|
||||
newSelected.delete(mrf);
|
||||
} else {
|
||||
newSelected.add(mrf);
|
||||
}
|
||||
this.setState({ selected: newSelected });
|
||||
} else {
|
||||
this.showDetail(mrf);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
33
hst-frontend-new/src/views/View.ts
Normal file
33
hst-frontend-new/src/views/View.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import type { Store } from '@/state/store.ts';
|
||||
import type { AppState } from '@/types/index.ts';
|
||||
|
||||
export abstract class View {
|
||||
protected container: HTMLElement;
|
||||
protected store: Store<AppState>;
|
||||
protected unsubscribe?: () => void;
|
||||
|
||||
constructor(container: HTMLElement, store: Store<AppState>) {
|
||||
this.container = container;
|
||||
this.store = store;
|
||||
}
|
||||
|
||||
abstract render(): void;
|
||||
|
||||
mount(): void {
|
||||
this.unsubscribe = this.store.subscribe(() => this.render());
|
||||
this.render();
|
||||
}
|
||||
|
||||
unmount(): void {
|
||||
this.unsubscribe?.();
|
||||
this.container.innerHTML = '';
|
||||
}
|
||||
|
||||
protected getState(): AppState {
|
||||
return this.store.getState();
|
||||
}
|
||||
|
||||
protected setState(partial: Partial<AppState>): void {
|
||||
this.store.setState(partial);
|
||||
}
|
||||
}
|
||||
5
hst-frontend-new/src/views/index.ts
Normal file
5
hst-frontend-new/src/views/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export { View } from './View.ts';
|
||||
export { GridView } from './GridView/GridView.ts';
|
||||
export { TreeView } from './TreeView/TreeView.ts';
|
||||
export { GraphView } from './GraphView/GraphView.ts';
|
||||
export { DetailPanel } from './DetailPanel/DetailPanel.ts';
|
||||
40
hst-frontend-new/tsconfig.json
Normal file
40
hst-frontend-new/tsconfig.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
|
||||
/* Path aliases */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"],
|
||||
"@types/*": ["src/types/*"],
|
||||
"@config/*": ["src/config/*"],
|
||||
"@state/*": ["src/state/*"],
|
||||
"@api/*": ["src/api/*"],
|
||||
"@utils/*": ["src/utils/*"],
|
||||
"@components/*": ["src/components/*"],
|
||||
"@views/*": ["src/views/*"],
|
||||
"@layout/*": ["src/layout/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
43
hst-frontend-new/vite.config.ts
Normal file
43
hst-frontend-new/vite.config.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import { resolve } from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
root: '.',
|
||||
base: './',
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src'),
|
||||
'@types': resolve(__dirname, 'src/types'),
|
||||
'@config': resolve(__dirname, 'src/config'),
|
||||
'@state': resolve(__dirname, 'src/state'),
|
||||
'@api': resolve(__dirname, 'src/api'),
|
||||
'@utils': resolve(__dirname, 'src/utils'),
|
||||
'@components': resolve(__dirname, 'src/components'),
|
||||
'@views': resolve(__dirname, 'src/views'),
|
||||
'@layout': resolve(__dirname, 'src/layout'),
|
||||
}
|
||||
},
|
||||
|
||||
build: {
|
||||
target: 'es2020',
|
||||
outDir: 'dist',
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
d3: ['d3']
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://72.62.1.113:3000',
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user