refactor(webui): switch to SvelteKit | touchdown
parent
bbcaa58dd1
commit
0353e43dcf
|
@ -0,0 +1,13 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/.svelte-kit
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# Ignore files for PNPM, NPM and YARN
|
||||||
|
pnpm-lock.yaml
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
|
@ -1,20 +1,35 @@
|
||||||
|
/** @type { import("eslint").Linter.Config } */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
env: {
|
root: true,
|
||||||
browser: true,
|
extends: [
|
||||||
es2021: true
|
'eslint:recommended',
|
||||||
},
|
'plugin:@typescript-eslint/recommended',
|
||||||
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:storybook/recommended"],
|
'plugin:svelte/recommended',
|
||||||
parser: "@typescript-eslint/parser",
|
'prettier'
|
||||||
parserOptions: {
|
],
|
||||||
ecmaVersion: "latest",
|
parser: '@typescript-eslint/parser',
|
||||||
sourceType: "module"
|
plugins: ['@typescript-eslint'],
|
||||||
},
|
parserOptions: {
|
||||||
plugins: ["svelte3", "@typescript-eslint"],
|
sourceType: 'module',
|
||||||
overrides: [{
|
ecmaVersion: 2020,
|
||||||
files: ["*.svelte"],
|
extraFileExtensions: ['.svelte']
|
||||||
processor: "svelte3/svelte3"
|
},
|
||||||
}],
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es2017: true,
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['*.svelte'],
|
||||||
|
parser: 'svelte-eslint-parser',
|
||||||
|
parserOptions: {
|
||||||
|
parser: '@typescript-eslint/parser'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
rules: {
|
rules: {
|
||||||
|
"svelte/valid-compile": ["error", { "ignoreWarnings": false }],
|
||||||
"@typescript-eslint/no-unused-vars": ["warn", {
|
"@typescript-eslint/no-unused-vars": ["warn", {
|
||||||
argsIgnorePattern: "^_",
|
argsIgnorePattern: "^_",
|
||||||
varsIgnorePattern: "^_"
|
varsIgnorePattern: "^_"
|
||||||
|
@ -23,12 +38,4 @@ module.exports = {
|
||||||
allow: ["debug", "warn", "error"]
|
allow: ["debug", "warn", "error"]
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
settings: {
|
};
|
||||||
"svelte3/typescript": true,
|
|
||||||
// load TypeScript as peer dependency
|
|
||||||
"svelte3/ignore-warnings": w => w.code == "unused-export-let"
|
|
||||||
},
|
|
||||||
globals: {
|
|
||||||
NodeJS: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
|
@ -1,39 +0,0 @@
|
||||||
public/assets/fonts/Inter-ExtraBoldItalic.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ExtraLight.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-italic.var.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Light.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Bold.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-BoldItalic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Italic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Medium.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-MediumItalic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-SemiBold.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-BlackItalic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ExtraBold.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Regular.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-SemiBoldItalic.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Thin.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Black.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Black.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-BlackItalic.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ExtraBoldItalic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ExtraLightItalic.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Light.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Bold.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ExtraBold.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ExtraLightItalic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-LightItalic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-MediumItalic.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ThinItalic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter.var.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-BoldItalic.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ExtraLight.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Medium.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Regular.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-SemiBold.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-SemiBoldItalic.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Thin.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-Italic.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-LightItalic.woff filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-roman.var.woff2 filter=lfs diff=lfs merge=lfs -text
|
|
||||||
public/assets/fonts/Inter-ThinItalic.woff filter=lfs diff=lfs merge=lfs -text
|
|
|
@ -1,4 +1,12 @@
|
||||||
|
.DS_Store
|
||||||
node_modules
|
node_modules
|
||||||
|
/build
|
||||||
|
/.svelte-kit
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
vite.config.js.timestamp-*
|
||||||
|
vite.config.ts.timestamp-*
|
||||||
|
|
||||||
/dist
|
/static/vendor
|
||||||
/public/vendor/
|
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
engine-strict=true
|
|
@ -0,0 +1,4 @@
|
||||||
|
# Ignore files for PNPM, NPM and YARN
|
||||||
|
pnpm-lock.yaml
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
|
@ -1,3 +1,8 @@
|
||||||
{
|
{
|
||||||
"plugins": ["prettier-plugin-svelte"]
|
"useTabs": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"printWidth": 100,
|
||||||
|
"plugins": ["prettier-plugin-svelte"],
|
||||||
|
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,27 +0,0 @@
|
||||||
import type { StorybookConfig } from "@storybook/svelte-vite";
|
|
||||||
|
|
||||||
const config: StorybookConfig = {
|
|
||||||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"],
|
|
||||||
addons: [
|
|
||||||
"@storybook/addon-links",
|
|
||||||
"@storybook/addon-essentials",
|
|
||||||
"@storybook/addon-interactions",
|
|
||||||
],
|
|
||||||
framework: {
|
|
||||||
name: "@storybook/svelte-vite",
|
|
||||||
options: {},
|
|
||||||
},
|
|
||||||
docs: {
|
|
||||||
autodocs: "tag",
|
|
||||||
},
|
|
||||||
viteFinal: (config) => {
|
|
||||||
config.server!.proxy = {
|
|
||||||
"/api": {
|
|
||||||
target: "http://localhost:8099/",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
return config;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = config;
|
|
|
@ -1,3 +0,0 @@
|
||||||
<script>
|
|
||||||
window.global = window;
|
|
||||||
</script>
|
|
|
@ -1,11 +0,0 @@
|
||||||
export const parameters = {
|
|
||||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
||||||
controls: {
|
|
||||||
matchers: {
|
|
||||||
color: /(background|color)$/i,
|
|
||||||
date: /Date$/,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
import "../src/styles/main.scss";
|
|
|
@ -1,20 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
||||||
<meta name="application-name" content="UpEnd" />
|
|
||||||
|
|
||||||
<title>UpEnd</title>
|
|
||||||
|
|
||||||
<link rel="icon" type="image/png" href="assets/upend.svg" />
|
|
||||||
<meta
|
|
||||||
http-equiv="Cache-control"
|
|
||||||
content="no-cache, no-store, must-revalidate"
|
|
||||||
/>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,55 +1,34 @@
|
||||||
{
|
{
|
||||||
"name": "upend-kestrel",
|
"name": "upend-kestrel",
|
||||||
"version": "1.0.0",
|
"version": "2.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --clearScreen=false",
|
"dev": "vite dev",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
"lint": "eslint src",
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||||
"clean": "rm -frv dist public/vendor",
|
"lint": "prettier --check . && eslint .",
|
||||||
"storybook": "npm-run-all -p -r storybook:serve storybook:upend",
|
"format": "prettier --write ."
|
||||||
"storybook:serve": "storybook dev -p 6006",
|
|
||||||
"storybook:upend": "cargo run --release -- serve ../example_vault --bind 127.0.0.1:8099 --no-browser --reinitialize --rescan-mode mirror",
|
|
||||||
"build-storybook": "storybook build"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@storybook/addon-essentials": "^7.5.3",
|
"@sveltejs/adapter-auto": "^3.0.0",
|
||||||
"@storybook/addon-interactions": "^7.5.3",
|
"@sveltejs/kit": "^2.0.0",
|
||||||
"@storybook/addon-links": "^7.5.3",
|
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||||
"@storybook/blocks": "^7.5.3",
|
"@types/eslint": "8.56.0",
|
||||||
"@storybook/svelte": "^7.5.3",
|
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||||
"@storybook/svelte-vite": "^7.5.3",
|
"@typescript-eslint/parser": "^6.0.0",
|
||||||
"@storybook/testing-library": "^0.0.13",
|
"eslint": "^8.56.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "^1.4.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
"@tsconfig/svelte": "^3.0.0",
|
"eslint-plugin-svelte": "^2.35.1",
|
||||||
"@types/d3": "^7.4.0",
|
"prettier": "^3.1.1",
|
||||||
"@types/debug": "^4.1.8",
|
"prettier-plugin-svelte": "^3.1.2",
|
||||||
"@types/dompurify": "^2.4.0",
|
"svelte": "^4.2.7",
|
||||||
"@types/lodash": "^4.14.197",
|
"svelte-check": "^3.6.0",
|
||||||
"@types/marked": "^4.3.1",
|
"tslib": "^2.4.1",
|
||||||
"@types/three": "^0.143.2",
|
"typescript": "^5.0.0",
|
||||||
"@types/wavesurfer.js": "^6.0.6",
|
"vite": "^5.0.3"
|
||||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
||||||
"@typescript-eslint/parser": "^5.62.0",
|
|
||||||
"eslint": "^8.48.0",
|
|
||||||
"eslint-plugin-storybook": "^0.6.13",
|
|
||||||
"eslint-plugin-svelte3": "^4.0.0",
|
|
||||||
"npm-run-all": "^4.1.5",
|
|
||||||
"prettier": "^3.0.2",
|
|
||||||
"prettier-plugin-svelte": "^3.0.3",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-dom": "^18.2.0",
|
|
||||||
"storybook": "^7.5.3",
|
|
||||||
"svelte": "^3.59.2",
|
|
||||||
"svelte-check": "^2.10.3",
|
|
||||||
"svelte-preprocess": "^5.0.4",
|
|
||||||
"tslib": "^2.6.2",
|
|
||||||
"typescript": "^4.9.5",
|
|
||||||
"vite": "^4.4.9",
|
|
||||||
"vite-plugin-static-copy": "^0.13.1"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ibm/plex": "^6.3.0",
|
"@ibm/plex": "^6.3.0",
|
||||||
|
@ -74,8 +53,10 @@
|
||||||
"sirv-cli": "^2.0.2",
|
"sirv-cli": "^2.0.2",
|
||||||
"sswr": "^1.11.0",
|
"sswr": "^1.11.0",
|
||||||
"svelte-i18next": "^1.2.2",
|
"svelte-i18next": "^1.2.2",
|
||||||
"svelte-navigator": "^3.2.2",
|
|
||||||
"three": "^0.147.0",
|
"three": "^0.147.0",
|
||||||
"wavesurfer.js": "^6.6.4"
|
"wavesurfer.js": "^6.6.4",
|
||||||
|
"vite-plugin-static-copy": "^0.13.1",
|
||||||
|
"@types/node": "^18.19.8",
|
||||||
|
"@types/lodash": "^4.14"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
7991
webui/pnpm-lock.yaml
7991
webui/pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -1,48 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Router, Route, createHistory } from "svelte-navigator";
|
|
||||||
import createHashSource from "./util/history";
|
|
||||||
import Header from "./components/layout/Header.svelte";
|
|
||||||
import Footer from "./components/layout/Footer.svelte";
|
|
||||||
import Home from "./views/Home.svelte";
|
|
||||||
import Browse from "./views/Browse.svelte";
|
|
||||||
import Search from "./views/Search.svelte";
|
|
||||||
import DropPasteHandler from "./components/DropPasteHandler.svelte";
|
|
||||||
import AddModal from "./components/AddModal.svelte";
|
|
||||||
import Store from "./views/Store.svelte";
|
|
||||||
import Setup from "./views/Setup.svelte";
|
|
||||||
|
|
||||||
import "./styles/main.scss";
|
|
||||||
|
|
||||||
const history = createHistory(createHashSource());
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Router {history} primary={false}>
|
|
||||||
<Header />
|
|
||||||
<main>
|
|
||||||
<Route path="/">
|
|
||||||
<Home />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/browse/*addresses">
|
|
||||||
<Browse />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/search/:query" let:params>
|
|
||||||
<Search query={decodeURIComponent(params.query)} />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/store">
|
|
||||||
<Store />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/setup">
|
|
||||||
<Setup />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Footer />
|
|
||||||
|
|
||||||
<AddModal />
|
|
||||||
</main>
|
|
||||||
</Router>
|
|
||||||
|
|
||||||
<DropPasteHandler />
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
|
// for information about these interfaces
|
||||||
|
declare global {
|
||||||
|
namespace App {
|
||||||
|
// interface Error {}
|
||||||
|
// interface Locals {}
|
||||||
|
// interface PageData {}
|
||||||
|
// interface PageState {}
|
||||||
|
// interface Platform {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
%sveltekit.head%
|
||||||
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,167 +0,0 @@
|
||||||
<script context="module" lang="ts">
|
|
||||||
import mitt from "mitt";
|
|
||||||
|
|
||||||
export type AddEvents = {
|
|
||||||
files: File[];
|
|
||||||
urls: string[];
|
|
||||||
};
|
|
||||||
export const addEmitter = mitt<AddEvents>();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { useNavigate } from "svelte-navigator";
|
|
||||||
import Icon from "./utils/Icon.svelte";
|
|
||||||
import IconButton from "./utils/IconButton.svelte";
|
|
||||||
import api from "../lib/api";
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
let files: File[] = [];
|
|
||||||
let URLs: string[] = [];
|
|
||||||
let uploading = false;
|
|
||||||
|
|
||||||
$: visible = files.length + URLs.length > 0;
|
|
||||||
|
|
||||||
addEmitter.on("files", (ev) => {
|
|
||||||
ev.forEach((file) => {
|
|
||||||
if (
|
|
||||||
!files
|
|
||||||
.map((f) => `${f.name}${f.size}`)
|
|
||||||
.includes(`${file.name}${file.size}`)
|
|
||||||
) {
|
|
||||||
files.push(file);
|
|
||||||
}
|
|
||||||
files = files;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
async function upload() {
|
|
||||||
uploading = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const addresses = await Promise.all(
|
|
||||||
files.map(async (file) => api.putBlob(file)),
|
|
||||||
);
|
|
||||||
|
|
||||||
navigate(`/browse/${addresses.join(",")}`);
|
|
||||||
} catch (error) {
|
|
||||||
alert(error);
|
|
||||||
}
|
|
||||||
|
|
||||||
uploading = false;
|
|
||||||
reset();
|
|
||||||
}
|
|
||||||
|
|
||||||
function reset() {
|
|
||||||
if (!uploading) {
|
|
||||||
files = [];
|
|
||||||
URLs = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:body on:keydown={(ev) => ev.key === "Escape" && reset()} />
|
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
||||||
<div class="addmodal-container" class:visible class:uploading on:click={reset}>
|
|
||||||
<div class="addmodal" on:click|stopPropagation>
|
|
||||||
<div class="files">
|
|
||||||
{#each files as file}
|
|
||||||
<div class="file">
|
|
||||||
{#if file.type.startsWith("image")}
|
|
||||||
<img src={URL.createObjectURL(file)} alt="To be uploaded." />
|
|
||||||
{:else}
|
|
||||||
<div class="icon">
|
|
||||||
<Icon name="file" />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="label">{file.name}</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div class="controls">
|
|
||||||
<IconButton name="upload" on:click={upload} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.addmodal-container {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
color: var(--foreground);
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
&.visible {
|
|
||||||
display: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.uploading {
|
|
||||||
cursor: progress;
|
|
||||||
|
|
||||||
.addmodal {
|
|
||||||
filter: brightness(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.addmodal {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
background: var(--background);
|
|
||||||
|
|
||||||
color: var(--foreground);
|
|
||||||
border: solid 2px var(--foreground);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.files {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1em;
|
|
||||||
|
|
||||||
padding: 0.5em;
|
|
||||||
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 66vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
border: 1px solid var(--foreground);
|
|
||||||
border-radius: 4px;
|
|
||||||
background: var(--background-lighter);
|
|
||||||
padding: 0.5em;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-height: 12em;
|
|
||||||
max-width: 12em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
flex-grow: 1;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 48px;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,185 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { createEventDispatcher, onMount, setContext, tick } from "svelte";
|
|
||||||
import { normUrl } from "../util/history";
|
|
||||||
import IconButton from "./utils/IconButton.svelte";
|
|
||||||
import { selected } from "./EntitySelect.svelte";
|
|
||||||
import type { BrowseContext } from "../util/browse";
|
|
||||||
import { writable } from "svelte/store";
|
|
||||||
import { useParams } from "svelte-navigator";
|
|
||||||
import { i18n } from "../i18n";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
const params = useParams();
|
|
||||||
|
|
||||||
export let address: string | undefined = undefined;
|
|
||||||
export let index: number;
|
|
||||||
export let only: boolean;
|
|
||||||
export let background = "var(--background-lighter)";
|
|
||||||
export let forceDetail = false;
|
|
||||||
let shifted = false;
|
|
||||||
let key = Math.random();
|
|
||||||
|
|
||||||
let detail = only || forceDetail;
|
|
||||||
let detailChanged = false;
|
|
||||||
$: if (!detailChanged) detail = only || forceDetail;
|
|
||||||
$: if (detailChanged) tick().then(() => dispatch("detail", detail));
|
|
||||||
|
|
||||||
let indexStore = writable(index);
|
|
||||||
$: $indexStore = index;
|
|
||||||
|
|
||||||
let addressesStore = writable([]);
|
|
||||||
$: $addressesStore = $params.addresses?.split(",") || [];
|
|
||||||
|
|
||||||
setContext("browse", {
|
|
||||||
index: indexStore,
|
|
||||||
addresses: addressesStore,
|
|
||||||
} as BrowseContext);
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
// Required to make detail mode detection work in Browse
|
|
||||||
dispatch("detail", detail);
|
|
||||||
});
|
|
||||||
$: if ($selected.length) {
|
|
||||||
detail = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function visit() {
|
|
||||||
window.open(normUrl(`/browse/${address}`), "_blank");
|
|
||||||
}
|
|
||||||
|
|
||||||
let width = 460;
|
|
||||||
if (window.innerWidth < 600) {
|
|
||||||
width = window.innerWidth - 6;
|
|
||||||
}
|
|
||||||
function drag(ev: MouseEvent) {
|
|
||||||
const startWidth = width;
|
|
||||||
const startX = ev.screenX;
|
|
||||||
|
|
||||||
function onMouseMove(ev: MouseEvent) {
|
|
||||||
width = startWidth + (ev.screenX - startX);
|
|
||||||
width = width < 300 ? 300 : width;
|
|
||||||
}
|
|
||||||
function onMouseUp(_: MouseEvent) {
|
|
||||||
window.removeEventListener("mousemove", onMouseMove);
|
|
||||||
window.removeEventListener("mouseup", onMouseUp);
|
|
||||||
}
|
|
||||||
window.addEventListener("mousemove", onMouseMove);
|
|
||||||
window.addEventListener("mouseup", onMouseUp);
|
|
||||||
}
|
|
||||||
|
|
||||||
function reload() {
|
|
||||||
key = Math.random();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="browse-column"
|
|
||||||
class:detail
|
|
||||||
style="--background-color: {background}"
|
|
||||||
on:mousemove={(ev) => (shifted = ev.shiftKey)}
|
|
||||||
>
|
|
||||||
<div class="view" style="--width: {width}px">
|
|
||||||
<header>
|
|
||||||
{#if address}
|
|
||||||
<IconButton name="link" on:click={() => visit()} disabled={only}>
|
|
||||||
{$i18n.t("Detach")}
|
|
||||||
</IconButton>
|
|
||||||
{/if}
|
|
||||||
{#if !forceDetail}
|
|
||||||
<IconButton
|
|
||||||
name={detail ? "zoom-out" : "zoom-in"}
|
|
||||||
on:click={() => {
|
|
||||||
detail = !detail;
|
|
||||||
detailChanged = true;
|
|
||||||
}}
|
|
||||||
active={detail}
|
|
||||||
>
|
|
||||||
{$i18n.t("Detail")}
|
|
||||||
</IconButton>
|
|
||||||
{:else}
|
|
||||||
<div class="noop"></div>
|
|
||||||
{/if}
|
|
||||||
{#if address}
|
|
||||||
<IconButton
|
|
||||||
name="intersect"
|
|
||||||
on:click={() => dispatch("combine", address)}
|
|
||||||
>
|
|
||||||
{$i18n.t("Combine")}
|
|
||||||
</IconButton>
|
|
||||||
{/if}
|
|
||||||
{#if !shifted}
|
|
||||||
<IconButton
|
|
||||||
name="x-circle"
|
|
||||||
on:click={() => dispatch("close")}
|
|
||||||
disabled={only}
|
|
||||||
>
|
|
||||||
{$i18n.t("Close")}
|
|
||||||
</IconButton>
|
|
||||||
{:else}
|
|
||||||
<IconButton name="refresh" on:click={() => reload()}>
|
|
||||||
{$i18n.t("Reload")}
|
|
||||||
</IconButton>
|
|
||||||
{/if}
|
|
||||||
</header>
|
|
||||||
{#key key}
|
|
||||||
<slot {detail} />
|
|
||||||
{/key}
|
|
||||||
</div>
|
|
||||||
<div class="resizeHandle" on:mousedown|preventDefault={drag} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.browse-column {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browse-column.detail {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.view {
|
|
||||||
@media screen and (min-width: 600px) {
|
|
||||||
min-width: 85vw;
|
|
||||||
max-width: min(85vw, 1920px);
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view {
|
|
||||||
min-width: var(--width);
|
|
||||||
max-width: var(--width);
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
background: var(--background-color);
|
|
||||||
color: var(--foreground-lighter);
|
|
||||||
border: 1px solid var(--foreground-lightest);
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
// transition: min-width 0.2s, max-width 0.2s;
|
|
||||||
// TODO - container has nowhere to scroll, breaking `detail` scroll
|
|
||||||
|
|
||||||
header {
|
|
||||||
font-size: 20px;
|
|
||||||
position: relative;
|
|
||||||
min-height: 1em;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.resizeHandle {
|
|
||||||
cursor: ew-resize;
|
|
||||||
height: 100%;
|
|
||||||
width: 0.5rem;
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,178 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { i18n } from "../i18n";
|
|
||||||
import EntitySetEditor from "./EntitySetEditor.svelte";
|
|
||||||
import EntryView from "./EntryView.svelte";
|
|
||||||
import Icon from "./utils/Icon.svelte";
|
|
||||||
import EntityList from "./widgets/EntityList.svelte";
|
|
||||||
import api from "../lib/api";
|
|
||||||
import { Query } from "@upnd/upend";
|
|
||||||
import { ATTR_IN } from "@upnd/upend/constants";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import { Any } from "@upnd/upend/query";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let spec: string;
|
|
||||||
|
|
||||||
const individualSpecs = spec.split(/(?=[+=-])/);
|
|
||||||
let includedGroups = individualSpecs
|
|
||||||
.filter((s) => s.startsWith("+"))
|
|
||||||
.map((s) => s.slice(1));
|
|
||||||
let requiredGroups = individualSpecs
|
|
||||||
.filter((s) => s.startsWith("="))
|
|
||||||
.map((s) => s.slice(1));
|
|
||||||
let excludedGroups = individualSpecs
|
|
||||||
.filter((s) => s.startsWith("-"))
|
|
||||||
.map((s) => s.slice(1));
|
|
||||||
|
|
||||||
$: if (
|
|
||||||
includedGroups.length === 0 &&
|
|
||||||
requiredGroups.length === 0 &&
|
|
||||||
excludedGroups.length === 0
|
|
||||||
) {
|
|
||||||
dispatch("close");
|
|
||||||
}
|
|
||||||
|
|
||||||
const combinedWidgets = [
|
|
||||||
{
|
|
||||||
name: "List",
|
|
||||||
icon: "list-check",
|
|
||||||
components: ({ entities }) => [
|
|
||||||
{
|
|
||||||
component: EntityList,
|
|
||||||
props: {
|
|
||||||
entities,
|
|
||||||
thumbnails: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "EntityList",
|
|
||||||
icon: "image",
|
|
||||||
components: ({ entities }) => [
|
|
||||||
{
|
|
||||||
component: EntityList,
|
|
||||||
props: {
|
|
||||||
entities,
|
|
||||||
thumbnails: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
let resultEntities = [];
|
|
||||||
async function updateResultEntities(
|
|
||||||
includedGroups: string[],
|
|
||||||
requiredGroups: string[],
|
|
||||||
excludedGroups: string[],
|
|
||||||
) {
|
|
||||||
const included = includedGroups.length
|
|
||||||
? (
|
|
||||||
await api.query(
|
|
||||||
Query.matches(
|
|
||||||
Any,
|
|
||||||
ATTR_IN,
|
|
||||||
includedGroups.map((g) => `@${g}`),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
).objects
|
|
||||||
: [];
|
|
||||||
const required = requiredGroups.length
|
|
||||||
? (
|
|
||||||
await api.query(
|
|
||||||
Query.matches(
|
|
||||||
Any,
|
|
||||||
ATTR_IN,
|
|
||||||
requiredGroups.map((g) => `@${g}`),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
).objects
|
|
||||||
: [];
|
|
||||||
const excluded = excludedGroups.length
|
|
||||||
? (
|
|
||||||
await api.query(
|
|
||||||
Query.matches(
|
|
||||||
Any,
|
|
||||||
ATTR_IN,
|
|
||||||
excludedGroups.map((g) => `@${g}`),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
).objects
|
|
||||||
: [];
|
|
||||||
resultEntities = (
|
|
||||||
Object.keys(included).length
|
|
||||||
? Object.keys(included)
|
|
||||||
: Object.keys(required)
|
|
||||||
)
|
|
||||||
.filter(
|
|
||||||
(e) => !requiredGroups.length || Object.keys(required).includes(e),
|
|
||||||
)
|
|
||||||
.filter((e) => !Object.keys(excluded).includes(e));
|
|
||||||
}
|
|
||||||
$: updateResultEntities(includedGroups, requiredGroups, excludedGroups);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="view" data-address-multi={resultEntities}>
|
|
||||||
<h2>
|
|
||||||
<Icon plain name="intersect" />
|
|
||||||
{$i18n.t("Combine")}
|
|
||||||
</h2>
|
|
||||||
<div class="controls">
|
|
||||||
<EntitySetEditor
|
|
||||||
entities={includedGroups}
|
|
||||||
header={$i18n.t("Include")}
|
|
||||||
confirmRemoveMessage={null}
|
|
||||||
on:add={(ev) => (includedGroups = [...includedGroups, ev.detail])}
|
|
||||||
on:remove={(ev) =>
|
|
||||||
(includedGroups = includedGroups.filter((e) => e !== ev.detail))}
|
|
||||||
/>
|
|
||||||
<EntitySetEditor
|
|
||||||
entities={requiredGroups}
|
|
||||||
header={$i18n.t("Require")}
|
|
||||||
confirmRemoveMessage={null}
|
|
||||||
on:add={(ev) => (requiredGroups = [...requiredGroups, ev.detail])}
|
|
||||||
on:remove={(ev) =>
|
|
||||||
(requiredGroups = requiredGroups.filter((e) => e !== ev.detail))}
|
|
||||||
/>
|
|
||||||
<EntitySetEditor
|
|
||||||
entities={excludedGroups}
|
|
||||||
header={$i18n.t("Exclude")}
|
|
||||||
confirmRemoveMessage={null}
|
|
||||||
on:add={(ev) => (excludedGroups = [...excludedGroups, ev.detail])}
|
|
||||||
on:remove={(ev) =>
|
|
||||||
(excludedGroups = excludedGroups.filter((e) => e !== ev.detail))}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="entities">
|
|
||||||
<EntryView
|
|
||||||
title={$i18n.t("Matching entities")}
|
|
||||||
entities={resultEntities}
|
|
||||||
widgets={combinedWidgets}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.view {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
margin-top: -0.66em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entities {
|
|
||||||
flex-grow: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,176 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { ATTR_IN, ATTR_LABEL } from "@upnd/upend/constants";
|
|
||||||
import api from "../lib/api";
|
|
||||||
import { i18n } from "../i18n";
|
|
||||||
import Spinner from "./utils/Spinner.svelte";
|
|
||||||
import UpObject from "./display/UpObject.svelte";
|
|
||||||
|
|
||||||
const groups = (async () => {
|
|
||||||
const data = await api.query(`(matches ? "${ATTR_IN}" ?)`);
|
|
||||||
|
|
||||||
const addresses = data.entries
|
|
||||||
.filter((e) => e.value.t === "Address")
|
|
||||||
.map((e) => e.value.c) as string[];
|
|
||||||
|
|
||||||
const sortedAddresses = [...new Set(addresses)]
|
|
||||||
.map((address) => ({
|
|
||||||
address,
|
|
||||||
count: addresses.filter((a) => a === address).length,
|
|
||||||
}))
|
|
||||||
.sort((a, b) => b.count - a.count);
|
|
||||||
|
|
||||||
const addressesString = sortedAddresses
|
|
||||||
.map(({ address }) => `@${address}`)
|
|
||||||
.join(" ");
|
|
||||||
const labels = (
|
|
||||||
await api.query(`(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`)
|
|
||||||
).entries.filter((e) => e.value.t === "String");
|
|
||||||
|
|
||||||
const display = sortedAddresses.map(({ address, count }) => ({
|
|
||||||
address,
|
|
||||||
labels: labels
|
|
||||||
.filter((e) => e.entity === address)
|
|
||||||
.map((e) => e.value.c)
|
|
||||||
.sort() as string[],
|
|
||||||
count,
|
|
||||||
}));
|
|
||||||
|
|
||||||
display
|
|
||||||
.sort((a, b) => (a.labels[0] || "").localeCompare(b.labels[0] || ""))
|
|
||||||
.sort((a, b) => b.count - a.count);
|
|
||||||
|
|
||||||
const labelsToGroups = new Map<string, string[]>();
|
|
||||||
labels.forEach((e) => {
|
|
||||||
const groups = labelsToGroups.get(e.value.c as string) || [];
|
|
||||||
if (!groups.includes(e.entity)) {
|
|
||||||
groups.push(e.entity);
|
|
||||||
}
|
|
||||||
labelsToGroups.set(e.value.c as string, groups);
|
|
||||||
});
|
|
||||||
const duplicates = [...labelsToGroups.entries()]
|
|
||||||
.filter(([_, groups]) => groups.length > 1)
|
|
||||||
.map(([label, groups]) => ({ label, groups }));
|
|
||||||
|
|
||||||
return {
|
|
||||||
groups: display,
|
|
||||||
total: sortedAddresses.length,
|
|
||||||
duplicateGroups: duplicates,
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
let clientWidth: number;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="groups" bind:clientWidth class:small={clientWidth < 600}>
|
|
||||||
<h2>{$i18n.t("Groups")}</h2>
|
|
||||||
<div class="main">
|
|
||||||
{#await groups}
|
|
||||||
<Spinner centered />
|
|
||||||
{:then data}
|
|
||||||
<ul>
|
|
||||||
{#each data.groups as group}
|
|
||||||
<li class="group" data-address={group.address}>
|
|
||||||
<UpObject link address={group.address} labels={group.labels} />
|
|
||||||
<div class="count">{group.count}</div>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
<li>No groups?</li>
|
|
||||||
{/each}
|
|
||||||
{#if data.groups && data.total > data.groups.length}
|
|
||||||
<li>+ {data.total - data.groups.length}...</li>
|
|
||||||
{/if}
|
|
||||||
</ul>
|
|
||||||
{#if data.duplicateGroups.length > 0}
|
|
||||||
<h3>{$i18n.t("Duplicate groups")}</h3>
|
|
||||||
<ul class="duplicate">
|
|
||||||
{#each data.duplicateGroups as { label, groups }}
|
|
||||||
<li class="duplicate-group">
|
|
||||||
<div class="label">{label}</div>
|
|
||||||
<ul>
|
|
||||||
{#each groups as group}
|
|
||||||
<li>
|
|
||||||
<UpObject link address={group} backpath={2} />
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{/if}
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use "../styles/colors";
|
|
||||||
|
|
||||||
.groups {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
overflow: hidden auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin-top: -0.66em;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5em;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.66em;
|
|
||||||
margin-left: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.duplicate {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.duplicate-group {
|
|
||||||
flex-basis: 49%;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--foreground);
|
|
||||||
padding: .5rem;
|
|
||||||
overflow-x: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.groups.small {
|
|
||||||
ul {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,633 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import EntryView, { type Widget } from "./EntryView.svelte";
|
|
||||||
import { useEntity } from "../lib/entity";
|
|
||||||
import UpObject from "./display/UpObject.svelte";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import { derived, type Readable } from "svelte/store";
|
|
||||||
import { Query, type UpEntry } from "@upnd/upend";
|
|
||||||
import Spinner from "./utils/Spinner.svelte";
|
|
||||||
import NotesEditor from "./utils/NotesEditor.svelte";
|
|
||||||
import type { WidgetChange } from "../types/base";
|
|
||||||
import type { Address, EntityInfo } from "@upnd/upend/types";
|
|
||||||
import IconButton from "./utils/IconButton.svelte";
|
|
||||||
import BlobViewer from "./display/BlobViewer.svelte";
|
|
||||||
import { i18n } from "../i18n";
|
|
||||||
import EntryList from "./widgets/EntryList.svelte";
|
|
||||||
import api from "../lib/api";
|
|
||||||
import EntityList from "./widgets/EntityList.svelte";
|
|
||||||
import {
|
|
||||||
ATTR_IN,
|
|
||||||
ATTR_KEY,
|
|
||||||
ATTR_LABEL,
|
|
||||||
ATTR_OF,
|
|
||||||
} from "@upnd/upend/constants";
|
|
||||||
import InspectGroups from "./InspectGroups.svelte";
|
|
||||||
import InspectTypeEditor from "./InspectTypeEditor.svelte";
|
|
||||||
import LabelBorder from "./utils/LabelBorder.svelte";
|
|
||||||
import { debug } from "debug";
|
|
||||||
import { Any } from "@upnd/upend/query";
|
|
||||||
|
|
||||||
const dbg = debug("kestrel:Inspect");
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
export let detail: boolean;
|
|
||||||
let showAsEntries = false;
|
|
||||||
let highlightedType: string | undefined;
|
|
||||||
|
|
||||||
let blobHandled = false;
|
|
||||||
|
|
||||||
$: ({ entity, entityInfo, error, revalidate } = useEntity(address));
|
|
||||||
|
|
||||||
$: allTypes = derived(
|
|
||||||
entityInfo,
|
|
||||||
($entityInfo, set) => {
|
|
||||||
getAllTypes($entityInfo).then((allTypes) => {
|
|
||||||
set(allTypes);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
) as Readable<{
|
|
||||||
[key: string]: {
|
|
||||||
labels: string[];
|
|
||||||
attributes: string[];
|
|
||||||
};
|
|
||||||
}>;
|
|
||||||
$: sortedTypes = Object.entries($allTypes)
|
|
||||||
.sort(([a, _], [b, __]) => a.localeCompare(b))
|
|
||||||
.sort(([_, a], [__, b]) => a.attributes.length - b.attributes.length);
|
|
||||||
|
|
||||||
async function getAllTypes(entityInfo: EntityInfo) {
|
|
||||||
const allTypes = {};
|
|
||||||
|
|
||||||
if (!entityInfo) {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
|
|
||||||
const typeAddresses: string[] = [
|
|
||||||
await api.getAddress(entityInfo.t),
|
|
||||||
...($entity?.attr[ATTR_IN] || []).map((e) => e.value.c as string),
|
|
||||||
];
|
|
||||||
const typeAddressesIn = typeAddresses.map((addr) => `@${addr}`).join(" ");
|
|
||||||
|
|
||||||
const labelsQuery = await api.query(
|
|
||||||
`(matches (in ${typeAddressesIn}) "${ATTR_LABEL}" ?)`,
|
|
||||||
);
|
|
||||||
|
|
||||||
typeAddresses.forEach((address) => {
|
|
||||||
let labels = labelsQuery.getObject(address).identify();
|
|
||||||
|
|
||||||
let typeLabel: string | undefined;
|
|
||||||
if (typeLabel) {
|
|
||||||
labels.unshift(typeLabel);
|
|
||||||
}
|
|
||||||
|
|
||||||
allTypes[address] = {
|
|
||||||
labels,
|
|
||||||
attributes: [],
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const attributes = await api.query(
|
|
||||||
`(matches ? "${ATTR_OF}" (in ${typeAddressesIn}))`,
|
|
||||||
);
|
|
||||||
await Promise.all(
|
|
||||||
typeAddresses.map(async (address) => {
|
|
||||||
allTypes[address].attributes = (
|
|
||||||
await Promise.all(
|
|
||||||
(attributes.getObject(address).attr[`~${ATTR_OF}`] || []).map(
|
|
||||||
async (e) => {
|
|
||||||
try {
|
|
||||||
const { t, c } = await api.addressToComponents(e.entity);
|
|
||||||
if (t == "Attribute") {
|
|
||||||
return c;
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
),
|
|
||||||
)
|
|
||||||
).filter(Boolean);
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
const result = {};
|
|
||||||
Object.keys(allTypes).forEach((addr) => {
|
|
||||||
if (allTypes[addr].attributes.length > 0) {
|
|
||||||
result[addr] = allTypes[addr];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
let untypedProperties = [] as UpEntry[];
|
|
||||||
let untypedLinks = [] as UpEntry[];
|
|
||||||
|
|
||||||
$: {
|
|
||||||
untypedProperties = [];
|
|
||||||
untypedLinks = [];
|
|
||||||
|
|
||||||
($entity?.attributes || []).forEach((entry) => {
|
|
||||||
const entryTypes = Object.entries($allTypes || {}).filter(([_, t]) =>
|
|
||||||
t.attributes.includes(entry.attribute),
|
|
||||||
);
|
|
||||||
if (entryTypes.length === 0) {
|
|
||||||
if (entry.value.t === "Address") {
|
|
||||||
untypedLinks.push(entry);
|
|
||||||
} else {
|
|
||||||
untypedProperties.push(entry);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
untypedProperties = untypedProperties;
|
|
||||||
untypedLinks = untypedLinks;
|
|
||||||
}
|
|
||||||
|
|
||||||
$: filteredUntypedProperties = untypedProperties.filter(
|
|
||||||
(entry) =>
|
|
||||||
![
|
|
||||||
ATTR_LABEL,
|
|
||||||
ATTR_IN,
|
|
||||||
ATTR_KEY,
|
|
||||||
"NOTE",
|
|
||||||
"LAST_VISITED",
|
|
||||||
"NUM_VISITED",
|
|
||||||
"LAST_ATTRIBUTE_WIDGET",
|
|
||||||
].includes(entry.attribute),
|
|
||||||
);
|
|
||||||
|
|
||||||
$: currentUntypedProperties = filteredUntypedProperties;
|
|
||||||
|
|
||||||
$: filteredUntypedLinks = untypedLinks.filter(
|
|
||||||
(entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute),
|
|
||||||
);
|
|
||||||
|
|
||||||
$: currentUntypedLinks = filteredUntypedLinks;
|
|
||||||
|
|
||||||
$: currentBacklinks =
|
|
||||||
$entity?.backlinks.filter(
|
|
||||||
(entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute),
|
|
||||||
) || [];
|
|
||||||
|
|
||||||
$: tagged = $entity?.attr[`~${ATTR_IN}`] || [];
|
|
||||||
|
|
||||||
let attributesUsed: UpEntry[] = [];
|
|
||||||
$: {
|
|
||||||
if ($entityInfo?.t === "Attribute") {
|
|
||||||
api
|
|
||||||
.query(`(matches ? "${$entityInfo.c}" ?)`)
|
|
||||||
.then((result) => (attributesUsed = result.entries));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let correctlyTagged: Address[] | undefined;
|
|
||||||
let incorrectlyTagged: Address[] | undefined;
|
|
||||||
$: {
|
|
||||||
if ($entity?.attr[`~${ATTR_OF}`]) {
|
|
||||||
fetchCorrectlyTagged();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchCorrectlyTagged() {
|
|
||||||
const attributes = (
|
|
||||||
await Promise.all(
|
|
||||||
$entity?.attr[`~${ATTR_OF}`].map((e) =>
|
|
||||||
api.addressToComponents(e.entity),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
)
|
|
||||||
.filter((ac) => ac.t == "Attribute")
|
|
||||||
.map((ac) => ac.c);
|
|
||||||
|
|
||||||
const attributeQuery = await api.query(
|
|
||||||
Query.matches(
|
|
||||||
tagged.map((t) => `@${t.entity}`),
|
|
||||||
attributes,
|
|
||||||
Any,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
correctlyTagged = [];
|
|
||||||
incorrectlyTagged = [];
|
|
||||||
|
|
||||||
for (const element of tagged) {
|
|
||||||
const entity = attributeQuery.getObject(element.entity);
|
|
||||||
if (attributes.every((attr) => entity.attr[attr])) {
|
|
||||||
correctlyTagged = [...correctlyTagged, element.entity];
|
|
||||||
} else {
|
|
||||||
incorrectlyTagged = [...incorrectlyTagged, element.entity];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function onChange(ev: CustomEvent<WidgetChange>) {
|
|
||||||
dbg("onChange", ev.detail);
|
|
||||||
const change = ev.detail;
|
|
||||||
switch (change.type) {
|
|
||||||
case "create":
|
|
||||||
await api.putEntry({
|
|
||||||
entity: address,
|
|
||||||
attribute: change.attribute,
|
|
||||||
value: change.value,
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "delete":
|
|
||||||
await api.deleteEntry(change.address);
|
|
||||||
break;
|
|
||||||
case "update":
|
|
||||||
await api.putEntityAttribute(address, change.attribute, change.value);
|
|
||||||
break;
|
|
||||||
case "entry-add":
|
|
||||||
await api.putEntry({
|
|
||||||
entity: change.address,
|
|
||||||
attribute: ATTR_IN,
|
|
||||||
value: { t: "Address", c: address },
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "entry-delete": {
|
|
||||||
const inEntry = $entity?.attr[`~${ATTR_IN}`].find(
|
|
||||||
(e) => e.entity === change.address,
|
|
||||||
);
|
|
||||||
if (inEntry) {
|
|
||||||
await api.deleteEntry(inEntry.address);
|
|
||||||
} else {
|
|
||||||
console.warn(
|
|
||||||
"Couldn't find IN entry for entity %s?!",
|
|
||||||
change.address,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
console.error("Unimplemented AttributeChange", change);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
revalidate();
|
|
||||||
}
|
|
||||||
|
|
||||||
let identities = [address];
|
|
||||||
|
|
||||||
function onResolved(ev: CustomEvent<string[]>) {
|
|
||||||
identities = ev.detail;
|
|
||||||
dispatch("resolved", ev.detail);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteObject() {
|
|
||||||
if (confirm(`${$i18n.t("Really delete")} "${identities.join(" | ")}"?`)) {
|
|
||||||
await api.deleteEntry(address);
|
|
||||||
dispatch("close");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const attributeWidgets: Widget[] = [
|
|
||||||
{
|
|
||||||
name: "List",
|
|
||||||
icon: "list-check",
|
|
||||||
components: ({ entries }) => [
|
|
||||||
{
|
|
||||||
component: EntryList,
|
|
||||||
props: {
|
|
||||||
entries,
|
|
||||||
columns: "attribute, value",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const linkWidgets: Widget[] = [
|
|
||||||
{
|
|
||||||
name: "List",
|
|
||||||
icon: "list-check",
|
|
||||||
components: ({ entries, group }) => [
|
|
||||||
{
|
|
||||||
component: EntryList,
|
|
||||||
props: {
|
|
||||||
entries,
|
|
||||||
columns: "attribute, value",
|
|
||||||
attributes: $allTypes[group]?.attributes || [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Entity List",
|
|
||||||
icon: "image",
|
|
||||||
components: ({ entries, address }) => [
|
|
||||||
{
|
|
||||||
component: EntityList,
|
|
||||||
props: {
|
|
||||||
address,
|
|
||||||
entities: entries
|
|
||||||
.filter((e) => e.value.t == "Address")
|
|
||||||
.map((e) => e.value.c),
|
|
||||||
thumbnails: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const taggedWidgets: Widget[] = [
|
|
||||||
{
|
|
||||||
name: "List",
|
|
||||||
icon: "list-check",
|
|
||||||
components: ({ entries, address }) => [
|
|
||||||
{
|
|
||||||
component: EntityList,
|
|
||||||
props: {
|
|
||||||
address,
|
|
||||||
entities: entries.map((e) => e.entity),
|
|
||||||
thumbnails: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "EntityList",
|
|
||||||
icon: "image",
|
|
||||||
components: ({ entries, address }) => [
|
|
||||||
{
|
|
||||||
component: EntityList,
|
|
||||||
props: {
|
|
||||||
address,
|
|
||||||
entities: entries.map((e) => e.entity),
|
|
||||||
thumbnails: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
$: entity.subscribe(async (object) => {
|
|
||||||
if (object && object.listing.entries.length) {
|
|
||||||
dbg("Updating visit stats for %o", object);
|
|
||||||
await api.putEntityAttribute(
|
|
||||||
object.address,
|
|
||||||
"LAST_VISITED",
|
|
||||||
{
|
|
||||||
t: "Number",
|
|
||||||
c: new Date().getTime() / 1000,
|
|
||||||
},
|
|
||||||
"IMPLICIT",
|
|
||||||
);
|
|
||||||
|
|
||||||
await api.putEntityAttribute(
|
|
||||||
object.address,
|
|
||||||
"NUM_VISITED",
|
|
||||||
{
|
|
||||||
t: "Number",
|
|
||||||
c: (parseInt(String(object.get("NUM_VISITED"))) || 0) + 1,
|
|
||||||
},
|
|
||||||
"IMPLICIT",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="inspect"
|
|
||||||
class:detail
|
|
||||||
class:blob={blobHandled}
|
|
||||||
data-address-multi={($entity?.attr["~IN"]?.map((e) => e.entity) || []).join(
|
|
||||||
",",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<header>
|
|
||||||
<h2>
|
|
||||||
{#if $entity}
|
|
||||||
<UpObject banner {address} on:resolved={onResolved} />
|
|
||||||
{:else}
|
|
||||||
<Spinner centered />
|
|
||||||
{/if}
|
|
||||||
</h2>
|
|
||||||
</header>
|
|
||||||
{#if !showAsEntries}
|
|
||||||
<div class="main-content">
|
|
||||||
<div class="detail-col">
|
|
||||||
<div class="blob-viewer">
|
|
||||||
<BlobViewer
|
|
||||||
{address}
|
|
||||||
{detail}
|
|
||||||
on:handled={(ev) => (blobHandled = ev.detail)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{#if !$error}
|
|
||||||
<InspectGroups
|
|
||||||
{entity}
|
|
||||||
on:highlighted={(ev) => (highlightedType = ev.detail)}
|
|
||||||
on:change={() => revalidate()}
|
|
||||||
/>
|
|
||||||
<div class="properties">
|
|
||||||
<NotesEditor {address} on:change={onChange} />
|
|
||||||
<InspectTypeEditor {entity} on:change={() => revalidate()} />
|
|
||||||
{#each sortedTypes as [typeAddr, { labels, attributes }]}
|
|
||||||
<EntryView
|
|
||||||
entries={($entity?.attributes || []).filter((e) =>
|
|
||||||
attributes.includes(e.attribute),
|
|
||||||
)}
|
|
||||||
widgets={linkWidgets}
|
|
||||||
on:change={onChange}
|
|
||||||
highlighted={highlightedType == typeAddr}
|
|
||||||
title={labels.join(" | ")}
|
|
||||||
group={typeAddr}
|
|
||||||
{address}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#if currentUntypedProperties.length > 0}
|
|
||||||
<EntryView
|
|
||||||
title={$i18n.t("Other Properties")}
|
|
||||||
widgets={attributeWidgets}
|
|
||||||
entries={currentUntypedProperties}
|
|
||||||
on:change={onChange}
|
|
||||||
{address}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if currentUntypedLinks.length > 0}
|
|
||||||
<EntryView
|
|
||||||
title={$i18n.t("Links")}
|
|
||||||
widgets={linkWidgets}
|
|
||||||
entries={currentUntypedLinks}
|
|
||||||
on:change={onChange}
|
|
||||||
{address}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if !correctlyTagged || !incorrectlyTagged}
|
|
||||||
<EntryView
|
|
||||||
title={`${$i18n.t("Members")}`}
|
|
||||||
widgets={taggedWidgets}
|
|
||||||
entries={tagged}
|
|
||||||
on:change={onChange}
|
|
||||||
{address}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<EntryView
|
|
||||||
title={`${$i18n.t("Typed Members")} (${
|
|
||||||
correctlyTagged.length
|
|
||||||
})`}
|
|
||||||
widgets={taggedWidgets}
|
|
||||||
entries={tagged.filter((e) =>
|
|
||||||
correctlyTagged.includes(e.entity),
|
|
||||||
)}
|
|
||||||
on:change={onChange}
|
|
||||||
{address}
|
|
||||||
/>
|
|
||||||
<EntryView
|
|
||||||
title={`${$i18n.t("Untyped members")} (${
|
|
||||||
incorrectlyTagged.length
|
|
||||||
})`}
|
|
||||||
widgets={taggedWidgets}
|
|
||||||
entries={tagged.filter((e) =>
|
|
||||||
incorrectlyTagged.includes(e.entity),
|
|
||||||
)}
|
|
||||||
on:change={onChange}
|
|
||||||
{address}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if currentBacklinks.length > 0}
|
|
||||||
<EntryView
|
|
||||||
title={`${$i18n.t("Referred to")} (${currentBacklinks.length})`}
|
|
||||||
entries={currentBacklinks}
|
|
||||||
on:change={onChange}
|
|
||||||
{address}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if $entityInfo?.t === "Attribute"}
|
|
||||||
<LabelBorder>
|
|
||||||
<span slot="header"
|
|
||||||
>{$i18n.t("Used")} ({attributesUsed.length})</span
|
|
||||||
>
|
|
||||||
<EntryList
|
|
||||||
columns="entity,value"
|
|
||||||
entries={attributesUsed}
|
|
||||||
orderByValue
|
|
||||||
/>
|
|
||||||
</LabelBorder>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="error">
|
|
||||||
{$error}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="entries">
|
|
||||||
<h2>{$i18n.t("Attributes")}</h2>
|
|
||||||
<EntryList
|
|
||||||
entries={$entity.attributes}
|
|
||||||
columns={detail
|
|
||||||
? "timestamp, provenance, attribute, value"
|
|
||||||
: "attribute, value"}
|
|
||||||
on:change={onChange}
|
|
||||||
/>
|
|
||||||
<h2>{$i18n.t("Backlinks")}</h2>
|
|
||||||
<EntryList
|
|
||||||
entries={$entity.backlinks}
|
|
||||||
columns={detail
|
|
||||||
? "timestamp, provenance, entity, attribute"
|
|
||||||
: "entity, attribute"}
|
|
||||||
on:change={onChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="footer">
|
|
||||||
<IconButton
|
|
||||||
name="detail"
|
|
||||||
title={$i18n.t("Show as entries")}
|
|
||||||
active={showAsEntries}
|
|
||||||
on:click={() => (showAsEntries = !showAsEntries)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<IconButton
|
|
||||||
name="trash"
|
|
||||||
outline
|
|
||||||
subdued
|
|
||||||
color="#dc322f"
|
|
||||||
on:click={deleteObject}
|
|
||||||
title={$i18n.t("Delete object")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
header h2 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inspect,
|
|
||||||
.main-content {
|
|
||||||
flex: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.properties {
|
|
||||||
flex: auto;
|
|
||||||
height: 0; // https://stackoverflow.com/a/14964944
|
|
||||||
min-height: 12em;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1600px) {
|
|
||||||
.inspect.detail {
|
|
||||||
.main-content {
|
|
||||||
position: relative;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.blob {
|
|
||||||
.detail-col {
|
|
||||||
width: 33%;
|
|
||||||
flex-grow: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blob-viewer {
|
|
||||||
width: 65%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 1%;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content .detail-col {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entries {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
margin-top: 2rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,44 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import api from "../lib/api";
|
|
||||||
import { ATTR_IN } from "@upnd/upend/constants";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import type { UpObject } from "@upnd/upend";
|
|
||||||
import type { Readable } from "svelte/store";
|
|
||||||
import EntitySetEditor from "./EntitySetEditor.svelte";
|
|
||||||
import { i18n } from "../i18n";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let entity: Readable<UpObject>;
|
|
||||||
|
|
||||||
$: groups = Object.fromEntries(
|
|
||||||
($entity?.attr[ATTR_IN] || []).map((e) => [e.value.c as string, e.address]),
|
|
||||||
);
|
|
||||||
|
|
||||||
async function addGroup(address: string) {
|
|
||||||
await api.putEntry([
|
|
||||||
{
|
|
||||||
entity: $entity.address,
|
|
||||||
attribute: ATTR_IN,
|
|
||||||
value: {
|
|
||||||
t: "Address",
|
|
||||||
c: address,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
dispatch("change");
|
|
||||||
}
|
|
||||||
|
|
||||||
async function removeGroup(address: string) {
|
|
||||||
await api.deleteEntry(groups[address]);
|
|
||||||
dispatch("change");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<EntitySetEditor
|
|
||||||
entities={Object.keys(groups)}
|
|
||||||
header={$i18n.t("Groups")}
|
|
||||||
hide={Object.keys(groups).length === 0}
|
|
||||||
on:add={(e) => addGroup(e.detail)}
|
|
||||||
on:remove={(e) => removeGroup(e.detail)}
|
|
||||||
on:highlighted
|
|
||||||
/>
|
|
|
@ -1,134 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import UpObjectDisplay from "./display/UpObject.svelte";
|
|
||||||
import Selector, { type SelectorValue } from "./utils/Selector.svelte";
|
|
||||||
import IconButton from "./utils/IconButton.svelte";
|
|
||||||
import api from "../lib/api";
|
|
||||||
import { i18n } from "../i18n";
|
|
||||||
import type { UpObject, UpEntry } from "@upnd/upend";
|
|
||||||
import type { Readable } from "svelte/store";
|
|
||||||
import { ATTR_OF } from "@upnd/upend/constants";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import LabelBorder from "./utils/LabelBorder.svelte";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let entity: Readable<UpObject>;
|
|
||||||
|
|
||||||
let adding = false;
|
|
||||||
let typeSelector: Selector;
|
|
||||||
|
|
||||||
$: if (adding && typeSelector) typeSelector.focus();
|
|
||||||
|
|
||||||
$: typeEntries = $entity?.attr[`~${ATTR_OF}`] || [];
|
|
||||||
|
|
||||||
async function add(ev: CustomEvent<SelectorValue>) {
|
|
||||||
if (ev.detail.t !== "Attribute") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await api.putEntry({
|
|
||||||
entity: {
|
|
||||||
t: "Attribute",
|
|
||||||
c: ev.detail.name,
|
|
||||||
},
|
|
||||||
attribute: ATTR_OF,
|
|
||||||
value: { t: "Address", c: $entity.address },
|
|
||||||
});
|
|
||||||
dispatch("change");
|
|
||||||
}
|
|
||||||
|
|
||||||
async function remove(entry: UpEntry) {
|
|
||||||
let really = confirm(
|
|
||||||
$i18n.t('Really remove "{{attributeName}}" from "{{typeName}}"?', {
|
|
||||||
attributeName: (await api.addressToComponents(entry.entity)).c,
|
|
||||||
typeName: $entity.identify().join("/"),
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (really) {
|
|
||||||
await api.deleteEntry(entry.address);
|
|
||||||
dispatch("change");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if typeEntries.length || $entity?.attr["~IN"]?.length}
|
|
||||||
<LabelBorder hide={typeEntries.length === 0}>
|
|
||||||
<span slot="header">{$i18n.t("Type Attributes")}</span>
|
|
||||||
{#if adding}
|
|
||||||
<div class="selector">
|
|
||||||
<Selector
|
|
||||||
bind:this={typeSelector}
|
|
||||||
types={["Attribute", "NewAttribute"]}
|
|
||||||
on:input={add}
|
|
||||||
placeholder={$i18n.t("Assign an attribute to this type...")}
|
|
||||||
on:focus={(ev) => {
|
|
||||||
if (!ev.detail) adding = false;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="body">
|
|
||||||
<ul class="attributes">
|
|
||||||
{#each typeEntries as typeEntry}
|
|
||||||
<li class="attribute">
|
|
||||||
<div class="label">
|
|
||||||
<UpObjectDisplay address={typeEntry.entity} link />
|
|
||||||
</div>
|
|
||||||
<div class="controls">
|
|
||||||
<IconButton name="x-circle" on:click={() => remove(typeEntry)} />
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{:else}
|
|
||||||
<li class="no-attributes">
|
|
||||||
{$i18n.t("No attributes assigned to this type.")}
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
<div class="add-button">
|
|
||||||
<IconButton
|
|
||||||
outline
|
|
||||||
small
|
|
||||||
name="plus-circle"
|
|
||||||
on:click={() => (adding = true)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</LabelBorder>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.attributes {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attribute {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body {
|
|
||||||
display: flex;
|
|
||||||
align-items: start;
|
|
||||||
|
|
||||||
.attributes {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.selector {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-attributes {
|
|
||||||
opacity: 0.66;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,74 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import api from "../lib/api";
|
|
||||||
import { ATTR_IN } from "@upnd/upend/constants";
|
|
||||||
import { i18n } from "../i18n";
|
|
||||||
import { Query, UpListing } from "@upnd/upend";
|
|
||||||
import EntitySetEditor from "./EntitySetEditor.svelte";
|
|
||||||
import { Any } from "@upnd/upend/query";
|
|
||||||
|
|
||||||
export let entities: string[];
|
|
||||||
|
|
||||||
let groups = [];
|
|
||||||
let groupListing: UpListing | undefined = undefined;
|
|
||||||
async function updateGroups() {
|
|
||||||
const currentEntities = entities.concat();
|
|
||||||
const allGroups = await api.query(
|
|
||||||
Query.matches(
|
|
||||||
currentEntities.map((e) => `@${e}`),
|
|
||||||
ATTR_IN,
|
|
||||||
Any,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
const commonGroups = new Set(
|
|
||||||
allGroups.values
|
|
||||||
.filter((v) => v.t == "Address")
|
|
||||||
.map((v) => v.c)
|
|
||||||
.filter((groupAddr) => {
|
|
||||||
return Object.values(allGroups.objects).every((obj) => {
|
|
||||||
return obj.attr[ATTR_IN].some((v) => v.value.c === groupAddr);
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (entities.toString() == currentEntities.toString()) {
|
|
||||||
groups = Array.from(commonGroups);
|
|
||||||
groupListing = allGroups;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$: entities && updateGroups();
|
|
||||||
|
|
||||||
async function addGroup(address: string) {
|
|
||||||
await api.putEntry(
|
|
||||||
entities.map((entity) => ({
|
|
||||||
entity,
|
|
||||||
attribute: ATTR_IN,
|
|
||||||
value: {
|
|
||||||
t: "Address",
|
|
||||||
c: address,
|
|
||||||
},
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
await updateGroups();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function removeGroup(address: string) {
|
|
||||||
await Promise.all(
|
|
||||||
entities.map((entity) =>
|
|
||||||
api.deleteEntry(
|
|
||||||
groupListing.objects[entity].attr[ATTR_IN].find(
|
|
||||||
(v) => v.value.c === address,
|
|
||||||
).address,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
await updateGroups();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<EntitySetEditor
|
|
||||||
entities={groups}
|
|
||||||
header={$i18n.t("Common groups")}
|
|
||||||
on:add={(ev) => addGroup(ev.detail)}
|
|
||||||
on:remove={(ev) => removeGroup(ev.detail)}
|
|
||||||
/>
|
|
|
@ -1,457 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import UpObject from "./display/UpObject.svelte";
|
|
||||||
import api from "../lib/api";
|
|
||||||
import Selector, { type SelectorValue } from "./utils/Selector.svelte";
|
|
||||||
import { createEventDispatcher, onMount, tick } from "svelte";
|
|
||||||
import type { ZoomBehavior, ZoomTransform, Selection } from "d3";
|
|
||||||
import Spinner from "./utils/Spinner.svelte";
|
|
||||||
import UpObjectCard from "./display/UpObjectCard.svelte";
|
|
||||||
import BlobPreview from "./display/BlobPreview.svelte";
|
|
||||||
import SurfacePoint from "./display/SurfacePoint.svelte";
|
|
||||||
import { i18n } from "../i18n";
|
|
||||||
import debug from "debug";
|
|
||||||
import { Query } from "@upnd/upend";
|
|
||||||
import { Any } from "@upnd/upend/query";
|
|
||||||
const dbg = debug("kestrel:surface");
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let x: string | undefined = undefined;
|
|
||||||
export let y: string | undefined = undefined;
|
|
||||||
$: dispatch("updateAddress", { x, y });
|
|
||||||
|
|
||||||
let loaded = false;
|
|
||||||
|
|
||||||
let viewMode = "point";
|
|
||||||
|
|
||||||
let currentX = NaN;
|
|
||||||
let currentY = NaN;
|
|
||||||
|
|
||||||
let zoom: ZoomBehavior<Element, unknown> | undefined;
|
|
||||||
let autofit: () => void | undefined;
|
|
||||||
|
|
||||||
let view: Selection<HTMLElement, unknown, null, undefined>;
|
|
||||||
let viewEl: HTMLElement | undefined;
|
|
||||||
let viewHeight = 0;
|
|
||||||
let viewWidth = 0;
|
|
||||||
|
|
||||||
let selector: Selector | undefined;
|
|
||||||
|
|
||||||
$: if (selector) selector.focus();
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if ((x && !y) || (!x && y)) findPerpendicular();
|
|
||||||
}
|
|
||||||
async function findPerpendicular() {
|
|
||||||
const presentAxis = x || y;
|
|
||||||
const presentAxisAddress = await api.componentsToAddress({
|
|
||||||
t: "Attribute",
|
|
||||||
c: presentAxis,
|
|
||||||
});
|
|
||||||
const result = await api.query(
|
|
||||||
Query.or(
|
|
||||||
Query.matches(`@${presentAxisAddress}`, "PERPENDICULAR", Any),
|
|
||||||
Query.matches(Any, "PERPENDICULAR", `@${presentAxisAddress}`),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
const perpendicular = [
|
|
||||||
...result.entries.map((e) => e.entity),
|
|
||||||
...result.values
|
|
||||||
.filter((v) => v.t === "Address")
|
|
||||||
.map((v) => v.c as string),
|
|
||||||
].find((address) => address !== presentAxisAddress);
|
|
||||||
|
|
||||||
if (perpendicular) {
|
|
||||||
const perpendicularComponents =
|
|
||||||
await api.addressToComponents(perpendicular);
|
|
||||||
if (perpendicularComponents.t !== "Attribute") return;
|
|
||||||
const perpendicularName = perpendicularComponents.c;
|
|
||||||
|
|
||||||
if (x) {
|
|
||||||
y = perpendicularName;
|
|
||||||
} else {
|
|
||||||
x = perpendicularName;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IPoint {
|
|
||||||
address: string;
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
}
|
|
||||||
let points: IPoint[] = [];
|
|
||||||
async function loadPoints() {
|
|
||||||
points = [];
|
|
||||||
const result = await api.query(`(matches ? (in "${x}" "${y}") ?)`);
|
|
||||||
|
|
||||||
points = Object.entries(result.objects)
|
|
||||||
.map(([address, obj]) => {
|
|
||||||
let objX = parseInt(String(obj.get(x)));
|
|
||||||
let objY = parseInt(String(obj.get(y)));
|
|
||||||
|
|
||||||
if (objX && objY) {
|
|
||||||
return {
|
|
||||||
address,
|
|
||||||
x: objX,
|
|
||||||
y: objY,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.filter(Boolean);
|
|
||||||
|
|
||||||
tick().then(() => {
|
|
||||||
autofit();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if (x && y) {
|
|
||||||
loadPoints();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let selectorCoords: [number, number] | null = null;
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const d3 = await import("d3");
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
viewWidth = viewEl.clientWidth;
|
|
||||||
viewHeight = viewEl.clientHeight;
|
|
||||||
|
|
||||||
dbg("Initializing Surface view: %dx%d", viewWidth, viewHeight);
|
|
||||||
view = d3.select(viewEl);
|
|
||||||
const svg = view.select("svg");
|
|
||||||
if (svg.empty()) {
|
|
||||||
throw new Error(
|
|
||||||
"Failed initializing Surface - couldn't locate SVG element",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
svg.selectAll("*").remove();
|
|
||||||
|
|
||||||
const xScale = d3
|
|
||||||
.scaleLinear()
|
|
||||||
.domain([0, viewWidth])
|
|
||||||
.range([0, viewWidth]);
|
|
||||||
|
|
||||||
const yScale = d3
|
|
||||||
.scaleLinear()
|
|
||||||
.domain([0, viewHeight])
|
|
||||||
.range([viewHeight, 0]);
|
|
||||||
|
|
||||||
let xTicks = 10;
|
|
||||||
let yTicks = viewHeight / (viewWidth / xTicks);
|
|
||||||
|
|
||||||
const xAxis = d3
|
|
||||||
.axisBottom(xScale)
|
|
||||||
.ticks(xTicks)
|
|
||||||
.tickSize(viewHeight)
|
|
||||||
.tickPadding(5 - viewHeight);
|
|
||||||
|
|
||||||
const yAxis = d3
|
|
||||||
.axisRight(yScale)
|
|
||||||
.ticks(yTicks)
|
|
||||||
.tickSize(viewWidth)
|
|
||||||
.tickPadding(5 - viewWidth);
|
|
||||||
|
|
||||||
const gX = svg.append("g").call(xAxis);
|
|
||||||
const gY = svg.append("g").call(yAxis);
|
|
||||||
|
|
||||||
zoom = d3.zoom().on("zoom", zoomed);
|
|
||||||
|
|
||||||
function zoomed({ transform }: { transform: ZoomTransform }) {
|
|
||||||
const points = view.select(".content");
|
|
||||||
points.style(
|
|
||||||
"transform",
|
|
||||||
`translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`,
|
|
||||||
);
|
|
||||||
const allPoints = view.selectAll(".point");
|
|
||||||
allPoints.style("transform", `scale(${1 / transform.k})`);
|
|
||||||
|
|
||||||
gX.call(xAxis.scale(transform.rescaleX(xScale)));
|
|
||||||
gY.call(yAxis.scale(transform.rescaleY(yScale)));
|
|
||||||
|
|
||||||
updateStyles();
|
|
||||||
}
|
|
||||||
|
|
||||||
autofit = () => {
|
|
||||||
zoom.translateTo(view, 0, viewHeight);
|
|
||||||
|
|
||||||
if (points.length) {
|
|
||||||
zoom.scaleTo(
|
|
||||||
view,
|
|
||||||
Math.min(
|
|
||||||
viewWidth / 2 / Math.max(...points.map((p) => Math.abs(p.x))) -
|
|
||||||
0.3,
|
|
||||||
viewHeight / 2 / Math.max(...points.map((p) => Math.abs(p.y))) -
|
|
||||||
0.3,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function updateStyles() {
|
|
||||||
svg
|
|
||||||
.selectAll(".tick line")
|
|
||||||
.attr("stroke-width", (d: number) => {
|
|
||||||
return d === 0 ? 2 : 1;
|
|
||||||
})
|
|
||||||
.attr("stroke", function (d: number) {
|
|
||||||
return d === 0
|
|
||||||
? "var(--foreground-lightest)"
|
|
||||||
: "var(--foreground-lighter)";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// function reset() {
|
|
||||||
// svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
|
|
||||||
// }
|
|
||||||
|
|
||||||
view.on("mousemove", (ev: MouseEvent) => {
|
|
||||||
// not using offsetXY because `translate` transforms on .inner mess it up
|
|
||||||
const viewBBox = (view.node() as HTMLElement).getBoundingClientRect();
|
|
||||||
const [x, y] = d3
|
|
||||||
.zoomTransform(view.select(".content").node() as HTMLElement)
|
|
||||||
.invert([ev.clientX - viewBBox.left, ev.clientY - viewBBox.top]);
|
|
||||||
|
|
||||||
currentX = xScale.invert(x);
|
|
||||||
currentY = yScale.invert(y);
|
|
||||||
});
|
|
||||||
|
|
||||||
d3.select(viewEl)
|
|
||||||
.call(zoom)
|
|
||||||
.on("dblclick.zoom", (_ev: MouseEvent) => {
|
|
||||||
selectorCoords = [currentX, currentY];
|
|
||||||
});
|
|
||||||
|
|
||||||
autofit();
|
|
||||||
|
|
||||||
loaded = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
const resizeObserver = new ResizeObserver(() => {
|
|
||||||
tick().then(() => init());
|
|
||||||
});
|
|
||||||
resizeObserver.observe(viewEl);
|
|
||||||
});
|
|
||||||
|
|
||||||
async function onSelectorInput(ev: CustomEvent<SelectorValue>) {
|
|
||||||
const value = ev.detail;
|
|
||||||
if (value.t !== "Address") return;
|
|
||||||
const address = value.c;
|
|
||||||
|
|
||||||
const [xValue, yValue] = selectorCoords;
|
|
||||||
selectorCoords = null;
|
|
||||||
await Promise.all(
|
|
||||||
[
|
|
||||||
[x, xValue],
|
|
||||||
[y, yValue],
|
|
||||||
].map(([axis, value]: [string, number]) =>
|
|
||||||
api.putEntityAttribute(address, axis, {
|
|
||||||
t: "Number",
|
|
||||||
c: value,
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
await loadPoints();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="surface">
|
|
||||||
<div class="header ui">
|
|
||||||
<div class="axis-selector">
|
|
||||||
<div class="label">X</div>
|
|
||||||
<Selector
|
|
||||||
types={["Attribute", "NewAttribute"]}
|
|
||||||
initial={x ? { t: "Attribute", name: x } : undefined}
|
|
||||||
on:input={(ev) => {
|
|
||||||
if (ev.detail.t === "Attribute") x = ev.detail.name;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div class="value">
|
|
||||||
{(Math.round(currentX * 100) / 100).toLocaleString("en", {
|
|
||||||
useGrouping: false,
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="axis-selector">
|
|
||||||
<div class="label">Y</div>
|
|
||||||
<Selector
|
|
||||||
types={["Attribute", "NewAttribute"]}
|
|
||||||
initial={y ? { t: "Attribute", name: y } : undefined}
|
|
||||||
on:input={(ev) => {
|
|
||||||
if (ev.detail.t === "Attribute") y = ev.detail.name;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div class="value">
|
|
||||||
{(Math.round(currentY * 100) / 100).toLocaleString("en", {
|
|
||||||
useGrouping: false,
|
|
||||||
minimumFractionDigits: 2,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="view" class:loaded bind:this={viewEl}>
|
|
||||||
<div class="ui view-mode-selector">
|
|
||||||
<div class="label">
|
|
||||||
{$i18n.t("View as")}
|
|
||||||
</div>
|
|
||||||
<select bind:value={viewMode}>
|
|
||||||
<option value="point">{$i18n.t("Point")}</option>
|
|
||||||
<option value="link">{$i18n.t("Link")}</option>
|
|
||||||
<option value="card">{$i18n.t("Card")}</option>
|
|
||||||
<!-- <option value="preview">{$i18n.t("Preview")}</option> -->
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
{#if !loaded}
|
|
||||||
<div class="loading">
|
|
||||||
<Spinner centered="absolute" />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="content">
|
|
||||||
{#if selectorCoords !== null}
|
|
||||||
<div
|
|
||||||
class="point selector"
|
|
||||||
style="
|
|
||||||
left: {selectorCoords[0]}px;
|
|
||||||
top: {viewHeight - selectorCoords[1]}px"
|
|
||||||
>
|
|
||||||
<Selector
|
|
||||||
types={["Address", "NewAddress"]}
|
|
||||||
on:input={onSelectorInput}
|
|
||||||
on:focus={(ev) => {
|
|
||||||
if (!ev.detail) selectorCoords = null;
|
|
||||||
}}
|
|
||||||
bind:this={selector}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#each points as point}
|
|
||||||
<div
|
|
||||||
class="point"
|
|
||||||
style="left: {point.x}px; top: {viewHeight - point.y}px"
|
|
||||||
>
|
|
||||||
<div class="inner">
|
|
||||||
{#if viewMode == "link"}
|
|
||||||
<UpObject link address={point.address} />
|
|
||||||
{:else if viewMode == "card"}
|
|
||||||
<UpObjectCard address={point.address} />
|
|
||||||
{:else if viewMode == "preview"}
|
|
||||||
<BlobPreview address={point.address} />
|
|
||||||
{:else if viewMode == "point"}
|
|
||||||
<SurfacePoint address={point.address} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<svg />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.surface {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 1em;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
|
|
||||||
.axis-selector {
|
|
||||||
display: flex;
|
|
||||||
gap: 1em;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 1rem;
|
|
||||||
&::after {
|
|
||||||
content: ":";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view {
|
|
||||||
flex-grow: 1;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
:global(svg) {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.tick text) {
|
|
||||||
color: var(--foreground-lightest);
|
|
||||||
font-size: 1rem;
|
|
||||||
text-shadow: 0 0 0.25em var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
transform-origin: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.point {
|
|
||||||
position: absolute;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
|
|
||||||
.inner {
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-mode-selector {
|
|
||||||
position: absolute;
|
|
||||||
top: 2rem;
|
|
||||||
right: 1.5em;
|
|
||||||
padding: 0.66em;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--foreground-lighter);
|
|
||||||
background: var(--background);
|
|
||||||
opacity: 0.66;
|
|
||||||
transition: opacity 0.25s;
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.loaded) {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-mode-selector {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5em;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
z-index: 99;
|
|
||||||
transform: scale(3);
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,208 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { useEntity } from "../../lib/entity";
|
|
||||||
import Spinner from "../utils/Spinner.svelte";
|
|
||||||
import FragmentViewer from "./blobs/FragmentViewer.svelte";
|
|
||||||
import ModelViewer from "./blobs/ModelViewer.svelte";
|
|
||||||
import VideoViewer from "./blobs/VideoViewer.svelte";
|
|
||||||
import HashBadge from "./HashBadge.svelte";
|
|
||||||
import api from "../../lib/api";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import { getTypes } from "../../util/mediatypes";
|
|
||||||
import { concurrentImage } from "../imageQueue";
|
|
||||||
import { ATTR_IN } from "@upnd/upend/constants";
|
|
||||||
import AudioPreview from "./blobs/AudioPreview.svelte";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
export let recurse = 3;
|
|
||||||
|
|
||||||
$: ({ entity, entityInfo } = useEntity(address));
|
|
||||||
$: types = $entity && getTypes($entity, $entityInfo);
|
|
||||||
|
|
||||||
$: handled =
|
|
||||||
types &&
|
|
||||||
(!$entity ||
|
|
||||||
types.audio ||
|
|
||||||
types.video ||
|
|
||||||
types.image ||
|
|
||||||
types.text ||
|
|
||||||
types.model ||
|
|
||||||
types.web ||
|
|
||||||
types.fragment ||
|
|
||||||
(types.group && recurse > 0));
|
|
||||||
|
|
||||||
$: dispatch("handled", handled);
|
|
||||||
|
|
||||||
let loaded = null;
|
|
||||||
$: dispatch("loaded", Boolean(loaded));
|
|
||||||
|
|
||||||
let failedChildren: string[] = [];
|
|
||||||
let loadedChildren: string[] = [];
|
|
||||||
$: groupChildren = $entity?.backlinks
|
|
||||||
.filter((e) => e.attribute === ATTR_IN)
|
|
||||||
.map((e) => String(e.entity))
|
|
||||||
.filter(
|
|
||||||
(addr) =>
|
|
||||||
!failedChildren
|
|
||||||
.slice(
|
|
||||||
0,
|
|
||||||
$entity?.backlinks.filter((e) => e.attribute === ATTR_IN).length -
|
|
||||||
4,
|
|
||||||
)
|
|
||||||
.includes(addr),
|
|
||||||
)
|
|
||||||
.slice(0, 4);
|
|
||||||
|
|
||||||
$: if (groupChildren)
|
|
||||||
loaded = groupChildren.every(
|
|
||||||
(addr) => loadedChildren.includes(addr) || failedChildren.includes(addr),
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="preview">
|
|
||||||
{#if handled}
|
|
||||||
<div class="inner">
|
|
||||||
{#if !loaded}
|
|
||||||
<Spinner centered="absolute" />
|
|
||||||
{/if}
|
|
||||||
{#if types.group}
|
|
||||||
<ul class="group">
|
|
||||||
{#each groupChildren as address (address)}
|
|
||||||
<li>
|
|
||||||
<svelte:self
|
|
||||||
{address}
|
|
||||||
recurse={recurse - 1}
|
|
||||||
on:handled={(ev) => {
|
|
||||||
if (!ev.detail && !failedChildren.includes(address))
|
|
||||||
failedChildren = [...failedChildren, address];
|
|
||||||
}}
|
|
||||||
on:loaded={(ev) => {
|
|
||||||
if (ev.detail && !loadedChildren.includes(address))
|
|
||||||
loadedChildren = [...loadedChildren, address];
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{:else if types.model}
|
|
||||||
<ModelViewer
|
|
||||||
lookonly
|
|
||||||
src="{api.apiUrl}/raw/{address}"
|
|
||||||
on:loaded={() => (loaded = address)}
|
|
||||||
/>
|
|
||||||
{:else if types.web}
|
|
||||||
<img
|
|
||||||
alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
|
|
||||||
use:concurrentImage={String($entity?.get("OG_IMAGE"))}
|
|
||||||
on:load={() => (loaded = address)}
|
|
||||||
on:error={() => (handled = false)}
|
|
||||||
/>
|
|
||||||
{:else if types.fragment}
|
|
||||||
<FragmentViewer
|
|
||||||
{address}
|
|
||||||
detail={false}
|
|
||||||
on:loaded={() => (loaded = address)}
|
|
||||||
/>
|
|
||||||
{:else if types.audio}
|
|
||||||
<AudioPreview
|
|
||||||
{address}
|
|
||||||
on:loaded={() => (loaded = address)}
|
|
||||||
on:error={() => (handled = false)}
|
|
||||||
/>
|
|
||||||
{:else if types.video}
|
|
||||||
<VideoViewer
|
|
||||||
{address}
|
|
||||||
detail={false}
|
|
||||||
on:loaded={() => (loaded = address)}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<div class="image" class:loaded={loaded == address || !handled}>
|
|
||||||
<img
|
|
||||||
class:loaded={loaded == address}
|
|
||||||
alt="Thumbnail for {address}..."
|
|
||||||
use:concurrentImage={`${api.apiUrl}/${
|
|
||||||
types.mimeType?.includes("svg+xml") ? "raw" : "thumb"
|
|
||||||
}/${address}?size=512&quality=75`}
|
|
||||||
on:load={() => (loaded = address)}
|
|
||||||
on:error={() => (handled = false)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="hashbadge">
|
|
||||||
<HashBadge {address} />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.preview {
|
|
||||||
flex-grow: 1;
|
|
||||||
min-height: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.inner {
|
|
||||||
display: flex;
|
|
||||||
min-height: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hashbadge {
|
|
||||||
font-size: 48px;
|
|
||||||
opacity: 0.25;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
display: flex;
|
|
||||||
min-height: 0;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
|
|
||||||
&:not(.loaded) {
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 6rem;
|
|
||||||
max-height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.group {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
flex-grow: 1;
|
|
||||||
min-height: 0;
|
|
||||||
width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
grid-template-rows: repeat(2, 1fr);
|
|
||||||
|
|
||||||
padding: 0.25rem;
|
|
||||||
gap: 0.25rem;
|
|
||||||
border: 1px solid var(--foreground);
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: end;
|
|
||||||
list-style: none;
|
|
||||||
min-height: 0;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,121 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { useEntity } from "../../lib/entity";
|
|
||||||
import Spinner from "../utils/Spinner.svelte";
|
|
||||||
import AudioViewer from "./blobs/AudioViewer.svelte";
|
|
||||||
import FragmentViewer from "./blobs/FragmentViewer.svelte";
|
|
||||||
import ImageViewer from "./blobs/ImageViewer.svelte";
|
|
||||||
import ModelViewer from "./blobs/ModelViewer.svelte";
|
|
||||||
import TextViewer from "./blobs/TextViewer.svelte";
|
|
||||||
import VideoViewer from "./blobs/VideoViewer.svelte";
|
|
||||||
import UpLink from "./UpLink.svelte";
|
|
||||||
import api from "../../lib/api";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import { getTypes } from "../../util/mediatypes";
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
export let detail: boolean;
|
|
||||||
|
|
||||||
let handled = false;
|
|
||||||
|
|
||||||
$: ({ entity, entityInfo } = useEntity(address));
|
|
||||||
$: types = $entity && getTypes($entity, $entityInfo);
|
|
||||||
|
|
||||||
$: handled =
|
|
||||||
types &&
|
|
||||||
(types.audio ||
|
|
||||||
types.video ||
|
|
||||||
types.image ||
|
|
||||||
types.text ||
|
|
||||||
types.pdf ||
|
|
||||||
types.model ||
|
|
||||||
types.web ||
|
|
||||||
types.fragment);
|
|
||||||
|
|
||||||
$: dispatch("handled", handled);
|
|
||||||
|
|
||||||
let imageLoaded = null;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if handled}
|
|
||||||
<div class="preview" class:detail>
|
|
||||||
{#if types.text}
|
|
||||||
<div class="text-viewer">
|
|
||||||
<TextViewer {address} />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if types.audio}
|
|
||||||
<AudioViewer {address} {detail} />
|
|
||||||
{/if}
|
|
||||||
{#if types.video}
|
|
||||||
<VideoViewer detail {address} />
|
|
||||||
{/if}
|
|
||||||
{#if types.image}
|
|
||||||
<ImageViewer {address} {detail} />
|
|
||||||
{/if}
|
|
||||||
{#if types.pdf}
|
|
||||||
<iframe
|
|
||||||
src="{api.apiUrl}/raw/{address}?inline"
|
|
||||||
title="PDF document of {address}"
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{#if types.model}
|
|
||||||
<ModelViewer src="{api.apiUrl}/raw/{address}" />
|
|
||||||
{/if}
|
|
||||||
{#if types.web}
|
|
||||||
{#if imageLoaded != address}
|
|
||||||
<Spinner />
|
|
||||||
{/if}
|
|
||||||
<img
|
|
||||||
src={String($entity?.get("OG_IMAGE"))}
|
|
||||||
alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
|
|
||||||
on:load={() => (imageLoaded = address)}
|
|
||||||
on:error={() => (handled = false)}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{#if types.fragment}
|
|
||||||
<UpLink passthrough to={{ entity: String($entity.get("ANNOTATES")) }}>
|
|
||||||
<FragmentViewer {address} {detail} />
|
|
||||||
</UpLink>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.preview {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
// min-height: 33vh;
|
|
||||||
max-height: 50vh;
|
|
||||||
|
|
||||||
&.detail {
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
// min-height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
.text-viewer {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
width: 99%;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-viewer {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,88 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { getContext } from "svelte";
|
|
||||||
import { useNavigate, useLocation } from "svelte-navigator";
|
|
||||||
import { readable } from "svelte/store";
|
|
||||||
import type { Address, VALUE_TYPE } from "@upnd/upend/types";
|
|
||||||
import type { BrowseContext } from "../../util/browse";
|
|
||||||
import api from "../../lib/api";
|
|
||||||
const location = useLocation();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
export let passthrough = false;
|
|
||||||
export let title: string | undefined = undefined;
|
|
||||||
export let text = false;
|
|
||||||
export let to: {
|
|
||||||
entity?: Address;
|
|
||||||
attribute?: string;
|
|
||||||
surfaceAttribute?: string;
|
|
||||||
value?: { t: VALUE_TYPE; c: string };
|
|
||||||
};
|
|
||||||
|
|
||||||
const NOOP = "#";
|
|
||||||
let targetHref = NOOP;
|
|
||||||
$: {
|
|
||||||
if (to.entity) {
|
|
||||||
targetHref = to.entity;
|
|
||||||
} else if (to.attribute) {
|
|
||||||
api
|
|
||||||
.componentsToAddress({ t: "Attribute", c: to.attribute })
|
|
||||||
.then((address) => {
|
|
||||||
targetHref = address;
|
|
||||||
});
|
|
||||||
} else if (to.surfaceAttribute) {
|
|
||||||
targetHref = `surface:${to.surfaceAttribute}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const context = getContext("browse") as BrowseContext | undefined;
|
|
||||||
const index = context ? context.index : readable(0);
|
|
||||||
const addresses = context ? context.addresses : readable([]);
|
|
||||||
|
|
||||||
function onClick(ev: MouseEvent) {
|
|
||||||
if ($location.pathname.startsWith("/browse")) {
|
|
||||||
let newAddresses = $addresses.concat();
|
|
||||||
|
|
||||||
// Shift to append to the end instead of replacing
|
|
||||||
if (ev.shiftKey) {
|
|
||||||
newAddresses = newAddresses.concat([targetHref]);
|
|
||||||
} else {
|
|
||||||
if ($addresses[$index] !== targetHref) {
|
|
||||||
newAddresses = newAddresses.slice(0, $index + 1).concat([targetHref]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
navigate("/browse/" + newAddresses.join(","));
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
navigate(`/browse/${targetHref}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<a
|
|
||||||
class="uplink"
|
|
||||||
class:text
|
|
||||||
class:passthrough
|
|
||||||
class:unresolved={targetHref === NOOP}
|
|
||||||
href="/#/browse/{targetHref}"
|
|
||||||
on:click|preventDefault={onClick}
|
|
||||||
{title}
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
:global(.uplink) {
|
|
||||||
text-decoration: none;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
:global(.uplink.text) {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
:global(.uplink.passthrough) {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
:global(.uplink.unresolved) {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,396 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { createEventDispatcher, getContext } from "svelte";
|
|
||||||
|
|
||||||
import HashBadge from "./HashBadge.svelte";
|
|
||||||
import UpObjectLabel from "./UpObjectLabel.svelte";
|
|
||||||
import UpLink from "./UpLink.svelte";
|
|
||||||
import Icon from "../utils/Icon.svelte";
|
|
||||||
import { readable, type Readable, writable } from "svelte/store";
|
|
||||||
import { notify, UpNotification } from "../../notifications";
|
|
||||||
import IconButton from "../utils/IconButton.svelte";
|
|
||||||
import { vaultInfo } from "../../util/info";
|
|
||||||
import type { BrowseContext } from "../../util/browse";
|
|
||||||
import { Query, type UpObject } from "@upnd/upend";
|
|
||||||
import type { ADDRESS_TYPE, EntityInfo } from "@upnd/upend/types";
|
|
||||||
import { useEntity } from "../../lib/entity";
|
|
||||||
import { i18n } from "../../i18n";
|
|
||||||
import api from "../../lib/api";
|
|
||||||
import {
|
|
||||||
ATTR_IN,
|
|
||||||
ATTR_KEY,
|
|
||||||
ATTR_LABEL,
|
|
||||||
HIER_ROOT_ADDR,
|
|
||||||
} from "@upnd/upend/constants";
|
|
||||||
import { selected } from "../EntitySelect.svelte";
|
|
||||||
import { Any } from "@upnd/upend/query";
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
export let labels: string[] | undefined = undefined;
|
|
||||||
export let link = false;
|
|
||||||
export let banner = false;
|
|
||||||
export let resolve = !(labels || []).length || banner;
|
|
||||||
export let backpath = 0;
|
|
||||||
export let select = true;
|
|
||||||
export let plain = false;
|
|
||||||
|
|
||||||
let entity: Readable<UpObject> = readable(undefined);
|
|
||||||
let entityInfo: Readable<EntityInfo> = writable(undefined);
|
|
||||||
$: if (resolve) ({ entity, entityInfo } = useEntity(address));
|
|
||||||
$: if (!resolve)
|
|
||||||
entityInfo = readable(undefined, (set) => {
|
|
||||||
api.addressToComponents(address).then((info) => {
|
|
||||||
set(info);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
let hasFile = false;
|
|
||||||
$: {
|
|
||||||
if ($entityInfo?.t == "Hash" && banner) {
|
|
||||||
fetch(api.getRaw(address), {
|
|
||||||
method: "HEAD",
|
|
||||||
}).then((response) => {
|
|
||||||
hasFile = response.ok;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Identification
|
|
||||||
let inferredIds: string[] = [];
|
|
||||||
$: inferredIds = $entity?.identify() || [];
|
|
||||||
let addressIds: string[] = [];
|
|
||||||
$: resolving = inferredIds.concat(labels || []).length == 0 && !$entity;
|
|
||||||
|
|
||||||
$: fetchAddressLabels(address);
|
|
||||||
|
|
||||||
async function fetchAddressLabels(address: string) {
|
|
||||||
addressIds = [];
|
|
||||||
await Promise.all(
|
|
||||||
(["Hash", "Uuid", "Attribute", "Url"] as ADDRESS_TYPE[]).map(
|
|
||||||
async (t) => {
|
|
||||||
if ((await api.getAddress(t)) == address) {
|
|
||||||
addressIds.push(`∈ ${t}`);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
addressIds = addressIds;
|
|
||||||
}
|
|
||||||
|
|
||||||
let displayLabel = address;
|
|
||||||
$: {
|
|
||||||
const allLabels = []
|
|
||||||
.concat(inferredIds)
|
|
||||||
.concat(addressIds)
|
|
||||||
.concat(labels || []);
|
|
||||||
displayLabel = Array.from(new Set(allLabels)).join(" | ");
|
|
||||||
|
|
||||||
if (!displayLabel && $entityInfo?.t === "Attribute") {
|
|
||||||
displayLabel = `${$entityInfo.c}`;
|
|
||||||
}
|
|
||||||
displayLabel = displayLabel || address;
|
|
||||||
}
|
|
||||||
|
|
||||||
$: dispatch("resolved", inferredIds);
|
|
||||||
|
|
||||||
// Resolved backpath
|
|
||||||
let resolvedBackpath: string[] = [];
|
|
||||||
$: if (backpath) resolveBackpath();
|
|
||||||
|
|
||||||
async function resolveBackpath() {
|
|
||||||
resolvedBackpath = [];
|
|
||||||
let levels = 0;
|
|
||||||
let current = address;
|
|
||||||
while (levels < backpath && current !== HIER_ROOT_ADDR) {
|
|
||||||
const parent = await api.query(
|
|
||||||
Query.matches(`@${current}`, ATTR_IN, Any),
|
|
||||||
);
|
|
||||||
if (parent.entries.length) {
|
|
||||||
current = parent.entries[0].value.c as string;
|
|
||||||
const label = await api.query(
|
|
||||||
Query.matches(`@${current}`, ATTR_LABEL, Any),
|
|
||||||
);
|
|
||||||
if (label.entries.length) {
|
|
||||||
resolvedBackpath = [
|
|
||||||
label.entries[0].value.c as string,
|
|
||||||
...resolvedBackpath,
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
levels++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Navigation highlights
|
|
||||||
const context = getContext("browse") as BrowseContext | undefined;
|
|
||||||
const index = context?.index || undefined;
|
|
||||||
const addresses = context?.addresses || readable([]);
|
|
||||||
|
|
||||||
// Native open
|
|
||||||
function nativeOpen() {
|
|
||||||
notify.emit(
|
|
||||||
"notification",
|
|
||||||
new UpNotification(
|
|
||||||
$i18n.t("Opening {{identity}} in a default native application...", {
|
|
||||||
identity: inferredIds[0] || address,
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
api
|
|
||||||
.nativeOpen(address)
|
|
||||||
.then(async (response) => {
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`${response.statusText} - ${await response.text()}`);
|
|
||||||
}
|
|
||||||
if (response.headers.has("warning")) {
|
|
||||||
const warningText = response.headers
|
|
||||||
.get("warning")
|
|
||||||
.split(" ")
|
|
||||||
.slice(2)
|
|
||||||
.join(" ");
|
|
||||||
notify.emit(
|
|
||||||
"notification",
|
|
||||||
new UpNotification(warningText, "warning"),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
notify.emit(
|
|
||||||
"notification",
|
|
||||||
new UpNotification(
|
|
||||||
$i18n.t("Failed to open in native application! ({{err}})", { err }),
|
|
||||||
"error",
|
|
||||||
),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="upobject"
|
|
||||||
class:left-active={address == $addresses[$index - 1]}
|
|
||||||
class:right-active={address == $addresses[$index + 1]}
|
|
||||||
class:selected={select && $selected.includes(address)}
|
|
||||||
class:plain
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="address"
|
|
||||||
class:identified={inferredIds.length || addressIds.length || labels?.length}
|
|
||||||
class:banner
|
|
||||||
class:show-type={$entityInfo?.t === "Url" && !addressIds.length}
|
|
||||||
>
|
|
||||||
<HashBadge {address} />
|
|
||||||
<div class="separator" />
|
|
||||||
<div class="label" class:resolving title={displayLabel}>
|
|
||||||
<div class="label-inner">
|
|
||||||
{#if banner && hasFile}
|
|
||||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
|
||||||
{:else if link}
|
|
||||||
<UpLink to={{ entity: address }}>
|
|
||||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
|
||||||
</UpLink>
|
|
||||||
{:else}
|
|
||||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if $entity?.get(ATTR_KEY) && !$entity
|
|
||||||
?.get(ATTR_KEY)
|
|
||||||
?.toString()
|
|
||||||
?.startsWith("TYPE_")}
|
|
||||||
<div class="key">{$entity.get(ATTR_KEY)}</div>
|
|
||||||
{/if}
|
|
||||||
<div class="secondary">
|
|
||||||
<div class="type">
|
|
||||||
{$entityInfo?.t}
|
|
||||||
{#if $entityInfo?.t === "Url" || $entityInfo?.t === "Attribute"}
|
|
||||||
— {$entityInfo.c}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if banner}
|
|
||||||
{#if $entityInfo?.t === "Attribute"}
|
|
||||||
<div class="icon">
|
|
||||||
<UpLink
|
|
||||||
to={{ surfaceAttribute: $entityInfo.c }}
|
|
||||||
title={$i18n.t("Open on surface")}
|
|
||||||
>
|
|
||||||
<Icon name="cross" />
|
|
||||||
</UpLink>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if $entityInfo?.t == "Hash"}
|
|
||||||
<div
|
|
||||||
class="icon"
|
|
||||||
title={hasFile
|
|
||||||
? $i18n.t("Download as file")
|
|
||||||
: $i18n.t("File not present in vault")}
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="link-button"
|
|
||||||
class:disabled={!hasFile}
|
|
||||||
href="{api.apiUrl}/raw/{address}"
|
|
||||||
download={inferredIds[0]}
|
|
||||||
>
|
|
||||||
<Icon name="download" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{#if $vaultInfo?.desktop && hasFile}
|
|
||||||
<div class="icon">
|
|
||||||
<IconButton
|
|
||||||
name="window-alt"
|
|
||||||
on:click={nativeOpen}
|
|
||||||
title={$i18n.t("Open in default application...")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use "../../styles/colors";
|
|
||||||
|
|
||||||
.upobject {
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&.left-active {
|
|
||||||
background: linear-gradient(90deg, colors.$orange 0%, transparent 100%);
|
|
||||||
padding: 2px 0 2px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right-active {
|
|
||||||
background: linear-gradient(90deg, transparent 0%, colors.$orange 100%);
|
|
||||||
padding: 2px 2px 2px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.plain .address {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.address {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
padding: 0.1em 0.25em;
|
|
||||||
|
|
||||||
font-family: var(--monospace-font);
|
|
||||||
line-break: anywhere;
|
|
||||||
|
|
||||||
background: var(--background-lighter);
|
|
||||||
border: 0.1em solid var(--foreground-lighter);
|
|
||||||
border-radius: 0.2em;
|
|
||||||
|
|
||||||
&.banner {
|
|
||||||
border: 0.12em solid var(--foreground);
|
|
||||||
padding: 0.5em 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.identified {
|
|
||||||
font-family: var(--default-font);
|
|
||||||
font-size: 0.95em;
|
|
||||||
line-break: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-inner {
|
|
||||||
max-width: 100%;
|
|
||||||
margin-right: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.banner .label {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondary {
|
|
||||||
font-size: 0.66em;
|
|
||||||
display: none;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key {
|
|
||||||
font-family: var(--monospace-font);
|
|
||||||
color: colors.$yellow;
|
|
||||||
opacity: 0.8;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "⌘";
|
|
||||||
margin-right: 0.1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.banner .key {
|
|
||||||
font-size: 0.66em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.banner) .key {
|
|
||||||
flex-grow: 1;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.show-type .secondary,
|
|
||||||
&.banner .secondary {
|
|
||||||
display: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
flex-grow: 1;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
:global(a) {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.separator {
|
|
||||||
width: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin: 0 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resolving {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-button {
|
|
||||||
opacity: 0.66;
|
|
||||||
transition:
|
|
||||||
opacity 0.2s,
|
|
||||||
color 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--active-color, var(--primary));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.upobject {
|
|
||||||
transition:
|
|
||||||
margin 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
margin: 0.12rem;
|
|
||||||
box-shadow: 0 0 0.1rem 0.11rem colors.$red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled {
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,75 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { useEntity } from "../../../lib/entity";
|
|
||||||
import api from "../../../lib/api";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import { formatDuration } from "../../../util/fragments/time";
|
|
||||||
import { concurrentImage } from "../../imageQueue";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
|
|
||||||
$: ({ entity } = useEntity(address));
|
|
||||||
|
|
||||||
let loaded = null;
|
|
||||||
let handled = true;
|
|
||||||
$: dispatch("handled", handled);
|
|
||||||
$: dispatch("loaded", Boolean(loaded));
|
|
||||||
|
|
||||||
let clientHeight = 0;
|
|
||||||
let clientWidth = 0;
|
|
||||||
$: fontSize = Math.min(clientHeight, clientWidth) * 0.66;
|
|
||||||
let mediaDuration = "";
|
|
||||||
$: {
|
|
||||||
let duration = $entity?.get("MEDIA_DURATION") as number | undefined;
|
|
||||||
if (duration) {
|
|
||||||
mediaDuration = formatDuration(duration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="audiopreview" bind:clientWidth bind:clientHeight>
|
|
||||||
<img
|
|
||||||
class:loaded={loaded === address}
|
|
||||||
alt="Thumbnail for {address}"
|
|
||||||
use:concurrentImage={`${api.apiUrl}/thumb/${address}?mime=audio`}
|
|
||||||
on:load={() => (loaded = address)}
|
|
||||||
on:error
|
|
||||||
/>
|
|
||||||
{#if mediaDuration}
|
|
||||||
<div class="duration" style="--font-size: {fontSize}px">
|
|
||||||
{mediaDuration}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.audiopreview {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&:not(.loaded) {
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 6rem;
|
|
||||||
max-height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--foreground-lightest);
|
|
||||||
text-shadow: 0px 0px 0.2em var(--background-lighter);
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,448 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { debounce, throttle } from "lodash";
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
import type { IValue } from "@upnd/upend/types";
|
|
||||||
import type WaveSurfer from "wavesurfer.js";
|
|
||||||
import type { Region, RegionParams } from "wavesurfer.js/src/plugin/regions";
|
|
||||||
import api from "../../../lib/api";
|
|
||||||
import { TimeFragment } from "../../../util/fragments/time";
|
|
||||||
import Icon from "../../utils/Icon.svelte";
|
|
||||||
import Selector from "../../utils/Selector.svelte";
|
|
||||||
import UpObject from "../../display/UpObject.svelte";
|
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
|
||||||
import IconButton from "../../../components/utils/IconButton.svelte";
|
|
||||||
import LabelBorder from "../../../components/utils/LabelBorder.svelte";
|
|
||||||
import { i18n } from "../../../i18n";
|
|
||||||
import { ATTR_LABEL } from "@upnd/upend/constants";
|
|
||||||
import debug from "debug";
|
|
||||||
const dbg = debug("kestrel:AudioViewer");
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
export let detail: boolean;
|
|
||||||
|
|
||||||
let editable = false;
|
|
||||||
|
|
||||||
let containerEl: HTMLDivElement;
|
|
||||||
let timelineEl: HTMLDivElement;
|
|
||||||
let loaded = false;
|
|
||||||
|
|
||||||
let wavesurfer: WaveSurfer;
|
|
||||||
|
|
||||||
// Zoom handling
|
|
||||||
let zoom = 1;
|
|
||||||
const setZoom = throttle((level: number) => {
|
|
||||||
wavesurfer.zoom(level);
|
|
||||||
}, 250);
|
|
||||||
$: if (zoom && wavesurfer) setZoom(zoom);
|
|
||||||
|
|
||||||
// Annotations
|
|
||||||
const DEFAULT_ANNOTATION_COLOR = "#cb4b16";
|
|
||||||
|
|
||||||
type UpRegion = Region & { data: IValue };
|
|
||||||
let currentAnnotation: UpRegion | undefined;
|
|
||||||
|
|
||||||
async function loadAnnotations() {
|
|
||||||
const entity = await api.fetchEntity(address);
|
|
||||||
entity.backlinks
|
|
||||||
.filter((e) => e.attribute == "ANNOTATES")
|
|
||||||
.forEach(async (e) => {
|
|
||||||
const annotation = await api.fetchEntity(e.entity);
|
|
||||||
if (annotation.get("W3C_FRAGMENT_SELECTOR")) {
|
|
||||||
const fragment = TimeFragment.parse(
|
|
||||||
String(annotation.get("W3C_FRAGMENT_SELECTOR")),
|
|
||||||
);
|
|
||||||
if (fragment) {
|
|
||||||
wavesurfer.addRegion({
|
|
||||||
id: `ws-region-${e.entity}`,
|
|
||||||
color: annotation.get("COLOR") || DEFAULT_ANNOTATION_COLOR,
|
|
||||||
attributes: {
|
|
||||||
"upend-address": annotation.address,
|
|
||||||
label: annotation.get(ATTR_LABEL),
|
|
||||||
},
|
|
||||||
data: (annotation.attr["NOTE"] || [])[0]?.value,
|
|
||||||
...fragment,
|
|
||||||
} as RegionParams);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$: if (wavesurfer) {
|
|
||||||
if (editable) {
|
|
||||||
wavesurfer.enableDragSelection({ color: DEFAULT_ANNOTATION_COLOR });
|
|
||||||
} else {
|
|
||||||
wavesurfer.disableDragSelection();
|
|
||||||
}
|
|
||||||
Object.values(wavesurfer.regions.list).forEach((region) => {
|
|
||||||
region.update({ drag: editable, resize: editable });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function updateAnnotation(region: Region) {
|
|
||||||
dbg("Updating annotation %o", region);
|
|
||||||
let entity = region.attributes["upend-address"];
|
|
||||||
|
|
||||||
// Newly created
|
|
||||||
if (!entity) {
|
|
||||||
let [_, newEntity] = await api.putEntry({
|
|
||||||
entity: {
|
|
||||||
t: "Uuid",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
entity = newEntity;
|
|
||||||
|
|
||||||
const nextAnnotationIndex = Object.values(wavesurfer.regions.list).length;
|
|
||||||
const label = `Annotation #${nextAnnotationIndex}`;
|
|
||||||
|
|
||||||
region.update({
|
|
||||||
attributes: { label },
|
|
||||||
// incorrect types, `update()` does take `attributes`
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
} as any);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (region.attributes["label"]) {
|
|
||||||
await api.putEntityAttribute(entity, ATTR_LABEL, {
|
|
||||||
t: "String",
|
|
||||||
c: region.attributes["label"],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
await api.putEntityAttribute(entity, "ANNOTATES", {
|
|
||||||
t: "Address",
|
|
||||||
c: address,
|
|
||||||
});
|
|
||||||
|
|
||||||
await api.putEntityAttribute(entity, "W3C_FRAGMENT_SELECTOR", {
|
|
||||||
t: "String",
|
|
||||||
c: new TimeFragment(region.start, region.end).toString(),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (region.color !== DEFAULT_ANNOTATION_COLOR) {
|
|
||||||
await api.putEntityAttribute(entity, "COLOR", {
|
|
||||||
t: "String",
|
|
||||||
c: region.color,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Object.values(region.data).length) {
|
|
||||||
await api.putEntityAttribute(entity, "NOTE", region.data as IValue);
|
|
||||||
}
|
|
||||||
|
|
||||||
region.update({
|
|
||||||
attributes: {
|
|
||||||
"upend-address": entity,
|
|
||||||
},
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
} as any);
|
|
||||||
}
|
|
||||||
const updateAnnotationDebounced = debounce(updateAnnotation, 250);
|
|
||||||
|
|
||||||
async function deleteAnnotation(region: Region) {
|
|
||||||
if (region.attributes["upend-address"]) {
|
|
||||||
await api.deleteEntry(region.attributes["upend-address"]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let rootEl: HTMLElement;
|
|
||||||
onMount(async () => {
|
|
||||||
const WaveSurfer = await import("wavesurfer.js");
|
|
||||||
const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
|
|
||||||
const RegionsPlugin = await import("wavesurfer.js/src/plugin/regions");
|
|
||||||
const timelineColor = getComputedStyle(
|
|
||||||
document.documentElement,
|
|
||||||
).getPropertyValue("--foreground");
|
|
||||||
|
|
||||||
wavesurfer = WaveSurfer.default.create({
|
|
||||||
container: containerEl,
|
|
||||||
waveColor: "#dc322f",
|
|
||||||
progressColor: "#991c1a",
|
|
||||||
responsive: true,
|
|
||||||
backend: "MediaElement",
|
|
||||||
mediaControls: true,
|
|
||||||
normalize: true,
|
|
||||||
xhr: { cache: "force-cache" },
|
|
||||||
plugins: [
|
|
||||||
TimelinePlugin.default.create({
|
|
||||||
container: timelineEl,
|
|
||||||
primaryColor: timelineColor,
|
|
||||||
primaryFontColor: timelineColor,
|
|
||||||
secondaryColor: timelineColor,
|
|
||||||
secondaryFontColor: timelineColor,
|
|
||||||
}),
|
|
||||||
RegionsPlugin.default.create({}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
wavesurfer.on("ready", () => {
|
|
||||||
dbg("wavesurfer ready");
|
|
||||||
|
|
||||||
loaded = true;
|
|
||||||
loadAnnotations();
|
|
||||||
});
|
|
||||||
|
|
||||||
wavesurfer.on("region-created", async (region: UpRegion) => {
|
|
||||||
dbg("wavesurfer region-created", region);
|
|
||||||
|
|
||||||
// Updating here, because if `drag` and `resize` are passed during adding,
|
|
||||||
// updating no longer works.
|
|
||||||
region.update({ drag: editable, resize: editable });
|
|
||||||
|
|
||||||
// If the region was created from the UI
|
|
||||||
if (!region.attributes["upend-address"]) {
|
|
||||||
await updateAnnotation(region);
|
|
||||||
// currentAnnotation = region;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
wavesurfer.on("region-updated", (region: UpRegion) => {
|
|
||||||
// dbg("wavesurfer region-updated", region);
|
|
||||||
|
|
||||||
currentAnnotation = region;
|
|
||||||
});
|
|
||||||
|
|
||||||
wavesurfer.on("region-update-end", (region: UpRegion) => {
|
|
||||||
dbg("wavesurfer region-update-end", region);
|
|
||||||
|
|
||||||
updateAnnotation(region);
|
|
||||||
currentAnnotation = region;
|
|
||||||
});
|
|
||||||
|
|
||||||
wavesurfer.on("region-removed", (region: UpRegion) => {
|
|
||||||
dbg("wavesurfer region-removed", region);
|
|
||||||
|
|
||||||
currentAnnotation = null;
|
|
||||||
deleteAnnotation(region);
|
|
||||||
});
|
|
||||||
|
|
||||||
// wavesurfer.on("region-in", (region: UpRegion) => {
|
|
||||||
// dbg("wavesurfer region-in", region);
|
|
||||||
|
|
||||||
// currentAnnotation = region;
|
|
||||||
// });
|
|
||||||
|
|
||||||
// wavesurfer.on("region-out", (region: UpRegion) => {
|
|
||||||
// dbg("wavesurfer region-out", region);
|
|
||||||
|
|
||||||
// if (currentAnnotation.id === region.id) {
|
|
||||||
// currentAnnotation = undefined;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
wavesurfer.on("region-click", (region: UpRegion, _ev: MouseEvent) => {
|
|
||||||
dbg("wavesurfer region-click", region);
|
|
||||||
|
|
||||||
currentAnnotation = region;
|
|
||||||
});
|
|
||||||
|
|
||||||
wavesurfer.on("region-dblclick", (region: UpRegion, _ev: MouseEvent) => {
|
|
||||||
dbg("wavesurfer region-dblclick", region);
|
|
||||||
|
|
||||||
currentAnnotation = region;
|
|
||||||
setTimeout(() => wavesurfer.setCurrentTime(region.start));
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
const peaksReq = await fetch(
|
|
||||||
`${api.apiUrl}/thumb/${address}?mime=audio&type=json`,
|
|
||||||
);
|
|
||||||
const peaks = await peaksReq.json();
|
|
||||||
wavesurfer.load(`${api.apiUrl}/raw/${address}`, peaks.data);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn(`Failed to load peaks: ${e}`);
|
|
||||||
const entity = await api.fetchEntity(address);
|
|
||||||
if (
|
|
||||||
(parseInt(String(entity.get("FILE_SIZE"))) || 0) < 20_000_000 ||
|
|
||||||
confirm(
|
|
||||||
$i18n.t(
|
|
||||||
"File is large (>20 MiB) and UpEnd failed to load waveform from server. Generating the waveform locally may slow down your browser. Do you wish to proceed anyway?",
|
|
||||||
),
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
console.warn(
|
|
||||||
`Failed to load peaks, falling back to client-side render...`,
|
|
||||||
);
|
|
||||||
|
|
||||||
wavesurfer.load(`${api.apiUrl}/raw/${address}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const drawBufferThrottled = throttle(() => wavesurfer.drawBuffer(), 200);
|
|
||||||
const resizeObserver = new ResizeObserver((_entries) => {
|
|
||||||
drawBufferThrottled();
|
|
||||||
});
|
|
||||||
resizeObserver.observe(rootEl);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="audio" class:editable bind:this={rootEl}>
|
|
||||||
{#if !loaded}
|
|
||||||
<Spinner centered />
|
|
||||||
{/if}
|
|
||||||
{#if loaded}
|
|
||||||
<header>
|
|
||||||
<IconButton
|
|
||||||
name="edit"
|
|
||||||
title={$i18n.t("Toggle Edit Mode")}
|
|
||||||
on:click={() => (editable = !editable)}
|
|
||||||
active={editable}
|
|
||||||
>
|
|
||||||
{$i18n.t("Annotate")}
|
|
||||||
</IconButton>
|
|
||||||
<div class="zoom">
|
|
||||||
<Icon name="zoom-out" />
|
|
||||||
<input type="range" min="1" max="50" bind:value={zoom} />
|
|
||||||
<Icon name="zoom-in" />
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
{/if}
|
|
||||||
<div
|
|
||||||
class="wavesurfer-timeline"
|
|
||||||
bind:this={timelineEl}
|
|
||||||
class:hidden={!detail}
|
|
||||||
/>
|
|
||||||
<div class="wavesurfer" bind:this={containerEl} />
|
|
||||||
{#if currentAnnotation}
|
|
||||||
<LabelBorder>
|
|
||||||
<span slot="header">{$i18n.t("Annotation")}</span>
|
|
||||||
{#if currentAnnotation.attributes["upend-address"]}
|
|
||||||
<UpObject
|
|
||||||
link
|
|
||||||
address={currentAnnotation.attributes["upend-address"]}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
<div class="baseControls">
|
|
||||||
<div class="regionControls">
|
|
||||||
<div class="start">
|
|
||||||
Start: <input
|
|
||||||
type="number"
|
|
||||||
value={Math.round(currentAnnotation.start * 100) / 100}
|
|
||||||
disabled={!editable}
|
|
||||||
on:input={(ev) => {
|
|
||||||
currentAnnotation.update({
|
|
||||||
start: parseInt(ev.currentTarget.value),
|
|
||||||
});
|
|
||||||
updateAnnotationDebounced(currentAnnotation);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="end">
|
|
||||||
End: <input
|
|
||||||
type="number"
|
|
||||||
value={Math.round(currentAnnotation.end * 100) / 100}
|
|
||||||
disabled={!editable}
|
|
||||||
on:input={(ev) => {
|
|
||||||
currentAnnotation.update({
|
|
||||||
end: parseInt(ev.currentTarget.value),
|
|
||||||
});
|
|
||||||
updateAnnotationDebounced(currentAnnotation);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="color">
|
|
||||||
Color: <input
|
|
||||||
type="color"
|
|
||||||
value={currentAnnotation.color || DEFAULT_ANNOTATION_COLOR}
|
|
||||||
disabled={!editable}
|
|
||||||
on:input={(ev) => {
|
|
||||||
currentAnnotation.update({ color: ev.currentTarget.value });
|
|
||||||
updateAnnotation(currentAnnotation);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if editable}
|
|
||||||
<div class="existControls">
|
|
||||||
<IconButton
|
|
||||||
outline
|
|
||||||
name="trash"
|
|
||||||
on:click={() => currentAnnotation.remove()}
|
|
||||||
/>
|
|
||||||
<!-- <div class="button">
|
|
||||||
<Icon name="check" />
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
{#key currentAnnotation}
|
|
||||||
<Selector
|
|
||||||
types={["String", "Address"]}
|
|
||||||
initial={currentAnnotation.data}
|
|
||||||
disabled={!editable}
|
|
||||||
on:input={(ev) => {
|
|
||||||
currentAnnotation.update({ data: ev.detail });
|
|
||||||
updateAnnotation(currentAnnotation);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/key}
|
|
||||||
</div>
|
|
||||||
</LabelBorder>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use "../../../styles/colors";
|
|
||||||
|
|
||||||
.audio {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
& > * {
|
|
||||||
flex-basis: 50%;
|
|
||||||
}
|
|
||||||
.zoom {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
input {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 0 0.5em 1em 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.baseControls,
|
|
||||||
.content {
|
|
||||||
margin: 0.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.baseControls,
|
|
||||||
.regionControls,
|
|
||||||
.existControls {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.baseControls {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.regionControls div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"] {
|
|
||||||
width: 6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.audio:not(.editable) .wavesurfer-handle) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.wavesurfer-handle) {
|
|
||||||
background: var(--foreground-lightest) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.wavesurfer-region) {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,63 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { useEntity } from "../../../lib/entity";
|
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
|
||||||
export let address: string;
|
|
||||||
export let detail: boolean;
|
|
||||||
import { xywh } from "../../../util/fragments/xywh";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import api from "../../../lib/api";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
const { entity } = useEntity(address);
|
|
||||||
|
|
||||||
$: objectAddress = String($entity?.get("ANNOTATES") || "");
|
|
||||||
|
|
||||||
$: imageFragment = String($entity?.get("W3C_FRAGMENT_SELECTOR")).includes(
|
|
||||||
"xywh="
|
|
||||||
);
|
|
||||||
|
|
||||||
let imageLoaded = false;
|
|
||||||
$: imageLoaded && dispatch("loaded");
|
|
||||||
$: if ($entity && !imageFragment) imageLoaded = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="fragment-viewer">
|
|
||||||
{#if !imageLoaded}
|
|
||||||
<Spinner />
|
|
||||||
{/if}
|
|
||||||
{#if $entity}
|
|
||||||
{#if imageFragment}
|
|
||||||
<img
|
|
||||||
class="preview-image"
|
|
||||||
class:imageLoaded
|
|
||||||
src="{api.apiUrl}/{detail ? 'raw' : 'thumb'}/{objectAddress}#{$entity?.get(
|
|
||||||
'W3C_FRAGMENT_SELECTOR'
|
|
||||||
)}"
|
|
||||||
use:xywh
|
|
||||||
alt={address}
|
|
||||||
on:load={() => (imageLoaded = true)}
|
|
||||||
draggable="false"
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use "../../../styles/colors";
|
|
||||||
|
|
||||||
.fragment-viewer {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-height: 0;
|
|
||||||
&.imageLoaded {
|
|
||||||
border: 2px dashed colors.$yellow;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,322 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { IEntry } from "@upnd/upend/types";
|
|
||||||
|
|
||||||
import api from "../../../lib/api";
|
|
||||||
import { useEntity } from "../../../lib/entity";
|
|
||||||
import IconButton from "../../utils/IconButton.svelte";
|
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
|
||||||
import UpObject from "../UpObject.svelte";
|
|
||||||
import { ATTR_LABEL } from "@upnd/upend/constants";
|
|
||||||
import { i18n } from "../../../i18n";
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
export let detail: boolean;
|
|
||||||
|
|
||||||
let editable = false;
|
|
||||||
|
|
||||||
const { entity } = useEntity(address);
|
|
||||||
|
|
||||||
let imageLoaded = false;
|
|
||||||
let imageEl: HTMLImageElement;
|
|
||||||
|
|
||||||
$: svg = Boolean($entity?.get("FILE_MIME")?.toString().includes("svg+xml"));
|
|
||||||
|
|
||||||
interface Annotorious {
|
|
||||||
addAnnotation: (a: W3cAnnotation) => void;
|
|
||||||
on: ((
|
|
||||||
e: "createAnnotation" | "deleteAnnotation",
|
|
||||||
c: (a: W3cAnnotation) => void,
|
|
||||||
) => void) &
|
|
||||||
((
|
|
||||||
e: "updateAnnotation",
|
|
||||||
c: (a: W3cAnnotation, b: W3cAnnotation) => void,
|
|
||||||
) => void);
|
|
||||||
clearAnnotations: () => void;
|
|
||||||
readOnly: boolean;
|
|
||||||
destroy: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface W3cAnnotation {
|
|
||||||
type: "Annotation";
|
|
||||||
body: Array<{ type: "TextualBody"; value: string; purpose: "commenting" }>;
|
|
||||||
target: {
|
|
||||||
selector: {
|
|
||||||
type: "FragmentSelector";
|
|
||||||
conformsTo: "http://www.w3.org/TR/media-frags/";
|
|
||||||
value: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
"@context": "http://www.w3.org/ns/anno.jsonld";
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
let anno: Annotorious;
|
|
||||||
$: if (anno) anno.readOnly = !editable;
|
|
||||||
$: if (anno) {
|
|
||||||
anno.clearAnnotations();
|
|
||||||
$entity?.backlinks
|
|
||||||
.filter((e) => e.attribute == "ANNOTATES")
|
|
||||||
.forEach(async (e) => {
|
|
||||||
const annotation = await api.fetchEntity(e.entity);
|
|
||||||
if (annotation.get("W3C_FRAGMENT_SELECTOR")) {
|
|
||||||
anno.addAnnotation({
|
|
||||||
type: "Annotation",
|
|
||||||
body: annotation.attr[ATTR_LABEL].map((e) => {
|
|
||||||
return {
|
|
||||||
type: "TextualBody",
|
|
||||||
value: String(e.value.c),
|
|
||||||
purpose: "commenting",
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
target: {
|
|
||||||
selector: {
|
|
||||||
type: "FragmentSelector",
|
|
||||||
conformsTo: "http://www.w3.org/TR/media-frags/",
|
|
||||||
value: String(annotation.get("W3C_FRAGMENT_SELECTOR")),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"@context": "http://www.w3.org/ns/anno.jsonld",
|
|
||||||
id: e.entity,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
$: hasAnnotations = $entity?.backlinks.some(
|
|
||||||
(e) => e.attribute === "ANNOTATES",
|
|
||||||
);
|
|
||||||
|
|
||||||
let a8sLinkTarget: HTMLDivElement;
|
|
||||||
let a8sLinkAddress: string;
|
|
||||||
|
|
||||||
async function loaded() {
|
|
||||||
const { Annotorious } = await import("@recogito/annotorious");
|
|
||||||
|
|
||||||
if (anno) {
|
|
||||||
anno.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
anno = new Annotorious({
|
|
||||||
image: imageEl,
|
|
||||||
drawOnSingleClick: true,
|
|
||||||
fragmentUnit: "percent",
|
|
||||||
widgets: [
|
|
||||||
"COMMENT",
|
|
||||||
(info: { annotation: W3cAnnotation }) => {
|
|
||||||
a8sLinkAddress = info.annotation?.id;
|
|
||||||
return a8sLinkTarget;
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
anno.on("createAnnotation", async (annotation) => {
|
|
||||||
const [_, uuid] = await api.putEntry({
|
|
||||||
entity: {
|
|
||||||
t: "Uuid",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
annotation.id = uuid;
|
|
||||||
|
|
||||||
await api.putEntry([
|
|
||||||
{
|
|
||||||
entity: uuid,
|
|
||||||
attribute: "ANNOTATES",
|
|
||||||
value: {
|
|
||||||
t: "Address",
|
|
||||||
c: address,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
entity: uuid,
|
|
||||||
attribute: "W3C_FRAGMENT_SELECTOR",
|
|
||||||
value: {
|
|
||||||
t: "String",
|
|
||||||
c: annotation.target.selector.value,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
...annotation.body.map((body) => {
|
|
||||||
return {
|
|
||||||
entity: uuid,
|
|
||||||
attribute: ATTR_LABEL,
|
|
||||||
value: {
|
|
||||||
t: "String",
|
|
||||||
c: body.value,
|
|
||||||
},
|
|
||||||
} as IEntry;
|
|
||||||
}),
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
anno.on("updateAnnotation", async (annotation) => {
|
|
||||||
const annotationObject = await api.fetchEntity(annotation.id);
|
|
||||||
await Promise.all(
|
|
||||||
annotationObject.attr[ATTR_LABEL].concat(
|
|
||||||
annotationObject.attr["W3C_FRAGMENT_SELECTOR"],
|
|
||||||
).map(async (e) => api.deleteEntry(e.address)),
|
|
||||||
);
|
|
||||||
await api.putEntry([
|
|
||||||
{
|
|
||||||
entity: annotation.id,
|
|
||||||
attribute: "W3C_FRAGMENT_SELECTOR",
|
|
||||||
value: {
|
|
||||||
t: "String",
|
|
||||||
c: annotation.target.selector.value,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
...annotation.body.map((body) => {
|
|
||||||
return {
|
|
||||||
entity: annotation.id,
|
|
||||||
attribute: ATTR_LABEL,
|
|
||||||
value: {
|
|
||||||
t: "String",
|
|
||||||
c: body.value,
|
|
||||||
},
|
|
||||||
} as IEntry;
|
|
||||||
}),
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
anno.on("deleteAnnotation", async (annotation) => {
|
|
||||||
await api.deleteEntry(annotation.id);
|
|
||||||
});
|
|
||||||
|
|
||||||
imageLoaded = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clicked() {
|
|
||||||
if (!document.fullscreenElement) {
|
|
||||||
if (!editable && !hasAnnotations) {
|
|
||||||
imageEl.requestFullscreen();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
document.exitFullscreen();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let brightnesses = [0.5, 0.75, 1, 1.25, 1.5, 2, 2.5];
|
|
||||||
let brightnessIdx = 2;
|
|
||||||
function cycleBrightness() {
|
|
||||||
brightnessIdx++;
|
|
||||||
brightnessIdx = brightnessIdx % brightnesses.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
let contrasts = [0.5, 0.75, 1, 1.25, 1.5];
|
|
||||||
let contrastsIdx = 2;
|
|
||||||
function cycleContrast() {
|
|
||||||
contrastsIdx++;
|
|
||||||
contrastsIdx = contrastsIdx % contrasts.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if (imageEl) {
|
|
||||||
const brightness = brightnesses[brightnessIdx];
|
|
||||||
const contrast = contrasts[contrastsIdx];
|
|
||||||
imageEl.style.filter = `brightness(${brightness}) contrast(${contrast})`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="image-viewer">
|
|
||||||
{#if !imageLoaded}
|
|
||||||
<Spinner centered />
|
|
||||||
{/if}
|
|
||||||
{#if imageLoaded}
|
|
||||||
<div class="toolbar">
|
|
||||||
<IconButton
|
|
||||||
name="edit"
|
|
||||||
on:click={() => (editable = !editable)}
|
|
||||||
active={editable}
|
|
||||||
>
|
|
||||||
{$i18n.t("Annotate")}
|
|
||||||
</IconButton>
|
|
||||||
<div class="image-controls">
|
|
||||||
<IconButton name="brightness-half" on:click={cycleBrightness}>
|
|
||||||
{$i18n.t("Brightness")}
|
|
||||||
</IconButton>
|
|
||||||
<IconButton name="tone" on:click={cycleContrast}>
|
|
||||||
{$i18n.t("Contrast")}
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div
|
|
||||||
class="image"
|
|
||||||
class:zoomable={!editable && !hasAnnotations}
|
|
||||||
on:click={clicked}
|
|
||||||
on:keydown={(ev) => {
|
|
||||||
if (ev.key === "Enter") clicked();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="preview-image"
|
|
||||||
src="{api.apiUrl}/{detail || svg ? 'raw' : 'thumb'}/{address}"
|
|
||||||
alt={address}
|
|
||||||
on:load={loaded}
|
|
||||||
bind:this={imageEl}
|
|
||||||
draggable="false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="a8sUpLink" bind:this={a8sLinkTarget}>
|
|
||||||
{#if a8sLinkAddress}
|
|
||||||
<div class="link">
|
|
||||||
<UpObject link address={a8sLinkAddress} />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style global lang="scss">
|
|
||||||
@use "@recogito/annotorious/dist/annotorious.min.css";
|
|
||||||
|
|
||||||
.image-viewer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 0;
|
|
||||||
|
|
||||||
.image {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 0;
|
|
||||||
|
|
||||||
& > *,
|
|
||||||
img {
|
|
||||||
min-width: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
min-height: 0;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
|
|
||||||
.image-controls {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoomable {
|
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
img:fullscreen {
|
|
||||||
cursor: zoom-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.r6o-editor {
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a8sUpLink {
|
|
||||||
text-align: initial;
|
|
||||||
|
|
||||||
.link {
|
|
||||||
margin: 0.5em 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,117 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import api from "../../../lib/api";
|
|
||||||
import IconButton from "../../utils/IconButton.svelte";
|
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
|
||||||
export let address: string;
|
|
||||||
|
|
||||||
let mode: "preview" | "full" | "markdown" = "preview";
|
|
||||||
|
|
||||||
$: textContent = (async () => {
|
|
||||||
const response = await api.fetchRaw(address, mode == "preview");
|
|
||||||
const text = await response.text();
|
|
||||||
if (mode === "markdown") {
|
|
||||||
const { marked } = await import("marked");
|
|
||||||
const DOMPurify = await import("dompurify");
|
|
||||||
return DOMPurify.default.sanitize(marked.parse(text));
|
|
||||||
} else {
|
|
||||||
return text;
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
|
|
||||||
const tabs = [
|
|
||||||
["image", "preview", "Preview"],
|
|
||||||
["shape-circle", "full", "Full"],
|
|
||||||
["edit", "markdown", "Markdown"],
|
|
||||||
] as [string, typeof mode, string][];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="text-preview">
|
|
||||||
<header class="text-header">
|
|
||||||
{#each tabs as [icon, targetMode, label]}
|
|
||||||
<div
|
|
||||||
class="tab"
|
|
||||||
class:active={mode == targetMode}
|
|
||||||
on:click={() => (mode = targetMode)}
|
|
||||||
on:keydown={(ev) => {
|
|
||||||
if (ev.key === "Enter") {
|
|
||||||
mode = targetMode;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconButton
|
|
||||||
name={icon}
|
|
||||||
active={mode == targetMode}
|
|
||||||
on:click={() => (mode = targetMode)}
|
|
||||||
/>
|
|
||||||
<div class="label">{label}</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</header>
|
|
||||||
<div class="text" class:markdown={mode === "markdown"}>
|
|
||||||
{#await textContent}
|
|
||||||
<Spinner centered />
|
|
||||||
{:then text}
|
|
||||||
{#if mode === "markdown"}
|
|
||||||
{@html text}
|
|
||||||
{:else}
|
|
||||||
{text}{#if mode === "preview"}…{/if}
|
|
||||||
{/if}
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.text-preview {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
background: var(--background);
|
|
||||||
padding: 0.5em;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--foreground);
|
|
||||||
|
|
||||||
white-space: pre-wrap;
|
|
||||||
|
|
||||||
&.markdown {
|
|
||||||
white-space: unset;
|
|
||||||
|
|
||||||
:global(img) {
|
|
||||||
max-width: 75%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
border: 1px solid var(--foreground);
|
|
||||||
border-bottom: 0;
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
|
|
||||||
padding: 0.15em;
|
|
||||||
margin: 0 0.1em;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,263 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { throttle } from "lodash";
|
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
|
||||||
import Icon from "../../utils/Icon.svelte";
|
|
||||||
import { useEntity } from "../../../lib/entity";
|
|
||||||
import { i18n } from "../../../i18n";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import api from "../../../lib/api";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
export let detail: boolean;
|
|
||||||
|
|
||||||
const { entity } = useEntity(address);
|
|
||||||
|
|
||||||
enum State {
|
|
||||||
LOADING = "loading",
|
|
||||||
PREVIEW = "preview",
|
|
||||||
PREVIEWING = "previewing",
|
|
||||||
PLAYING = "playing",
|
|
||||||
ERRORED = "errored",
|
|
||||||
}
|
|
||||||
let state = State.LOADING;
|
|
||||||
let supported = true;
|
|
||||||
|
|
||||||
$: if (state == State.PREVIEW) dispatch("loaded");
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if ($entity && videoEl) {
|
|
||||||
const mime = $entity.get("FILE_MIME");
|
|
||||||
if (mime) {
|
|
||||||
supported = Boolean(videoEl.canPlayType(mime as string));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let videoEl: HTMLVideoElement;
|
|
||||||
let currentTime: number;
|
|
||||||
|
|
||||||
let timeCodeWidth: number;
|
|
||||||
let timeCodeLeft: string;
|
|
||||||
let timeCodeSize: string;
|
|
||||||
|
|
||||||
const seek = throttle((progress: number) => {
|
|
||||||
if (state === State.PREVIEWING && videoEl.duration) {
|
|
||||||
currentTime = videoEl.duration * progress;
|
|
||||||
|
|
||||||
if (timeCodeWidth) {
|
|
||||||
let timeCodeLeftPx = Math.min(
|
|
||||||
Math.max(videoEl.clientWidth * progress, timeCodeWidth / 2),
|
|
||||||
videoEl.clientWidth - timeCodeWidth / 2
|
|
||||||
);
|
|
||||||
timeCodeLeft = `${timeCodeLeftPx}px`;
|
|
||||||
timeCodeSize = `${videoEl.clientHeight / 9}px`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
function updatePreviewPosition(ev: MouseEvent) {
|
|
||||||
if (state === State.PREVIEW || state === State.PREVIEWING) {
|
|
||||||
state = State.PREVIEWING;
|
|
||||||
const bcr = videoEl.getBoundingClientRect();
|
|
||||||
const progress = (ev.clientX - bcr.x) / bcr.width;
|
|
||||||
seek(progress);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetPreview() {
|
|
||||||
if (state === State.PREVIEWING) {
|
|
||||||
state = State.PREVIEW;
|
|
||||||
videoEl.load();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startPlaying() {
|
|
||||||
if (detail) {
|
|
||||||
state = State.PLAYING;
|
|
||||||
videoEl.play();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="video-viewer {state}" class:detail class:unsupported={!supported}>
|
|
||||||
<div class="player" style="--icon-size: {detail ? 100 : 32}px">
|
|
||||||
{#if state === State.LOADING}
|
|
||||||
<Spinner />
|
|
||||||
{/if}
|
|
||||||
{#if state === State.LOADING || (!detail && state === State.PREVIEW)}
|
|
||||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
|
||||||
<img
|
|
||||||
class="thumb"
|
|
||||||
src="{api.apiUrl}/thumb/{address}?mime=video"
|
|
||||||
alt="Preview for {address}"
|
|
||||||
loading="lazy"
|
|
||||||
on:load={() => (state = State.PREVIEW)}
|
|
||||||
on:mouseover={() => (state = State.PREVIEWING)}
|
|
||||||
on:error={() => (state = State.ERRORED)}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<!-- svelte-ignore a11y-media-has-caption -->
|
|
||||||
<video
|
|
||||||
preload={detail ? "auto" : "metadata"}
|
|
||||||
src="{api.apiUrl}/raw/{address}"
|
|
||||||
poster="{api.apiUrl}/thumb/{address}?mime=video"
|
|
||||||
on:mousemove={updatePreviewPosition}
|
|
||||||
on:mouseleave={resetPreview}
|
|
||||||
on:click|preventDefault={startPlaying}
|
|
||||||
controls={state === State.PLAYING}
|
|
||||||
bind:this={videoEl}
|
|
||||||
bind:currentTime
|
|
||||||
/>
|
|
||||||
{#if !supported}
|
|
||||||
<div class="unsupported-message">
|
|
||||||
<div class="label">
|
|
||||||
{$i18n.t("UNSUPPORTED FORMAT")}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
<div class="play-icon">
|
|
||||||
<Icon plain border name="play" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="timecode"
|
|
||||||
bind:clientWidth={timeCodeWidth}
|
|
||||||
style:left={timeCodeLeft}
|
|
||||||
style:font-size={timeCodeSize}
|
|
||||||
>
|
|
||||||
{#if videoEl?.duration && currentTime}
|
|
||||||
{#if videoEl.duration > 3600}{String(
|
|
||||||
Math.floor(currentTime / 3600)
|
|
||||||
).padStart(2, "0")}:{/if}{String(
|
|
||||||
Math.floor((currentTime % 3600) / 60)
|
|
||||||
).padStart(2, "0")}:{String(
|
|
||||||
Math.floor((currentTime % 3600) % 60)
|
|
||||||
).padStart(2, "0")}
|
|
||||||
{:else if supported}
|
|
||||||
<Spinner />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.video-viewer {
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
|
|
||||||
&,
|
|
||||||
.player {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
video {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
min-height: 0;
|
|
||||||
object-fit: contain;
|
|
||||||
|
|
||||||
// background: rgba(128, 128, 128, 128);
|
|
||||||
|
|
||||||
transition: filter 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.play-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
font-size: var(--icon-size);
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timecode {
|
|
||||||
display: none;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: var(--left);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
|
|
||||||
font-feature-settings: "tnum", "zero";
|
|
||||||
font-weight: bold;
|
|
||||||
color: white;
|
|
||||||
opacity: 0.66;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.unsupported.detail {
|
|
||||||
.play-icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.unsupported-message {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(1, 1, 1, 0.7);
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
color: darkred;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.loading {
|
|
||||||
.player > * {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.standby,
|
|
||||||
&.preview {
|
|
||||||
img,
|
|
||||||
video {
|
|
||||||
filter: brightness(0.75);
|
|
||||||
}
|
|
||||||
.play-icon {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.previewing {
|
|
||||||
.timecode {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
video {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,120 +0,0 @@
|
||||||
import debug from "debug";
|
|
||||||
import { DEBUG } from "../lib/debug";
|
|
||||||
const dbg = debug("kestrel:imageQueue");
|
|
||||||
|
|
||||||
class ImageQueue {
|
|
||||||
concurrency: number;
|
|
||||||
queue: {
|
|
||||||
element: HTMLElement;
|
|
||||||
id: string;
|
|
||||||
callback: () => Promise<void>;
|
|
||||||
check?: () => boolean;
|
|
||||||
}[] = [];
|
|
||||||
active = 0;
|
|
||||||
|
|
||||||
constructor(concurrency: number) {
|
|
||||||
this.concurrency = concurrency;
|
|
||||||
}
|
|
||||||
|
|
||||||
public add(
|
|
||||||
element: HTMLImageElement,
|
|
||||||
id: string,
|
|
||||||
callback: () => Promise<void>,
|
|
||||||
check?: () => boolean,
|
|
||||||
) {
|
|
||||||
this.queue = this.queue.filter((e) => e.element !== element);
|
|
||||||
this.queue.push({ element, id, callback, check });
|
|
||||||
this.update();
|
|
||||||
}
|
|
||||||
|
|
||||||
private update() {
|
|
||||||
this.queue.sort((a, b) => {
|
|
||||||
const aBox = a.element.getBoundingClientRect();
|
|
||||||
const bBox = b.element.getBoundingClientRect();
|
|
||||||
const topDifference = aBox.top - bBox.top;
|
|
||||||
if (topDifference !== 0) {
|
|
||||||
return topDifference;
|
|
||||||
} else {
|
|
||||||
return aBox.left - bBox.left;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
while (this.active < this.concurrency && this.queue.length) {
|
|
||||||
const nextIdx = this.queue.findIndex((e) => e.check()) || 0;
|
|
||||||
const next = this.queue.splice(nextIdx, 1)[0];
|
|
||||||
dbg(`Getting ${next.id}...`);
|
|
||||||
this.active += 1;
|
|
||||||
next.element.classList.add("image-loading");
|
|
||||||
if (DEBUG.imageQueueHalt) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
next
|
|
||||||
.callback()
|
|
||||||
.then(() => {
|
|
||||||
dbg(`Loaded ${next.id}`);
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
dbg(`Failed to load ${next.id}...`);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
this.active -= 1;
|
|
||||||
next.element.classList.remove("image-loading");
|
|
||||||
this.update();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
dbg(
|
|
||||||
"Active: %d, Queue: %O",
|
|
||||||
this.active,
|
|
||||||
this.queue.map((e) => [e.element, e.id]),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const imageQueue = new ImageQueue(2);
|
|
||||||
|
|
||||||
export function concurrentImage(element: HTMLImageElement, src: string) {
|
|
||||||
const bbox = element.getBoundingClientRect();
|
|
||||||
let visible =
|
|
||||||
bbox.top >= 0 &&
|
|
||||||
bbox.left >= 0 &&
|
|
||||||
bbox.bottom <= window.innerHeight &&
|
|
||||||
bbox.right <= window.innerWidth;
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver((entries) => {
|
|
||||||
visible = entries.some((e) => e.isIntersecting);
|
|
||||||
});
|
|
||||||
observer.observe(element);
|
|
||||||
|
|
||||||
function queueSelf() {
|
|
||||||
element.classList.add("image-queued");
|
|
||||||
const loadSelf = () => {
|
|
||||||
element.classList.remove("image-queued");
|
|
||||||
return new Promise<void>((resolve, reject) => {
|
|
||||||
if (element.src === src) {
|
|
||||||
resolve();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
element.addEventListener("load", () => {
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
element.addEventListener("error", () => {
|
|
||||||
reject();
|
|
||||||
});
|
|
||||||
element.src = src;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
imageQueue.add(element, src, loadSelf, () => visible);
|
|
||||||
}
|
|
||||||
queueSelf();
|
|
||||||
|
|
||||||
return {
|
|
||||||
update(_src: string) {
|
|
||||||
queueSelf();
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
observer.disconnect();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
|
@ -1,163 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Link, useNavigate } from "svelte-navigator";
|
|
||||||
// import { useMatch } from "svelte-navigator";
|
|
||||||
import { addEmitter } from "../AddModal.svelte";
|
|
||||||
import Icon from "../utils/Icon.svelte";
|
|
||||||
import { jobsEmitter } from "./Jobs.svelte";
|
|
||||||
import api from "../../lib/api";
|
|
||||||
import Selector, { type SelectorValue } from "../utils/Selector.svelte";
|
|
||||||
import { i18n } from "../../i18n";
|
|
||||||
const navigate = useNavigate();
|
|
||||||
// const location = useLocation();
|
|
||||||
|
|
||||||
// const searchMatch = useMatch("/search/:query");
|
|
||||||
|
|
||||||
// let searchQuery = $searchMatch?.params.query
|
|
||||||
// ? decodeURIComponent($searchMatch?.params.query)
|
|
||||||
// : "";
|
|
||||||
// $: if (!$location.pathname.includes("search")) searchQuery = "";
|
|
||||||
|
|
||||||
let selector: Selector;
|
|
||||||
|
|
||||||
let lastSearched: SelectorValue[] = [];
|
|
||||||
|
|
||||||
function addLastSearched(value: SelectorValue) {
|
|
||||||
switch (value.t) {
|
|
||||||
case "Address":
|
|
||||||
lastSearched = lastSearched.filter(
|
|
||||||
(v) => v.t !== "Address" || v.c !== value.c,
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
case "Attribute":
|
|
||||||
lastSearched = lastSearched.filter(
|
|
||||||
(v) => v.t !== "Attribute" || v.name !== value.name,
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
lastSearched.unshift(value);
|
|
||||||
lastSearched = lastSearched.slice(0, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function onInput(event: CustomEvent<SelectorValue>) {
|
|
||||||
const value = event.detail;
|
|
||||||
if (!value) return;
|
|
||||||
|
|
||||||
switch (value.t) {
|
|
||||||
case "Address":
|
|
||||||
addLastSearched(value);
|
|
||||||
navigate(`/browse/${value.c}`);
|
|
||||||
break;
|
|
||||||
case "Attribute":
|
|
||||||
addLastSearched(value);
|
|
||||||
{
|
|
||||||
const attributeAddress = await api.componentsToAddress({
|
|
||||||
t: "Attribute",
|
|
||||||
c: value.name,
|
|
||||||
});
|
|
||||||
navigate(`/browse/${attributeAddress}`);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
selector.reset();
|
|
||||||
|
|
||||||
// searchQuery = event.detail;
|
|
||||||
|
|
||||||
// if (searchQuery.length > 0) {
|
|
||||||
// navigate(`/search/${encodeURIComponent(searchQuery)}`, {
|
|
||||||
// replace: $location.pathname.includes("search"),
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
let fileInput: HTMLInputElement;
|
|
||||||
function onFileChange() {
|
|
||||||
if (fileInput.files.length > 0) {
|
|
||||||
addEmitter.emit("files", Array.from(fileInput.files));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function rescan() {
|
|
||||||
await api.refreshVault();
|
|
||||||
jobsEmitter.emit("reload");
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="header">
|
|
||||||
<h1>
|
|
||||||
<Link to="/">
|
|
||||||
<img class="logo" src="assets/upend.svg" alt="UpEnd logo" />
|
|
||||||
<div class="name">UpEnd</div>
|
|
||||||
</Link>
|
|
||||||
</h1>
|
|
||||||
<div class="input">
|
|
||||||
<Selector
|
|
||||||
types={["Address", "NewAddress", "Attribute"]}
|
|
||||||
placeholder={$i18n.t("Search or add")}
|
|
||||||
on:input={onInput}
|
|
||||||
bind:this={selector}
|
|
||||||
emptyOptions={lastSearched}
|
|
||||||
>
|
|
||||||
<Icon name="search" slot="prefix" />
|
|
||||||
</Selector>
|
|
||||||
</div>
|
|
||||||
<button class="button" on:click={() => fileInput.click()}>
|
|
||||||
<Icon name="upload" />
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
multiple
|
|
||||||
bind:this={fileInput}
|
|
||||||
on:change={onFileChange}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
<button class="button" on:click={() => rescan()} title="Rescan vault">
|
|
||||||
<Icon name="refresh" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
height: 3.5rem;
|
|
||||||
border-bottom: 1px solid var(--foreground);
|
|
||||||
|
|
||||||
background: var(--background);
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 16pt;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
:global(a) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
color: var(--foreground-lightest);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: inline-block;
|
|
||||||
height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
flex-grow: 1;
|
|
||||||
min-width: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.name {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,81 +0,0 @@
|
||||||
<script lang="ts" context="module">
|
|
||||||
import mitt from "mitt";
|
|
||||||
|
|
||||||
export type JobsEvents = {
|
|
||||||
reload: undefined;
|
|
||||||
};
|
|
||||||
export const jobsEmitter = mitt<JobsEvents>();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import type { IJob } from "@upnd/upend/types";
|
|
||||||
import { fade } from "svelte/transition";
|
|
||||||
import ProgessBar from "../utils/ProgessBar.svelte";
|
|
||||||
import api from "../../lib/api";
|
|
||||||
import { DEBUG } from "../../lib/debug";
|
|
||||||
|
|
||||||
interface JobWithId extends IJob {
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
let jobs: IJob[] = [];
|
|
||||||
let activeJobs: JobWithId[] = [];
|
|
||||||
|
|
||||||
export let active = 0;
|
|
||||||
$: active = activeJobs.length;
|
|
||||||
|
|
||||||
let timeout: NodeJS.Timeout;
|
|
||||||
async function updateJobs() {
|
|
||||||
clearTimeout(timeout);
|
|
||||||
if (!DEBUG.mockJobs) {
|
|
||||||
jobs = await api.fetchJobs();
|
|
||||||
} else {
|
|
||||||
jobs = Array(DEBUG.mockJobs)
|
|
||||||
.fill(0)
|
|
||||||
.map((_, i) => ({
|
|
||||||
id: i.toString(),
|
|
||||||
title: `Job ${i}`,
|
|
||||||
job_type: `JobType ${i}`,
|
|
||||||
state: "InProgress",
|
|
||||||
progress: Math.floor(Math.random() * 100),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
activeJobs = Object.entries(jobs)
|
|
||||||
.filter(([_, job]) => job.state == "InProgress")
|
|
||||||
.map(([id, job]) => {
|
|
||||||
return { id, ...job };
|
|
||||||
})
|
|
||||||
.sort((j1, j2) => j1.id.localeCompare(j2.id))
|
|
||||||
.sort((j1, j2) => (j2.job_type || "").localeCompare(j1.job_type || ""));
|
|
||||||
|
|
||||||
if (activeJobs.length) {
|
|
||||||
timeout = setTimeout(updateJobs, 500);
|
|
||||||
} else {
|
|
||||||
timeout = setTimeout(updateJobs, 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
updateJobs();
|
|
||||||
|
|
||||||
jobsEmitter.on("reload", () => {
|
|
||||||
updateJobs();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#each activeJobs as job (job.id)}
|
|
||||||
<div class="job" transition:fade>
|
|
||||||
<div class="job-label">{job.title}</div>
|
|
||||||
<ProgessBar value={job.progress} />
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.job {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
.job-label {
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-right: 2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,87 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type {
|
|
||||||
UpNotification,
|
|
||||||
UpNotificationLevel,
|
|
||||||
} from "../../notifications";
|
|
||||||
import { notify } from "../../notifications";
|
|
||||||
import { fade } from "svelte/transition";
|
|
||||||
import Icon from "../utils/Icon.svelte";
|
|
||||||
import { DEBUG, lipsum } from "../../lib/debug";
|
|
||||||
|
|
||||||
let notifications: UpNotification[] = [];
|
|
||||||
if (DEBUG.mockNotifications) {
|
|
||||||
notifications = [
|
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
level: "error",
|
|
||||||
content: `This is an error notification, ${lipsum(5)}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
level: "warning",
|
|
||||||
content: `This is a warning notification, ${lipsum(5)}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
level: "info",
|
|
||||||
content: `This is an info notification, ${lipsum(5)}`,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
notifications = notifications.slice(0, DEBUG.mockNotifications);
|
|
||||||
if (notifications.length < DEBUG.mockNotifications) {
|
|
||||||
notifications = [
|
|
||||||
...notifications,
|
|
||||||
...Array(DEBUG.mockNotifications - notifications.length)
|
|
||||||
.fill(0)
|
|
||||||
.map(() => ({
|
|
||||||
id: Math.random().toString(),
|
|
||||||
level: ["error", "warning", "info"][
|
|
||||||
Math.floor(Math.random() * 3)
|
|
||||||
] as UpNotificationLevel,
|
|
||||||
content: lipsum(12),
|
|
||||||
})),
|
|
||||||
];
|
|
||||||
}
|
|
||||||
notifications = notifications;
|
|
||||||
}
|
|
||||||
|
|
||||||
notify.on("notification", (notification) => {
|
|
||||||
notifications.push(notification);
|
|
||||||
notifications = notifications;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
notifications.splice(
|
|
||||||
notifications.findIndex((n) => (n.id = notification.id)),
|
|
||||||
1,
|
|
||||||
);
|
|
||||||
notifications = notifications;
|
|
||||||
}, 5000);
|
|
||||||
});
|
|
||||||
|
|
||||||
const icons = {
|
|
||||||
error: "error-alt",
|
|
||||||
warning: "error",
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#each notifications as notification (notification.id)}
|
|
||||||
<div
|
|
||||||
class="notification notification-{notification.level || 'info'}"
|
|
||||||
transition:fade
|
|
||||||
>
|
|
||||||
<Icon name={icons[notification.level] || "bell"} />
|
|
||||||
{notification.content}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use "../../styles/colors";
|
|
||||||
|
|
||||||
.notification-error {
|
|
||||||
color: colors.$red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-warning {
|
|
||||||
color: colors.$orange;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,29 +0,0 @@
|
||||||
<script lang="ts" context="module">
|
|
||||||
let loaded = false;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export let plain = false;
|
|
||||||
export let name: string;
|
|
||||||
export let border = false;
|
|
||||||
|
|
||||||
if (!loaded) {
|
|
||||||
document.head.innerHTML += `<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="vendor/boxicons/css/boxicons.min.css"
|
|
||||||
/>`;
|
|
||||||
loaded = true;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<i class="bx bx-{name}" class:plain class:bx-border={border} />
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bx:not(.plain) {
|
|
||||||
font-size: 115%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bx-border {
|
|
||||||
border-color: white;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,60 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { debounce } from "lodash";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import { useEntity } from "../../lib/entity";
|
|
||||||
import type { AttributeCreate, AttributeUpdate } from "../../types/base";
|
|
||||||
import type { UpEntry } from "@upnd/upend";
|
|
||||||
import LabelBorder from "./LabelBorder.svelte";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let address: string;
|
|
||||||
|
|
||||||
$: ({ entity } = useEntity(address));
|
|
||||||
|
|
||||||
let noteEntry: UpEntry | undefined;
|
|
||||||
let notes: string | undefined = undefined;
|
|
||||||
$: {
|
|
||||||
if ($entity?.attr["NOTE"]?.length && $entity?.attr["NOTE"][0]?.value?.c) {
|
|
||||||
noteEntry = $entity?.attr["NOTE"][0];
|
|
||||||
notes = String(noteEntry.value.c);
|
|
||||||
} else {
|
|
||||||
noteEntry = undefined;
|
|
||||||
notes = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let contentEl: HTMLDivElement;
|
|
||||||
|
|
||||||
const update = debounce(() => {
|
|
||||||
if (noteEntry) {
|
|
||||||
dispatch("change", {
|
|
||||||
type: "update",
|
|
||||||
address: noteEntry.address,
|
|
||||||
attribute: "NOTE",
|
|
||||||
value: { t: "String", c: contentEl.innerText },
|
|
||||||
} as AttributeUpdate);
|
|
||||||
} else {
|
|
||||||
dispatch("change", {
|
|
||||||
type: "create",
|
|
||||||
address: address,
|
|
||||||
attribute: "NOTE",
|
|
||||||
value: { t: "String", c: contentEl.innerText },
|
|
||||||
} as AttributeCreate);
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<LabelBorder hide={!notes?.length}>
|
|
||||||
<span slot="header">Notes</span>
|
|
||||||
<div class="notes" contenteditable on:input={update} bind:this={contentEl}>
|
|
||||||
{notes ? notes : ""}
|
|
||||||
</div>
|
|
||||||
</LabelBorder>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.notes {
|
|
||||||
background: var(--background);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0.5em !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,585 +0,0 @@
|
||||||
<script lang="ts" context="module">
|
|
||||||
import type { IValue } from "@upnd/upend/types";
|
|
||||||
import type { UpEntry } from "@upnd/upend";
|
|
||||||
import UpEntryComponent from "../display/UpEntry.svelte";
|
|
||||||
|
|
||||||
export type SELECTOR_TYPE =
|
|
||||||
| "Address"
|
|
||||||
| "LabelledAddress"
|
|
||||||
| "NewAddress"
|
|
||||||
| "Attribute"
|
|
||||||
| "NewAttribute"
|
|
||||||
| "String"
|
|
||||||
| "Number"
|
|
||||||
| "Null";
|
|
||||||
|
|
||||||
export type SelectorValue = {
|
|
||||||
t: SELECTOR_TYPE;
|
|
||||||
} & (
|
|
||||||
| {
|
|
||||||
t: "Address";
|
|
||||||
c: Address;
|
|
||||||
entry?: UpEntry;
|
|
||||||
labels?: string[];
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
t: "Attribute";
|
|
||||||
name: string;
|
|
||||||
labels?: string[];
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
t: "String";
|
|
||||||
c: string;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
t: "Number";
|
|
||||||
c: number;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
t: "Null";
|
|
||||||
c: null;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export type SelectorOption =
|
|
||||||
| SelectorValue
|
|
||||||
| { t: "NewAddress"; c: string }
|
|
||||||
| { t: "NewAttribute"; name: string; label: string };
|
|
||||||
|
|
||||||
export async function selectorValueAsValue(
|
|
||||||
value: SelectorValue,
|
|
||||||
): Promise<IValue> {
|
|
||||||
switch (value.t) {
|
|
||||||
case "Address":
|
|
||||||
return {
|
|
||||||
t: "Address",
|
|
||||||
c: value.c,
|
|
||||||
};
|
|
||||||
case "Attribute":
|
|
||||||
return {
|
|
||||||
t: "Address",
|
|
||||||
c: await api.componentsToAddress({ t: "Attribute", c: value.name }),
|
|
||||||
};
|
|
||||||
case "String":
|
|
||||||
return {
|
|
||||||
t: "String",
|
|
||||||
c: value.c,
|
|
||||||
};
|
|
||||||
case "Number":
|
|
||||||
return {
|
|
||||||
t: "Number",
|
|
||||||
c: value.c,
|
|
||||||
};
|
|
||||||
case "Null":
|
|
||||||
return {
|
|
||||||
t: "Null",
|
|
||||||
c: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { debounce } from "lodash";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import type { UpListing } from "@upnd/upend";
|
|
||||||
import type { Address } from "@upnd/upend/types";
|
|
||||||
import { baseSearchOnce, createLabelled } from "../../util/search";
|
|
||||||
import UpObject from "../display/UpObject.svelte";
|
|
||||||
import IconButton from "./IconButton.svelte";
|
|
||||||
import Input from "./Input.svelte";
|
|
||||||
import { matchSorter } from "match-sorter";
|
|
||||||
import api from "../../lib/api";
|
|
||||||
import { ATTR_LABEL } from "@upnd/upend/constants";
|
|
||||||
import { i18n } from "../../i18n";
|
|
||||||
import debug from "debug";
|
|
||||||
import Spinner from "./Spinner.svelte";
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
const dbg = debug("kestrel:Selector");
|
|
||||||
let selectorEl: HTMLElement;
|
|
||||||
|
|
||||||
export let MAX_OPTIONS = 25;
|
|
||||||
|
|
||||||
export let types: SELECTOR_TYPE[] = [
|
|
||||||
"Address",
|
|
||||||
"NewAddress",
|
|
||||||
"Attribute",
|
|
||||||
"String",
|
|
||||||
"Number",
|
|
||||||
];
|
|
||||||
export let attributeOptions: string[] | undefined = undefined;
|
|
||||||
export let emptyOptions: SelectorOption[] | undefined = undefined;
|
|
||||||
export let placeholder = "";
|
|
||||||
export let disabled = false;
|
|
||||||
export let keepFocusOnSet = false;
|
|
||||||
|
|
||||||
export let initial: SelectorValue | undefined = undefined;
|
|
||||||
let inputValue = "";
|
|
||||||
let updating = false;
|
|
||||||
|
|
||||||
$: setInitial(initial);
|
|
||||||
function setInitial(initial: SelectorValue | undefined) {
|
|
||||||
if (initial) {
|
|
||||||
switch (initial.t) {
|
|
||||||
case "Address":
|
|
||||||
case "String":
|
|
||||||
inputValue = initial.c;
|
|
||||||
break;
|
|
||||||
case "Attribute":
|
|
||||||
inputValue = initial.name;
|
|
||||||
break;
|
|
||||||
case "Number":
|
|
||||||
inputValue = String(initial.c);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let current:
|
|
||||||
| (SelectorOption & { t: "Address" | "Attribute" | "String" | "Number" })
|
|
||||||
| undefined = undefined;
|
|
||||||
|
|
||||||
export function reset() {
|
|
||||||
inputValue = "";
|
|
||||||
current = undefined;
|
|
||||||
dispatch("input", current);
|
|
||||||
}
|
|
||||||
|
|
||||||
let options: SelectorOption[] = [];
|
|
||||||
let searchResult: UpListing | undefined = undefined;
|
|
||||||
const updateOptions = debounce(async (query: string, doSearch: boolean) => {
|
|
||||||
updating = true;
|
|
||||||
let result: SelectorOption[] = [];
|
|
||||||
|
|
||||||
if (query.length === 0 && emptyOptions !== undefined) {
|
|
||||||
options = emptyOptions;
|
|
||||||
updating = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (types.includes("Number")) {
|
|
||||||
const number = parseFloat(query);
|
|
||||||
if (!Number.isNaN(number)) {
|
|
||||||
result.push({
|
|
||||||
t: "Number",
|
|
||||||
c: number,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (types.includes("String") && query.length) {
|
|
||||||
result.push({
|
|
||||||
t: "String",
|
|
||||||
c: query,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
options = result;
|
|
||||||
|
|
||||||
if (types.includes("Address") || types.includes("LabelledAddress")) {
|
|
||||||
if (doSearch) {
|
|
||||||
if (emptyOptions === undefined || query.length > 0) {
|
|
||||||
searchResult = await baseSearchOnce(query);
|
|
||||||
} else {
|
|
||||||
searchResult = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let exactHits = Object.entries(addressToLabels)
|
|
||||||
.filter(([_, labels]) =>
|
|
||||||
labels.map((l) => l.toLowerCase()).includes(query.toLowerCase()),
|
|
||||||
)
|
|
||||||
.map(([addr, _]) => addr);
|
|
||||||
|
|
||||||
if (exactHits.length) {
|
|
||||||
exactHits.forEach((addr) =>
|
|
||||||
result.push({
|
|
||||||
t: "Address",
|
|
||||||
c: addr,
|
|
||||||
labels: addressToLabels[addr],
|
|
||||||
entry: null,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} else if (query.length && types.includes("NewAddress")) {
|
|
||||||
result.push({
|
|
||||||
t: "NewAddress",
|
|
||||||
c: query,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let validOptions = (searchResult?.entries || []).filter(
|
|
||||||
(e) => !exactHits.includes(e.entity),
|
|
||||||
);
|
|
||||||
// only includes LabelledAddress
|
|
||||||
if (!types.includes("Address")) {
|
|
||||||
validOptions = validOptions.filter((e) => e.attribute == ATTR_LABEL);
|
|
||||||
}
|
|
||||||
|
|
||||||
const sortedOptions = matchSorter(validOptions, inputValue, {
|
|
||||||
keys: ["value.c", (i) => addressToLabels[i.entity]?.join(" ")],
|
|
||||||
});
|
|
||||||
|
|
||||||
for (const entry of sortedOptions) {
|
|
||||||
const common = {
|
|
||||||
t: "Address" as const,
|
|
||||||
c: entry.entity,
|
|
||||||
};
|
|
||||||
if (entry.attribute == ATTR_LABEL) {
|
|
||||||
result.push({
|
|
||||||
...common,
|
|
||||||
labels: [entry.value.c.toString()],
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
result.push({ ...common, entry });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (types.includes("Attribute")) {
|
|
||||||
const allAttributes = await api.fetchAllAttributes();
|
|
||||||
const attributes = attributeOptions
|
|
||||||
? allAttributes.filter((attr) => attributeOptions.includes(attr.name))
|
|
||||||
: allAttributes;
|
|
||||||
if (emptyOptions === undefined || query.length > 0) {
|
|
||||||
result.push(
|
|
||||||
...attributes
|
|
||||||
.filter(
|
|
||||||
(attr) =>
|
|
||||||
attr.name.toLowerCase().includes(query.toLowerCase()) ||
|
|
||||||
attr.labels.some((label) =>
|
|
||||||
label.toLowerCase().includes(query.toLowerCase()),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
.map(
|
|
||||||
(attribute) =>
|
|
||||||
({
|
|
||||||
t: "Attribute",
|
|
||||||
...attribute,
|
|
||||||
}) as SelectorOption,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const attributeToCreate = query
|
|
||||||
.toUpperCase()
|
|
||||||
.replaceAll(/[^A-Z0-9]/g, "_");
|
|
||||||
if (
|
|
||||||
!attributeOptions &&
|
|
||||||
query &&
|
|
||||||
!allAttributes.map((attr) => attr.name).includes(attributeToCreate) &&
|
|
||||||
types.includes("NewAttribute")
|
|
||||||
) {
|
|
||||||
result.push({
|
|
||||||
t: "NewAttribute",
|
|
||||||
name: attributeToCreate,
|
|
||||||
label: query,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
options = result;
|
|
||||||
updating = false;
|
|
||||||
}, 200);
|
|
||||||
|
|
||||||
$: dbg("%o Options: %O", selectorEl, options);
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if (inputFocused) {
|
|
||||||
updateOptions.cancel();
|
|
||||||
updateOptions(inputValue, true);
|
|
||||||
addressToLabels = {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let addressToLabels: { [key: string]: string[] } = {};
|
|
||||||
function onAddressResolved(address: string, ev: CustomEvent<string[]>) {
|
|
||||||
addressToLabels[address] = ev.detail;
|
|
||||||
updateOptions.cancel();
|
|
||||||
updateOptions(inputValue, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function set(option: SelectorOption) {
|
|
||||||
dbg("%o Setting option %O", selectorEl, option);
|
|
||||||
|
|
||||||
switch (option.t) {
|
|
||||||
case "Address":
|
|
||||||
inputValue = option.c;
|
|
||||||
current = option;
|
|
||||||
break;
|
|
||||||
case "NewAddress":
|
|
||||||
{
|
|
||||||
const addr = await createLabelled(option.c);
|
|
||||||
inputValue = addr;
|
|
||||||
current = {
|
|
||||||
t: "Address",
|
|
||||||
c: addr,
|
|
||||||
labels: [option.c],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
break;
|
|
||||||
case "Attribute":
|
|
||||||
inputValue = option.name;
|
|
||||||
current = option;
|
|
||||||
break;
|
|
||||||
case "NewAttribute":
|
|
||||||
inputValue = option.name;
|
|
||||||
|
|
||||||
{
|
|
||||||
const address = await api.componentsToAddress({
|
|
||||||
t: "Attribute",
|
|
||||||
c: option.name,
|
|
||||||
});
|
|
||||||
await api.putEntityAttribute(address, ATTR_LABEL, {
|
|
||||||
t: "String",
|
|
||||||
c: option.label,
|
|
||||||
});
|
|
||||||
|
|
||||||
current = {
|
|
||||||
t: "Attribute",
|
|
||||||
name: option.name,
|
|
||||||
labels: [option.label],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "String":
|
|
||||||
inputValue = option.c;
|
|
||||||
current = option;
|
|
||||||
break;
|
|
||||||
case "Number":
|
|
||||||
inputValue = String(option.c);
|
|
||||||
current = option;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
dbg("%o Result set value: %O", selectorEl, current);
|
|
||||||
dispatch("input", current);
|
|
||||||
|
|
||||||
options = [];
|
|
||||||
optionFocusIndex = -1;
|
|
||||||
hover = false;
|
|
||||||
if (keepFocusOnSet) {
|
|
||||||
focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let listEl: HTMLUListElement;
|
|
||||||
let optionFocusIndex = -1;
|
|
||||||
function handleArrowKeys(ev: KeyboardEvent) {
|
|
||||||
if (!options.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const optionEls = Array.from(listEl.children) as HTMLLIElement[];
|
|
||||||
let targetIndex = optionEls.findIndex(
|
|
||||||
(el) => document.activeElement === el,
|
|
||||||
);
|
|
||||||
switch (ev.key) {
|
|
||||||
case "ArrowDown":
|
|
||||||
targetIndex += 1;
|
|
||||||
|
|
||||||
// pressed down on last
|
|
||||||
if (targetIndex >= optionEls.length) {
|
|
||||||
targetIndex = 0;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "ArrowUp":
|
|
||||||
targetIndex -= 1;
|
|
||||||
|
|
||||||
// pressed up on input
|
|
||||||
if (targetIndex == -2) {
|
|
||||||
targetIndex = optionEls.length - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// pressed up on first
|
|
||||||
if (targetIndex == -1) {
|
|
||||||
focus();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
return; // early return, stop processing
|
|
||||||
}
|
|
||||||
|
|
||||||
if (optionEls[targetIndex]) {
|
|
||||||
optionEls[targetIndex].focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let input: Input;
|
|
||||||
export function focus() {
|
|
||||||
// dbg("%o Focusing input", selectorEl);
|
|
||||||
input.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
let inputFocused = false;
|
|
||||||
let hover = false; // otherwise clicking makes options disappear faster than it can emit a set
|
|
||||||
$: visible =
|
|
||||||
(inputFocused || hover || optionFocusIndex > -1) &&
|
|
||||||
Boolean(options.length || updating);
|
|
||||||
$: dispatch("focus", inputFocused || hover || optionFocusIndex > -1);
|
|
||||||
|
|
||||||
$: dbg(
|
|
||||||
"%o focus = %s, hover = %s, visible = %s",
|
|
||||||
selectorEl,
|
|
||||||
inputFocused,
|
|
||||||
hover,
|
|
||||||
visible,
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="selector" bind:this={selectorEl}>
|
|
||||||
{#if current?.t === "Address" && inputValue.length > 0}
|
|
||||||
<div class="input">
|
|
||||||
<div class="label">
|
|
||||||
<UpObject link address={String(current.c)} />
|
|
||||||
</div>
|
|
||||||
<IconButton name="x" on:click={() => (inputValue = "")} />
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<Input
|
|
||||||
bind:this={input}
|
|
||||||
bind:value={inputValue}
|
|
||||||
on:focusChange={(ev) => (inputFocused = ev.detail)}
|
|
||||||
on:keydown={handleArrowKeys}
|
|
||||||
{disabled}
|
|
||||||
{placeholder}
|
|
||||||
>
|
|
||||||
<slot name="prefix" slot="prefix" />
|
|
||||||
</Input>
|
|
||||||
{/if}
|
|
||||||
<ul
|
|
||||||
class="options"
|
|
||||||
class:visible
|
|
||||||
on:mouseenter={() => (hover = true)}
|
|
||||||
on:mouseleave={() => (hover = false)}
|
|
||||||
bind:this={listEl}
|
|
||||||
>
|
|
||||||
{#if updating}
|
|
||||||
<li><Spinner centered /></li>
|
|
||||||
{/if}
|
|
||||||
{#each options.slice(0, MAX_OPTIONS) as option, idx}
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
||||||
<li
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => set(option)}
|
|
||||||
on:mousemove={() => focus()}
|
|
||||||
on:focus={() => (optionFocusIndex = idx)}
|
|
||||||
on:blur={() => (optionFocusIndex = -1)}
|
|
||||||
on:keydown={(ev) => {
|
|
||||||
if (ev.key === "Enter") {
|
|
||||||
set(option);
|
|
||||||
} else {
|
|
||||||
handleArrowKeys(ev);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{#if option.t === "Address"}
|
|
||||||
{@const address = option.c}
|
|
||||||
{#if option.entry}
|
|
||||||
<UpEntryComponent entry={option.entry} />
|
|
||||||
{:else}
|
|
||||||
<UpObject
|
|
||||||
{address}
|
|
||||||
labels={option.labels}
|
|
||||||
on:resolved={(ev) => onAddressResolved(address, ev)}
|
|
||||||
/>{/if}
|
|
||||||
{:else if option.t === "NewAddress"}
|
|
||||||
<div class="content new">{option.c}</div>
|
|
||||||
<div class="type">{$i18n.t("Create object")}</div>
|
|
||||||
{:else if option.t === "Attribute"}
|
|
||||||
{#if option.labels.length}
|
|
||||||
<div class="content">
|
|
||||||
{#each option.labels as label}
|
|
||||||
<div class="label">{label}</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div class="type">{option.name}</div>
|
|
||||||
{:else}
|
|
||||||
<div class="content">
|
|
||||||
{option.name}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{:else if option.t === "NewAttribute"}
|
|
||||||
<div class="content">{option.label}</div>
|
|
||||||
<div class="type">{$i18n.t("Create attribute")} ({option.name})</div>
|
|
||||||
{:else}
|
|
||||||
<div class="type">{option.t}</div>
|
|
||||||
<div class="content">{option.c}</div>
|
|
||||||
{/if}
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.selector {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
display: flex;
|
|
||||||
min-width: 0;
|
|
||||||
.label {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.options {
|
|
||||||
position: absolute;
|
|
||||||
list-style: none;
|
|
||||||
margin: 2px 0 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 1px solid var(--foreground-lighter);
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: var(--background);
|
|
||||||
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
|
|
||||||
z-index: 99;
|
|
||||||
|
|
||||||
&.visible {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.25em;
|
|
||||||
|
|
||||||
transition: background-color 0.1s;
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--background-lighter);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: var(--background-lighter);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type,
|
|
||||||
.content {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type {
|
|
||||||
opacity: 0.8;
|
|
||||||
font-size: smaller;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.new {
|
|
||||||
padding: 0.25em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,338 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { readable, type Readable } from "svelte/store";
|
|
||||||
import type { UpListing } from "@upnd/upend";
|
|
||||||
import type { Address } from "@upnd/upend/types";
|
|
||||||
import { query } from "../../lib/entity";
|
|
||||||
import UpObject from "../display/UpObject.svelte";
|
|
||||||
import UpObjectCard from "../display/UpObjectCard.svelte";
|
|
||||||
import { ATTR_LABEL } from "@upnd/upend/constants";
|
|
||||||
import { i18n } from "../../i18n";
|
|
||||||
import IconButton from "../utils/IconButton.svelte";
|
|
||||||
import Selector, { type SelectorValue } from "../utils/Selector.svelte";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import type { WidgetChange } from "src/types/base";
|
|
||||||
import debug from "debug";
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
const dbg = debug(`kestrel:EntityList`);
|
|
||||||
|
|
||||||
export let entities: Address[];
|
|
||||||
export let thumbnails = true;
|
|
||||||
export let select: "add" | "remove" = "add";
|
|
||||||
export let sort = true;
|
|
||||||
export let address: Address | undefined = undefined;
|
|
||||||
|
|
||||||
$: deduplicatedEntities = Array.from(new Set(entities));
|
|
||||||
|
|
||||||
let style: "list" | "grid" | "flex" = "grid";
|
|
||||||
|
|
||||||
let clientWidth: number;
|
|
||||||
$: style = !thumbnails || clientWidth < 600 ? "list" : "grid";
|
|
||||||
|
|
||||||
// Sorting
|
|
||||||
let sortedEntities: Address[] = [];
|
|
||||||
|
|
||||||
let sortKeys: { [key: string]: string[] } = {};
|
|
||||||
function addSortKeys(key: string, vals: string[], resort: boolean) {
|
|
||||||
if (!sortKeys[key]) {
|
|
||||||
sortKeys[key] = [];
|
|
||||||
}
|
|
||||||
let changed = false;
|
|
||||||
vals.forEach((val) => {
|
|
||||||
if (!sortKeys[key].includes(val)) {
|
|
||||||
changed = true;
|
|
||||||
sortKeys[key].push(val);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (resort && changed) sortEntities();
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortEntities() {
|
|
||||||
if (!sort) return;
|
|
||||||
|
|
||||||
sortedEntities = deduplicatedEntities.concat();
|
|
||||||
|
|
||||||
sortedEntities.sort((a, b) => {
|
|
||||||
if (!sortKeys[a]?.length || !sortKeys[b]?.length) {
|
|
||||||
if (Boolean(sortKeys[a]?.length) && !sortKeys[b]?.length) {
|
|
||||||
return -1;
|
|
||||||
} else if (!sortKeys[a]?.length && Boolean(sortKeys[b]?.length)) {
|
|
||||||
return 1;
|
|
||||||
} else {
|
|
||||||
return a.localeCompare(b);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return sortKeys[a][0].localeCompare(sortKeys[b][0], undefined, {
|
|
||||||
numeric: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Labelling
|
|
||||||
let labelListing: Readable<UpListing> = readable(undefined);
|
|
||||||
$: {
|
|
||||||
const addressesString = deduplicatedEntities
|
|
||||||
.map((addr) => `@${addr}`)
|
|
||||||
.join(" ");
|
|
||||||
|
|
||||||
labelListing = query(
|
|
||||||
`(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`,
|
|
||||||
).result;
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if ($labelListing) {
|
|
||||||
deduplicatedEntities.forEach((address) => {
|
|
||||||
addSortKeys(
|
|
||||||
address,
|
|
||||||
$labelListing.getObject(address).identify(),
|
|
||||||
false,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
sortEntities();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!sort) {
|
|
||||||
sortedEntities = entities;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Visibility
|
|
||||||
let visible: Set<string> = new Set();
|
|
||||||
let observer = new IntersectionObserver((intersections) => {
|
|
||||||
intersections.forEach((intersection) => {
|
|
||||||
const address = (intersection.target as HTMLElement).dataset["address"];
|
|
||||||
if (!address) {
|
|
||||||
console.warn("Intersected wrong element?");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (intersection.isIntersecting) {
|
|
||||||
visible.add(address);
|
|
||||||
}
|
|
||||||
visible = visible;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function observe(node: HTMLElement) {
|
|
||||||
observer.observe(node);
|
|
||||||
|
|
||||||
return {
|
|
||||||
destroy() {
|
|
||||||
observer.unobserve(node);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Adding
|
|
||||||
let addSelector: Selector | undefined;
|
|
||||||
let adding = false;
|
|
||||||
|
|
||||||
$: if (adding && addSelector) addSelector.focus();
|
|
||||||
|
|
||||||
function addEntity(ev: CustomEvent<SelectorValue>) {
|
|
||||||
dbg("Adding entity", ev.detail);
|
|
||||||
const addAddress = ev.detail?.t == "Address" ? ev.detail.c : undefined;
|
|
||||||
if (!addAddress) return;
|
|
||||||
|
|
||||||
dispatch("change", {
|
|
||||||
type: "entry-add",
|
|
||||||
address: addAddress,
|
|
||||||
} as WidgetChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeEntity(address: string) {
|
|
||||||
if (
|
|
||||||
confirm(
|
|
||||||
$i18n.t("Are you sure you want to remove this entry from members?"),
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
dbg("Removing entity", address);
|
|
||||||
dispatch("change", {
|
|
||||||
type: "entry-delete",
|
|
||||||
address,
|
|
||||||
} as WidgetChange);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="entitylist style-{style}"
|
|
||||||
class:has-thumbnails={thumbnails}
|
|
||||||
bind:clientWidth
|
|
||||||
>
|
|
||||||
{#if !sortedEntities.length}
|
|
||||||
<div class="message">
|
|
||||||
{$i18n.t("No entries.")}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="items">
|
|
||||||
{#each sortedEntities as entity (entity)}
|
|
||||||
<div
|
|
||||||
data-address={entity}
|
|
||||||
data-select-mode={select}
|
|
||||||
use:observe
|
|
||||||
class="item"
|
|
||||||
>
|
|
||||||
{#if visible.has(entity)}
|
|
||||||
{#if thumbnails}
|
|
||||||
<UpObjectCard
|
|
||||||
address={entity}
|
|
||||||
labels={sortKeys[entity]}
|
|
||||||
banner={false}
|
|
||||||
select={select === "add"}
|
|
||||||
on:resolved={(event) => {
|
|
||||||
addSortKeys(entity, event.detail, true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div class="icon">
|
|
||||||
<IconButton
|
|
||||||
name="trash"
|
|
||||||
color="#dc322f"
|
|
||||||
on:click={() => removeEntity(entity)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="object">
|
|
||||||
<UpObject
|
|
||||||
link
|
|
||||||
address={entity}
|
|
||||||
labels={sortKeys[entity]}
|
|
||||||
select={select === "add"}
|
|
||||||
on:resolved={(event) => {
|
|
||||||
addSortKeys(entity, event.detail, true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="icon">
|
|
||||||
<IconButton
|
|
||||||
name="trash"
|
|
||||||
color="#dc322f"
|
|
||||||
on:click={() => removeEntity(entity)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{:else}
|
|
||||||
<div class="skeleton" style="text-align: center">...</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{#if address}
|
|
||||||
<div class="add">
|
|
||||||
{#if adding}
|
|
||||||
<Selector
|
|
||||||
bind:this={addSelector}
|
|
||||||
placeholder={$i18n.t("Search database or paste an URL")}
|
|
||||||
types={["Address", "NewAddress"]}
|
|
||||||
on:input={addEntity}
|
|
||||||
on:focus={(ev) => {
|
|
||||||
if (!ev.detail) {
|
|
||||||
adding = false;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<IconButton
|
|
||||||
name="plus-circle"
|
|
||||||
outline
|
|
||||||
subdued
|
|
||||||
on:click={() => {
|
|
||||||
adding = true;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use "../../styles/colors";
|
|
||||||
|
|
||||||
.items {
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entitylist.has-thumbnails .items {
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.entitylist.style-grid .items) {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
align-items: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.entitylist.style-flex .items) {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.entitylist.style-list .items) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0.5em;
|
|
||||||
opacity: 0.66;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entitylist:not(.has-thumbnails) {
|
|
||||||
.item {
|
|
||||||
display: flex;
|
|
||||||
.object {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 0;
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.icon {
|
|
||||||
width: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.entitylist.has-thumbnails {
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.5em;
|
|
||||||
right: 0.5em;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .icon {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.add {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entitylist.style-grid .add {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,481 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import filesize from "filesize";
|
|
||||||
import { formatRelative, fromUnixTime, parseISO } from "date-fns";
|
|
||||||
import Ellipsis from "../utils/Ellipsis.svelte";
|
|
||||||
import UpObject from "../display/UpObject.svelte";
|
|
||||||
import { createEventDispatcher } from "svelte";
|
|
||||||
import type { AttributeUpdate, WidgetChange } from "../../types/base";
|
|
||||||
import type { UpEntry, UpListing } from "@upnd/upend";
|
|
||||||
import IconButton from "../utils/IconButton.svelte";
|
|
||||||
import Selector, {
|
|
||||||
type SelectorValue,
|
|
||||||
selectorValueAsValue,
|
|
||||||
} from "../utils/Selector.svelte";
|
|
||||||
import Editable from "../utils/Editable.svelte";
|
|
||||||
import { query } from "../../lib/entity";
|
|
||||||
import { type Readable, readable } from "svelte/store";
|
|
||||||
import { defaultEntitySort, entityValueSort } from "../../util/sort";
|
|
||||||
import { attributeLabels } from "../../util/labels";
|
|
||||||
import { formatDuration } from "../../util/fragments/time";
|
|
||||||
import { i18n } from "../../i18n";
|
|
||||||
import UpLink from "../display/UpLink.svelte";
|
|
||||||
import { ATTR_ADDED, ATTR_LABEL } from "@upnd/upend/constants";
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
|
|
||||||
export let columns: string | undefined = undefined;
|
|
||||||
export let header = true;
|
|
||||||
|
|
||||||
export let orderByValue = false;
|
|
||||||
export let columnWidths: string[] | undefined = undefined;
|
|
||||||
|
|
||||||
export let entries: UpEntry[];
|
|
||||||
export let attributes: string[] | undefined = undefined;
|
|
||||||
|
|
||||||
// Display
|
|
||||||
$: displayColumns = (columns || "entity, attribute, value")
|
|
||||||
.split(",")
|
|
||||||
.map((c) => c.trim());
|
|
||||||
|
|
||||||
const TIMESTAMP_COL = "timestamp";
|
|
||||||
const PROVENANCE_COL = "provenance";
|
|
||||||
const ENTITY_COL = "entity";
|
|
||||||
const ATTR_COL = "attribute";
|
|
||||||
const VALUE_COL = "value";
|
|
||||||
|
|
||||||
$: templateColumns = (
|
|
||||||
(displayColumns || []).map((column, idx) => {
|
|
||||||
if (columnWidths?.[idx]) return columnWidths[idx];
|
|
||||||
return "minmax(6em, auto)";
|
|
||||||
}) as string[]
|
|
||||||
)
|
|
||||||
.concat(["auto"])
|
|
||||||
.join(" ");
|
|
||||||
|
|
||||||
// Editing
|
|
||||||
let adding = false;
|
|
||||||
let addHover = false;
|
|
||||||
let addFocus = false;
|
|
||||||
let newAttrSelector: Selector;
|
|
||||||
let newEntryAttribute = "";
|
|
||||||
let newEntryValue: SelectorValue | undefined;
|
|
||||||
|
|
||||||
$: if (adding && newAttrSelector) newAttrSelector.focus();
|
|
||||||
$: if (!addFocus && !addHover) adding = false;
|
|
||||||
|
|
||||||
async function addEntry(attribute: string, value: SelectorValue) {
|
|
||||||
dispatch("change", {
|
|
||||||
type: "create",
|
|
||||||
attribute,
|
|
||||||
value: await selectorValueAsValue(value),
|
|
||||||
} as WidgetChange);
|
|
||||||
newEntryAttribute = "";
|
|
||||||
newEntryValue = undefined;
|
|
||||||
}
|
|
||||||
async function removeEntry(address: string) {
|
|
||||||
if (confirm($i18n.t("Are you sure you want to remove the property?"))) {
|
|
||||||
dispatch("change", { type: "delete", address } as WidgetChange);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
async function updateEntry(
|
|
||||||
address: string,
|
|
||||||
attribute: string,
|
|
||||||
value: SelectorValue,
|
|
||||||
) {
|
|
||||||
dispatch("change", {
|
|
||||||
type: "update",
|
|
||||||
address,
|
|
||||||
attribute,
|
|
||||||
value: await selectorValueAsValue(value),
|
|
||||||
} as AttributeUpdate);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Labelling
|
|
||||||
let labelListing: Readable<UpListing> = readable(undefined);
|
|
||||||
$: {
|
|
||||||
const addresses = [];
|
|
||||||
entries
|
|
||||||
.flatMap((e) =>
|
|
||||||
e.value.t === "Address" ? [e.entity, e.value.c] : [e.entity],
|
|
||||||
)
|
|
||||||
.forEach((addr) => {
|
|
||||||
if (!addresses.includes(addr)) {
|
|
||||||
addresses.push(addr);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const addressesString = addresses.map((addr) => `@${addr}`).join(" ");
|
|
||||||
|
|
||||||
labelListing = query(
|
|
||||||
`(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`,
|
|
||||||
).result;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sorting
|
|
||||||
let sortedEntries = entries;
|
|
||||||
|
|
||||||
let sortKeys: { [key: string]: string[] } = {};
|
|
||||||
function addSortKeys(key: string, vals: string[], resort: boolean) {
|
|
||||||
if (!sortKeys[key]) {
|
|
||||||
sortKeys[key] = [];
|
|
||||||
}
|
|
||||||
let changed = false;
|
|
||||||
vals.forEach((val) => {
|
|
||||||
if (!sortKeys[key].includes(val)) {
|
|
||||||
changed = true;
|
|
||||||
sortKeys[key].push(val);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (resort && changed) sortEntries();
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortEntries() {
|
|
||||||
sortedEntries = orderByValue
|
|
||||||
? entityValueSort(entries, Object.assign(sortKeys, $attributeLabels))
|
|
||||||
: defaultEntitySort(entries, Object.assign(sortKeys, $attributeLabels));
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if ($labelListing) {
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
addSortKeys(
|
|
||||||
entry.entity,
|
|
||||||
$labelListing.getObject(entry.entity).identify(),
|
|
||||||
false,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (entry.value.t === "Address") {
|
|
||||||
addSortKeys(
|
|
||||||
entry.value.c,
|
|
||||||
$labelListing.getObject(String(entry.value.c)).identify(),
|
|
||||||
false,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
sortEntries();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
entries.forEach((entry) => {
|
|
||||||
addSortKeys(
|
|
||||||
entry.entity,
|
|
||||||
entry.listing.getObject(entry.entity).identify(),
|
|
||||||
false,
|
|
||||||
);
|
|
||||||
if (entry.value.t === "Address") {
|
|
||||||
addSortKeys(
|
|
||||||
entry.value.c,
|
|
||||||
entry.listing.getObject(String(entry.value.c)).identify(),
|
|
||||||
false,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
sortEntries();
|
|
||||||
|
|
||||||
// Visibility
|
|
||||||
let visible: Set<string> = new Set();
|
|
||||||
let observer = new IntersectionObserver((intersections) => {
|
|
||||||
intersections.forEach((intersection) => {
|
|
||||||
const address = (intersection.target as HTMLElement).dataset["address"];
|
|
||||||
if (!address) {
|
|
||||||
console.warn("Intersected wrong element?");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (intersection.isIntersecting) {
|
|
||||||
visible.add(address);
|
|
||||||
}
|
|
||||||
visible = visible;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function observe(node: HTMLElement) {
|
|
||||||
observer.observe(node);
|
|
||||||
|
|
||||||
return {
|
|
||||||
destroy() {
|
|
||||||
observer.unobserve(node);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Formatting & Display
|
|
||||||
const COLUMN_LABELS: { [key: string]: string } = {
|
|
||||||
timestamp: $i18n.t("Added at"),
|
|
||||||
provenance: $i18n.t("Provenance"),
|
|
||||||
entity: $i18n.t("Entity"),
|
|
||||||
attribute: $i18n.t("Attribute"),
|
|
||||||
value: $i18n.t("Value"),
|
|
||||||
};
|
|
||||||
|
|
||||||
function formatValue(value: string | number, attribute: string): string {
|
|
||||||
try {
|
|
||||||
switch (attribute) {
|
|
||||||
case "FILE_SIZE":
|
|
||||||
return filesize(parseInt(String(value), 10), { base: 2 });
|
|
||||||
case ATTR_ADDED:
|
|
||||||
case "LAST_VISITED":
|
|
||||||
return formatRelative(
|
|
||||||
fromUnixTime(parseInt(String(value), 10)),
|
|
||||||
new Date(),
|
|
||||||
);
|
|
||||||
case "NUM_VISITED":
|
|
||||||
return `${value} times`;
|
|
||||||
case "MEDIA_DURATION":
|
|
||||||
return formatDuration(parseInt(String(value), 10));
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// noop.
|
|
||||||
}
|
|
||||||
return String(value);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Unused attributes
|
|
||||||
let unusedAttributes = [];
|
|
||||||
|
|
||||||
$: (async () => {
|
|
||||||
unusedAttributes = await Promise.all(
|
|
||||||
(attributes || []).filter(
|
|
||||||
(attr) => !entries.some((entry) => entry.attribute === attr),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="entry-list" style:--template-columns={templateColumns}>
|
|
||||||
{#if header}
|
|
||||||
<header>
|
|
||||||
{#each displayColumns as column}
|
|
||||||
<div class="label">
|
|
||||||
{COLUMN_LABELS[column] || $attributeLabels[column] || column}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
<div class="attr-action"></div>
|
|
||||||
</header>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#each sortedEntries as entry (entry.address)}
|
|
||||||
{#if visible.has(entry.address)}
|
|
||||||
{#each displayColumns as column}
|
|
||||||
{#if column == TIMESTAMP_COL}
|
|
||||||
<div class="cell" title={entry.timestamp}>
|
|
||||||
{formatRelative(parseISO(entry.timestamp), new Date())}
|
|
||||||
</div>
|
|
||||||
{:else if column == PROVENANCE_COL}
|
|
||||||
<div class="cell">{entry.provenance}</div>
|
|
||||||
{:else if column == ENTITY_COL}
|
|
||||||
<div class="cell entity mark-entity" data-address={entry.entity}>
|
|
||||||
<UpObject
|
|
||||||
link
|
|
||||||
labels={$labelListing
|
|
||||||
?.getObject(String(entry.entity))
|
|
||||||
?.identify() || []}
|
|
||||||
address={entry.entity}
|
|
||||||
on:resolved={(event) => {
|
|
||||||
addSortKeys(entry.entity, event.detail, true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else if column == ATTR_COL}
|
|
||||||
<div
|
|
||||||
class="cell mark-attribute"
|
|
||||||
class:formatted={Boolean(
|
|
||||||
Object.keys($attributeLabels).includes(entry.attribute),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<UpLink to={{ attribute: entry.attribute }}>
|
|
||||||
<Ellipsis
|
|
||||||
value={$attributeLabels[entry.attribute] || entry.attribute}
|
|
||||||
title={$attributeLabels[entry.attribute]
|
|
||||||
? `${$attributeLabels[entry.attribute]} (${entry.attribute})`
|
|
||||||
: entry.attribute}
|
|
||||||
/>
|
|
||||||
</UpLink>
|
|
||||||
</div>
|
|
||||||
{:else if column == VALUE_COL}
|
|
||||||
<div
|
|
||||||
class="cell value mark-value"
|
|
||||||
data-address={entry.value.t === "Address"
|
|
||||||
? entry.value.c
|
|
||||||
: undefined}
|
|
||||||
>
|
|
||||||
<Editable
|
|
||||||
value={entry.value}
|
|
||||||
on:edit={(ev) =>
|
|
||||||
updateEntry(entry.address, entry.attribute, ev.detail)}
|
|
||||||
>
|
|
||||||
{#if entry.value.t === "Address"}
|
|
||||||
<UpObject
|
|
||||||
link
|
|
||||||
address={String(entry.value.c)}
|
|
||||||
labels={$labelListing
|
|
||||||
?.getObject(String(entry.value.c))
|
|
||||||
?.identify() || []}
|
|
||||||
on:resolved={(event) => {
|
|
||||||
addSortKeys(String(entry.value.c), event.detail, true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class:formatted={Boolean(
|
|
||||||
formatValue(entry.value.c, entry.attribute),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<Ellipsis
|
|
||||||
value={formatValue(entry.value.c, entry.attribute) ||
|
|
||||||
String(entry.value.c)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</Editable>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div>?</div>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
<div class="attr-action">
|
|
||||||
<IconButton
|
|
||||||
plain
|
|
||||||
subdued
|
|
||||||
name="x-circle"
|
|
||||||
color="#dc322f"
|
|
||||||
on:click={() => removeEntry(entry.address)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="skeleton" data-address={entry.address} use:observe>...</div>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#each unusedAttributes as attribute}
|
|
||||||
{#each displayColumns as column}
|
|
||||||
{#if column == ATTR_COL}
|
|
||||||
<div
|
|
||||||
class="cell mark-attribute"
|
|
||||||
class:formatted={Boolean(
|
|
||||||
Object.keys($attributeLabels).includes(attribute),
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<UpLink to={{ attribute }}>
|
|
||||||
<Ellipsis
|
|
||||||
value={$attributeLabels[attribute] || attribute}
|
|
||||||
title={$attributeLabels[attribute]
|
|
||||||
? `${$attributeLabels[attribute]} (${attribute})`
|
|
||||||
: attribute}
|
|
||||||
/>
|
|
||||||
</UpLink>
|
|
||||||
</div>
|
|
||||||
{:else if column == VALUE_COL}
|
|
||||||
<div class="cell">
|
|
||||||
<Editable on:edit={(ev) => addEntry(attribute, ev.detail)}>
|
|
||||||
<span class="unset">{$i18n.t("(unset)")}</span>
|
|
||||||
</Editable>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="cell"></div>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
<div class="attr-action"></div>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#if !attributes?.length}
|
|
||||||
{#if adding}
|
|
||||||
<div
|
|
||||||
class="add-row"
|
|
||||||
on:mouseenter={() => (addHover = true)}
|
|
||||||
on:mouseleave={() => (addHover = false)}
|
|
||||||
>
|
|
||||||
{#each displayColumns as column}
|
|
||||||
{#if column == ATTR_COL}
|
|
||||||
<div class="cell mark-attribute">
|
|
||||||
<Selector
|
|
||||||
types={["Attribute", "NewAttribute"]}
|
|
||||||
on:input={(ev) => (newEntryAttribute = ev.detail.name)}
|
|
||||||
on:focus={(ev) => (addFocus = ev.detail)}
|
|
||||||
keepFocusOnSet
|
|
||||||
bind:this={newAttrSelector}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else if column === VALUE_COL}
|
|
||||||
<div class="cell mark-value">
|
|
||||||
<Selector
|
|
||||||
on:input={(ev) => (newEntryValue = ev.detail)}
|
|
||||||
on:focus={(ev) => (addFocus = ev.detail)}
|
|
||||||
keepFocusOnSet
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="cell"></div>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
<div class="attr-action">
|
|
||||||
<IconButton
|
|
||||||
name="save"
|
|
||||||
on:click={() => addEntry(newEntryAttribute, newEntryValue)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="add-button">
|
|
||||||
<IconButton
|
|
||||||
outline
|
|
||||||
subdued
|
|
||||||
name="plus-circle"
|
|
||||||
on:click={() => (adding = true)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.entry-list {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: var(--template-columns);
|
|
||||||
gap: 0.05rem 0.5rem;
|
|
||||||
|
|
||||||
header {
|
|
||||||
display: contents;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell {
|
|
||||||
font-family: var(--monospace-font);
|
|
||||||
line-break: anywhere;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 2px;
|
|
||||||
|
|
||||||
&.formatted,
|
|
||||||
.formatted {
|
|
||||||
font-family: var(--default-font);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.attr-action {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-row {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-button {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unset {
|
|
||||||
opacity: 0.66;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1 +0,0 @@
|
||||||
/// <reference types="svelte" />
|
|
|
@ -0,0 +1,160 @@
|
||||||
|
<script context="module" lang="ts">
|
||||||
|
import mitt from 'mitt';
|
||||||
|
|
||||||
|
export type AddEvents = {
|
||||||
|
files: File[];
|
||||||
|
urls: string[];
|
||||||
|
};
|
||||||
|
export const addEmitter = mitt<AddEvents>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Icon from './utils/Icon.svelte';
|
||||||
|
import IconButton from './utils/IconButton.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
let files: File[] = [];
|
||||||
|
let URLs: string[] = [];
|
||||||
|
let uploading = false;
|
||||||
|
|
||||||
|
$: visible = files.length + URLs.length > 0;
|
||||||
|
|
||||||
|
addEmitter.on('files', (ev) => {
|
||||||
|
ev.forEach((file) => {
|
||||||
|
if (!files.map((f) => `${f.name}${f.size}`).includes(`${file.name}${file.size}`)) {
|
||||||
|
files.push(file);
|
||||||
|
}
|
||||||
|
files = files;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function upload() {
|
||||||
|
uploading = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const addresses = await Promise.all(files.map(async (file) => api.putBlob(file)));
|
||||||
|
|
||||||
|
goto(`/browse/${addresses.join(',')}`);
|
||||||
|
} catch (error) {
|
||||||
|
alert(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
uploading = false;
|
||||||
|
reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
if (!uploading) {
|
||||||
|
files = [];
|
||||||
|
URLs = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:body on:keydown={(ev) => ev.key === 'Escape' && reset()} />
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
||||||
|
<div class="addmodal-container" class:visible class:uploading on:click={reset}>
|
||||||
|
<div class="addmodal" on:click|stopPropagation>
|
||||||
|
<div class="files">
|
||||||
|
{#each files as file}
|
||||||
|
<div class="file">
|
||||||
|
{#if file.type.startsWith('image')}
|
||||||
|
<img src={URL.createObjectURL(file)} alt="To be uploaded." />
|
||||||
|
{:else}
|
||||||
|
<div class="icon">
|
||||||
|
<Icon name="file" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="label">{file.name}</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<IconButton name="upload" on:click={upload} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.addmodal-container {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
color: var(--foreground);
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
&.visible {
|
||||||
|
display: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.uploading {
|
||||||
|
cursor: progress;
|
||||||
|
|
||||||
|
.addmodal {
|
||||||
|
filter: brightness(0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addmodal {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
background: var(--background);
|
||||||
|
|
||||||
|
color: var(--foreground);
|
||||||
|
border: solid 2px var(--foreground);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1em;
|
||||||
|
|
||||||
|
padding: 0.5em;
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 66vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
border: 1px solid var(--foreground);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--background-lighter);
|
||||||
|
padding: 0.5em;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 12em;
|
||||||
|
max-width: 12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 48px;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,177 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher, onMount, setContext, tick } from 'svelte';
|
||||||
|
import IconButton from './utils/IconButton.svelte';
|
||||||
|
import { selected } from './EntitySelect.svelte';
|
||||||
|
import type { BrowseContext } from '../util/browse';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import { i18n } from '../i18n';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string | undefined = undefined;
|
||||||
|
export let index: number;
|
||||||
|
export let only: boolean;
|
||||||
|
export let background = 'var(--background-lighter)';
|
||||||
|
export let forceDetail = false;
|
||||||
|
let shifted = false;
|
||||||
|
let key = Math.random();
|
||||||
|
|
||||||
|
let detail = only || forceDetail;
|
||||||
|
let detailChanged = false;
|
||||||
|
$: if (!detailChanged) detail = only || forceDetail;
|
||||||
|
$: if (detailChanged) tick().then(() => dispatch('detail', detail));
|
||||||
|
|
||||||
|
let indexStore = writable(index);
|
||||||
|
$: $indexStore = index;
|
||||||
|
|
||||||
|
let addressesStore = writable<string[]>([]);
|
||||||
|
$: $addressesStore = $page.params.addresses?.split(',') || [];
|
||||||
|
|
||||||
|
setContext('browse', {
|
||||||
|
index: indexStore,
|
||||||
|
addresses: addressesStore
|
||||||
|
} as BrowseContext);
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
// Required to make detail mode detection work in Browse
|
||||||
|
dispatch('detail', detail);
|
||||||
|
});
|
||||||
|
$: if ($selected.length) {
|
||||||
|
detail = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function visit() {
|
||||||
|
window.open(`/browse/${address}`, '_blank');
|
||||||
|
}
|
||||||
|
|
||||||
|
let width = 460;
|
||||||
|
if (window.innerWidth < 600) {
|
||||||
|
width = window.innerWidth - 6;
|
||||||
|
}
|
||||||
|
function drag(ev: MouseEvent) {
|
||||||
|
const startWidth = width;
|
||||||
|
const startX = ev.screenX;
|
||||||
|
|
||||||
|
function onMouseMove(ev: MouseEvent) {
|
||||||
|
width = startWidth + (ev.screenX - startX);
|
||||||
|
width = width < 300 ? 300 : width;
|
||||||
|
}
|
||||||
|
function onMouseUp(_: MouseEvent) {
|
||||||
|
window.removeEventListener('mousemove', onMouseMove);
|
||||||
|
window.removeEventListener('mouseup', onMouseUp);
|
||||||
|
}
|
||||||
|
window.addEventListener('mousemove', onMouseMove);
|
||||||
|
window.addEventListener('mouseup', onMouseUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
function reload() {
|
||||||
|
key = Math.random();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<div
|
||||||
|
class="browse-column"
|
||||||
|
class:detail
|
||||||
|
style="--background-color: {background}"
|
||||||
|
on:mousemove={(ev) => (shifted = ev.shiftKey)}
|
||||||
|
>
|
||||||
|
<div class="view" style="--width: {width}px">
|
||||||
|
<header>
|
||||||
|
{#if address}
|
||||||
|
<IconButton name="link" on:click={() => visit()} disabled={only}>
|
||||||
|
{$i18n.t('Detach')}
|
||||||
|
</IconButton>
|
||||||
|
{/if}
|
||||||
|
{#if !forceDetail}
|
||||||
|
<IconButton
|
||||||
|
name={detail ? 'zoom-out' : 'zoom-in'}
|
||||||
|
on:click={() => {
|
||||||
|
detail = !detail;
|
||||||
|
detailChanged = true;
|
||||||
|
}}
|
||||||
|
active={detail}
|
||||||
|
>
|
||||||
|
{$i18n.t('Detail')}
|
||||||
|
</IconButton>
|
||||||
|
{:else}
|
||||||
|
<div class="noop"></div>
|
||||||
|
{/if}
|
||||||
|
{#if address}
|
||||||
|
<IconButton name="intersect" on:click={() => dispatch('combine', address)}>
|
||||||
|
{$i18n.t('Combine')}
|
||||||
|
</IconButton>
|
||||||
|
{/if}
|
||||||
|
{#if !shifted}
|
||||||
|
<IconButton name="x-circle" on:click={() => dispatch('close')} disabled={only}>
|
||||||
|
{$i18n.t('Close')}
|
||||||
|
</IconButton>
|
||||||
|
{:else}
|
||||||
|
<IconButton name="refresh" on:click={() => reload()}>
|
||||||
|
{$i18n.t('Reload')}
|
||||||
|
</IconButton>
|
||||||
|
{/if}
|
||||||
|
</header>
|
||||||
|
{#key key}
|
||||||
|
<slot {detail} />
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
<div class="resizeHandle" on:mousedown|preventDefault={drag} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.browse-column {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browse-column.detail {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.view {
|
||||||
|
@media screen and (min-width: 600px) {
|
||||||
|
min-width: 85vw;
|
||||||
|
max-width: min(85vw, 1920px);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
min-width: var(--width);
|
||||||
|
max-width: var(--width);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
background: var(--background-color);
|
||||||
|
color: var(--foreground-lighter);
|
||||||
|
border: 1px solid var(--foreground-lightest);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
// transition: min-width 0.2s, max-width 0.2s;
|
||||||
|
// TODO - container has nowhere to scroll, breaking `detail` scroll
|
||||||
|
|
||||||
|
header {
|
||||||
|
font-size: 20px;
|
||||||
|
position: relative;
|
||||||
|
min-height: 1em;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizeHandle {
|
||||||
|
cursor: ew-resize;
|
||||||
|
height: 100%;
|
||||||
|
width: 0.5rem;
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,163 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { i18n } from '../i18n';
|
||||||
|
import EntitySetEditor from './EntitySetEditor.svelte';
|
||||||
|
import EntryView from './EntryView.svelte';
|
||||||
|
import Icon from './utils/Icon.svelte';
|
||||||
|
import EntityList from './widgets/EntityList.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { Query } from '@upnd/upend';
|
||||||
|
import { ATTR_IN } from '@upnd/upend/constants';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { Any } from '@upnd/upend/query';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let spec: string;
|
||||||
|
|
||||||
|
const individualSpecs = spec.split(/(?=[+=-])/);
|
||||||
|
let includedGroups = individualSpecs.filter((s) => s.startsWith('+')).map((s) => s.slice(1));
|
||||||
|
let requiredGroups = individualSpecs.filter((s) => s.startsWith('=')).map((s) => s.slice(1));
|
||||||
|
let excludedGroups = individualSpecs.filter((s) => s.startsWith('-')).map((s) => s.slice(1));
|
||||||
|
|
||||||
|
$: if (
|
||||||
|
includedGroups.length === 0 &&
|
||||||
|
requiredGroups.length === 0 &&
|
||||||
|
excludedGroups.length === 0
|
||||||
|
) {
|
||||||
|
dispatch('close');
|
||||||
|
}
|
||||||
|
|
||||||
|
const combinedWidgets = [
|
||||||
|
{
|
||||||
|
name: 'List',
|
||||||
|
icon: 'list-check',
|
||||||
|
components: ({ entities }) => [
|
||||||
|
{
|
||||||
|
component: EntityList,
|
||||||
|
props: {
|
||||||
|
entities,
|
||||||
|
thumbnails: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'EntityList',
|
||||||
|
icon: 'image',
|
||||||
|
components: ({ entities }) => [
|
||||||
|
{
|
||||||
|
component: EntityList,
|
||||||
|
props: {
|
||||||
|
entities,
|
||||||
|
thumbnails: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
let resultEntities = [];
|
||||||
|
async function updateResultEntities(
|
||||||
|
includedGroups: string[],
|
||||||
|
requiredGroups: string[],
|
||||||
|
excludedGroups: string[]
|
||||||
|
) {
|
||||||
|
const included = includedGroups.length
|
||||||
|
? (
|
||||||
|
await api.query(
|
||||||
|
Query.matches(
|
||||||
|
Any,
|
||||||
|
ATTR_IN,
|
||||||
|
includedGroups.map((g) => `@${g}`)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
).objects
|
||||||
|
: [];
|
||||||
|
const required = requiredGroups.length
|
||||||
|
? (
|
||||||
|
await api.query(
|
||||||
|
Query.matches(
|
||||||
|
Any,
|
||||||
|
ATTR_IN,
|
||||||
|
requiredGroups.map((g) => `@${g}`)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
).objects
|
||||||
|
: [];
|
||||||
|
const excluded = excludedGroups.length
|
||||||
|
? (
|
||||||
|
await api.query(
|
||||||
|
Query.matches(
|
||||||
|
Any,
|
||||||
|
ATTR_IN,
|
||||||
|
excludedGroups.map((g) => `@${g}`)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
).objects
|
||||||
|
: [];
|
||||||
|
resultEntities = (Object.keys(included).length ? Object.keys(included) : Object.keys(required))
|
||||||
|
.filter((e) => !requiredGroups.length || Object.keys(required).includes(e))
|
||||||
|
.filter((e) => !Object.keys(excluded).includes(e));
|
||||||
|
}
|
||||||
|
$: updateResultEntities(includedGroups, requiredGroups, excludedGroups);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="view" data-address-multi={resultEntities}>
|
||||||
|
<h2>
|
||||||
|
<Icon plain name="intersect" />
|
||||||
|
{$i18n.t('Combine')}
|
||||||
|
</h2>
|
||||||
|
<div class="controls">
|
||||||
|
<EntitySetEditor
|
||||||
|
entities={includedGroups}
|
||||||
|
header={$i18n.t('Include')}
|
||||||
|
confirmRemoveMessage={null}
|
||||||
|
on:add={(ev) => (includedGroups = [...includedGroups, ev.detail])}
|
||||||
|
on:remove={(ev) => (includedGroups = includedGroups.filter((e) => e !== ev.detail))}
|
||||||
|
/>
|
||||||
|
<EntitySetEditor
|
||||||
|
entities={requiredGroups}
|
||||||
|
header={$i18n.t('Require')}
|
||||||
|
confirmRemoveMessage={null}
|
||||||
|
on:add={(ev) => (requiredGroups = [...requiredGroups, ev.detail])}
|
||||||
|
on:remove={(ev) => (requiredGroups = requiredGroups.filter((e) => e !== ev.detail))}
|
||||||
|
/>
|
||||||
|
<EntitySetEditor
|
||||||
|
entities={excludedGroups}
|
||||||
|
header={$i18n.t('Exclude')}
|
||||||
|
confirmRemoveMessage={null}
|
||||||
|
on:add={(ev) => (excludedGroups = [...excludedGroups, ev.detail])}
|
||||||
|
on:remove={(ev) => (excludedGroups = excludedGroups.filter((e) => e !== ev.detail))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="entities">
|
||||||
|
<EntryView
|
||||||
|
title={$i18n.t('Matching entities')}
|
||||||
|
entities={resultEntities}
|
||||||
|
widgets={combinedWidgets}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.view {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: -0.66em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entities {
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,174 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { ATTR_IN, ATTR_LABEL } from '@upnd/upend/constants';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { i18n } from '../i18n';
|
||||||
|
import Spinner from './utils/Spinner.svelte';
|
||||||
|
import UpObject from './display/UpObject.svelte';
|
||||||
|
|
||||||
|
const groups = (async () => {
|
||||||
|
const data = await api.query(`(matches ? "${ATTR_IN}" ?)`);
|
||||||
|
|
||||||
|
const addresses = data.entries
|
||||||
|
.filter((e) => e.value.t === 'Address')
|
||||||
|
.map((e) => e.value.c) as string[];
|
||||||
|
|
||||||
|
const sortedAddresses = [...new Set(addresses)]
|
||||||
|
.map((address) => ({
|
||||||
|
address,
|
||||||
|
count: addresses.filter((a) => a === address).length
|
||||||
|
}))
|
||||||
|
.sort((a, b) => b.count - a.count);
|
||||||
|
|
||||||
|
const addressesString = sortedAddresses.map(({ address }) => `@${address}`).join(' ');
|
||||||
|
const labels = (
|
||||||
|
await api.query(`(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`)
|
||||||
|
).entries.filter((e) => e.value.t === 'String');
|
||||||
|
|
||||||
|
const display = sortedAddresses.map(({ address, count }) => ({
|
||||||
|
address,
|
||||||
|
labels: labels
|
||||||
|
.filter((e) => e.entity === address)
|
||||||
|
.map((e) => e.value.c)
|
||||||
|
.sort() as string[],
|
||||||
|
count
|
||||||
|
}));
|
||||||
|
|
||||||
|
display
|
||||||
|
.sort((a, b) => (a.labels[0] || '').localeCompare(b.labels[0] || ''))
|
||||||
|
.sort((a, b) => b.count - a.count);
|
||||||
|
|
||||||
|
const labelsToGroups = new Map<string, string[]>();
|
||||||
|
labels.forEach((e) => {
|
||||||
|
const groups = labelsToGroups.get(e.value.c as string) || [];
|
||||||
|
if (!groups.includes(e.entity)) {
|
||||||
|
groups.push(e.entity);
|
||||||
|
}
|
||||||
|
labelsToGroups.set(e.value.c as string, groups);
|
||||||
|
});
|
||||||
|
const duplicates = [...labelsToGroups.entries()]
|
||||||
|
.filter(([_, groups]) => groups.length > 1)
|
||||||
|
.map(([label, groups]) => ({ label, groups }));
|
||||||
|
|
||||||
|
return {
|
||||||
|
groups: display,
|
||||||
|
total: sortedAddresses.length,
|
||||||
|
duplicateGroups: duplicates
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
let clientWidth: number;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="groups" bind:clientWidth class:small={clientWidth < 600}>
|
||||||
|
<h2>{$i18n.t('Groups')}</h2>
|
||||||
|
<div class="main">
|
||||||
|
{#await groups}
|
||||||
|
<Spinner centered />
|
||||||
|
{:then data}
|
||||||
|
<ul>
|
||||||
|
{#each data.groups as group}
|
||||||
|
<li class="group" data-address={group.address}>
|
||||||
|
<UpObject link address={group.address} labels={group.labels} />
|
||||||
|
<div class="count">{group.count}</div>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li>No groups?</li>
|
||||||
|
{/each}
|
||||||
|
{#if data.groups && data.total > data.groups.length}
|
||||||
|
<li>+ {data.total - data.groups.length}...</li>
|
||||||
|
{/if}
|
||||||
|
</ul>
|
||||||
|
{#if data.duplicateGroups.length > 0}
|
||||||
|
<h3>{$i18n.t('Duplicate groups')}</h3>
|
||||||
|
<ul class="duplicate">
|
||||||
|
{#each data.duplicateGroups as { label, groups }}
|
||||||
|
<li class="duplicate-group">
|
||||||
|
<div class="label">{label}</div>
|
||||||
|
<ul>
|
||||||
|
{#each groups as group}
|
||||||
|
<li>
|
||||||
|
<UpObject link address={group} backpath={2} />
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use '../styles/colors';
|
||||||
|
|
||||||
|
.groups {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
overflow: hidden auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: -0.66em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5em;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.66em;
|
||||||
|
margin-left: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duplicate {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.duplicate-group {
|
||||||
|
flex-basis: 49%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--foreground);
|
||||||
|
padding: 0.5rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.groups.small {
|
||||||
|
ul {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,585 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import EntryView, { type Widget } from './EntryView.svelte';
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import UpObject from './display/UpObject.svelte';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { derived, type Readable } from 'svelte/store';
|
||||||
|
import { Query, type UpEntry } from '@upnd/upend';
|
||||||
|
import Spinner from './utils/Spinner.svelte';
|
||||||
|
import NotesEditor from './utils/NotesEditor.svelte';
|
||||||
|
import type { WidgetChange } from '../types/base';
|
||||||
|
import type { Address, EntityInfo } from '@upnd/upend/types';
|
||||||
|
import IconButton from './utils/IconButton.svelte';
|
||||||
|
import BlobViewer from './display/BlobViewer.svelte';
|
||||||
|
import { i18n } from '../i18n';
|
||||||
|
import EntryList from './widgets/EntryList.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import EntityList from './widgets/EntityList.svelte';
|
||||||
|
import { ATTR_IN, ATTR_KEY, ATTR_LABEL, ATTR_OF } from '@upnd/upend/constants';
|
||||||
|
import InspectGroups from './InspectGroups.svelte';
|
||||||
|
import InspectTypeEditor from './InspectTypeEditor.svelte';
|
||||||
|
import LabelBorder from './utils/LabelBorder.svelte';
|
||||||
|
import { debug } from 'debug';
|
||||||
|
import { Any } from '@upnd/upend/query';
|
||||||
|
|
||||||
|
const dbg = debug('kestrel:Inspect');
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
export let detail: boolean;
|
||||||
|
let showAsEntries = false;
|
||||||
|
let highlightedType: string | undefined;
|
||||||
|
|
||||||
|
let blobHandled = false;
|
||||||
|
|
||||||
|
$: ({ entity, entityInfo, error, revalidate } = useEntity(address));
|
||||||
|
|
||||||
|
$: allTypes = derived(
|
||||||
|
entityInfo,
|
||||||
|
($entityInfo, set) => {
|
||||||
|
getAllTypes($entityInfo).then((allTypes) => {
|
||||||
|
set(allTypes);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{}
|
||||||
|
) as Readable<{
|
||||||
|
[key: string]: {
|
||||||
|
labels: string[];
|
||||||
|
attributes: string[];
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
$: sortedTypes = Object.entries($allTypes)
|
||||||
|
.sort(([a, _], [b, __]) => a.localeCompare(b))
|
||||||
|
.sort(([_, a], [__, b]) => a.attributes.length - b.attributes.length);
|
||||||
|
|
||||||
|
async function getAllTypes(entityInfo: EntityInfo) {
|
||||||
|
const allTypes = {};
|
||||||
|
|
||||||
|
if (!entityInfo) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
const typeAddresses: string[] = [
|
||||||
|
await api.getAddress(entityInfo.t),
|
||||||
|
...($entity?.attr[ATTR_IN] || []).map((e) => e.value.c as string)
|
||||||
|
];
|
||||||
|
const typeAddressesIn = typeAddresses.map((addr) => `@${addr}`).join(' ');
|
||||||
|
|
||||||
|
const labelsQuery = await api.query(`(matches (in ${typeAddressesIn}) "${ATTR_LABEL}" ?)`);
|
||||||
|
|
||||||
|
typeAddresses.forEach((address) => {
|
||||||
|
let labels = labelsQuery.getObject(address).identify();
|
||||||
|
|
||||||
|
let typeLabel: string | undefined;
|
||||||
|
if (typeLabel) {
|
||||||
|
labels.unshift(typeLabel);
|
||||||
|
}
|
||||||
|
|
||||||
|
allTypes[address] = {
|
||||||
|
labels,
|
||||||
|
attributes: []
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const attributes = await api.query(`(matches ? "${ATTR_OF}" (in ${typeAddressesIn}))`);
|
||||||
|
await Promise.all(
|
||||||
|
typeAddresses.map(async (address) => {
|
||||||
|
allTypes[address].attributes = (
|
||||||
|
await Promise.all(
|
||||||
|
(attributes.getObject(address).attr[`~${ATTR_OF}`] || []).map(async (e) => {
|
||||||
|
try {
|
||||||
|
const { t, c } = await api.addressToComponents(e.entity);
|
||||||
|
if (t == 'Attribute') {
|
||||||
|
return c;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
).filter(Boolean);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = {};
|
||||||
|
Object.keys(allTypes).forEach((addr) => {
|
||||||
|
if (allTypes[addr].attributes.length > 0) {
|
||||||
|
result[addr] = allTypes[addr];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
let untypedProperties = [] as UpEntry[];
|
||||||
|
let untypedLinks = [] as UpEntry[];
|
||||||
|
|
||||||
|
$: {
|
||||||
|
untypedProperties = [];
|
||||||
|
untypedLinks = [];
|
||||||
|
|
||||||
|
($entity?.attributes || []).forEach((entry) => {
|
||||||
|
const entryTypes = Object.entries($allTypes || {}).filter(([_, t]) =>
|
||||||
|
t.attributes.includes(entry.attribute)
|
||||||
|
);
|
||||||
|
if (entryTypes.length === 0) {
|
||||||
|
if (entry.value.t === 'Address') {
|
||||||
|
untypedLinks.push(entry);
|
||||||
|
} else {
|
||||||
|
untypedProperties.push(entry);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
untypedProperties = untypedProperties;
|
||||||
|
untypedLinks = untypedLinks;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: filteredUntypedProperties = untypedProperties.filter(
|
||||||
|
(entry) =>
|
||||||
|
![
|
||||||
|
ATTR_LABEL,
|
||||||
|
ATTR_IN,
|
||||||
|
ATTR_KEY,
|
||||||
|
'NOTE',
|
||||||
|
'LAST_VISITED',
|
||||||
|
'NUM_VISITED',
|
||||||
|
'LAST_ATTRIBUTE_WIDGET'
|
||||||
|
].includes(entry.attribute)
|
||||||
|
);
|
||||||
|
|
||||||
|
$: currentUntypedProperties = filteredUntypedProperties;
|
||||||
|
|
||||||
|
$: filteredUntypedLinks = untypedLinks.filter(
|
||||||
|
(entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute)
|
||||||
|
);
|
||||||
|
|
||||||
|
$: currentUntypedLinks = filteredUntypedLinks;
|
||||||
|
|
||||||
|
$: currentBacklinks =
|
||||||
|
$entity?.backlinks.filter((entry) => ![ATTR_IN, ATTR_OF].includes(entry.attribute)) || [];
|
||||||
|
|
||||||
|
$: tagged = $entity?.attr[`~${ATTR_IN}`] || [];
|
||||||
|
|
||||||
|
let attributesUsed: UpEntry[] = [];
|
||||||
|
$: {
|
||||||
|
if ($entityInfo?.t === 'Attribute') {
|
||||||
|
api
|
||||||
|
.query(`(matches ? "${$entityInfo.c}" ?)`)
|
||||||
|
.then((result) => (attributesUsed = result.entries));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let correctlyTagged: Address[] | undefined;
|
||||||
|
let incorrectlyTagged: Address[] | undefined;
|
||||||
|
$: {
|
||||||
|
if ($entity?.attr[`~${ATTR_OF}`]) {
|
||||||
|
fetchCorrectlyTagged();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchCorrectlyTagged() {
|
||||||
|
const attributes = (
|
||||||
|
await Promise.all($entity?.attr[`~${ATTR_OF}`].map((e) => api.addressToComponents(e.entity)))
|
||||||
|
)
|
||||||
|
.filter((ac) => ac.t == 'Attribute')
|
||||||
|
.map((ac) => ac.c);
|
||||||
|
|
||||||
|
const attributeQuery = await api.query(
|
||||||
|
Query.matches(
|
||||||
|
tagged.map((t) => `@${t.entity}`),
|
||||||
|
attributes,
|
||||||
|
Any
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
correctlyTagged = [];
|
||||||
|
incorrectlyTagged = [];
|
||||||
|
|
||||||
|
for (const element of tagged) {
|
||||||
|
const entity = attributeQuery.getObject(element.entity);
|
||||||
|
if (attributes.every((attr) => entity.attr[attr])) {
|
||||||
|
correctlyTagged = [...correctlyTagged, element.entity];
|
||||||
|
} else {
|
||||||
|
incorrectlyTagged = [...incorrectlyTagged, element.entity];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onChange(ev: CustomEvent<WidgetChange>) {
|
||||||
|
dbg('onChange', ev.detail);
|
||||||
|
const change = ev.detail;
|
||||||
|
switch (change.type) {
|
||||||
|
case 'create':
|
||||||
|
await api.putEntry({
|
||||||
|
entity: address,
|
||||||
|
attribute: change.attribute,
|
||||||
|
value: change.value
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'delete':
|
||||||
|
await api.deleteEntry(change.address);
|
||||||
|
break;
|
||||||
|
case 'update':
|
||||||
|
await api.putEntityAttribute(address, change.attribute, change.value);
|
||||||
|
break;
|
||||||
|
case 'entry-add':
|
||||||
|
await api.putEntry({
|
||||||
|
entity: change.address,
|
||||||
|
attribute: ATTR_IN,
|
||||||
|
value: { t: 'Address', c: address }
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'entry-delete': {
|
||||||
|
const inEntry = $entity?.attr[`~${ATTR_IN}`].find((e) => e.entity === change.address);
|
||||||
|
if (inEntry) {
|
||||||
|
await api.deleteEntry(inEntry.address);
|
||||||
|
} else {
|
||||||
|
console.warn("Couldn't find IN entry for entity %s?!", change.address);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
console.error('Unimplemented AttributeChange', change);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
revalidate();
|
||||||
|
}
|
||||||
|
|
||||||
|
let identities = [address];
|
||||||
|
|
||||||
|
function onResolved(ev: CustomEvent<string[]>) {
|
||||||
|
identities = ev.detail;
|
||||||
|
dispatch('resolved', ev.detail);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteObject() {
|
||||||
|
if (confirm(`${$i18n.t('Really delete')} "${identities.join(' | ')}"?`)) {
|
||||||
|
await api.deleteEntry(address);
|
||||||
|
dispatch('close');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const attributeWidgets: Widget[] = [
|
||||||
|
{
|
||||||
|
name: 'List',
|
||||||
|
icon: 'list-check',
|
||||||
|
components: ({ entries }) => [
|
||||||
|
{
|
||||||
|
component: EntryList,
|
||||||
|
props: {
|
||||||
|
entries,
|
||||||
|
columns: 'attribute, value'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const linkWidgets: Widget[] = [
|
||||||
|
{
|
||||||
|
name: 'List',
|
||||||
|
icon: 'list-check',
|
||||||
|
components: ({ entries, group }) => [
|
||||||
|
{
|
||||||
|
component: EntryList,
|
||||||
|
props: {
|
||||||
|
entries,
|
||||||
|
columns: 'attribute, value',
|
||||||
|
attributes: $allTypes[group]?.attributes || []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Entity List',
|
||||||
|
icon: 'image',
|
||||||
|
components: ({ entries, address }) => [
|
||||||
|
{
|
||||||
|
component: EntityList,
|
||||||
|
props: {
|
||||||
|
address,
|
||||||
|
entities: entries.filter((e) => e.value.t == 'Address').map((e) => e.value.c),
|
||||||
|
thumbnails: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const taggedWidgets: Widget[] = [
|
||||||
|
{
|
||||||
|
name: 'List',
|
||||||
|
icon: 'list-check',
|
||||||
|
components: ({ entries, address }) => [
|
||||||
|
{
|
||||||
|
component: EntityList,
|
||||||
|
props: {
|
||||||
|
address,
|
||||||
|
entities: entries.map((e) => e.entity),
|
||||||
|
thumbnails: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'EntityList',
|
||||||
|
icon: 'image',
|
||||||
|
components: ({ entries, address }) => [
|
||||||
|
{
|
||||||
|
component: EntityList,
|
||||||
|
props: {
|
||||||
|
address,
|
||||||
|
entities: entries.map((e) => e.entity),
|
||||||
|
thumbnails: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
$: entity.subscribe(async (object) => {
|
||||||
|
if (object && object.listing.entries.length) {
|
||||||
|
dbg('Updating visit stats for %o', object);
|
||||||
|
await api.putEntityAttribute(
|
||||||
|
object.address,
|
||||||
|
'LAST_VISITED',
|
||||||
|
{
|
||||||
|
t: 'Number',
|
||||||
|
c: new Date().getTime() / 1000
|
||||||
|
},
|
||||||
|
'IMPLICIT'
|
||||||
|
);
|
||||||
|
|
||||||
|
await api.putEntityAttribute(
|
||||||
|
object.address,
|
||||||
|
'NUM_VISITED',
|
||||||
|
{
|
||||||
|
t: 'Number',
|
||||||
|
c: (parseInt(String(object.get('NUM_VISITED'))) || 0) + 1
|
||||||
|
},
|
||||||
|
'IMPLICIT'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="inspect"
|
||||||
|
class:detail
|
||||||
|
class:blob={blobHandled}
|
||||||
|
data-address-multi={($entity?.attr['~IN']?.map((e) => e.entity) || []).join(',')}
|
||||||
|
>
|
||||||
|
<header>
|
||||||
|
<h2>
|
||||||
|
{#if $entity}
|
||||||
|
<UpObject banner {address} on:resolved={onResolved} />
|
||||||
|
{:else}
|
||||||
|
<Spinner centered />
|
||||||
|
{/if}
|
||||||
|
</h2>
|
||||||
|
</header>
|
||||||
|
{#if !showAsEntries}
|
||||||
|
<div class="main-content">
|
||||||
|
<div class="detail-col">
|
||||||
|
<div class="blob-viewer">
|
||||||
|
<BlobViewer {address} {detail} on:handled={(ev) => (blobHandled = ev.detail)} />
|
||||||
|
</div>
|
||||||
|
{#if !$error}
|
||||||
|
<InspectGroups
|
||||||
|
{entity}
|
||||||
|
on:highlighted={(ev) => (highlightedType = ev.detail)}
|
||||||
|
on:change={() => revalidate()}
|
||||||
|
/>
|
||||||
|
<div class="properties">
|
||||||
|
<NotesEditor {address} on:change={onChange} />
|
||||||
|
<InspectTypeEditor {entity} on:change={() => revalidate()} />
|
||||||
|
{#each sortedTypes as [typeAddr, { labels, attributes }]}
|
||||||
|
<EntryView
|
||||||
|
entries={($entity?.attributes || []).filter((e) =>
|
||||||
|
attributes.includes(e.attribute)
|
||||||
|
)}
|
||||||
|
widgets={linkWidgets}
|
||||||
|
on:change={onChange}
|
||||||
|
highlighted={highlightedType == typeAddr}
|
||||||
|
title={labels.join(' | ')}
|
||||||
|
group={typeAddr}
|
||||||
|
{address}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#if currentUntypedProperties.length > 0}
|
||||||
|
<EntryView
|
||||||
|
title={$i18n.t('Other Properties')}
|
||||||
|
widgets={attributeWidgets}
|
||||||
|
entries={currentUntypedProperties}
|
||||||
|
on:change={onChange}
|
||||||
|
{address}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if currentUntypedLinks.length > 0}
|
||||||
|
<EntryView
|
||||||
|
title={$i18n.t('Links')}
|
||||||
|
widgets={linkWidgets}
|
||||||
|
entries={currentUntypedLinks}
|
||||||
|
on:change={onChange}
|
||||||
|
{address}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !correctlyTagged || !incorrectlyTagged}
|
||||||
|
<EntryView
|
||||||
|
title={`${$i18n.t('Members')}`}
|
||||||
|
widgets={taggedWidgets}
|
||||||
|
entries={tagged}
|
||||||
|
on:change={onChange}
|
||||||
|
{address}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<EntryView
|
||||||
|
title={`${$i18n.t('Typed Members')} (${correctlyTagged.length})`}
|
||||||
|
widgets={taggedWidgets}
|
||||||
|
entries={tagged.filter((e) => correctlyTagged.includes(e.entity))}
|
||||||
|
on:change={onChange}
|
||||||
|
{address}
|
||||||
|
/>
|
||||||
|
<EntryView
|
||||||
|
title={`${$i18n.t('Untyped members')} (${incorrectlyTagged.length})`}
|
||||||
|
widgets={taggedWidgets}
|
||||||
|
entries={tagged.filter((e) => incorrectlyTagged.includes(e.entity))}
|
||||||
|
on:change={onChange}
|
||||||
|
{address}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if currentBacklinks.length > 0}
|
||||||
|
<EntryView
|
||||||
|
title={`${$i18n.t('Referred to')} (${currentBacklinks.length})`}
|
||||||
|
entries={currentBacklinks}
|
||||||
|
on:change={onChange}
|
||||||
|
{address}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if $entityInfo?.t === 'Attribute'}
|
||||||
|
<LabelBorder>
|
||||||
|
<span slot="header">{$i18n.t('Used')} ({attributesUsed.length})</span>
|
||||||
|
<EntryList columns="entity,value" entries={attributesUsed} orderByValue />
|
||||||
|
</LabelBorder>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="error">
|
||||||
|
{$error}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="entries">
|
||||||
|
<h2>{$i18n.t('Attributes')}</h2>
|
||||||
|
<EntryList
|
||||||
|
entries={$entity.attributes}
|
||||||
|
columns={detail ? 'timestamp, provenance, attribute, value' : 'attribute, value'}
|
||||||
|
on:change={onChange}
|
||||||
|
/>
|
||||||
|
<h2>{$i18n.t('Backlinks')}</h2>
|
||||||
|
<EntryList
|
||||||
|
entries={$entity.backlinks}
|
||||||
|
columns={detail ? 'timestamp, provenance, entity, attribute' : 'entity, attribute'}
|
||||||
|
on:change={onChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="footer">
|
||||||
|
<IconButton
|
||||||
|
name="detail"
|
||||||
|
title={$i18n.t('Show as entries')}
|
||||||
|
active={showAsEntries}
|
||||||
|
on:click={() => (showAsEntries = !showAsEntries)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<IconButton
|
||||||
|
name="trash"
|
||||||
|
outline
|
||||||
|
subdued
|
||||||
|
color="#dc322f"
|
||||||
|
on:click={deleteObject}
|
||||||
|
title={$i18n.t('Delete object')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
header h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inspect,
|
||||||
|
.main-content {
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.properties {
|
||||||
|
flex: auto;
|
||||||
|
height: 0; // https://stackoverflow.com/a/14964944
|
||||||
|
min-height: 12em;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1600px) {
|
||||||
|
.inspect.detail {
|
||||||
|
.main-content {
|
||||||
|
position: relative;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.blob {
|
||||||
|
.detail-col {
|
||||||
|
width: 33%;
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob-viewer {
|
||||||
|
width: 65%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 1%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content .detail-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entries {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,44 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { ATTR_IN } from '@upnd/upend/constants';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import type { UpObject } from '@upnd/upend';
|
||||||
|
import type { Readable } from 'svelte/store';
|
||||||
|
import EntitySetEditor from './EntitySetEditor.svelte';
|
||||||
|
import { i18n } from '../i18n';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let entity: Readable<UpObject>;
|
||||||
|
|
||||||
|
$: groups = Object.fromEntries(
|
||||||
|
($entity?.attr[ATTR_IN] || []).map((e) => [e.value.c as string, e.address])
|
||||||
|
);
|
||||||
|
|
||||||
|
async function addGroup(address: string) {
|
||||||
|
await api.putEntry([
|
||||||
|
{
|
||||||
|
entity: $entity.address,
|
||||||
|
attribute: ATTR_IN,
|
||||||
|
value: {
|
||||||
|
t: 'Address',
|
||||||
|
c: address
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
dispatch('change');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeGroup(address: string) {
|
||||||
|
await api.deleteEntry(groups[address]);
|
||||||
|
dispatch('change');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<EntitySetEditor
|
||||||
|
entities={Object.keys(groups)}
|
||||||
|
header={$i18n.t('Groups')}
|
||||||
|
hide={Object.keys(groups).length === 0}
|
||||||
|
on:add={(e) => addGroup(e.detail)}
|
||||||
|
on:remove={(e) => removeGroup(e.detail)}
|
||||||
|
on:highlighted
|
||||||
|
/>
|
|
@ -0,0 +1,129 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import UpObjectDisplay from './display/UpObject.svelte';
|
||||||
|
import Selector, { type SelectorValue } from './utils/Selector.svelte';
|
||||||
|
import IconButton from './utils/IconButton.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { i18n } from '../i18n';
|
||||||
|
import type { UpObject, UpEntry } from '@upnd/upend';
|
||||||
|
import type { Readable } from 'svelte/store';
|
||||||
|
import { ATTR_OF } from '@upnd/upend/constants';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import LabelBorder from './utils/LabelBorder.svelte';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let entity: Readable<UpObject>;
|
||||||
|
|
||||||
|
let adding = false;
|
||||||
|
let typeSelector: Selector;
|
||||||
|
|
||||||
|
$: if (adding && typeSelector) typeSelector.focus();
|
||||||
|
|
||||||
|
$: typeEntries = $entity?.attr[`~${ATTR_OF}`] || [];
|
||||||
|
|
||||||
|
async function add(ev: CustomEvent<SelectorValue>) {
|
||||||
|
if (ev.detail.t !== 'Attribute') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await api.putEntry({
|
||||||
|
entity: {
|
||||||
|
t: 'Attribute',
|
||||||
|
c: ev.detail.name
|
||||||
|
},
|
||||||
|
attribute: ATTR_OF,
|
||||||
|
value: { t: 'Address', c: $entity.address }
|
||||||
|
});
|
||||||
|
dispatch('change');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function remove(entry: UpEntry) {
|
||||||
|
let really = confirm(
|
||||||
|
$i18n.t('Really remove "{{attributeName}}" from "{{typeName}}"?', {
|
||||||
|
attributeName: (await api.addressToComponents(entry.entity)).c,
|
||||||
|
typeName: $entity.identify().join('/')
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
if (really) {
|
||||||
|
await api.deleteEntry(entry.address);
|
||||||
|
dispatch('change');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if typeEntries.length || $entity?.attr['~IN']?.length}
|
||||||
|
<LabelBorder hide={typeEntries.length === 0}>
|
||||||
|
<span slot="header">{$i18n.t('Type Attributes')}</span>
|
||||||
|
{#if adding}
|
||||||
|
<div class="selector">
|
||||||
|
<Selector
|
||||||
|
bind:this={typeSelector}
|
||||||
|
types={['Attribute', 'NewAttribute']}
|
||||||
|
on:input={add}
|
||||||
|
placeholder={$i18n.t('Assign an attribute to this type...')}
|
||||||
|
on:focus={(ev) => {
|
||||||
|
if (!ev.detail) adding = false;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="body">
|
||||||
|
<ul class="attributes">
|
||||||
|
{#each typeEntries as typeEntry}
|
||||||
|
<li class="attribute">
|
||||||
|
<div class="label">
|
||||||
|
<UpObjectDisplay address={typeEntry.entity} link />
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<IconButton name="x-circle" on:click={() => remove(typeEntry)} />
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{:else}
|
||||||
|
<li class="no-attributes">
|
||||||
|
{$i18n.t('No attributes assigned to this type.')}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
<div class="add-button">
|
||||||
|
<IconButton outline small name="plus-circle" on:click={() => (adding = true)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</LabelBorder>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.attributes {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attribute {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
.attributes {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-attributes {
|
||||||
|
opacity: 0.66;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,72 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { ATTR_IN } from '@upnd/upend/constants';
|
||||||
|
import { i18n } from '../i18n';
|
||||||
|
import { Query, UpListing } from '@upnd/upend';
|
||||||
|
import EntitySetEditor from './EntitySetEditor.svelte';
|
||||||
|
import { Any } from '@upnd/upend/query';
|
||||||
|
|
||||||
|
export let entities: string[];
|
||||||
|
|
||||||
|
let groups = [];
|
||||||
|
let groupListing: UpListing | undefined = undefined;
|
||||||
|
async function updateGroups() {
|
||||||
|
const currentEntities = entities.concat();
|
||||||
|
const allGroups = await api.query(
|
||||||
|
Query.matches(
|
||||||
|
currentEntities.map((e) => `@${e}`),
|
||||||
|
ATTR_IN,
|
||||||
|
Any
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const commonGroups = new Set(
|
||||||
|
allGroups.values
|
||||||
|
.filter((v) => v.t == 'Address')
|
||||||
|
.map((v) => v.c)
|
||||||
|
.filter((groupAddr) => {
|
||||||
|
return Object.values(allGroups.objects).every((obj) => {
|
||||||
|
return obj.attr[ATTR_IN].some((v) => v.value.c === groupAddr);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
if (entities.toString() == currentEntities.toString()) {
|
||||||
|
groups = Array.from(commonGroups);
|
||||||
|
groupListing = allGroups;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$: entities && updateGroups();
|
||||||
|
|
||||||
|
async function addGroup(address: string) {
|
||||||
|
await api.putEntry(
|
||||||
|
entities.map((entity) => ({
|
||||||
|
entity,
|
||||||
|
attribute: ATTR_IN,
|
||||||
|
value: {
|
||||||
|
t: 'Address',
|
||||||
|
c: address
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
await updateGroups();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeGroup(address: string) {
|
||||||
|
await Promise.all(
|
||||||
|
entities.map((entity) =>
|
||||||
|
api.deleteEntry(
|
||||||
|
groupListing.objects[entity].attr[ATTR_IN].find((v) => v.value.c === address).address
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
await updateGroups();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<EntitySetEditor
|
||||||
|
entities={groups}
|
||||||
|
header={$i18n.t('Common groups')}
|
||||||
|
on:add={(ev) => addGroup(ev.detail)}
|
||||||
|
on:remove={(ev) => removeGroup(ev.detail)}
|
||||||
|
/>
|
|
@ -0,0 +1,439 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import UpObject from './display/UpObject.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import Selector, { type SelectorValue } from './utils/Selector.svelte';
|
||||||
|
import { createEventDispatcher, onMount, tick } from 'svelte';
|
||||||
|
import type { ZoomBehavior, ZoomTransform, Selection } from 'd3';
|
||||||
|
import Spinner from './utils/Spinner.svelte';
|
||||||
|
import UpObjectCard from './display/UpObjectCard.svelte';
|
||||||
|
import BlobPreview from './display/BlobPreview.svelte';
|
||||||
|
import SurfacePoint from './display/SurfacePoint.svelte';
|
||||||
|
import { i18n } from '../i18n';
|
||||||
|
import debug from 'debug';
|
||||||
|
import { Query } from '@upnd/upend';
|
||||||
|
import { Any } from '@upnd/upend/query';
|
||||||
|
const dbg = debug('kestrel:surface');
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let x: string | undefined = undefined;
|
||||||
|
export let y: string | undefined = undefined;
|
||||||
|
$: dispatch('updateAddress', { x, y });
|
||||||
|
|
||||||
|
let loaded = false;
|
||||||
|
|
||||||
|
let viewMode = 'point';
|
||||||
|
|
||||||
|
let currentX = NaN;
|
||||||
|
let currentY = NaN;
|
||||||
|
|
||||||
|
let zoom: ZoomBehavior<Element, unknown> | undefined;
|
||||||
|
let autofit: () => void | undefined;
|
||||||
|
|
||||||
|
let view: Selection<HTMLElement, unknown, null, undefined>;
|
||||||
|
let viewEl: HTMLElement | undefined;
|
||||||
|
let viewHeight = 0;
|
||||||
|
let viewWidth = 0;
|
||||||
|
|
||||||
|
let selector: Selector | undefined;
|
||||||
|
|
||||||
|
$: if (selector) selector.focus();
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if ((x && !y) || (!x && y)) findPerpendicular();
|
||||||
|
}
|
||||||
|
async function findPerpendicular() {
|
||||||
|
const presentAxis = x || y;
|
||||||
|
const presentAxisAddress = await api.componentsToAddress({
|
||||||
|
t: 'Attribute',
|
||||||
|
c: presentAxis
|
||||||
|
});
|
||||||
|
const result = await api.query(
|
||||||
|
Query.or(
|
||||||
|
Query.matches(`@${presentAxisAddress}`, 'PERPENDICULAR', Any),
|
||||||
|
Query.matches(Any, 'PERPENDICULAR', `@${presentAxisAddress}`)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const perpendicular = [
|
||||||
|
...result.entries.map((e) => e.entity),
|
||||||
|
...result.values.filter((v) => v.t === 'Address').map((v) => v.c as string)
|
||||||
|
].find((address) => address !== presentAxisAddress);
|
||||||
|
|
||||||
|
if (perpendicular) {
|
||||||
|
const perpendicularComponents = await api.addressToComponents(perpendicular);
|
||||||
|
if (perpendicularComponents.t !== 'Attribute') return;
|
||||||
|
const perpendicularName = perpendicularComponents.c;
|
||||||
|
|
||||||
|
if (x) {
|
||||||
|
y = perpendicularName;
|
||||||
|
} else {
|
||||||
|
x = perpendicularName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IPoint {
|
||||||
|
address: string;
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
}
|
||||||
|
let points: IPoint[] = [];
|
||||||
|
async function loadPoints() {
|
||||||
|
points = [];
|
||||||
|
const result = await api.query(`(matches ? (in "${x}" "${y}") ?)`);
|
||||||
|
|
||||||
|
points = Object.entries(result.objects)
|
||||||
|
.map(([address, obj]) => {
|
||||||
|
let objX = parseInt(String(obj.get(x)));
|
||||||
|
let objY = parseInt(String(obj.get(y)));
|
||||||
|
|
||||||
|
if (objX && objY) {
|
||||||
|
return {
|
||||||
|
address,
|
||||||
|
x: objX,
|
||||||
|
y: objY
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
tick().then(() => {
|
||||||
|
autofit();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (x && y) {
|
||||||
|
loadPoints();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectorCoords: [number, number] | null = null;
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
const d3 = await import('d3');
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
viewWidth = viewEl.clientWidth;
|
||||||
|
viewHeight = viewEl.clientHeight;
|
||||||
|
|
||||||
|
dbg('Initializing Surface view: %dx%d', viewWidth, viewHeight);
|
||||||
|
view = d3.select(viewEl);
|
||||||
|
const svg = view.select('svg');
|
||||||
|
if (svg.empty()) {
|
||||||
|
throw new Error("Failed initializing Surface - couldn't locate SVG element");
|
||||||
|
}
|
||||||
|
svg.selectAll('*').remove();
|
||||||
|
|
||||||
|
const xScale = d3.scaleLinear().domain([0, viewWidth]).range([0, viewWidth]);
|
||||||
|
|
||||||
|
const yScale = d3.scaleLinear().domain([0, viewHeight]).range([viewHeight, 0]);
|
||||||
|
|
||||||
|
let xTicks = 10;
|
||||||
|
let yTicks = viewHeight / (viewWidth / xTicks);
|
||||||
|
|
||||||
|
const xAxis = d3
|
||||||
|
.axisBottom(xScale)
|
||||||
|
.ticks(xTicks)
|
||||||
|
.tickSize(viewHeight)
|
||||||
|
.tickPadding(5 - viewHeight);
|
||||||
|
|
||||||
|
const yAxis = d3
|
||||||
|
.axisRight(yScale)
|
||||||
|
.ticks(yTicks)
|
||||||
|
.tickSize(viewWidth)
|
||||||
|
.tickPadding(5 - viewWidth);
|
||||||
|
|
||||||
|
const gX = svg.append('g').call(xAxis);
|
||||||
|
const gY = svg.append('g').call(yAxis);
|
||||||
|
|
||||||
|
zoom = d3.zoom().on('zoom', zoomed);
|
||||||
|
|
||||||
|
function zoomed({ transform }: { transform: ZoomTransform }) {
|
||||||
|
const points = view.select('.content');
|
||||||
|
points.style(
|
||||||
|
'transform',
|
||||||
|
`translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`
|
||||||
|
);
|
||||||
|
const allPoints = view.selectAll('.point');
|
||||||
|
allPoints.style('transform', `scale(${1 / transform.k})`);
|
||||||
|
|
||||||
|
gX.call(xAxis.scale(transform.rescaleX(xScale)));
|
||||||
|
gY.call(yAxis.scale(transform.rescaleY(yScale)));
|
||||||
|
|
||||||
|
updateStyles();
|
||||||
|
}
|
||||||
|
|
||||||
|
autofit = () => {
|
||||||
|
zoom.translateTo(view, 0, viewHeight);
|
||||||
|
|
||||||
|
if (points.length) {
|
||||||
|
zoom.scaleTo(
|
||||||
|
view,
|
||||||
|
Math.min(
|
||||||
|
viewWidth / 2 / Math.max(...points.map((p) => Math.abs(p.x))) - 0.3,
|
||||||
|
viewHeight / 2 / Math.max(...points.map((p) => Math.abs(p.y))) - 0.3
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateStyles() {
|
||||||
|
svg
|
||||||
|
.selectAll('.tick line')
|
||||||
|
.attr('stroke-width', (d: number) => {
|
||||||
|
return d === 0 ? 2 : 1;
|
||||||
|
})
|
||||||
|
.attr('stroke', function (d: number) {
|
||||||
|
return d === 0 ? 'var(--foreground-lightest)' : 'var(--foreground-lighter)';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// function reset() {
|
||||||
|
// svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
|
||||||
|
// }
|
||||||
|
|
||||||
|
view.on('mousemove', (ev: MouseEvent) => {
|
||||||
|
// not using offsetXY because `translate` transforms on .inner mess it up
|
||||||
|
const viewBBox = (view.node() as HTMLElement).getBoundingClientRect();
|
||||||
|
const [x, y] = d3
|
||||||
|
.zoomTransform(view.select('.content').node() as HTMLElement)
|
||||||
|
.invert([ev.clientX - viewBBox.left, ev.clientY - viewBBox.top]);
|
||||||
|
|
||||||
|
currentX = xScale.invert(x);
|
||||||
|
currentY = yScale.invert(y);
|
||||||
|
});
|
||||||
|
|
||||||
|
d3.select(viewEl)
|
||||||
|
.call(zoom)
|
||||||
|
.on('dblclick.zoom', (_ev: MouseEvent) => {
|
||||||
|
selectorCoords = [currentX, currentY];
|
||||||
|
});
|
||||||
|
|
||||||
|
autofit();
|
||||||
|
|
||||||
|
loaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
|
tick().then(() => init());
|
||||||
|
});
|
||||||
|
resizeObserver.observe(viewEl);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSelectorInput(ev: CustomEvent<SelectorValue>) {
|
||||||
|
const value = ev.detail;
|
||||||
|
if (value.t !== 'Address') return;
|
||||||
|
const address = value.c;
|
||||||
|
|
||||||
|
const [xValue, yValue] = selectorCoords;
|
||||||
|
selectorCoords = null;
|
||||||
|
await Promise.all(
|
||||||
|
[
|
||||||
|
[x, xValue],
|
||||||
|
[y, yValue]
|
||||||
|
].map(([axis, value]: [string, number]) =>
|
||||||
|
api.putEntityAttribute(address, axis, {
|
||||||
|
t: 'Number',
|
||||||
|
c: value
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
await loadPoints();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="surface">
|
||||||
|
<div class="header ui">
|
||||||
|
<div class="axis-selector">
|
||||||
|
<div class="label">X</div>
|
||||||
|
<Selector
|
||||||
|
types={['Attribute', 'NewAttribute']}
|
||||||
|
initial={x ? { t: 'Attribute', name: x } : undefined}
|
||||||
|
on:input={(ev) => {
|
||||||
|
if (ev.detail.t === 'Attribute') x = ev.detail.name;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div class="value">
|
||||||
|
{(Math.round(currentX * 100) / 100).toLocaleString('en', {
|
||||||
|
useGrouping: false,
|
||||||
|
minimumFractionDigits: 2
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="axis-selector">
|
||||||
|
<div class="label">Y</div>
|
||||||
|
<Selector
|
||||||
|
types={['Attribute', 'NewAttribute']}
|
||||||
|
initial={y ? { t: 'Attribute', name: y } : undefined}
|
||||||
|
on:input={(ev) => {
|
||||||
|
if (ev.detail.t === 'Attribute') y = ev.detail.name;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div class="value">
|
||||||
|
{(Math.round(currentY * 100) / 100).toLocaleString('en', {
|
||||||
|
useGrouping: false,
|
||||||
|
minimumFractionDigits: 2
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="view" class:loaded bind:this={viewEl}>
|
||||||
|
<div class="ui view-mode-selector">
|
||||||
|
<div class="label">
|
||||||
|
{$i18n.t('View as')}
|
||||||
|
</div>
|
||||||
|
<select bind:value={viewMode}>
|
||||||
|
<option value="point">{$i18n.t('Point')}</option>
|
||||||
|
<option value="link">{$i18n.t('Link')}</option>
|
||||||
|
<option value="card">{$i18n.t('Card')}</option>
|
||||||
|
<!-- <option value="preview">{$i18n.t("Preview")}</option> -->
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{#if !loaded}
|
||||||
|
<div class="loading">
|
||||||
|
<Spinner centered="absolute" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="content">
|
||||||
|
{#if selectorCoords !== null}
|
||||||
|
<div
|
||||||
|
class="point selector"
|
||||||
|
style="
|
||||||
|
left: {selectorCoords[0]}px;
|
||||||
|
top: {viewHeight - selectorCoords[1]}px"
|
||||||
|
>
|
||||||
|
<Selector
|
||||||
|
types={['Address', 'NewAddress']}
|
||||||
|
on:input={onSelectorInput}
|
||||||
|
on:focus={(ev) => {
|
||||||
|
if (!ev.detail) selectorCoords = null;
|
||||||
|
}}
|
||||||
|
bind:this={selector}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#each points as point}
|
||||||
|
<div class="point" style="left: {point.x}px; top: {viewHeight - point.y}px">
|
||||||
|
<div class="inner">
|
||||||
|
{#if viewMode == 'link'}
|
||||||
|
<UpObject link address={point.address} />
|
||||||
|
{:else if viewMode == 'card'}
|
||||||
|
<UpObjectCard address={point.address} />
|
||||||
|
{:else if viewMode == 'preview'}
|
||||||
|
<BlobPreview address={point.address} />
|
||||||
|
{:else if viewMode == 'point'}
|
||||||
|
<SurfacePoint address={point.address} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<svg />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.surface {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1em;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
|
||||||
|
.axis-selector {
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 1rem;
|
||||||
|
&::after {
|
||||||
|
content: ':';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
flex-grow: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
:global(svg) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.tick text) {
|
||||||
|
color: var(--foreground-lightest);
|
||||||
|
font-size: 1rem;
|
||||||
|
text-shadow: 0 0 0.25em var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
transform-origin: 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point {
|
||||||
|
position: absolute;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-mode-selector {
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
right: 1.5em;
|
||||||
|
padding: 0.66em;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--foreground-lighter);
|
||||||
|
background: var(--background);
|
||||||
|
opacity: 0.66;
|
||||||
|
transition: opacity 0.25s;
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.loaded) {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-mode-selector {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5em;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
z-index: 99;
|
||||||
|
transform: scale(3);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,196 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import Spinner from '../utils/Spinner.svelte';
|
||||||
|
import FragmentViewer from './blobs/FragmentViewer.svelte';
|
||||||
|
import ModelViewer from './blobs/ModelViewer.svelte';
|
||||||
|
import VideoViewer from './blobs/VideoViewer.svelte';
|
||||||
|
import HashBadge from './HashBadge.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { getTypes } from '$lib/util/mediatypes';
|
||||||
|
import { concurrentImage } from '../imageQueue';
|
||||||
|
import { ATTR_IN } from '@upnd/upend/constants';
|
||||||
|
import AudioPreview from './blobs/AudioPreview.svelte';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
export let recurse = 3;
|
||||||
|
|
||||||
|
$: ({ entity, entityInfo } = useEntity(address));
|
||||||
|
$: types = $entity && getTypes($entity, $entityInfo);
|
||||||
|
|
||||||
|
$: handled =
|
||||||
|
types &&
|
||||||
|
(!$entity ||
|
||||||
|
types.audio ||
|
||||||
|
types.video ||
|
||||||
|
types.image ||
|
||||||
|
types.text ||
|
||||||
|
types.model ||
|
||||||
|
types.web ||
|
||||||
|
types.fragment ||
|
||||||
|
(types.group && recurse > 0));
|
||||||
|
|
||||||
|
$: dispatch('handled', handled);
|
||||||
|
|
||||||
|
let loaded = null;
|
||||||
|
$: dispatch('loaded', Boolean(loaded));
|
||||||
|
|
||||||
|
let failedChildren: string[] = [];
|
||||||
|
let loadedChildren: string[] = [];
|
||||||
|
$: groupChildren = $entity?.backlinks
|
||||||
|
.filter((e) => e.attribute === ATTR_IN)
|
||||||
|
.map((e) => String(e.entity))
|
||||||
|
.filter(
|
||||||
|
(addr) =>
|
||||||
|
!failedChildren
|
||||||
|
.slice(0, $entity?.backlinks.filter((e) => e.attribute === ATTR_IN).length - 4)
|
||||||
|
.includes(addr)
|
||||||
|
)
|
||||||
|
.slice(0, 4);
|
||||||
|
|
||||||
|
$: if (groupChildren)
|
||||||
|
loaded = groupChildren.every(
|
||||||
|
(addr) => loadedChildren.includes(addr) || failedChildren.includes(addr)
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="preview">
|
||||||
|
{#if handled}
|
||||||
|
<div class="inner">
|
||||||
|
{#if !loaded}
|
||||||
|
<Spinner centered="absolute" />
|
||||||
|
{/if}
|
||||||
|
{#if types.group}
|
||||||
|
<ul class="group">
|
||||||
|
{#each groupChildren as address (address)}
|
||||||
|
<li>
|
||||||
|
<svelte:self
|
||||||
|
{address}
|
||||||
|
recurse={recurse - 1}
|
||||||
|
on:handled={(ev) => {
|
||||||
|
if (!ev.detail && !failedChildren.includes(address))
|
||||||
|
failedChildren = [...failedChildren, address];
|
||||||
|
}}
|
||||||
|
on:loaded={(ev) => {
|
||||||
|
if (ev.detail && !loadedChildren.includes(address))
|
||||||
|
loadedChildren = [...loadedChildren, address];
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{:else if types.model}
|
||||||
|
<ModelViewer
|
||||||
|
lookonly
|
||||||
|
src="{api.apiUrl}/raw/{address}"
|
||||||
|
on:loaded={() => (loaded = address)}
|
||||||
|
/>
|
||||||
|
{:else if types.web}
|
||||||
|
<img
|
||||||
|
alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
|
||||||
|
use:concurrentImage={String($entity?.get('OG_IMAGE'))}
|
||||||
|
on:load={() => (loaded = address)}
|
||||||
|
on:error={() => (handled = false)}
|
||||||
|
/>
|
||||||
|
{:else if types.fragment}
|
||||||
|
<FragmentViewer {address} detail={false} on:loaded={() => (loaded = address)} />
|
||||||
|
{:else if types.audio}
|
||||||
|
<AudioPreview
|
||||||
|
{address}
|
||||||
|
on:loaded={() => (loaded = address)}
|
||||||
|
on:error={() => (handled = false)}
|
||||||
|
/>
|
||||||
|
{:else if types.video}
|
||||||
|
<VideoViewer {address} detail={false} on:loaded={() => (loaded = address)} />
|
||||||
|
{:else}
|
||||||
|
<div class="image" class:loaded={loaded == address || !handled}>
|
||||||
|
<img
|
||||||
|
class:loaded={loaded == address}
|
||||||
|
alt="Thumbnail for {address}..."
|
||||||
|
use:concurrentImage={`${api.apiUrl}/${
|
||||||
|
types.mimeType?.includes('svg+xml') ? 'raw' : 'thumb'
|
||||||
|
}/${address}?size=512&quality=75`}
|
||||||
|
on:load={() => (loaded = address)}
|
||||||
|
on:error={() => (handled = false)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="hashbadge">
|
||||||
|
<HashBadge {address} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.preview {
|
||||||
|
flex-grow: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
display: flex;
|
||||||
|
min-height: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hashbadge {
|
||||||
|
font-size: 48px;
|
||||||
|
opacity: 0.25;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
display: flex;
|
||||||
|
min-height: 0;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
|
&:not(.loaded) {
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 6rem;
|
||||||
|
max-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
flex-grow: 1;
|
||||||
|
min-height: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
|
||||||
|
padding: 0.25rem;
|
||||||
|
gap: 0.25rem;
|
||||||
|
border: 1px solid var(--foreground);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: end;
|
||||||
|
list-style: none;
|
||||||
|
min-height: 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,119 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import Spinner from '../utils/Spinner.svelte';
|
||||||
|
import AudioViewer from './blobs/AudioViewer.svelte';
|
||||||
|
import FragmentViewer from './blobs/FragmentViewer.svelte';
|
||||||
|
import ImageViewer from './blobs/ImageViewer.svelte';
|
||||||
|
import ModelViewer from './blobs/ModelViewer.svelte';
|
||||||
|
import TextViewer from './blobs/TextViewer.svelte';
|
||||||
|
import VideoViewer from './blobs/VideoViewer.svelte';
|
||||||
|
import UpLink from './UpLink.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { getTypes } from '$lib/util/mediatypes';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
export let detail: boolean;
|
||||||
|
|
||||||
|
let handled = false;
|
||||||
|
|
||||||
|
$: ({ entity, entityInfo } = useEntity(address));
|
||||||
|
$: types = $entity && $entityInfo && getTypes($entity, $entityInfo);
|
||||||
|
|
||||||
|
$: handled =
|
||||||
|
(types &&
|
||||||
|
(types.audio ||
|
||||||
|
types.video ||
|
||||||
|
types.image ||
|
||||||
|
types.text ||
|
||||||
|
types.pdf ||
|
||||||
|
types.model ||
|
||||||
|
types.web ||
|
||||||
|
types.fragment)) ??
|
||||||
|
false;
|
||||||
|
|
||||||
|
$: dispatch('handled', handled);
|
||||||
|
|
||||||
|
let imageLoaded: string | null = null;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if handled}
|
||||||
|
<div class="preview" class:detail>
|
||||||
|
{#if types?.text}
|
||||||
|
<div class="text-viewer">
|
||||||
|
<TextViewer {address} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if types?.audio}
|
||||||
|
<AudioViewer {address} {detail} />
|
||||||
|
{/if}
|
||||||
|
{#if types?.video}
|
||||||
|
<VideoViewer detail {address} />
|
||||||
|
{/if}
|
||||||
|
{#if types?.image}
|
||||||
|
<ImageViewer {address} {detail} />
|
||||||
|
{/if}
|
||||||
|
{#if types?.pdf}
|
||||||
|
<iframe src="{api.apiUrl}/raw/{address}?inline" title="PDF document of {address}" />
|
||||||
|
{/if}
|
||||||
|
{#if types?.model}
|
||||||
|
<ModelViewer src="{api.apiUrl}/raw/{address}" />
|
||||||
|
{/if}
|
||||||
|
{#if types?.web}
|
||||||
|
{#if imageLoaded != address}
|
||||||
|
<Spinner />
|
||||||
|
{/if}
|
||||||
|
<img
|
||||||
|
src={String($entity?.get('OG_IMAGE'))}
|
||||||
|
alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
|
||||||
|
on:load={() => (imageLoaded = address)}
|
||||||
|
on:error={() => (handled = false)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{#if types?.fragment}
|
||||||
|
<UpLink passthrough to={{ entity: String($entity?.get('ANNOTATES')) }}>
|
||||||
|
<FragmentViewer {address} {detail} />
|
||||||
|
</UpLink>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
// min-height: 33vh;
|
||||||
|
max-height: 50vh;
|
||||||
|
|
||||||
|
&.detail {
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
// min-height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
.text-viewer {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 99%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-viewer {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,84 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { getContext } from 'svelte';
|
||||||
|
import { readable } from 'svelte/store';
|
||||||
|
import type { Address, VALUE_TYPE } from '@upnd/upend/types';
|
||||||
|
import type { BrowseContext } from '$lib/util/browse';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
export let passthrough = false;
|
||||||
|
export let title: string | undefined = undefined;
|
||||||
|
export let text = false;
|
||||||
|
export let to: {
|
||||||
|
entity?: Address;
|
||||||
|
attribute?: string;
|
||||||
|
surfaceAttribute?: string;
|
||||||
|
value?: { t: VALUE_TYPE; c: string };
|
||||||
|
};
|
||||||
|
|
||||||
|
const NOOP = '#';
|
||||||
|
let targetHref = NOOP;
|
||||||
|
$: {
|
||||||
|
if (to.entity) {
|
||||||
|
targetHref = to.entity;
|
||||||
|
} else if (to.attribute) {
|
||||||
|
api.componentsToAddress({ t: 'Attribute', c: to.attribute }).then((address) => {
|
||||||
|
targetHref = address;
|
||||||
|
});
|
||||||
|
} else if (to.surfaceAttribute) {
|
||||||
|
targetHref = `surface:${to.surfaceAttribute}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const context = getContext('browse') as BrowseContext | undefined;
|
||||||
|
const index = context ? context.index : readable(0);
|
||||||
|
const addresses = context ? context.addresses : readable([]);
|
||||||
|
|
||||||
|
function onClick(ev: MouseEvent) {
|
||||||
|
if (window.location.pathname.startsWith('/browse')) {
|
||||||
|
let newAddresses = $addresses.concat();
|
||||||
|
|
||||||
|
// Shift to append to the end instead of replacing
|
||||||
|
if (ev.shiftKey) {
|
||||||
|
newAddresses = newAddresses.concat([targetHref]);
|
||||||
|
} else {
|
||||||
|
if ($addresses[$index] !== targetHref) {
|
||||||
|
newAddresses = newAddresses.slice(0, $index + 1).concat([targetHref]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
goto('/browse/' + newAddresses.join(','));
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
goto(`/browse/${targetHref}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a
|
||||||
|
class="uplink"
|
||||||
|
class:text
|
||||||
|
class:passthrough
|
||||||
|
class:unresolved={targetHref === NOOP}
|
||||||
|
href="/browse/{targetHref}"
|
||||||
|
on:click|preventDefault={onClick}
|
||||||
|
{title}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:global(.uplink) {
|
||||||
|
text-decoration: none;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
:global(.uplink.text) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
:global(.uplink.passthrough) {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
:global(.uplink.unresolved) {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,366 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher, getContext } from 'svelte';
|
||||||
|
|
||||||
|
import HashBadge from './HashBadge.svelte';
|
||||||
|
import UpObjectLabel from './UpObjectLabel.svelte';
|
||||||
|
import UpLink from './UpLink.svelte';
|
||||||
|
import Icon from '../utils/Icon.svelte';
|
||||||
|
import { readable, type Readable, writable } from 'svelte/store';
|
||||||
|
import { notify, UpNotification } from '$lib/notifications';
|
||||||
|
import IconButton from '../utils/IconButton.svelte';
|
||||||
|
import { vaultInfo } from '$lib/util/info';
|
||||||
|
import type { BrowseContext } from '$lib/util/browse';
|
||||||
|
import { Query, type UpObject } from '@upnd/upend';
|
||||||
|
import type { ADDRESS_TYPE, EntityInfo } from '@upnd/upend/types';
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import { i18n } from '$lib/i18n';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { ATTR_IN, ATTR_KEY, ATTR_LABEL, HIER_ROOT_ADDR } from '@upnd/upend/constants';
|
||||||
|
import { selected } from '../EntitySelect.svelte';
|
||||||
|
import { Any } from '@upnd/upend/query';
|
||||||
|
import type { AddressComponents } from '@upnd/upend/wasm';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
export let labels: string[] | undefined = undefined;
|
||||||
|
export let link = false;
|
||||||
|
export let banner = false;
|
||||||
|
export let resolve = !(labels || []).length || banner;
|
||||||
|
export let backpath = 0;
|
||||||
|
export let select = true;
|
||||||
|
export let plain = false;
|
||||||
|
|
||||||
|
let entity: Readable<UpObject | undefined> = readable(undefined);
|
||||||
|
let entityInfo: Readable<EntityInfo | AddressComponents | undefined> = writable(undefined);
|
||||||
|
$: if (resolve) ({ entity, entityInfo } = useEntity(address));
|
||||||
|
$: if (!resolve)
|
||||||
|
entityInfo = readable(undefined as undefined | AddressComponents, (set) => {
|
||||||
|
api.addressToComponents(address).then((info) => {
|
||||||
|
set(info);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let hasFile = false;
|
||||||
|
$: {
|
||||||
|
if ($entityInfo?.t == 'Hash' && banner) {
|
||||||
|
fetch(api.getRaw(address), {
|
||||||
|
method: 'HEAD'
|
||||||
|
}).then((response) => {
|
||||||
|
hasFile = response.ok;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Identification
|
||||||
|
let inferredIds: string[] = [];
|
||||||
|
$: inferredIds = $entity?.identify() || [];
|
||||||
|
let addressIds: string[] = [];
|
||||||
|
$: resolving = inferredIds.concat(labels || []).length == 0 && !$entity;
|
||||||
|
|
||||||
|
$: fetchAddressLabels(address);
|
||||||
|
|
||||||
|
async function fetchAddressLabels(address: string) {
|
||||||
|
addressIds = [];
|
||||||
|
await Promise.all(
|
||||||
|
(['Hash', 'Uuid', 'Attribute', 'Url'] as ADDRESS_TYPE[]).map(async (t) => {
|
||||||
|
if ((await api.getAddress(t)) == address) {
|
||||||
|
addressIds.push(`∈ ${t}`);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
addressIds = addressIds;
|
||||||
|
}
|
||||||
|
|
||||||
|
let displayLabel = address;
|
||||||
|
$: {
|
||||||
|
const allLabels = inferredIds.concat(addressIds).concat(labels || []);
|
||||||
|
displayLabel = Array.from(new Set(allLabels)).join(' | ');
|
||||||
|
|
||||||
|
if (!displayLabel && $entityInfo?.t === 'Attribute') {
|
||||||
|
displayLabel = `${$entityInfo.c}`;
|
||||||
|
}
|
||||||
|
displayLabel = displayLabel || address;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: dispatch('resolved', inferredIds);
|
||||||
|
|
||||||
|
// Resolved backpath
|
||||||
|
let resolvedBackpath: string[] = [];
|
||||||
|
$: if (backpath) resolveBackpath();
|
||||||
|
|
||||||
|
async function resolveBackpath() {
|
||||||
|
resolvedBackpath = [];
|
||||||
|
let levels = 0;
|
||||||
|
let current = address;
|
||||||
|
while (levels < backpath && current !== HIER_ROOT_ADDR) {
|
||||||
|
const parent = await api.query(Query.matches(`@${current}`, ATTR_IN, Any));
|
||||||
|
if (parent.entries.length) {
|
||||||
|
current = parent.entries[0].value.c as string;
|
||||||
|
const label = await api.query(Query.matches(`@${current}`, ATTR_LABEL, Any));
|
||||||
|
if (label.entries.length) {
|
||||||
|
resolvedBackpath = [label.entries[0].value.c as string, ...resolvedBackpath];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
levels++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigation highlights
|
||||||
|
const context = getContext('browse') as BrowseContext | undefined;
|
||||||
|
const index = context?.index || readable(0);
|
||||||
|
const addresses = context?.addresses || readable([]);
|
||||||
|
|
||||||
|
// Native open
|
||||||
|
function nativeOpen() {
|
||||||
|
notify.emit(
|
||||||
|
'notification',
|
||||||
|
new UpNotification(
|
||||||
|
$i18n.t('Opening {{identity}} in a default native application...', {
|
||||||
|
identity: inferredIds[0] || address
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
api
|
||||||
|
.nativeOpen(address)
|
||||||
|
.then(async (response) => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`${response.statusText} - ${await response.text()}`);
|
||||||
|
}
|
||||||
|
const rawWarning = response.headers.get('warning');
|
||||||
|
if (rawWarning) {
|
||||||
|
const warningText = rawWarning?.split(' ').slice(2).join(' ');
|
||||||
|
notify.emit('notification', new UpNotification(warningText, 'warning'));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
notify.emit(
|
||||||
|
'notification',
|
||||||
|
new UpNotification(
|
||||||
|
$i18n.t('Failed to open in native application! ({{err}})', { err }),
|
||||||
|
'error'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="upobject"
|
||||||
|
class:left-active={address == $addresses[$index - 1]}
|
||||||
|
class:right-active={address == $addresses[$index + 1]}
|
||||||
|
class:selected={select && $selected.includes(address)}
|
||||||
|
class:plain
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="address"
|
||||||
|
class:identified={inferredIds.length || addressIds.length || labels?.length}
|
||||||
|
class:banner
|
||||||
|
class:show-type={$entityInfo?.t === 'Url' && !addressIds.length}
|
||||||
|
>
|
||||||
|
<HashBadge {address} />
|
||||||
|
<div class="separator" />
|
||||||
|
<div class="label" class:resolving title={displayLabel}>
|
||||||
|
<div class="label-inner">
|
||||||
|
{#if banner && hasFile}
|
||||||
|
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||||
|
{:else if link}
|
||||||
|
<UpLink to={{ entity: address }}>
|
||||||
|
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||||
|
</UpLink>
|
||||||
|
{:else}
|
||||||
|
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if $entity?.get(ATTR_KEY) && !$entity?.get(ATTR_KEY)?.toString()?.startsWith('TYPE_')}
|
||||||
|
<div class="key">{$entity.get(ATTR_KEY)}</div>
|
||||||
|
{/if}
|
||||||
|
<div class="secondary">
|
||||||
|
<div class="type">
|
||||||
|
{$entityInfo?.t}
|
||||||
|
{#if $entityInfo?.t === 'Url' || $entityInfo?.t === 'Attribute'}
|
||||||
|
— {$entityInfo.c}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{#if banner}
|
||||||
|
{#if $entityInfo?.t === 'Attribute'}
|
||||||
|
<div class="icon">
|
||||||
|
<UpLink to={{ surfaceAttribute: $entityInfo.c }} title={$i18n.t('Open on surface') || ''}>
|
||||||
|
<Icon name="cross" />
|
||||||
|
</UpLink>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if $entityInfo?.t == 'Hash'}
|
||||||
|
<div
|
||||||
|
class="icon"
|
||||||
|
title={hasFile ? $i18n.t('Download as file') : $i18n.t('File not present in vault')}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="link-button"
|
||||||
|
class:disabled={!hasFile}
|
||||||
|
href="{api.apiUrl}/raw/{address}"
|
||||||
|
download={inferredIds[0]}
|
||||||
|
>
|
||||||
|
<Icon name="download" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{#if $vaultInfo?.desktop && hasFile}
|
||||||
|
<div class="icon">
|
||||||
|
<IconButton
|
||||||
|
name="window-alt"
|
||||||
|
on:click={nativeOpen}
|
||||||
|
title={$i18n.t('Open in default application...') || ''}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use '$lib/styles/colors';
|
||||||
|
|
||||||
|
.upobject {
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&.left-active {
|
||||||
|
background: linear-gradient(90deg, colors.$orange 0%, transparent 100%);
|
||||||
|
padding: 2px 0 2px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right-active {
|
||||||
|
background: linear-gradient(90deg, transparent 0%, colors.$orange 100%);
|
||||||
|
padding: 2px 2px 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.plain .address {
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0.1em 0.25em;
|
||||||
|
|
||||||
|
font-family: var(--monospace-font);
|
||||||
|
line-break: anywhere;
|
||||||
|
|
||||||
|
background: var(--background-lighter);
|
||||||
|
border: 0.1em solid var(--foreground-lighter);
|
||||||
|
border-radius: 0.2em;
|
||||||
|
|
||||||
|
&.banner {
|
||||||
|
border: 0.12em solid var(--foreground);
|
||||||
|
padding: 0.5em 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.identified {
|
||||||
|
font-family: var(--default-font);
|
||||||
|
font-size: 0.95em;
|
||||||
|
line-break: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-inner {
|
||||||
|
max-width: 100%;
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.banner .label {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
font-size: 0.66em;
|
||||||
|
display: none;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
font-family: var(--monospace-font);
|
||||||
|
color: colors.$yellow;
|
||||||
|
opacity: 0.8;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '⌘';
|
||||||
|
margin-right: 0.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.banner .key {
|
||||||
|
font-size: 0.66em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.banner) .key {
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.show-type .secondary,
|
||||||
|
&.banner .secondary {
|
||||||
|
display: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
:global(a) {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.separator {
|
||||||
|
width: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin: 0 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resolving {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button {
|
||||||
|
opacity: 0.66;
|
||||||
|
transition:
|
||||||
|
opacity 0.2s,
|
||||||
|
color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
color: var(--active-color, var(--primary));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upobject {
|
||||||
|
transition:
|
||||||
|
margin 0.2s ease,
|
||||||
|
box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
margin: 0.12rem;
|
||||||
|
box-shadow: 0 0 0.1rem 0.11rem colors.$red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,75 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { formatDuration } from '../../../util/fragments/time';
|
||||||
|
import { concurrentImage } from '../../imageQueue';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
|
||||||
|
$: ({ entity } = useEntity(address));
|
||||||
|
|
||||||
|
let loaded = null;
|
||||||
|
let handled = true;
|
||||||
|
$: dispatch('handled', handled);
|
||||||
|
$: dispatch('loaded', Boolean(loaded));
|
||||||
|
|
||||||
|
let clientHeight = 0;
|
||||||
|
let clientWidth = 0;
|
||||||
|
$: fontSize = Math.min(clientHeight, clientWidth) * 0.66;
|
||||||
|
let mediaDuration = '';
|
||||||
|
$: {
|
||||||
|
let duration = $entity?.get('MEDIA_DURATION') as number | undefined;
|
||||||
|
if (duration) {
|
||||||
|
mediaDuration = formatDuration(duration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="audiopreview" bind:clientWidth bind:clientHeight>
|
||||||
|
<img
|
||||||
|
class:loaded={loaded === address}
|
||||||
|
alt="Thumbnail for {address}"
|
||||||
|
use:concurrentImage={`${api.apiUrl}/thumb/${address}?mime=audio`}
|
||||||
|
on:load={() => (loaded = address)}
|
||||||
|
on:error
|
||||||
|
/>
|
||||||
|
{#if mediaDuration}
|
||||||
|
<div class="duration" style="--font-size: {fontSize}px">
|
||||||
|
{mediaDuration}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.audiopreview {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&:not(.loaded) {
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 6rem;
|
||||||
|
max-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
font-size: var(--font-size);
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--foreground-lightest);
|
||||||
|
text-shadow: 0px 0px 0.2em var(--background-lighter);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,431 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { debounce, throttle } from 'lodash';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import type { IValue } from '@upnd/upend/types';
|
||||||
|
import type WaveSurfer from 'wavesurfer.js';
|
||||||
|
import type { Region, RegionParams } from 'wavesurfer.js/src/plugin/regions';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { TimeFragment } from '../../../util/fragments/time';
|
||||||
|
import Icon from '../../utils/Icon.svelte';
|
||||||
|
import Selector from '../../utils/Selector.svelte';
|
||||||
|
import UpObject from '../../display/UpObject.svelte';
|
||||||
|
import Spinner from '../../utils/Spinner.svelte';
|
||||||
|
import IconButton from '../../../components/utils/IconButton.svelte';
|
||||||
|
import LabelBorder from '../../../components/utils/LabelBorder.svelte';
|
||||||
|
import { i18n } from '../../../i18n';
|
||||||
|
import { ATTR_LABEL } from '@upnd/upend/constants';
|
||||||
|
import debug from 'debug';
|
||||||
|
const dbg = debug('kestrel:AudioViewer');
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
export let detail: boolean;
|
||||||
|
|
||||||
|
let editable = false;
|
||||||
|
|
||||||
|
let containerEl: HTMLDivElement;
|
||||||
|
let timelineEl: HTMLDivElement;
|
||||||
|
let loaded = false;
|
||||||
|
|
||||||
|
let wavesurfer: WaveSurfer;
|
||||||
|
|
||||||
|
// Zoom handling
|
||||||
|
let zoom = 1;
|
||||||
|
const setZoom = throttle((level: number) => {
|
||||||
|
wavesurfer.zoom(level);
|
||||||
|
}, 250);
|
||||||
|
$: if (zoom && wavesurfer) setZoom(zoom);
|
||||||
|
|
||||||
|
// Annotations
|
||||||
|
const DEFAULT_ANNOTATION_COLOR = '#cb4b16';
|
||||||
|
|
||||||
|
type UpRegion = Region & { data: IValue };
|
||||||
|
let currentAnnotation: UpRegion | undefined;
|
||||||
|
|
||||||
|
async function loadAnnotations() {
|
||||||
|
const entity = await api.fetchEntity(address);
|
||||||
|
entity.backlinks
|
||||||
|
.filter((e) => e.attribute == 'ANNOTATES')
|
||||||
|
.forEach(async (e) => {
|
||||||
|
const annotation = await api.fetchEntity(e.entity);
|
||||||
|
if (annotation.get('W3C_FRAGMENT_SELECTOR')) {
|
||||||
|
const fragment = TimeFragment.parse(String(annotation.get('W3C_FRAGMENT_SELECTOR')));
|
||||||
|
if (fragment) {
|
||||||
|
wavesurfer.addRegion({
|
||||||
|
id: `ws-region-${e.entity}`,
|
||||||
|
color: annotation.get('COLOR') || DEFAULT_ANNOTATION_COLOR,
|
||||||
|
attributes: {
|
||||||
|
'upend-address': annotation.address,
|
||||||
|
label: annotation.get(ATTR_LABEL)
|
||||||
|
},
|
||||||
|
data: (annotation.attr['NOTE'] || [])[0]?.value,
|
||||||
|
...fragment
|
||||||
|
} as RegionParams);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if (wavesurfer) {
|
||||||
|
if (editable) {
|
||||||
|
wavesurfer.enableDragSelection({ color: DEFAULT_ANNOTATION_COLOR });
|
||||||
|
} else {
|
||||||
|
wavesurfer.disableDragSelection();
|
||||||
|
}
|
||||||
|
Object.values(wavesurfer.regions.list).forEach((region) => {
|
||||||
|
region.update({ drag: editable, resize: editable });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateAnnotation(region: Region) {
|
||||||
|
dbg('Updating annotation %o', region);
|
||||||
|
let entity = region.attributes['upend-address'];
|
||||||
|
|
||||||
|
// Newly created
|
||||||
|
if (!entity) {
|
||||||
|
let [_, newEntity] = await api.putEntry({
|
||||||
|
entity: {
|
||||||
|
t: 'Uuid'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
entity = newEntity;
|
||||||
|
|
||||||
|
const nextAnnotationIndex = Object.values(wavesurfer.regions.list).length;
|
||||||
|
const label = `Annotation #${nextAnnotationIndex}`;
|
||||||
|
|
||||||
|
region.update({
|
||||||
|
attributes: { label }
|
||||||
|
// incorrect types, `update()` does take `attributes`
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
} as any);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (region.attributes['label']) {
|
||||||
|
await api.putEntityAttribute(entity, ATTR_LABEL, {
|
||||||
|
t: 'String',
|
||||||
|
c: region.attributes['label']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
await api.putEntityAttribute(entity, 'ANNOTATES', {
|
||||||
|
t: 'Address',
|
||||||
|
c: address
|
||||||
|
});
|
||||||
|
|
||||||
|
await api.putEntityAttribute(entity, 'W3C_FRAGMENT_SELECTOR', {
|
||||||
|
t: 'String',
|
||||||
|
c: new TimeFragment(region.start, region.end).toString()
|
||||||
|
});
|
||||||
|
|
||||||
|
if (region.color !== DEFAULT_ANNOTATION_COLOR) {
|
||||||
|
await api.putEntityAttribute(entity, 'COLOR', {
|
||||||
|
t: 'String',
|
||||||
|
c: region.color
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.values(region.data).length) {
|
||||||
|
await api.putEntityAttribute(entity, 'NOTE', region.data as IValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
region.update({
|
||||||
|
attributes: {
|
||||||
|
'upend-address': entity
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
} as any);
|
||||||
|
}
|
||||||
|
const updateAnnotationDebounced = debounce(updateAnnotation, 250);
|
||||||
|
|
||||||
|
async function deleteAnnotation(region: Region) {
|
||||||
|
if (region.attributes['upend-address']) {
|
||||||
|
await api.deleteEntry(region.attributes['upend-address']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let rootEl: HTMLElement;
|
||||||
|
onMount(async () => {
|
||||||
|
const WaveSurfer = await import('wavesurfer.js');
|
||||||
|
const TimelinePlugin = await import('wavesurfer.js/src/plugin/timeline');
|
||||||
|
const RegionsPlugin = await import('wavesurfer.js/src/plugin/regions');
|
||||||
|
const timelineColor = getComputedStyle(document.documentElement).getPropertyValue(
|
||||||
|
'--foreground'
|
||||||
|
);
|
||||||
|
|
||||||
|
wavesurfer = WaveSurfer.default.create({
|
||||||
|
container: containerEl,
|
||||||
|
waveColor: '#dc322f',
|
||||||
|
progressColor: '#991c1a',
|
||||||
|
responsive: true,
|
||||||
|
backend: 'MediaElement',
|
||||||
|
mediaControls: true,
|
||||||
|
normalize: true,
|
||||||
|
xhr: { cache: 'force-cache' },
|
||||||
|
plugins: [
|
||||||
|
TimelinePlugin.default.create({
|
||||||
|
container: timelineEl,
|
||||||
|
primaryColor: timelineColor,
|
||||||
|
primaryFontColor: timelineColor,
|
||||||
|
secondaryColor: timelineColor,
|
||||||
|
secondaryFontColor: timelineColor
|
||||||
|
}),
|
||||||
|
RegionsPlugin.default.create({})
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
wavesurfer.on('ready', () => {
|
||||||
|
dbg('wavesurfer ready');
|
||||||
|
|
||||||
|
loaded = true;
|
||||||
|
loadAnnotations();
|
||||||
|
});
|
||||||
|
|
||||||
|
wavesurfer.on('region-created', async (region: UpRegion) => {
|
||||||
|
dbg('wavesurfer region-created', region);
|
||||||
|
|
||||||
|
// Updating here, because if `drag` and `resize` are passed during adding,
|
||||||
|
// updating no longer works.
|
||||||
|
region.update({ drag: editable, resize: editable });
|
||||||
|
|
||||||
|
// If the region was created from the UI
|
||||||
|
if (!region.attributes['upend-address']) {
|
||||||
|
await updateAnnotation(region);
|
||||||
|
// currentAnnotation = region;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
wavesurfer.on('region-updated', (region: UpRegion) => {
|
||||||
|
// dbg("wavesurfer region-updated", region);
|
||||||
|
|
||||||
|
currentAnnotation = region;
|
||||||
|
});
|
||||||
|
|
||||||
|
wavesurfer.on('region-update-end', (region: UpRegion) => {
|
||||||
|
dbg('wavesurfer region-update-end', region);
|
||||||
|
|
||||||
|
updateAnnotation(region);
|
||||||
|
currentAnnotation = region;
|
||||||
|
});
|
||||||
|
|
||||||
|
wavesurfer.on('region-removed', (region: UpRegion) => {
|
||||||
|
dbg('wavesurfer region-removed', region);
|
||||||
|
|
||||||
|
currentAnnotation = null;
|
||||||
|
deleteAnnotation(region);
|
||||||
|
});
|
||||||
|
|
||||||
|
// wavesurfer.on("region-in", (region: UpRegion) => {
|
||||||
|
// dbg("wavesurfer region-in", region);
|
||||||
|
|
||||||
|
// currentAnnotation = region;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// wavesurfer.on("region-out", (region: UpRegion) => {
|
||||||
|
// dbg("wavesurfer region-out", region);
|
||||||
|
|
||||||
|
// if (currentAnnotation.id === region.id) {
|
||||||
|
// currentAnnotation = undefined;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
|
||||||
|
wavesurfer.on('region-click', (region: UpRegion, _ev: MouseEvent) => {
|
||||||
|
dbg('wavesurfer region-click', region);
|
||||||
|
|
||||||
|
currentAnnotation = region;
|
||||||
|
});
|
||||||
|
|
||||||
|
wavesurfer.on('region-dblclick', (region: UpRegion, _ev: MouseEvent) => {
|
||||||
|
dbg('wavesurfer region-dblclick', region);
|
||||||
|
|
||||||
|
currentAnnotation = region;
|
||||||
|
setTimeout(() => wavesurfer.setCurrentTime(region.start));
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const peaksReq = await fetch(`${api.apiUrl}/thumb/${address}?mime=audio&type=json`);
|
||||||
|
const peaks = await peaksReq.json();
|
||||||
|
wavesurfer.load(`${api.apiUrl}/raw/${address}`, peaks.data);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(`Failed to load peaks: ${e}`);
|
||||||
|
const entity = await api.fetchEntity(address);
|
||||||
|
if (
|
||||||
|
(parseInt(String(entity.get('FILE_SIZE'))) || 0) < 20_000_000 ||
|
||||||
|
confirm(
|
||||||
|
$i18n.t(
|
||||||
|
'File is large (>20 MiB) and UpEnd failed to load waveform from server. Generating the waveform locally may slow down your browser. Do you wish to proceed anyway?'
|
||||||
|
)
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
console.warn(`Failed to load peaks, falling back to client-side render...`);
|
||||||
|
|
||||||
|
wavesurfer.load(`${api.apiUrl}/raw/${address}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const drawBufferThrottled = throttle(() => wavesurfer.drawBuffer(), 200);
|
||||||
|
const resizeObserver = new ResizeObserver((_entries) => {
|
||||||
|
drawBufferThrottled();
|
||||||
|
});
|
||||||
|
resizeObserver.observe(rootEl);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="audio" class:editable bind:this={rootEl}>
|
||||||
|
{#if !loaded}
|
||||||
|
<Spinner centered />
|
||||||
|
{/if}
|
||||||
|
{#if loaded}
|
||||||
|
<header>
|
||||||
|
<IconButton
|
||||||
|
name="edit"
|
||||||
|
title={$i18n.t('Toggle Edit Mode')}
|
||||||
|
on:click={() => (editable = !editable)}
|
||||||
|
active={editable}
|
||||||
|
>
|
||||||
|
{$i18n.t('Annotate')}
|
||||||
|
</IconButton>
|
||||||
|
<div class="zoom">
|
||||||
|
<Icon name="zoom-out" />
|
||||||
|
<input type="range" min="1" max="50" bind:value={zoom} />
|
||||||
|
<Icon name="zoom-in" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
{/if}
|
||||||
|
<div class="wavesurfer-timeline" bind:this={timelineEl} class:hidden={!detail} />
|
||||||
|
<div class="wavesurfer" bind:this={containerEl} />
|
||||||
|
{#if currentAnnotation}
|
||||||
|
<LabelBorder>
|
||||||
|
<span slot="header">{$i18n.t('Annotation')}</span>
|
||||||
|
{#if currentAnnotation.attributes['upend-address']}
|
||||||
|
<UpObject link address={currentAnnotation.attributes['upend-address']} />
|
||||||
|
{/if}
|
||||||
|
<div class="baseControls">
|
||||||
|
<div class="regionControls">
|
||||||
|
<div class="start">
|
||||||
|
Start: <input
|
||||||
|
type="number"
|
||||||
|
value={Math.round(currentAnnotation.start * 100) / 100}
|
||||||
|
disabled={!editable}
|
||||||
|
on:input={(ev) => {
|
||||||
|
currentAnnotation.update({
|
||||||
|
start: parseInt(ev.currentTarget.value)
|
||||||
|
});
|
||||||
|
updateAnnotationDebounced(currentAnnotation);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="end">
|
||||||
|
End: <input
|
||||||
|
type="number"
|
||||||
|
value={Math.round(currentAnnotation.end * 100) / 100}
|
||||||
|
disabled={!editable}
|
||||||
|
on:input={(ev) => {
|
||||||
|
currentAnnotation.update({
|
||||||
|
end: parseInt(ev.currentTarget.value)
|
||||||
|
});
|
||||||
|
updateAnnotationDebounced(currentAnnotation);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="color">
|
||||||
|
Color: <input
|
||||||
|
type="color"
|
||||||
|
value={currentAnnotation.color || DEFAULT_ANNOTATION_COLOR}
|
||||||
|
disabled={!editable}
|
||||||
|
on:input={(ev) => {
|
||||||
|
currentAnnotation.update({ color: ev.currentTarget.value });
|
||||||
|
updateAnnotation(currentAnnotation);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{#if editable}
|
||||||
|
<div class="existControls">
|
||||||
|
<IconButton outline name="trash" on:click={() => currentAnnotation.remove()} />
|
||||||
|
<!-- <div class="button">
|
||||||
|
<Icon name="check" />
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
{#key currentAnnotation}
|
||||||
|
<Selector
|
||||||
|
types={['String', 'Address']}
|
||||||
|
initial={currentAnnotation.data}
|
||||||
|
disabled={!editable}
|
||||||
|
on:input={(ev) => {
|
||||||
|
currentAnnotation.update({ data: ev.detail });
|
||||||
|
updateAnnotation(currentAnnotation);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/key}
|
||||||
|
</div>
|
||||||
|
</LabelBorder>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use '../../../styles/colors';
|
||||||
|
|
||||||
|
.audio {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
& > * {
|
||||||
|
flex-basis: 50%;
|
||||||
|
}
|
||||||
|
.zoom {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
input {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 0 0.5em 1em 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseControls,
|
||||||
|
.content {
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseControls,
|
||||||
|
.regionControls,
|
||||||
|
.existControls {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baseControls {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.regionControls div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='number'] {
|
||||||
|
width: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.audio:not(.editable) .wavesurfer-handle) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.wavesurfer-handle) {
|
||||||
|
background: var(--foreground-lightest) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.wavesurfer-region) {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,61 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import Spinner from '../../utils/Spinner.svelte';
|
||||||
|
export let address: string;
|
||||||
|
export let detail: boolean;
|
||||||
|
import { xywh } from '../../../util/fragments/xywh';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
const { entity } = useEntity(address);
|
||||||
|
|
||||||
|
$: objectAddress = String($entity?.get('ANNOTATES') || '');
|
||||||
|
|
||||||
|
$: imageFragment = String($entity?.get('W3C_FRAGMENT_SELECTOR')).includes('xywh=');
|
||||||
|
|
||||||
|
let imageLoaded = false;
|
||||||
|
$: imageLoaded && dispatch('loaded');
|
||||||
|
$: if ($entity && !imageFragment) imageLoaded = true;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="fragment-viewer">
|
||||||
|
{#if !imageLoaded}
|
||||||
|
<Spinner />
|
||||||
|
{/if}
|
||||||
|
{#if $entity}
|
||||||
|
{#if imageFragment}
|
||||||
|
<img
|
||||||
|
class="preview-image"
|
||||||
|
class:imageLoaded
|
||||||
|
src="{api.apiUrl}/{detail ? 'raw' : 'thumb'}/{objectAddress}#{$entity?.get(
|
||||||
|
'W3C_FRAGMENT_SELECTOR'
|
||||||
|
)}"
|
||||||
|
use:xywh
|
||||||
|
alt={address}
|
||||||
|
on:load={() => (imageLoaded = true)}
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use '../../../styles/colors';
|
||||||
|
|
||||||
|
.fragment-viewer {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 0;
|
||||||
|
&.imageLoaded {
|
||||||
|
border: 2px dashed colors.$yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,310 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { IEntry } from '@upnd/upend/types';
|
||||||
|
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import IconButton from '../../utils/IconButton.svelte';
|
||||||
|
import Spinner from '../../utils/Spinner.svelte';
|
||||||
|
import UpObject from '../UpObject.svelte';
|
||||||
|
import { ATTR_LABEL } from '@upnd/upend/constants';
|
||||||
|
import { i18n } from '../../../i18n';
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
export let detail: boolean;
|
||||||
|
|
||||||
|
let editable = false;
|
||||||
|
|
||||||
|
const { entity } = useEntity(address);
|
||||||
|
|
||||||
|
let imageLoaded = false;
|
||||||
|
let imageEl: HTMLImageElement;
|
||||||
|
|
||||||
|
$: svg = Boolean($entity?.get('FILE_MIME')?.toString().includes('svg+xml'));
|
||||||
|
|
||||||
|
interface Annotorious {
|
||||||
|
addAnnotation: (a: W3cAnnotation) => void;
|
||||||
|
on: ((e: 'createAnnotation' | 'deleteAnnotation', c: (a: W3cAnnotation) => void) => void) &
|
||||||
|
((e: 'updateAnnotation', c: (a: W3cAnnotation, b: W3cAnnotation) => void) => void);
|
||||||
|
clearAnnotations: () => void;
|
||||||
|
readOnly: boolean;
|
||||||
|
destroy: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface W3cAnnotation {
|
||||||
|
type: 'Annotation';
|
||||||
|
body: Array<{ type: 'TextualBody'; value: string; purpose: 'commenting' }>;
|
||||||
|
target: {
|
||||||
|
selector: {
|
||||||
|
type: 'FragmentSelector';
|
||||||
|
conformsTo: 'http://www.w3.org/TR/media-frags/';
|
||||||
|
value: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
'@context': 'http://www.w3.org/ns/anno.jsonld';
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let anno: Annotorious;
|
||||||
|
$: if (anno) anno.readOnly = !editable;
|
||||||
|
$: if (anno) {
|
||||||
|
anno.clearAnnotations();
|
||||||
|
$entity?.backlinks
|
||||||
|
.filter((e) => e.attribute == 'ANNOTATES')
|
||||||
|
.forEach(async (e) => {
|
||||||
|
const annotation = await api.fetchEntity(e.entity);
|
||||||
|
if (annotation.get('W3C_FRAGMENT_SELECTOR')) {
|
||||||
|
anno.addAnnotation({
|
||||||
|
type: 'Annotation',
|
||||||
|
body: annotation.attr[ATTR_LABEL].map((e) => {
|
||||||
|
return {
|
||||||
|
type: 'TextualBody',
|
||||||
|
value: String(e.value.c),
|
||||||
|
purpose: 'commenting'
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
target: {
|
||||||
|
selector: {
|
||||||
|
type: 'FragmentSelector',
|
||||||
|
conformsTo: 'http://www.w3.org/TR/media-frags/',
|
||||||
|
value: String(annotation.get('W3C_FRAGMENT_SELECTOR'))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'@context': 'http://www.w3.org/ns/anno.jsonld',
|
||||||
|
id: e.entity
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$: hasAnnotations = $entity?.backlinks.some((e) => e.attribute === 'ANNOTATES');
|
||||||
|
|
||||||
|
let a8sLinkTarget: HTMLDivElement;
|
||||||
|
let a8sLinkAddress: string;
|
||||||
|
|
||||||
|
async function loaded() {
|
||||||
|
const { Annotorious } = await import('@recogito/annotorious');
|
||||||
|
|
||||||
|
if (anno) {
|
||||||
|
anno.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
anno = new Annotorious({
|
||||||
|
image: imageEl,
|
||||||
|
drawOnSingleClick: true,
|
||||||
|
fragmentUnit: 'percent',
|
||||||
|
widgets: [
|
||||||
|
'COMMENT',
|
||||||
|
(info: { annotation: W3cAnnotation }) => {
|
||||||
|
a8sLinkAddress = info.annotation?.id;
|
||||||
|
return a8sLinkTarget;
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
anno.on('createAnnotation', async (annotation) => {
|
||||||
|
const [_, uuid] = await api.putEntry({
|
||||||
|
entity: {
|
||||||
|
t: 'Uuid'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
annotation.id = uuid;
|
||||||
|
|
||||||
|
await api.putEntry([
|
||||||
|
{
|
||||||
|
entity: uuid,
|
||||||
|
attribute: 'ANNOTATES',
|
||||||
|
value: {
|
||||||
|
t: 'Address',
|
||||||
|
c: address
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
entity: uuid,
|
||||||
|
attribute: 'W3C_FRAGMENT_SELECTOR',
|
||||||
|
value: {
|
||||||
|
t: 'String',
|
||||||
|
c: annotation.target.selector.value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
...annotation.body.map((body) => {
|
||||||
|
return {
|
||||||
|
entity: uuid,
|
||||||
|
attribute: ATTR_LABEL,
|
||||||
|
value: {
|
||||||
|
t: 'String',
|
||||||
|
c: body.value
|
||||||
|
}
|
||||||
|
} as IEntry;
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
anno.on('updateAnnotation', async (annotation) => {
|
||||||
|
const annotationObject = await api.fetchEntity(annotation.id);
|
||||||
|
await Promise.all(
|
||||||
|
annotationObject.attr[ATTR_LABEL].concat(
|
||||||
|
annotationObject.attr['W3C_FRAGMENT_SELECTOR']
|
||||||
|
).map(async (e) => api.deleteEntry(e.address))
|
||||||
|
);
|
||||||
|
await api.putEntry([
|
||||||
|
{
|
||||||
|
entity: annotation.id,
|
||||||
|
attribute: 'W3C_FRAGMENT_SELECTOR',
|
||||||
|
value: {
|
||||||
|
t: 'String',
|
||||||
|
c: annotation.target.selector.value
|
||||||
|
}
|
||||||
|
},
|
||||||
|
...annotation.body.map((body) => {
|
||||||
|
return {
|
||||||
|
entity: annotation.id,
|
||||||
|
attribute: ATTR_LABEL,
|
||||||
|
value: {
|
||||||
|
t: 'String',
|
||||||
|
c: body.value
|
||||||
|
}
|
||||||
|
} as IEntry;
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
anno.on('deleteAnnotation', async (annotation) => {
|
||||||
|
await api.deleteEntry(annotation.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
imageLoaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clicked() {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
if (!editable && !hasAnnotations) {
|
||||||
|
imageEl.requestFullscreen();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let brightnesses = [0.5, 0.75, 1, 1.25, 1.5, 2, 2.5];
|
||||||
|
let brightnessIdx = 2;
|
||||||
|
function cycleBrightness() {
|
||||||
|
brightnessIdx++;
|
||||||
|
brightnessIdx = brightnessIdx % brightnesses.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
let contrasts = [0.5, 0.75, 1, 1.25, 1.5];
|
||||||
|
let contrastsIdx = 2;
|
||||||
|
function cycleContrast() {
|
||||||
|
contrastsIdx++;
|
||||||
|
contrastsIdx = contrastsIdx % contrasts.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (imageEl) {
|
||||||
|
const brightness = brightnesses[brightnessIdx];
|
||||||
|
const contrast = contrasts[contrastsIdx];
|
||||||
|
imageEl.style.filter = `brightness(${brightness}) contrast(${contrast})`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="image-viewer">
|
||||||
|
{#if !imageLoaded}
|
||||||
|
<Spinner centered />
|
||||||
|
{/if}
|
||||||
|
{#if imageLoaded}
|
||||||
|
<div class="toolbar">
|
||||||
|
<IconButton name="edit" on:click={() => (editable = !editable)} active={editable}>
|
||||||
|
{$i18n.t('Annotate')}
|
||||||
|
</IconButton>
|
||||||
|
<div class="image-controls">
|
||||||
|
<IconButton name="brightness-half" on:click={cycleBrightness}>
|
||||||
|
{$i18n.t('Brightness')}
|
||||||
|
</IconButton>
|
||||||
|
<IconButton name="tone" on:click={cycleContrast}>
|
||||||
|
{$i18n.t('Contrast')}
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div
|
||||||
|
class="image"
|
||||||
|
class:zoomable={!editable && !hasAnnotations}
|
||||||
|
on:click={clicked}
|
||||||
|
on:keydown={(ev) => {
|
||||||
|
if (ev.key === 'Enter') clicked();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="preview-image"
|
||||||
|
src="{api.apiUrl}/{detail || svg ? 'raw' : 'thumb'}/{address}"
|
||||||
|
alt={address}
|
||||||
|
on:load={loaded}
|
||||||
|
bind:this={imageEl}
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="a8sUpLink" bind:this={a8sLinkTarget}>
|
||||||
|
{#if a8sLinkAddress}
|
||||||
|
<div class="link">
|
||||||
|
<UpObject link address={a8sLinkAddress} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style global lang="scss">
|
||||||
|
@use '@recogito/annotorious/dist/annotorious.min.css';
|
||||||
|
|
||||||
|
.image-viewer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
& > *,
|
||||||
|
img {
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
|
||||||
|
.image-controls {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomable {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
img:fullscreen {
|
||||||
|
cursor: zoom-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.r6o-editor {
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.a8sUpLink {
|
||||||
|
text-align: initial;
|
||||||
|
|
||||||
|
.link {
|
||||||
|
margin: 0.5em 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,113 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import api from '$lib/api';
|
||||||
|
import IconButton from '../../utils/IconButton.svelte';
|
||||||
|
import Spinner from '../../utils/Spinner.svelte';
|
||||||
|
export let address: string;
|
||||||
|
|
||||||
|
let mode: 'preview' | 'full' | 'markdown' = 'preview';
|
||||||
|
|
||||||
|
$: textContent = (async () => {
|
||||||
|
const response = await api.fetchRaw(address, mode == 'preview');
|
||||||
|
const text = await response.text();
|
||||||
|
if (mode === 'markdown') {
|
||||||
|
const { marked } = await import('marked');
|
||||||
|
const DOMPurify = await import('dompurify');
|
||||||
|
return DOMPurify.default.sanitize(marked.parse(text));
|
||||||
|
} else {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
['image', 'preview', 'Preview'],
|
||||||
|
['shape-circle', 'full', 'Full'],
|
||||||
|
['edit', 'markdown', 'Markdown']
|
||||||
|
] as [string, typeof mode, string][];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="text-preview">
|
||||||
|
<header class="text-header">
|
||||||
|
{#each tabs as [icon, targetMode, label]}
|
||||||
|
<div
|
||||||
|
class="tab"
|
||||||
|
class:active={mode == targetMode}
|
||||||
|
on:click={() => (mode = targetMode)}
|
||||||
|
on:keydown={(ev) => {
|
||||||
|
if (ev.key === 'Enter') {
|
||||||
|
mode = targetMode;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconButton name={icon} active={mode == targetMode} on:click={() => (mode = targetMode)} />
|
||||||
|
<div class="label">{label}</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</header>
|
||||||
|
<div class="text" class:markdown={mode === 'markdown'}>
|
||||||
|
{#await textContent}
|
||||||
|
<Spinner centered />
|
||||||
|
{:then text}
|
||||||
|
{#if mode === 'markdown'}
|
||||||
|
{@html text}
|
||||||
|
{:else}
|
||||||
|
{text}{#if mode === 'preview'}…{/if}
|
||||||
|
{/if}
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.text-preview {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
background: var(--background);
|
||||||
|
padding: 0.5em;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--foreground);
|
||||||
|
|
||||||
|
white-space: pre-wrap;
|
||||||
|
|
||||||
|
&.markdown {
|
||||||
|
white-space: unset;
|
||||||
|
|
||||||
|
:global(img) {
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
border: 1px solid var(--foreground);
|
||||||
|
border-bottom: 0;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
|
||||||
|
padding: 0.15em;
|
||||||
|
margin: 0 0.1em;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,262 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { throttle } from 'lodash';
|
||||||
|
import Spinner from '../../utils/Spinner.svelte';
|
||||||
|
import Icon from '../../utils/Icon.svelte';
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import { i18n } from '../../../i18n';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
export let detail: boolean;
|
||||||
|
|
||||||
|
const { entity } = useEntity(address);
|
||||||
|
|
||||||
|
enum State {
|
||||||
|
LOADING = 'loading',
|
||||||
|
PREVIEW = 'preview',
|
||||||
|
PREVIEWING = 'previewing',
|
||||||
|
PLAYING = 'playing',
|
||||||
|
ERRORED = 'errored'
|
||||||
|
}
|
||||||
|
let state = State.LOADING;
|
||||||
|
let supported = true;
|
||||||
|
|
||||||
|
$: if (state == State.PREVIEW) dispatch('loaded');
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if ($entity && videoEl) {
|
||||||
|
const mime = $entity.get('FILE_MIME');
|
||||||
|
if (mime) {
|
||||||
|
supported = Boolean(videoEl.canPlayType(mime as string));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let videoEl: HTMLVideoElement;
|
||||||
|
let currentTime: number;
|
||||||
|
|
||||||
|
let timeCodeWidth: number;
|
||||||
|
let timeCodeLeft: string;
|
||||||
|
let timeCodeSize: string;
|
||||||
|
|
||||||
|
const seek = throttle((progress: number) => {
|
||||||
|
if (state === State.PREVIEWING && videoEl.duration) {
|
||||||
|
currentTime = videoEl.duration * progress;
|
||||||
|
|
||||||
|
if (timeCodeWidth) {
|
||||||
|
let timeCodeLeftPx = Math.min(
|
||||||
|
Math.max(videoEl.clientWidth * progress, timeCodeWidth / 2),
|
||||||
|
videoEl.clientWidth - timeCodeWidth / 2
|
||||||
|
);
|
||||||
|
timeCodeLeft = `${timeCodeLeftPx}px`;
|
||||||
|
timeCodeSize = `${videoEl.clientHeight / 9}px`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
function updatePreviewPosition(ev: MouseEvent) {
|
||||||
|
if (state === State.PREVIEW || state === State.PREVIEWING) {
|
||||||
|
state = State.PREVIEWING;
|
||||||
|
const bcr = videoEl.getBoundingClientRect();
|
||||||
|
const progress = (ev.clientX - bcr.x) / bcr.width;
|
||||||
|
seek(progress);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetPreview() {
|
||||||
|
if (state === State.PREVIEWING) {
|
||||||
|
state = State.PREVIEW;
|
||||||
|
videoEl.load();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function startPlaying() {
|
||||||
|
if (detail) {
|
||||||
|
state = State.PLAYING;
|
||||||
|
videoEl.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="video-viewer {state}" class:detail class:unsupported={!supported}>
|
||||||
|
<div class="player" style="--icon-size: {detail ? 100 : 32}px">
|
||||||
|
{#if state === State.LOADING}
|
||||||
|
<Spinner />
|
||||||
|
{/if}
|
||||||
|
{#if state === State.LOADING || (!detail && state === State.PREVIEW)}
|
||||||
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
|
<img
|
||||||
|
class="thumb"
|
||||||
|
src="{api.apiUrl}/thumb/{address}?mime=video"
|
||||||
|
alt="Preview for {address}"
|
||||||
|
loading="lazy"
|
||||||
|
on:load={() => (state = State.PREVIEW)}
|
||||||
|
on:mouseover={() => (state = State.PREVIEWING)}
|
||||||
|
on:error={() => (state = State.ERRORED)}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<!-- svelte-ignore a11y-media-has-caption -->
|
||||||
|
<video
|
||||||
|
preload={detail ? 'auto' : 'metadata'}
|
||||||
|
src="{api.apiUrl}/raw/{address}"
|
||||||
|
poster="{api.apiUrl}/thumb/{address}?mime=video"
|
||||||
|
on:mousemove={updatePreviewPosition}
|
||||||
|
on:mouseleave={resetPreview}
|
||||||
|
on:click|preventDefault={startPlaying}
|
||||||
|
controls={state === State.PLAYING}
|
||||||
|
bind:this={videoEl}
|
||||||
|
bind:currentTime
|
||||||
|
/>
|
||||||
|
{#if !supported}
|
||||||
|
<div class="unsupported-message">
|
||||||
|
<div class="label">
|
||||||
|
{$i18n.t('UNSUPPORTED FORMAT')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
<div class="play-icon">
|
||||||
|
<Icon plain border name="play" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="timecode"
|
||||||
|
bind:clientWidth={timeCodeWidth}
|
||||||
|
style:left={timeCodeLeft}
|
||||||
|
style:font-size={timeCodeSize}
|
||||||
|
>
|
||||||
|
{#if videoEl?.duration && currentTime}
|
||||||
|
{#if videoEl.duration > 3600}{String(Math.floor(currentTime / 3600)).padStart(
|
||||||
|
2,
|
||||||
|
'0'
|
||||||
|
)}:{/if}{String(Math.floor((currentTime % 3600) / 60)).padStart(2, '0')}:{String(
|
||||||
|
Math.floor((currentTime % 3600) % 60)
|
||||||
|
).padStart(2, '0')}
|
||||||
|
{:else if supported}
|
||||||
|
<Spinner />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.video-viewer {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
&,
|
||||||
|
.player {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img,
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
|
// background: rgba(128, 128, 128, 128);
|
||||||
|
|
||||||
|
transition: filter 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
font-size: var(--icon-size);
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timecode {
|
||||||
|
display: none;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: var(--left);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
font-feature-settings: 'tnum', 'zero';
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
opacity: 0.66;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.unsupported.detail {
|
||||||
|
.play-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.unsupported-message {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(1, 1, 1, 0.7);
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
color: darkred;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.loading {
|
||||||
|
.player > * {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.standby,
|
||||||
|
&.preview {
|
||||||
|
img,
|
||||||
|
video {
|
||||||
|
filter: brightness(0.75);
|
||||||
|
}
|
||||||
|
.play-icon {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.previewing {
|
||||||
|
.timecode {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,121 @@
|
||||||
|
import debug from 'debug';
|
||||||
|
import { DEBUG } from '$lib/debug';
|
||||||
|
|
||||||
|
const dbg = debug('kestrel:imageQueue');
|
||||||
|
|
||||||
|
class ImageQueue {
|
||||||
|
concurrency: number;
|
||||||
|
queue: {
|
||||||
|
element: HTMLElement;
|
||||||
|
id: string;
|
||||||
|
callback: () => Promise<void>;
|
||||||
|
check?: () => boolean;
|
||||||
|
}[] = [];
|
||||||
|
active = 0;
|
||||||
|
|
||||||
|
constructor(concurrency: number) {
|
||||||
|
this.concurrency = concurrency;
|
||||||
|
}
|
||||||
|
|
||||||
|
public add(
|
||||||
|
element: HTMLImageElement,
|
||||||
|
id: string,
|
||||||
|
callback: () => Promise<void>,
|
||||||
|
check?: () => boolean
|
||||||
|
) {
|
||||||
|
this.queue = this.queue.filter((e) => e.element !== element);
|
||||||
|
this.queue.push({ element, id, callback, check });
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
private update() {
|
||||||
|
this.queue.sort((a, b) => {
|
||||||
|
const aBox = a.element.getBoundingClientRect();
|
||||||
|
const bBox = b.element.getBoundingClientRect();
|
||||||
|
const topDifference = aBox.top - bBox.top;
|
||||||
|
if (topDifference !== 0) {
|
||||||
|
return topDifference;
|
||||||
|
} else {
|
||||||
|
return aBox.left - bBox.left;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
while (this.active < this.concurrency && this.queue.length) {
|
||||||
|
const nextIdx = this.queue.findIndex((e) => e.check()) || 0;
|
||||||
|
const next = this.queue.splice(nextIdx, 1)[0];
|
||||||
|
dbg(`Getting ${next.id}...`);
|
||||||
|
this.active += 1;
|
||||||
|
next.element.classList.add('image-loading');
|
||||||
|
if (DEBUG.imageQueueHalt) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
next
|
||||||
|
.callback()
|
||||||
|
.then(() => {
|
||||||
|
dbg(`Loaded ${next.id}`);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
dbg(`Failed to load ${next.id}...`);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.active -= 1;
|
||||||
|
next.element.classList.remove('image-loading');
|
||||||
|
this.update();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
dbg(
|
||||||
|
'Active: %d, Queue: %O',
|
||||||
|
this.active,
|
||||||
|
this.queue.map((e) => [e.element, e.id])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const imageQueue = new ImageQueue(2);
|
||||||
|
|
||||||
|
export function concurrentImage(element: HTMLImageElement, src: string) {
|
||||||
|
const bbox = element.getBoundingClientRect();
|
||||||
|
let visible =
|
||||||
|
bbox.top >= 0 &&
|
||||||
|
bbox.left >= 0 &&
|
||||||
|
bbox.bottom <= window.innerHeight &&
|
||||||
|
bbox.right <= window.innerWidth;
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
visible = entries.some((e) => e.isIntersecting);
|
||||||
|
});
|
||||||
|
observer.observe(element);
|
||||||
|
|
||||||
|
function queueSelf() {
|
||||||
|
element.classList.add('image-queued');
|
||||||
|
const loadSelf = () => {
|
||||||
|
element.classList.remove('image-queued');
|
||||||
|
return new Promise<void>((resolve, reject) => {
|
||||||
|
if (element.src === src) {
|
||||||
|
resolve();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
element.addEventListener('load', () => {
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
element.addEventListener('error', () => {
|
||||||
|
reject();
|
||||||
|
});
|
||||||
|
element.src = src;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
imageQueue.add(element, src, loadSelf, () => visible);
|
||||||
|
}
|
||||||
|
queueSelf();
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(_src: string) {
|
||||||
|
queueSelf();
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
observer.disconnect();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
|
@ -0,0 +1,144 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { addEmitter } from '../AddModal.svelte';
|
||||||
|
import Icon from '../utils/Icon.svelte';
|
||||||
|
import { jobsEmitter } from './Jobs.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import Selector, { type SelectorValue } from '../utils/Selector.svelte';
|
||||||
|
import { i18n } from '$lib/i18n';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
let selector: Selector;
|
||||||
|
|
||||||
|
let lastSearched: SelectorValue[] = [];
|
||||||
|
|
||||||
|
function addLastSearched(value: SelectorValue) {
|
||||||
|
switch (value.t) {
|
||||||
|
case 'Address':
|
||||||
|
lastSearched = lastSearched.filter((v) => v.t !== 'Address' || v.c !== value.c);
|
||||||
|
break;
|
||||||
|
case 'Attribute':
|
||||||
|
lastSearched = lastSearched.filter((v) => v.t !== 'Attribute' || v.name !== value.name);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
lastSearched.unshift(value);
|
||||||
|
lastSearched = lastSearched.slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onInput(event: CustomEvent<SelectorValue>) {
|
||||||
|
const value = event.detail;
|
||||||
|
if (!value) return;
|
||||||
|
|
||||||
|
switch (value.t) {
|
||||||
|
case 'Address':
|
||||||
|
addLastSearched(value);
|
||||||
|
goto(`/browse/${value.c}`);
|
||||||
|
break;
|
||||||
|
case 'Attribute':
|
||||||
|
addLastSearched(value);
|
||||||
|
{
|
||||||
|
const attributeAddress = await api.componentsToAddress({
|
||||||
|
t: 'Attribute',
|
||||||
|
c: value.name
|
||||||
|
});
|
||||||
|
goto(`/browse/${attributeAddress}`);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
selector.reset();
|
||||||
|
|
||||||
|
// searchQuery = event.detail;
|
||||||
|
|
||||||
|
// if (searchQuery.length > 0) {
|
||||||
|
// navigate(`/search/${encodeURIComponent(searchQuery)}`, {
|
||||||
|
// replace: $location.pathname.includes("search"),
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
let fileInput: HTMLInputElement;
|
||||||
|
function onFileChange() {
|
||||||
|
if (fileInput.files?.length) {
|
||||||
|
addEmitter.emit('files', Array.from(fileInput.files));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function rescan() {
|
||||||
|
await api.refreshVault();
|
||||||
|
jobsEmitter.emit('reload');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<h1>
|
||||||
|
<a href="/">
|
||||||
|
<img class="logo" src="/assets/upend.svg" alt="UpEnd logo" />
|
||||||
|
<div class="name">UpEnd</div>
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
<div class="input">
|
||||||
|
<Selector
|
||||||
|
types={['Address', 'NewAddress', 'Attribute']}
|
||||||
|
placeholder={$i18n.t('Search or add') || ''}
|
||||||
|
on:input={onInput}
|
||||||
|
bind:this={selector}
|
||||||
|
emptyOptions={lastSearched}
|
||||||
|
>
|
||||||
|
<Icon name="search" slot="prefix" />
|
||||||
|
</Selector>
|
||||||
|
</div>
|
||||||
|
<button class="button" on:click={() => fileInput.click()}>
|
||||||
|
<Icon name="upload" />
|
||||||
|
<input type="file" multiple bind:this={fileInput} on:change={onFileChange} />
|
||||||
|
</button>
|
||||||
|
<button class="button" on:click={() => rescan()} title="Rescan vault">
|
||||||
|
<Icon name="refresh" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
height: 3.5rem;
|
||||||
|
border-bottom: 1px solid var(--foreground);
|
||||||
|
|
||||||
|
background: var(--background);
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 16pt;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
:global(a) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
color: var(--foreground-lightest);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: inline-block;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,81 @@
|
||||||
|
<script lang="ts" context="module">
|
||||||
|
import mitt from 'mitt';
|
||||||
|
|
||||||
|
export type JobsEvents = {
|
||||||
|
reload: undefined;
|
||||||
|
};
|
||||||
|
export const jobsEmitter = mitt<JobsEvents>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type { IJob } from '@upnd/upend/types';
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
import ProgessBar from '../utils/ProgessBar.svelte';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { DEBUG } from '$lib/debug';
|
||||||
|
|
||||||
|
interface JobWithId extends IJob {
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let jobs: IJob[] = [];
|
||||||
|
let activeJobs: JobWithId[] = [];
|
||||||
|
|
||||||
|
export let active = 0;
|
||||||
|
$: active = activeJobs.length;
|
||||||
|
|
||||||
|
let timeout: NodeJS.Timeout;
|
||||||
|
async function updateJobs() {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
if (!DEBUG.mockJobs) {
|
||||||
|
jobs = await api.fetchJobs();
|
||||||
|
} else {
|
||||||
|
jobs = Array(DEBUG.mockJobs)
|
||||||
|
.fill(0)
|
||||||
|
.map((_, i) => ({
|
||||||
|
id: i.toString(),
|
||||||
|
title: `Job ${i}`,
|
||||||
|
job_type: `JobType ${i}`,
|
||||||
|
state: 'InProgress',
|
||||||
|
progress: Math.floor(Math.random() * 100)
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
activeJobs = Object.entries(jobs)
|
||||||
|
.filter(([_, job]) => job.state == 'InProgress')
|
||||||
|
.map(([id, job]) => {
|
||||||
|
return { id, ...job };
|
||||||
|
})
|
||||||
|
.sort((j1, j2) => j1.id.localeCompare(j2.id))
|
||||||
|
.sort((j1, j2) => (j2.job_type || '').localeCompare(j1.job_type || ''));
|
||||||
|
|
||||||
|
if (activeJobs.length) {
|
||||||
|
timeout = setTimeout(updateJobs, 500);
|
||||||
|
} else {
|
||||||
|
timeout = setTimeout(updateJobs, 5000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
updateJobs();
|
||||||
|
|
||||||
|
jobsEmitter.on('reload', () => {
|
||||||
|
updateJobs();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each activeJobs as job (job.id)}
|
||||||
|
<div class="job" transition:fade>
|
||||||
|
<div class="job-label">{job.title}</div>
|
||||||
|
<ProgessBar value={job.progress} />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.job {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.job-label {
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,81 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { UpNotification, UpNotificationLevel } from '../../notifications';
|
||||||
|
import { notify } from '../../notifications';
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
import Icon from '../utils/Icon.svelte';
|
||||||
|
import { DEBUG, lipsum } from '$lib/debug';
|
||||||
|
|
||||||
|
let notifications: UpNotification[] = [];
|
||||||
|
if (DEBUG.mockNotifications) {
|
||||||
|
notifications = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
level: 'error',
|
||||||
|
content: `This is an error notification, ${lipsum(5)}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
level: 'warning',
|
||||||
|
content: `This is a warning notification, ${lipsum(5)}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
level: 'info',
|
||||||
|
content: `This is an info notification, ${lipsum(5)}`
|
||||||
|
}
|
||||||
|
];
|
||||||
|
notifications = notifications.slice(0, DEBUG.mockNotifications);
|
||||||
|
if (notifications.length < DEBUG.mockNotifications) {
|
||||||
|
notifications = [
|
||||||
|
...notifications,
|
||||||
|
...Array(DEBUG.mockNotifications - notifications.length)
|
||||||
|
.fill(0)
|
||||||
|
.map(() => ({
|
||||||
|
id: Math.random().toString(),
|
||||||
|
level: ['error', 'warning', 'info'][
|
||||||
|
Math.floor(Math.random() * 3)
|
||||||
|
] as UpNotificationLevel,
|
||||||
|
content: lipsum(12)
|
||||||
|
}))
|
||||||
|
];
|
||||||
|
}
|
||||||
|
notifications = notifications;
|
||||||
|
}
|
||||||
|
|
||||||
|
notify.on('notification', (notification) => {
|
||||||
|
notifications.push(notification);
|
||||||
|
notifications = notifications;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
notifications.splice(
|
||||||
|
notifications.findIndex((n) => (n.id = notification.id)),
|
||||||
|
1
|
||||||
|
);
|
||||||
|
notifications = notifications;
|
||||||
|
}, 5000);
|
||||||
|
});
|
||||||
|
|
||||||
|
const icons = {
|
||||||
|
error: 'error-alt',
|
||||||
|
warning: 'error'
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#each notifications as notification (notification.id)}
|
||||||
|
<div class="notification notification-{notification.level || 'info'}" transition:fade>
|
||||||
|
<Icon name={icons[notification.level] || 'bell'} />
|
||||||
|
{notification.content}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use '../../styles/colors';
|
||||||
|
|
||||||
|
.notification-error {
|
||||||
|
color: colors.$red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-warning {
|
||||||
|
color: colors.$orange;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script lang="ts" context="module">
|
||||||
|
let loaded = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export let plain = false;
|
||||||
|
export let name: string;
|
||||||
|
export let border = false;
|
||||||
|
|
||||||
|
if (!loaded) {
|
||||||
|
document.head.innerHTML += `<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="/vendor/boxicons/css/boxicons.min.css"
|
||||||
|
/>`;
|
||||||
|
loaded = true;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<i class="bx bx-{name}" class:plain class:bx-border={border} />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bx:not(.plain) {
|
||||||
|
font-size: 115%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bx-border {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,60 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { debounce } from 'lodash';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { useEntity } from '$lib/entity';
|
||||||
|
import type { AttributeCreate, AttributeUpdate } from '$lib/types/base';
|
||||||
|
import type { UpEntry } from '@upnd/upend';
|
||||||
|
import LabelBorder from './LabelBorder.svelte';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
|
||||||
|
$: ({ entity } = useEntity(address));
|
||||||
|
|
||||||
|
let noteEntry: UpEntry | undefined;
|
||||||
|
let notes: string | undefined = undefined;
|
||||||
|
$: {
|
||||||
|
if ($entity?.attr['NOTE']?.length && $entity?.attr['NOTE'][0]?.value?.c) {
|
||||||
|
noteEntry = $entity?.attr['NOTE'][0];
|
||||||
|
notes = String(noteEntry.value.c);
|
||||||
|
} else {
|
||||||
|
noteEntry = undefined;
|
||||||
|
notes = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let contentEl: HTMLDivElement;
|
||||||
|
|
||||||
|
const update = debounce(() => {
|
||||||
|
if (noteEntry) {
|
||||||
|
dispatch('change', {
|
||||||
|
type: 'update',
|
||||||
|
address: noteEntry.address,
|
||||||
|
attribute: 'NOTE',
|
||||||
|
value: { t: 'String', c: contentEl.innerText }
|
||||||
|
} as AttributeUpdate);
|
||||||
|
} else {
|
||||||
|
dispatch('change', {
|
||||||
|
type: 'create',
|
||||||
|
address: address,
|
||||||
|
attribute: 'NOTE',
|
||||||
|
value: { t: 'String', c: contentEl.innerText }
|
||||||
|
} as AttributeCreate);
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<LabelBorder hide={!notes?.length}>
|
||||||
|
<span slot="header">Notes</span>
|
||||||
|
<div class="notes" contenteditable on:input={update} bind:this={contentEl}>
|
||||||
|
{notes ? notes : ''}
|
||||||
|
</div>
|
||||||
|
</LabelBorder>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.notes {
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.5em !important;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,559 @@
|
||||||
|
<script lang="ts" context="module">
|
||||||
|
import type { IValue } from '@upnd/upend/types';
|
||||||
|
import type { UpEntry } from '@upnd/upend';
|
||||||
|
import UpEntryComponent from '../display/UpEntry.svelte';
|
||||||
|
|
||||||
|
export type SELECTOR_TYPE =
|
||||||
|
| 'Address'
|
||||||
|
| 'LabelledAddress'
|
||||||
|
| 'NewAddress'
|
||||||
|
| 'Attribute'
|
||||||
|
| 'NewAttribute'
|
||||||
|
| 'String'
|
||||||
|
| 'Number'
|
||||||
|
| 'Null';
|
||||||
|
|
||||||
|
export type SelectorValue = {
|
||||||
|
t: SELECTOR_TYPE;
|
||||||
|
} & (
|
||||||
|
| {
|
||||||
|
t: 'Address';
|
||||||
|
c: Address;
|
||||||
|
entry?: UpEntry;
|
||||||
|
labels?: string[];
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
t: 'Attribute';
|
||||||
|
name: string;
|
||||||
|
labels?: string[];
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
t: 'String';
|
||||||
|
c: string;
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
t: 'Number';
|
||||||
|
c: number;
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
t: 'Null';
|
||||||
|
c: null;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export type SelectorOption =
|
||||||
|
| SelectorValue
|
||||||
|
| { t: 'NewAddress'; c: string }
|
||||||
|
| { t: 'NewAttribute'; name: string; label: string };
|
||||||
|
|
||||||
|
export async function selectorValueAsValue(value: SelectorValue): Promise<IValue> {
|
||||||
|
switch (value.t) {
|
||||||
|
case 'Address':
|
||||||
|
return {
|
||||||
|
t: 'Address',
|
||||||
|
c: value.c
|
||||||
|
};
|
||||||
|
case 'Attribute':
|
||||||
|
return {
|
||||||
|
t: 'Address',
|
||||||
|
c: await api.componentsToAddress({ t: 'Attribute', c: value.name })
|
||||||
|
};
|
||||||
|
case 'String':
|
||||||
|
return {
|
||||||
|
t: 'String',
|
||||||
|
c: value.c
|
||||||
|
};
|
||||||
|
case 'Number':
|
||||||
|
return {
|
||||||
|
t: 'Number',
|
||||||
|
c: value.c
|
||||||
|
};
|
||||||
|
case 'Null':
|
||||||
|
return {
|
||||||
|
t: 'Null',
|
||||||
|
c: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { debounce } from 'lodash';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import type { UpListing } from '@upnd/upend';
|
||||||
|
import type { Address } from '@upnd/upend/types';
|
||||||
|
import { baseSearchOnce, createLabelled } from '../../util/search';
|
||||||
|
import UpObject from '../display/UpObject.svelte';
|
||||||
|
import IconButton from './IconButton.svelte';
|
||||||
|
import Input from './Input.svelte';
|
||||||
|
import { matchSorter } from 'match-sorter';
|
||||||
|
import api from '$lib/api';
|
||||||
|
import { ATTR_LABEL } from '@upnd/upend/constants';
|
||||||
|
import { i18n } from '../../i18n';
|
||||||
|
import debug from 'debug';
|
||||||
|
import Spinner from './Spinner.svelte';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const dbg = debug('kestrel:Selector');
|
||||||
|
let selectorEl: HTMLElement;
|
||||||
|
|
||||||
|
export let MAX_OPTIONS = 25;
|
||||||
|
|
||||||
|
export let types: SELECTOR_TYPE[] = ['Address', 'NewAddress', 'Attribute', 'String', 'Number'];
|
||||||
|
export let attributeOptions: string[] | undefined = undefined;
|
||||||
|
export let emptyOptions: SelectorOption[] | undefined = undefined;
|
||||||
|
export let placeholder = '';
|
||||||
|
export let disabled = false;
|
||||||
|
export let keepFocusOnSet = false;
|
||||||
|
|
||||||
|
export let initial: SelectorValue | undefined = undefined;
|
||||||
|
let inputValue = '';
|
||||||
|
let updating = false;
|
||||||
|
|
||||||
|
$: setInitial(initial);
|
||||||
|
function setInitial(initial: SelectorValue | undefined) {
|
||||||
|
if (initial) {
|
||||||
|
switch (initial.t) {
|
||||||
|
case 'Address':
|
||||||
|
case 'String':
|
||||||
|
inputValue = initial.c;
|
||||||
|
break;
|
||||||
|
case 'Attribute':
|
||||||
|
inputValue = initial.name;
|
||||||
|
break;
|
||||||
|
case 'Number':
|
||||||
|
inputValue = String(initial.c);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let current: (SelectorOption & { t: 'Address' | 'Attribute' | 'String' | 'Number' }) | undefined =
|
||||||
|
undefined;
|
||||||
|
|
||||||
|
export function reset() {
|
||||||
|
inputValue = '';
|
||||||
|
current = undefined;
|
||||||
|
dispatch('input', current);
|
||||||
|
}
|
||||||
|
|
||||||
|
let options: SelectorOption[] = [];
|
||||||
|
let searchResult: UpListing | undefined = undefined;
|
||||||
|
const updateOptions = debounce(async (query: string, doSearch: boolean) => {
|
||||||
|
updating = true;
|
||||||
|
let result: SelectorOption[] = [];
|
||||||
|
|
||||||
|
if (query.length === 0 && emptyOptions !== undefined) {
|
||||||
|
options = emptyOptions;
|
||||||
|
updating = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (types.includes('Number')) {
|
||||||
|
const number = parseFloat(query);
|
||||||
|
if (!Number.isNaN(number)) {
|
||||||
|
result.push({
|
||||||
|
t: 'Number',
|
||||||
|
c: number
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (types.includes('String') && query.length) {
|
||||||
|
result.push({
|
||||||
|
t: 'String',
|
||||||
|
c: query
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
options = result;
|
||||||
|
|
||||||
|
if (types.includes('Address') || types.includes('LabelledAddress')) {
|
||||||
|
if (doSearch) {
|
||||||
|
if (emptyOptions === undefined || query.length > 0) {
|
||||||
|
searchResult = await baseSearchOnce(query);
|
||||||
|
} else {
|
||||||
|
searchResult = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let exactHits = Object.entries(addressToLabels)
|
||||||
|
.filter(([_, labels]) => labels.map((l) => l.toLowerCase()).includes(query.toLowerCase()))
|
||||||
|
.map(([addr, _]) => addr);
|
||||||
|
|
||||||
|
if (exactHits.length) {
|
||||||
|
exactHits.forEach((addr) =>
|
||||||
|
result.push({
|
||||||
|
t: 'Address',
|
||||||
|
c: addr,
|
||||||
|
labels: addressToLabels[addr],
|
||||||
|
entry: null
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (query.length && types.includes('NewAddress')) {
|
||||||
|
result.push({
|
||||||
|
t: 'NewAddress',
|
||||||
|
c: query
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let validOptions = (searchResult?.entries || []).filter((e) => !exactHits.includes(e.entity));
|
||||||
|
// only includes LabelledAddress
|
||||||
|
if (!types.includes('Address')) {
|
||||||
|
validOptions = validOptions.filter((e) => e.attribute == ATTR_LABEL);
|
||||||
|
}
|
||||||
|
|
||||||
|
const sortedOptions = matchSorter(validOptions, inputValue, {
|
||||||
|
keys: ['value.c', (i) => addressToLabels[i.entity]?.join(' ')]
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const entry of sortedOptions) {
|
||||||
|
const common = {
|
||||||
|
t: 'Address' as const,
|
||||||
|
c: entry.entity
|
||||||
|
};
|
||||||
|
if (entry.attribute == ATTR_LABEL) {
|
||||||
|
result.push({
|
||||||
|
...common,
|
||||||
|
labels: [entry.value.c.toString()]
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
result.push({ ...common, entry });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (types.includes('Attribute')) {
|
||||||
|
const allAttributes = await api.fetchAllAttributes();
|
||||||
|
const attributes = attributeOptions
|
||||||
|
? allAttributes.filter((attr) => attributeOptions.includes(attr.name))
|
||||||
|
: allAttributes;
|
||||||
|
if (emptyOptions === undefined || query.length > 0) {
|
||||||
|
result.push(
|
||||||
|
...attributes
|
||||||
|
.filter(
|
||||||
|
(attr) =>
|
||||||
|
attr.name.toLowerCase().includes(query.toLowerCase()) ||
|
||||||
|
attr.labels.some((label) => label.toLowerCase().includes(query.toLowerCase()))
|
||||||
|
)
|
||||||
|
.map(
|
||||||
|
(attribute) =>
|
||||||
|
({
|
||||||
|
t: 'Attribute',
|
||||||
|
...attribute
|
||||||
|
}) as SelectorOption
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const attributeToCreate = query.toUpperCase().replaceAll(/[^A-Z0-9]/g, '_');
|
||||||
|
if (
|
||||||
|
!attributeOptions &&
|
||||||
|
query &&
|
||||||
|
!allAttributes.map((attr) => attr.name).includes(attributeToCreate) &&
|
||||||
|
types.includes('NewAttribute')
|
||||||
|
) {
|
||||||
|
result.push({
|
||||||
|
t: 'NewAttribute',
|
||||||
|
name: attributeToCreate,
|
||||||
|
label: query
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
options = result;
|
||||||
|
updating = false;
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
$: dbg('%o Options: %O', selectorEl, options);
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (inputFocused) {
|
||||||
|
updateOptions.cancel();
|
||||||
|
updateOptions(inputValue, true);
|
||||||
|
addressToLabels = {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let addressToLabels: { [key: string]: string[] } = {};
|
||||||
|
function onAddressResolved(address: string, ev: CustomEvent<string[]>) {
|
||||||
|
addressToLabels[address] = ev.detail;
|
||||||
|
updateOptions.cancel();
|
||||||
|
updateOptions(inputValue, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function set(option: SelectorOption) {
|
||||||
|
dbg('%o Setting option %O', selectorEl, option);
|
||||||
|
|
||||||
|
switch (option.t) {
|
||||||
|
case 'Address':
|
||||||
|
inputValue = option.c;
|
||||||
|
current = option;
|
||||||
|
break;
|
||||||
|
case 'NewAddress':
|
||||||
|
{
|
||||||
|
const addr = await createLabelled(option.c);
|
||||||
|
inputValue = addr;
|
||||||
|
current = {
|
||||||
|
t: 'Address',
|
||||||
|
c: addr,
|
||||||
|
labels: [option.c]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'Attribute':
|
||||||
|
inputValue = option.name;
|
||||||
|
current = option;
|
||||||
|
break;
|
||||||
|
case 'NewAttribute':
|
||||||
|
inputValue = option.name;
|
||||||
|
|
||||||
|
{
|
||||||
|
const address = await api.componentsToAddress({
|
||||||
|
t: 'Attribute',
|
||||||
|
c: option.name
|
||||||
|
});
|
||||||
|
await api.putEntityAttribute(address, ATTR_LABEL, {
|
||||||
|
t: 'String',
|
||||||
|
c: option.label
|
||||||
|
});
|
||||||
|
|
||||||
|
current = {
|
||||||
|
t: 'Attribute',
|
||||||
|
name: option.name,
|
||||||
|
labels: [option.label]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'String':
|
||||||
|
inputValue = option.c;
|
||||||
|
current = option;
|
||||||
|
break;
|
||||||
|
case 'Number':
|
||||||
|
inputValue = String(option.c);
|
||||||
|
current = option;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
dbg('%o Result set value: %O', selectorEl, current);
|
||||||
|
dispatch('input', current);
|
||||||
|
|
||||||
|
options = [];
|
||||||
|
optionFocusIndex = -1;
|
||||||
|
hover = false;
|
||||||
|
if (keepFocusOnSet) {
|
||||||
|
focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let listEl: HTMLUListElement;
|
||||||
|
let optionFocusIndex = -1;
|
||||||
|
function handleArrowKeys(ev: KeyboardEvent) {
|
||||||
|
if (!options.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const optionEls = Array.from(listEl.children) as HTMLLIElement[];
|
||||||
|
let targetIndex = optionEls.findIndex((el) => document.activeElement === el);
|
||||||
|
switch (ev.key) {
|
||||||
|
case 'ArrowDown':
|
||||||
|
targetIndex += 1;
|
||||||
|
|
||||||
|
// pressed down on last
|
||||||
|
if (targetIndex >= optionEls.length) {
|
||||||
|
targetIndex = 0;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'ArrowUp':
|
||||||
|
targetIndex -= 1;
|
||||||
|
|
||||||
|
// pressed up on input
|
||||||
|
if (targetIndex == -2) {
|
||||||
|
targetIndex = optionEls.length - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// pressed up on first
|
||||||
|
if (targetIndex == -1) {
|
||||||
|
focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return; // early return, stop processing
|
||||||
|
}
|
||||||
|
|
||||||
|
if (optionEls[targetIndex]) {
|
||||||
|
optionEls[targetIndex].focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let input: Input;
|
||||||
|
export function focus() {
|
||||||
|
// dbg("%o Focusing input", selectorEl);
|
||||||
|
input.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
let inputFocused = false;
|
||||||
|
let hover = false; // otherwise clicking makes options disappear faster than it can emit a set
|
||||||
|
$: visible =
|
||||||
|
(inputFocused || hover || optionFocusIndex > -1) && Boolean(options.length || updating);
|
||||||
|
$: dispatch('focus', inputFocused || hover || optionFocusIndex > -1);
|
||||||
|
|
||||||
|
$: dbg('%o focus = %s, hover = %s, visible = %s', selectorEl, inputFocused, hover, visible);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="selector" bind:this={selectorEl}>
|
||||||
|
{#if current?.t === 'Address' && inputValue.length > 0}
|
||||||
|
<div class="input">
|
||||||
|
<div class="label">
|
||||||
|
<UpObject link address={String(current.c)} />
|
||||||
|
</div>
|
||||||
|
<IconButton name="x" on:click={() => (inputValue = '')} />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<Input
|
||||||
|
bind:this={input}
|
||||||
|
bind:value={inputValue}
|
||||||
|
on:focusChange={(ev) => (inputFocused = ev.detail)}
|
||||||
|
on:keydown={handleArrowKeys}
|
||||||
|
{disabled}
|
||||||
|
{placeholder}
|
||||||
|
>
|
||||||
|
<slot name="prefix" slot="prefix" />
|
||||||
|
</Input>
|
||||||
|
{/if}
|
||||||
|
<ul
|
||||||
|
class="options"
|
||||||
|
class:visible
|
||||||
|
on:mouseenter={() => (hover = true)}
|
||||||
|
on:mouseleave={() => (hover = false)}
|
||||||
|
bind:this={listEl}
|
||||||
|
>
|
||||||
|
{#if updating}
|
||||||
|
<li><Spinner centered /></li>
|
||||||
|
{/if}
|
||||||
|
{#each options.slice(0, MAX_OPTIONS) as option, idx}
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||||
|
<li
|
||||||
|
tabindex="0"
|
||||||
|
on:click={() => set(option)}
|
||||||
|
on:mousemove={() => focus()}
|
||||||
|
on:focus={() => (optionFocusIndex = idx)}
|
||||||
|
on:blur={() => (optionFocusIndex = -1)}
|
||||||
|
on:keydown={(ev) => {
|
||||||
|
if (ev.key === 'Enter') {
|
||||||
|
set(option);
|
||||||
|
} else {
|
||||||
|
handleArrowKeys(ev);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{#if option.t === 'Address'}
|
||||||
|
{@const address = option.c}
|
||||||
|
{#if option.entry}
|
||||||
|
<UpEntryComponent entry={option.entry} />
|
||||||
|
{:else}
|
||||||
|
<UpObject
|
||||||
|
{address}
|
||||||
|
labels={option.labels}
|
||||||
|
on:resolved={(ev) => onAddressResolved(address, ev)}
|
||||||
|
/>{/if}
|
||||||
|
{:else if option.t === 'NewAddress'}
|
||||||
|
<div class="content new">{option.c}</div>
|
||||||
|
<div class="type">{$i18n.t('Create object')}</div>
|
||||||
|
{:else if option.t === 'Attribute'}
|
||||||
|
{#if option.labels.length}
|
||||||
|
<div class="content">
|
||||||
|
{#each option.labels as label}
|
||||||
|
<div class="label">{label}</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="type">{option.name}</div>
|
||||||
|
{:else}
|
||||||
|
<div class="content">
|
||||||
|
{option.name}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{:else if option.t === 'NewAttribute'}
|
||||||
|
<div class="content">{option.label}</div>
|
||||||
|
<div class="type">{$i18n.t('Create attribute')} ({option.name})</div>
|
||||||
|
{:else}
|
||||||
|
<div class="type">{option.t}</div>
|
||||||
|
<div class="content">{option.c}</div>
|
||||||
|
{/if}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.selector {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
display: flex;
|
||||||
|
min-width: 0;
|
||||||
|
.label {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
position: absolute;
|
||||||
|
list-style: none;
|
||||||
|
margin: 2px 0 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid var(--foreground-lighter);
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--background);
|
||||||
|
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
&.visible {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.25em;
|
||||||
|
|
||||||
|
transition: background-color 0.1s;
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--background-lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--background-lighter);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type,
|
||||||
|
.content {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type {
|
||||||
|
opacity: 0.8;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content.new {
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,309 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { readable, type Readable } from 'svelte/store';
|
||||||
|
import type { UpListing } from '@upnd/upend';
|
||||||
|
import type { Address } from '@upnd/upend/types';
|
||||||
|
import { query } from '$lib/entity';
|
||||||
|
import UpObject from '../display/UpObject.svelte';
|
||||||
|
import UpObjectCard from '../display/UpObjectCard.svelte';
|
||||||
|
import { ATTR_LABEL } from '@upnd/upend/constants';
|
||||||
|
import { i18n } from '../../i18n';
|
||||||
|
import IconButton from '../utils/IconButton.svelte';
|
||||||
|
import Selector, { type SelectorValue } from '../utils/Selector.svelte';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import type { WidgetChange } from 'src/types/base';
|
||||||
|
import debug from 'debug';
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const dbg = debug(`kestrel:EntityList`);
|
||||||
|
|
||||||
|
export let entities: Address[];
|
||||||
|
export let thumbnails = true;
|
||||||
|
export let select: 'add' | 'remove' = 'add';
|
||||||
|
export let sort = true;
|
||||||
|
export let address: Address | undefined = undefined;
|
||||||
|
|
||||||
|
$: deduplicatedEntities = Array.from(new Set(entities));
|
||||||
|
|
||||||
|
let style: 'list' | 'grid' | 'flex' = 'grid';
|
||||||
|
|
||||||
|
let clientWidth: number;
|
||||||
|
$: style = !thumbnails || clientWidth < 600 ? 'list' : 'grid';
|
||||||
|
|
||||||
|
// Sorting
|
||||||
|
let sortedEntities: Address[] = [];
|
||||||
|
|
||||||
|
let sortKeys: { [key: string]: string[] } = {};
|
||||||
|
function addSortKeys(key: string, vals: string[], resort: boolean) {
|
||||||
|
if (!sortKeys[key]) {
|
||||||
|
sortKeys[key] = [];
|
||||||
|
}
|
||||||
|
let changed = false;
|
||||||
|
vals.forEach((val) => {
|
||||||
|
if (!sortKeys[key].includes(val)) {
|
||||||
|
changed = true;
|
||||||
|
sortKeys[key].push(val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (resort && changed) sortEntities();
|
||||||
|
}
|
||||||
|
|
||||||
|
function sortEntities() {
|
||||||
|
if (!sort) return;
|
||||||
|
|
||||||
|
sortedEntities = deduplicatedEntities.concat();
|
||||||
|
|
||||||
|
sortedEntities.sort((a, b) => {
|
||||||
|
if (!sortKeys[a]?.length || !sortKeys[b]?.length) {
|
||||||
|
if (Boolean(sortKeys[a]?.length) && !sortKeys[b]?.length) {
|
||||||
|
return -1;
|
||||||
|
} else if (!sortKeys[a]?.length && Boolean(sortKeys[b]?.length)) {
|
||||||
|
return 1;
|
||||||
|
} else {
|
||||||
|
return a.localeCompare(b);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return sortKeys[a][0].localeCompare(sortKeys[b][0], undefined, {
|
||||||
|
numeric: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Labelling
|
||||||
|
let labelListing: Readable<UpListing> = readable(undefined);
|
||||||
|
$: {
|
||||||
|
const addressesString = deduplicatedEntities.map((addr) => `@${addr}`).join(' ');
|
||||||
|
|
||||||
|
labelListing = query(`(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`).result;
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if ($labelListing) {
|
||||||
|
deduplicatedEntities.forEach((address) => {
|
||||||
|
addSortKeys(address, $labelListing.getObject(address).identify(), false);
|
||||||
|
});
|
||||||
|
sortEntities();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!sort) {
|
||||||
|
sortedEntities = entities;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Visibility
|
||||||
|
let visible: Set<string> = new Set();
|
||||||
|
let observer = new IntersectionObserver((intersections) => {
|
||||||
|
intersections.forEach((intersection) => {
|
||||||
|
const address = (intersection.target as HTMLElement).dataset['address'];
|
||||||
|
if (!address) {
|
||||||
|
console.warn('Intersected wrong element?');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (intersection.isIntersecting) {
|
||||||
|
visible.add(address);
|
||||||
|
}
|
||||||
|
visible = visible;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function observe(node: HTMLElement) {
|
||||||
|
observer.observe(node);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
observer.unobserve(node);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adding
|
||||||
|
let addSelector: Selector | undefined;
|
||||||
|
let adding = false;
|
||||||
|
|
||||||
|
$: if (adding && addSelector) addSelector.focus();
|
||||||
|
|
||||||
|
function addEntity(ev: CustomEvent<SelectorValue>) {
|
||||||
|
dbg('Adding entity', ev.detail);
|
||||||
|
const addAddress = ev.detail?.t == 'Address' ? ev.detail.c : undefined;
|
||||||
|
if (!addAddress) return;
|
||||||
|
|
||||||
|
dispatch('change', {
|
||||||
|
type: 'entry-add',
|
||||||
|
address: addAddress
|
||||||
|
} as WidgetChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeEntity(address: string) {
|
||||||
|
if (confirm($i18n.t('Are you sure you want to remove this entry from members?'))) {
|
||||||
|
dbg('Removing entity', address);
|
||||||
|
dispatch('change', {
|
||||||
|
type: 'entry-delete',
|
||||||
|
address
|
||||||
|
} as WidgetChange);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="entitylist style-{style}" class:has-thumbnails={thumbnails} bind:clientWidth>
|
||||||
|
{#if !sortedEntities.length}
|
||||||
|
<div class="message">
|
||||||
|
{$i18n.t('No entries.')}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="items">
|
||||||
|
{#each sortedEntities as entity (entity)}
|
||||||
|
<div data-address={entity} data-select-mode={select} use:observe class="item">
|
||||||
|
{#if visible.has(entity)}
|
||||||
|
{#if thumbnails}
|
||||||
|
<UpObjectCard
|
||||||
|
address={entity}
|
||||||
|
labels={sortKeys[entity]}
|
||||||
|
banner={false}
|
||||||
|
select={select === 'add'}
|
||||||
|
on:resolved={(event) => {
|
||||||
|
addSortKeys(entity, event.detail, true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div class="icon">
|
||||||
|
<IconButton name="trash" color="#dc322f" on:click={() => removeEntity(entity)} />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="object">
|
||||||
|
<UpObject
|
||||||
|
link
|
||||||
|
address={entity}
|
||||||
|
labels={sortKeys[entity]}
|
||||||
|
select={select === 'add'}
|
||||||
|
on:resolved={(event) => {
|
||||||
|
addSortKeys(entity, event.detail, true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="icon">
|
||||||
|
<IconButton name="trash" color="#dc322f" on:click={() => removeEntity(entity)} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<div class="skeleton" style="text-align: center">...</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{#if address}
|
||||||
|
<div class="add">
|
||||||
|
{#if adding}
|
||||||
|
<Selector
|
||||||
|
bind:this={addSelector}
|
||||||
|
placeholder={$i18n.t('Search database or paste an URL')}
|
||||||
|
types={['Address', 'NewAddress']}
|
||||||
|
on:input={addEntity}
|
||||||
|
on:focus={(ev) => {
|
||||||
|
if (!ev.detail) {
|
||||||
|
adding = false;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<IconButton
|
||||||
|
name="plus-circle"
|
||||||
|
outline
|
||||||
|
subdued
|
||||||
|
on:click={() => {
|
||||||
|
adding = true;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use '../../styles/colors';
|
||||||
|
|
||||||
|
.items {
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entitylist.has-thumbnails .items {
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.entitylist.style-grid .items) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.entitylist.style-flex .items) {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.entitylist.style-list .items) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.5em;
|
||||||
|
opacity: 0.66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entitylist:not(.has-thumbnails) {
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
.object {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 0;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.icon {
|
||||||
|
width: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.entitylist.has-thumbnails {
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.5em;
|
||||||
|
right: 0.5em;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .icon {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entitylist.style-grid .add {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,427 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import filesize from 'filesize';
|
||||||
|
import { formatRelative, fromUnixTime, parseISO } from 'date-fns';
|
||||||
|
import Ellipsis from '../utils/Ellipsis.svelte';
|
||||||
|
import UpObject from '../display/UpObject.svelte';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import type { AttributeUpdate, WidgetChange } from '../../types/base';
|
||||||
|
import type { UpEntry, UpListing } from '@upnd/upend';
|
||||||
|
import IconButton from '../utils/IconButton.svelte';
|
||||||
|
import Selector, { type SelectorValue, selectorValueAsValue } from '../utils/Selector.svelte';
|
||||||
|
import Editable from '../utils/Editable.svelte';
|
||||||
|
import { query } from '$lib/entity';
|
||||||
|
import { type Readable, readable } from 'svelte/store';
|
||||||
|
import { defaultEntitySort, entityValueSort } from '../../util/sort';
|
||||||
|
import { attributeLabels } from '../../util/labels';
|
||||||
|
import { formatDuration } from '../../util/fragments/time';
|
||||||
|
import { i18n } from '../../i18n';
|
||||||
|
import UpLink from '../display/UpLink.svelte';
|
||||||
|
import { ATTR_ADDED, ATTR_LABEL } from '@upnd/upend/constants';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let columns: string | undefined = undefined;
|
||||||
|
export let header = true;
|
||||||
|
|
||||||
|
export let orderByValue = false;
|
||||||
|
export let columnWidths: string[] | undefined = undefined;
|
||||||
|
|
||||||
|
export let entries: UpEntry[];
|
||||||
|
export let attributes: string[] | undefined = undefined;
|
||||||
|
|
||||||
|
// Display
|
||||||
|
$: displayColumns = (columns || 'entity, attribute, value').split(',').map((c) => c.trim());
|
||||||
|
|
||||||
|
const TIMESTAMP_COL = 'timestamp';
|
||||||
|
const PROVENANCE_COL = 'provenance';
|
||||||
|
const ENTITY_COL = 'entity';
|
||||||
|
const ATTR_COL = 'attribute';
|
||||||
|
const VALUE_COL = 'value';
|
||||||
|
|
||||||
|
$: templateColumns = (
|
||||||
|
(displayColumns || []).map((column, idx) => {
|
||||||
|
if (columnWidths?.[idx]) return columnWidths[idx];
|
||||||
|
return 'minmax(6em, auto)';
|
||||||
|
}) as string[]
|
||||||
|
)
|
||||||
|
.concat(['auto'])
|
||||||
|
.join(' ');
|
||||||
|
|
||||||
|
// Editing
|
||||||
|
let adding = false;
|
||||||
|
let addHover = false;
|
||||||
|
let addFocus = false;
|
||||||
|
let newAttrSelector: Selector;
|
||||||
|
let newEntryAttribute = '';
|
||||||
|
let newEntryValue: SelectorValue | undefined;
|
||||||
|
|
||||||
|
$: if (adding && newAttrSelector) newAttrSelector.focus();
|
||||||
|
$: if (!addFocus && !addHover) adding = false;
|
||||||
|
|
||||||
|
async function addEntry(attribute: string, value: SelectorValue) {
|
||||||
|
dispatch('change', {
|
||||||
|
type: 'create',
|
||||||
|
attribute,
|
||||||
|
value: await selectorValueAsValue(value)
|
||||||
|
} as WidgetChange);
|
||||||
|
newEntryAttribute = '';
|
||||||
|
newEntryValue = undefined;
|
||||||
|
}
|
||||||
|
async function removeEntry(address: string) {
|
||||||
|
if (confirm($i18n.t('Are you sure you want to remove the property?'))) {
|
||||||
|
dispatch('change', { type: 'delete', address } as WidgetChange);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function updateEntry(address: string, attribute: string, value: SelectorValue) {
|
||||||
|
dispatch('change', {
|
||||||
|
type: 'update',
|
||||||
|
address,
|
||||||
|
attribute,
|
||||||
|
value: await selectorValueAsValue(value)
|
||||||
|
} as AttributeUpdate);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Labelling
|
||||||
|
let labelListing: Readable<UpListing> = readable(undefined);
|
||||||
|
$: {
|
||||||
|
const addresses = [];
|
||||||
|
entries
|
||||||
|
.flatMap((e) => (e.value.t === 'Address' ? [e.entity, e.value.c] : [e.entity]))
|
||||||
|
.forEach((addr) => {
|
||||||
|
if (!addresses.includes(addr)) {
|
||||||
|
addresses.push(addr);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const addressesString = addresses.map((addr) => `@${addr}`).join(' ');
|
||||||
|
|
||||||
|
labelListing = query(`(matches (in ${addressesString}) "${ATTR_LABEL}" ? )`).result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sorting
|
||||||
|
let sortedEntries = entries;
|
||||||
|
|
||||||
|
let sortKeys: { [key: string]: string[] } = {};
|
||||||
|
function addSortKeys(key: string, vals: string[], resort: boolean) {
|
||||||
|
if (!sortKeys[key]) {
|
||||||
|
sortKeys[key] = [];
|
||||||
|
}
|
||||||
|
let changed = false;
|
||||||
|
vals.forEach((val) => {
|
||||||
|
if (!sortKeys[key].includes(val)) {
|
||||||
|
changed = true;
|
||||||
|
sortKeys[key].push(val);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (resort && changed) sortEntries();
|
||||||
|
}
|
||||||
|
|
||||||
|
function sortEntries() {
|
||||||
|
sortedEntries = orderByValue
|
||||||
|
? entityValueSort(entries, Object.assign(sortKeys, $attributeLabels))
|
||||||
|
: defaultEntitySort(entries, Object.assign(sortKeys, $attributeLabels));
|
||||||
|
}
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if ($labelListing) {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
addSortKeys(entry.entity, $labelListing.getObject(entry.entity).identify(), false);
|
||||||
|
|
||||||
|
if (entry.value.t === 'Address') {
|
||||||
|
addSortKeys(
|
||||||
|
entry.value.c,
|
||||||
|
$labelListing.getObject(String(entry.value.c)).identify(),
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
sortEntries();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
addSortKeys(entry.entity, entry.listing.getObject(entry.entity).identify(), false);
|
||||||
|
if (entry.value.t === 'Address') {
|
||||||
|
addSortKeys(entry.value.c, entry.listing.getObject(String(entry.value.c)).identify(), false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
sortEntries();
|
||||||
|
|
||||||
|
// Visibility
|
||||||
|
let visible: Set<string> = new Set();
|
||||||
|
let observer = new IntersectionObserver((intersections) => {
|
||||||
|
intersections.forEach((intersection) => {
|
||||||
|
const address = (intersection.target as HTMLElement).dataset['address'];
|
||||||
|
if (!address) {
|
||||||
|
console.warn('Intersected wrong element?');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (intersection.isIntersecting) {
|
||||||
|
visible.add(address);
|
||||||
|
}
|
||||||
|
visible = visible;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function observe(node: HTMLElement) {
|
||||||
|
observer.observe(node);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
observer.unobserve(node);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Formatting & Display
|
||||||
|
const COLUMN_LABELS: { [key: string]: string } = {
|
||||||
|
timestamp: $i18n.t('Added at'),
|
||||||
|
provenance: $i18n.t('Provenance'),
|
||||||
|
entity: $i18n.t('Entity'),
|
||||||
|
attribute: $i18n.t('Attribute'),
|
||||||
|
value: $i18n.t('Value')
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatValue(value: string | number, attribute: string): string {
|
||||||
|
try {
|
||||||
|
switch (attribute) {
|
||||||
|
case 'FILE_SIZE':
|
||||||
|
return filesize(parseInt(String(value), 10), { base: 2 });
|
||||||
|
case ATTR_ADDED:
|
||||||
|
case 'LAST_VISITED':
|
||||||
|
return formatRelative(fromUnixTime(parseInt(String(value), 10)), new Date());
|
||||||
|
case 'NUM_VISITED':
|
||||||
|
return `${value} times`;
|
||||||
|
case 'MEDIA_DURATION':
|
||||||
|
return formatDuration(parseInt(String(value), 10));
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// noop.
|
||||||
|
}
|
||||||
|
return String(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unused attributes
|
||||||
|
let unusedAttributes = [];
|
||||||
|
|
||||||
|
$: (async () => {
|
||||||
|
unusedAttributes = await Promise.all(
|
||||||
|
(attributes || []).filter((attr) => !entries.some((entry) => entry.attribute === attr))
|
||||||
|
);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="entry-list" style:--template-columns={templateColumns}>
|
||||||
|
{#if header}
|
||||||
|
<header>
|
||||||
|
{#each displayColumns as column}
|
||||||
|
<div class="label">
|
||||||
|
{COLUMN_LABELS[column] || $attributeLabels[column] || column}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
<div class="attr-action"></div>
|
||||||
|
</header>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#each sortedEntries as entry (entry.address)}
|
||||||
|
{#if visible.has(entry.address)}
|
||||||
|
{#each displayColumns as column}
|
||||||
|
{#if column == TIMESTAMP_COL}
|
||||||
|
<div class="cell" title={entry.timestamp}>
|
||||||
|
{formatRelative(parseISO(entry.timestamp), new Date())}
|
||||||
|
</div>
|
||||||
|
{:else if column == PROVENANCE_COL}
|
||||||
|
<div class="cell">{entry.provenance}</div>
|
||||||
|
{:else if column == ENTITY_COL}
|
||||||
|
<div class="cell entity mark-entity">
|
||||||
|
<UpObject
|
||||||
|
link
|
||||||
|
labels={$labelListing?.getObject(String(entry.entity))?.identify() || []}
|
||||||
|
address={entry.entity}
|
||||||
|
on:resolved={(event) => {
|
||||||
|
addSortKeys(entry.entity, event.detail, true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else if column == ATTR_COL}
|
||||||
|
<div
|
||||||
|
class="cell mark-attribute"
|
||||||
|
class:formatted={Boolean(Object.keys($attributeLabels).includes(entry.attribute))}
|
||||||
|
>
|
||||||
|
<UpLink to={{ attribute: entry.attribute }}>
|
||||||
|
<Ellipsis
|
||||||
|
value={$attributeLabels[entry.attribute] || entry.attribute}
|
||||||
|
title={$attributeLabels[entry.attribute]
|
||||||
|
? `${$attributeLabels[entry.attribute]} (${entry.attribute})`
|
||||||
|
: entry.attribute}
|
||||||
|
/>
|
||||||
|
</UpLink>
|
||||||
|
</div>
|
||||||
|
{:else if column == VALUE_COL}
|
||||||
|
<div
|
||||||
|
class="cell value mark-value"
|
||||||
|
data-address={entry.value.t === 'Address' ? entry.value.c : undefined}
|
||||||
|
>
|
||||||
|
<Editable
|
||||||
|
value={entry.value}
|
||||||
|
on:edit={(ev) => updateEntry(entry.address, entry.attribute, ev.detail)}
|
||||||
|
>
|
||||||
|
{#if entry.value.t === 'Address'}
|
||||||
|
<UpObject
|
||||||
|
link
|
||||||
|
address={String(entry.value.c)}
|
||||||
|
labels={$labelListing?.getObject(String(entry.value.c))?.identify() || []}
|
||||||
|
on:resolved={(event) => {
|
||||||
|
addSortKeys(String(entry.value.c), event.detail, true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<div class:formatted={Boolean(formatValue(entry.value.c, entry.attribute))}>
|
||||||
|
<Ellipsis
|
||||||
|
value={formatValue(entry.value.c, entry.attribute) || String(entry.value.c)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</Editable>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div>?</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
<div class="attr-action">
|
||||||
|
<IconButton
|
||||||
|
plain
|
||||||
|
subdued
|
||||||
|
name="x-circle"
|
||||||
|
color="#dc322f"
|
||||||
|
on:click={() => removeEntry(entry.address)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="skeleton" data-address={entry.address} use:observe>...</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#each unusedAttributes as attribute}
|
||||||
|
{#each displayColumns as column}
|
||||||
|
{#if column == ATTR_COL}
|
||||||
|
<div
|
||||||
|
class="cell mark-attribute"
|
||||||
|
class:formatted={Boolean(Object.keys($attributeLabels).includes(attribute))}
|
||||||
|
>
|
||||||
|
<UpLink to={{ attribute }}>
|
||||||
|
<Ellipsis
|
||||||
|
value={$attributeLabels[attribute] || attribute}
|
||||||
|
title={$attributeLabels[attribute]
|
||||||
|
? `${$attributeLabels[attribute]} (${attribute})`
|
||||||
|
: attribute}
|
||||||
|
/>
|
||||||
|
</UpLink>
|
||||||
|
</div>
|
||||||
|
{:else if column == VALUE_COL}
|
||||||
|
<div class="cell">
|
||||||
|
<Editable on:edit={(ev) => addEntry(attribute, ev.detail)}>
|
||||||
|
<span class="unset">{$i18n.t('(unset)')}</span>
|
||||||
|
</Editable>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="cell"></div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
<div class="attr-action"></div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#if !attributes?.length}
|
||||||
|
{#if adding}
|
||||||
|
<div
|
||||||
|
class="add-row"
|
||||||
|
on:mouseenter={() => (addHover = true)}
|
||||||
|
on:mouseleave={() => (addHover = false)}
|
||||||
|
>
|
||||||
|
{#each displayColumns as column}
|
||||||
|
{#if column == ATTR_COL}
|
||||||
|
<div class="cell mark-attribute">
|
||||||
|
<Selector
|
||||||
|
types={['Attribute', 'NewAttribute']}
|
||||||
|
on:input={(ev) => (newEntryAttribute = ev.detail.name)}
|
||||||
|
on:focus={(ev) => (addFocus = ev.detail)}
|
||||||
|
keepFocusOnSet
|
||||||
|
bind:this={newAttrSelector}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else if column === VALUE_COL}
|
||||||
|
<div class="cell mark-value">
|
||||||
|
<Selector
|
||||||
|
on:input={(ev) => (newEntryValue = ev.detail)}
|
||||||
|
on:focus={(ev) => (addFocus = ev.detail)}
|
||||||
|
keepFocusOnSet
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="cell"></div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
<div class="attr-action">
|
||||||
|
<IconButton name="save" on:click={() => addEntry(newEntryAttribute, newEntryValue)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="add-button">
|
||||||
|
<IconButton outline subdued name="plus-circle" on:click={() => (adding = true)} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.entry-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: var(--template-columns);
|
||||||
|
gap: 0.05rem 0.5rem;
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: contents;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
font-family: var(--monospace-font);
|
||||||
|
line-break: anywhere;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
&.formatted,
|
||||||
|
.formatted {
|
||||||
|
font-family: var(--default-font);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.attr-action {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-row {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-button {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unset {
|
||||||
|
opacity: 0.66;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,59 +1,53 @@
|
||||||
// import { useSWR } from "sswr";
|
// import { useSWR } from "sswr";
|
||||||
import { derived, type Readable } from "svelte/store";
|
import { derived, type Readable } from 'svelte/store';
|
||||||
import { UpListing, UpObject } from "@upnd/upend";
|
import { UpListing, UpObject } from '@upnd/upend';
|
||||||
import type {
|
import type { EntityInfo, EntityListing, ListingResult } from '@upnd/upend/types';
|
||||||
ListingResult,
|
import { useSWR } from '$lib/util/fetch';
|
||||||
EntityListing,
|
import api from './api';
|
||||||
EntityInfo,
|
import debug from 'debug';
|
||||||
} from "@upnd/upend/types";
|
|
||||||
import { useSWR } from "../util/fetch";
|
const dbg = debug('kestrel:lib');
|
||||||
import api from "./api";
|
|
||||||
import debug from "debug";
|
|
||||||
const dbg = debug("kestrel:lib");
|
|
||||||
|
|
||||||
export function useEntity(address: string) {
|
export function useEntity(address: string) {
|
||||||
const { data, error, revalidate } = useSWR<EntityListing, unknown>(
|
const { data, error, revalidate } = useSWR<EntityListing, unknown>(
|
||||||
`${api.apiUrl}/obj/${address}`,
|
`${api.apiUrl}/obj/${address}`
|
||||||
);
|
);
|
||||||
|
|
||||||
const entity: Readable<UpObject | undefined> = derived(data, ($listing) => {
|
const entity: Readable<UpObject | undefined> = derived(data, ($listing) => {
|
||||||
if ($listing) {
|
if ($listing) {
|
||||||
const listing = new UpListing($listing.entries);
|
const listing = new UpListing($listing.entries);
|
||||||
return listing.getObject(address);
|
return listing.getObject(address);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const entityInfo: Readable<EntityInfo | undefined> = derived(
|
const entityInfo: Readable<EntityInfo | undefined> = derived(data, ($listing) => {
|
||||||
data,
|
if ($listing) {
|
||||||
($listing) => {
|
return $listing.entity;
|
||||||
if ($listing) {
|
}
|
||||||
return $listing.entity;
|
});
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
entity,
|
entity,
|
||||||
entityInfo,
|
entityInfo,
|
||||||
error,
|
error,
|
||||||
revalidate,
|
revalidate
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function query(query: string) {
|
export function query(query: string) {
|
||||||
dbg(`Querying: ${query}`);
|
dbg(`Querying: ${query}`);
|
||||||
const { data, error, revalidate } = useSWR<ListingResult, unknown>(
|
const { data, error, revalidate } = useSWR<ListingResult, unknown>(`${api.apiUrl}/query`, {
|
||||||
`${api.apiUrl}/query`,
|
method: 'POST',
|
||||||
{ method: "POST", body: query },
|
body: query
|
||||||
);
|
});
|
||||||
|
|
||||||
const result = derived(data, ($values) => {
|
const result = derived(data, ($values) => {
|
||||||
return $values ? new UpListing($values) : undefined;
|
return $values ? new UpListing($values) : undefined;
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
result,
|
result,
|
||||||
error,
|
error,
|
||||||
revalidate,
|
revalidate
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
// place files you want to import through the `$lib` alias in this folder.
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue