ontologyviewer 0.1.2 → 0.2.0

package/README.ja.md

@@ -19,21 +19,21 @@ Webページ内のTurtleを、読み取り専用の **Schema** 図と **Triples*
 </script>
 
 <script type="module">
-  import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.2/dist/ontologyviewer.esm.min.mjs";
+  import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.2.0/dist/ontologyviewer.esm.min.mjs";
   ontologyviewer.initialize({ startOnLoad: true });
 </script>
 ```
 
 実行されない `text/turtle` の `<script>` はDOM内に保持され、Viewer稼働中は非表示です。この形式ならTurtleの `<...>` IRIをHTML entityへ変換せず、そのまま記述できます。ただし、Turtle内にリテラルな `</script>` があるとHTMLがsource要素の終了タグとして扱うため避けてください。従来の `<pre class="ontologyviewer">` も利用できますが、HTMLソース内の `<` は `&lt;` と書く必要があります。`destroy()` はどちらのsource要素も元の状態へ戻します。
 
-`examples/` のHTMLをFinderなどから直接開かないでください。ブラウザのES Moduleは `file:` URLでCORSブロックされます。`webplugin/` で `npm run examples` を実行し、`http://127.0.0.1:4173/examples/index.html` を開いてください。直開きや `dist/` 未生成時には、example画面に起動手順が表示されます。
+`examples/` のHTMLをFinderなどから直接開かないでください。ブラウザのES Moduleは `file:` URLでCORSブロックされます。`npm run examples` を実行し、`http://127.0.0.1:4173/examples/index.html` を開いてください。直開きや `dist/` 未生成時には、example画面に起動手順が表示されます。
 
-再現性を重視するページでは完全なバージョン（`@0.1.2`）を固定してください。`@10` のようなmajor指定は互換更新に追従できますが、配信内容は将来変化します。
+再現性を重視するページでは完全なバージョン（`@0.2.0`）を固定してください。`@10` のようなmajor指定は互換更新に追従できますが、配信内容は将来変化します。
 
 ## npmから利用
 
 ```bash
-npm install --save-exact ontologyviewer@0.1.2
+npm install --save-exact ontologyviewer@0.2.0
 ```
 
 ```ts
@@ -51,6 +51,7 @@ await manager.ready;
 
 - datatype property、アイコン、色指定、cardinality、推論関係、統計、凡例、読み取り専用Inspectorを備えたSchemaカード。
 - Triples表示、検索、近傍focus、pan、zoom、fit、fCoSE/Dagre、node移動、PNG出力。
+- Triples表示の簡約（既定で有効）。ラベル・コメント・標準語彙の用語を、それを参照しているノードに畳み込みます。1182トリプルのスキーマオントロジーで箱が3分の1、エッジが70%減りました。ツールバーのトグルで展開でき、`compactTriples: false` または `data-compact-triples="false"` で最初から展開状態にできます。
 - 1ページ内の複数Viewerを完全に分離。
 - 英語・日本語UIとlight/darkテーマの自動追従。
 - `storageKey` を指定した場合だけ、有効値を検査してレイアウトを `localStorage` に保存。
@@ -69,6 +70,7 @@ await manager.ready;
   data-locale="ja"
   data-layout="dagre"
   data-default-view="schema"
+  data-compact-triples="true"
   data-base-iri="https://example.org/base/"
   data-storage-key="harbor-market"
 >...</script>
@@ -83,6 +85,7 @@ const source = document.querySelector<HTMLElement>("#ontology")!;
 const instance = ontologyviewer.render(source, {
   baseIri: "https://example.org/base/",
   defaultView: "schema",
+  compactTriples: true,
   layout: "fcose",
   storageKey: "example-layout", // 省略すると保存しない
   onError(error) {
@@ -107,13 +110,13 @@ inline `<style>` が許可されない場合は自動注入を止め、CSSを明
 
 ```html
 <link rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.2/dist/ontologyviewer.css"
+      href="https://cdn.jsdelivr.net/npm/ontologyviewer@0.2.0/dist/ontologyviewer.css"
       data-ontologyviewer-styles>
 <script type="module" src="/assets/start-ontologyviewer.mjs"></script>
 ```
 
 ```js
-import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.2/dist/ontologyviewer.esm.min.mjs";
+import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.2.0/dist/ontologyviewer.esm.min.mjs";
 ontologyviewer.initialize({ startOnLoad: true, injectStyles: false });
 ```
 
@@ -142,7 +145,7 @@ ESM bundleはES2020をtargetとし、CIでPlaywright Chromium、Firefox、WebKit
 
 ## 開発・公開
 
-`webplugin/` は自己完結しています。内容を新しいrepositoryのrootへコピーしても、次の手順で検証できます。
+このパッケージは自己完結しています。cloneしたあと、次の手順で検証できます。
 
 ```bash
 npm ci

package/README.md

@@ -19,21 +19,21 @@ A standalone, read-only Turtle ontology viewer for web pages. It renders class-f
 </script>
 
 <script type="module">
-  import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.2/dist/ontologyviewer.esm.min.mjs";
+  import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.2.0/dist/ontologyviewer.esm.min.mjs";
   ontologyviewer.initialize({ startOnLoad: true });
 </script>
 ```
 
 The inert `text/turtle` script is retained in the DOM and hidden while its viewer is active. It accepts ordinary Turtle `<...>` IRIs without HTML entity escaping. Avoid a literal `</script>` sequence in that Turtle because HTML treats it as the closing tag. A `<pre class="ontologyviewer">` remains supported, but literal HTML source must write `<` as `&lt;`; `destroy()` restores either source element.
 
-Do not double-click the files under `examples/`: browser ES Modules are commonly blocked on `file:` URLs. From `webplugin/`, run `npm run examples` and open `http://127.0.0.1:4173/examples/index.html`. The example page now keeps an actionable message visible when it is opened incorrectly or when `dist/` has not been built.
+Do not double-click the files under `examples/`: browser ES Modules are commonly blocked on `file:` URLs. Run `npm run examples` and open `http://127.0.0.1:4173/examples/index.html`. The example page now keeps an actionable message visible when it is opened incorrectly or when `dist/` has not been built.
 
-For reproducible pages, pin a complete version (`@0.1.2`). A major selector such as `@10` follows compatible releases but can change the delivered bytes.
+For reproducible pages, pin a complete version (`@0.2.0`). A major selector such as `@10` follows compatible releases but can change the delivered bytes.
 
 ## Install from npm
 
 ```bash
-npm install --save-exact ontologyviewer@0.1.2
+npm install --save-exact ontologyviewer@0.2.0
 ```
 
 ```ts
@@ -51,6 +51,7 @@ await manager.ready;
 
 - Schema cards with datatype properties, icons, color hints, cardinality, inferred-relation styling, statistics, legend, and read-only Inspector.
 - Raw Triples view, search, neighborhood focus, pan, zoom, fit, fCoSE/Dagre layouts, node dragging, and PNG export.
+- Compact Triples view (on by default): labels, comments, and standard vocabulary terms are folded into the nodes that reference them, which removed two thirds of the boxes and 70% of the edges on a 1182-triple schema ontology. A toolbar toggle expands them again; set `compactTriples: false` or `data-compact-triples="false"` to start expanded.
 - Multiple isolated viewers in one document.
 - English and Japanese UI; automatic light/dark theme tracking.
 - Optional, validated `localStorage` layout persistence.
@@ -69,6 +70,7 @@ await manager.ready;
   data-locale="ja"
   data-layout="dagre"
   data-default-view="schema"
+  data-compact-triples="true"
   data-base-iri="https://example.org/base/"
   data-storage-key="harbor-market"
 >...</script>
@@ -83,6 +85,7 @@ const source = document.querySelector<HTMLElement>("#ontology")!;
 const instance = ontologyviewer.render(source, {
   baseIri: "https://example.org/base/",
   defaultView: "schema",
+  compactTriples: true,
   layout: "fcose",
   storageKey: "example-layout", // omit to disable persistence
   onError(error) {
@@ -109,14 +112,14 @@ Automatic style injection is convenient but requires an inline `<style>`. Disabl
 
 ```html
 <link rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.2/dist/ontologyviewer.css"
+      href="https://cdn.jsdelivr.net/npm/ontologyviewer@0.2.0/dist/ontologyviewer.css"
       data-ontologyviewer-styles>
 <script type="module" src="/assets/start-ontologyviewer.mjs"></script>
 ```
 
 ```js
 // /assets/start-ontologyviewer.mjs
-import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.2/dist/ontologyviewer.esm.min.mjs";
+import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.2.0/dist/ontologyviewer.esm.min.mjs";
 ontologyviewer.initialize({ startOnLoad: true, injectStyles: false });
 ```
 
@@ -145,7 +148,7 @@ The ESM bundle targets ES2020 and is tested in CI with current Playwright Chromi
 
 ## Development and publishing
 
-`webplugin/` is self-contained. Copy its contents to a repository root without the parent VS Code extension and run:
+This package is self-contained. After cloning, run:
 
 ```bash
 npm ci

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EAEjB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAIjB,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACT,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AASrC,wBAAgB,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,GAAE,qBAA0B,GAAG,sBAAsB,CAgCxG;AAED,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,qBAAqB,CA+BjF;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,sBAAsB,GAAG,SAAS,CAGpF;AA2ED,QAAA,MAAM,cAAc;;;;CAAsC,CAAC;AAC3D,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EAEjB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAIjB,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACT,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AASrC,wBAAgB,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,GAAE,qBAA0B,GAAG,sBAAsB,CAgCxG;AAED,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,qBAAqB,CA+BjF;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,sBAAsB,GAAG,SAAS,CAGpF;AAqFD,QAAA,MAAM,cAAc;;;;CAAsC,CAAC;AAC3D,eAAe,cAAc,CAAC"}

package/dist/locale.d.ts

@@ -2,6 +2,9 @@ export type Locale = "auto" | "en" | "ja";
 export interface Messages {
     schemaView: string;
     triplesView: string;
+    compactTriples: string;
+    compactTriplesHint: string;
+    compactTriplesActiveHint: string;
     searchPlaceholder: string;
     noResults: string;
     properties: string;

package/dist/locale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locale.d.ts","sourceRoot":"","sources":["../src/locale.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAgED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAOzD;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAEpD"}
+{"version":3,"file":"locale.d.ts","sourceRoot":"","sources":["../src/locale.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAsED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAOzD;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAEpD"}

package/dist/meta.json

@@ -6105,6 +6105,17 @@
       "imports": [],
       "format": "esm"
     },
+    "src/rdf/compactTriples.ts": {
+      "bytes": 5450,
+      "imports": [
+        {
+          "path": "src/rdf/vocabulary.ts",
+          "kind": "import-statement",
+          "original": "./vocabulary"
+        }
+      ],
+      "format": "esm"
+    },
     "src/rdf/graphModel.ts": {
       "bytes": 4741,
       "imports": [
@@ -6171,7 +6182,7 @@
       "format": "esm"
     },
     "src/locale.ts": {
-      "bytes": 2920,
+      "bytes": 3622,
       "imports": [],
       "format": "esm"
     },
@@ -6191,7 +6202,7 @@
       "format": "esm"
     },
     "src/viewer.ts": {
-      "bytes": 33440,
+      "bytes": 36095,
       "imports": [
         {
           "path": "node_modules/cytoscape/dist/cytoscape.esm.mjs",
@@ -6213,6 +6224,11 @@
           "kind": "import-statement",
           "original": "./rdf/parser"
         },
+        {
+          "path": "src/rdf/compactTriples.ts",
+          "kind": "import-statement",
+          "original": "./rdf/compactTriples"
+        },
         {
           "path": "src/rdf/graphModel.ts",
           "kind": "import-statement",
@@ -6257,7 +6273,7 @@
       "format": "esm"
     },
     "src/index.ts": {
-      "bytes": 6519,
+      "bytes": 7082,
       "imports": [
         {
           "path": "src/viewer.ts",
@@ -6279,7 +6295,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3043641
+      "bytes": 3056673
     },
     "dist/ontologyviewer.esm.min.mjs": {
       "imports": [],
@@ -6292,13 +6308,13 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "node_modules/layout-base/layout-base.js": {
-          "bytesInOutput": 59419
+          "bytesInOutput": 59409
         },
         "node_modules/cose-base/cose-base.js": {
-          "bytesInOutput": 45319
+          "bytesInOutput": 45326
         },
         "node_modules/cytoscape-fcose/cytoscape-fcose.js": {
-          "bytesInOutput": 20847
+          "bytesInOutput": 20824
         },
         "node_modules/lodash/_listCacheClear.js": {
           "bytesInOutput": 78
@@ -7186,10 +7202,10 @@
           "bytesInOutput": 204
         },
         "node_modules/cytoscape/dist/cytoscape.esm.mjs": {
-          "bytesInOutput": 379045
+          "bytesInOutput": 379057
         },
         "src/viewer.ts": {
-          "bytesInOutput": 16786
+          "bytesInOutput": 17479
         },
         "node_modules/n3/src/N3Lexer.js": {
           "bytesInOutput": 8895
@@ -7209,6 +7225,9 @@
         "src/rdf/vocabulary.ts": {
           "bytesInOutput": 4401
         },
+        "src/rdf/compactTriples.ts": {
+          "bytesInOutput": 918
+        },
         "src/rdf/graphModel.ts": {
           "bytesInOutput": 2064
         },
@@ -7225,7 +7244,7 @@
           "bytesInOutput": 1784
         },
         "src/locale.ts": {
-          "bytesInOutput": 2262
+          "bytesInOutput": 3112
         },
         "src/search.ts": {
           "bytesInOutput": 1072
@@ -7237,10 +7256,10 @@
           "bytesInOutput": 828
         },
         "src/index.ts": {
-          "bytesInOutput": 9683
+          "bytesInOutput": 11581
         }
       },
-      "bytes": 701981
+      "bytes": 706326
     }
   }
 }

package/dist/ontologyviewer.css

@@ -71,6 +71,51 @@
   color: #fff;
   background: #0878bd;
 }
+/* Compaction toggle. A checkbox rather than a pressed button, because
+   schema/triples is an exclusive selection while this is an independent on/off
+   — and a checkbox shows its state without depending on colour. Styled as a
+   toolbar chip so it sits at the same height as the buttons beside it. */
+.ontologyviewer-root .ov-compact-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 4px 10px 4px 8px;
+  border: 1px solid var(--ov-border);
+  border-radius: 6px;
+  color: var(--ov-fg);
+  background: var(--ov-bg);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+.ontologyviewer-root .ov-compact-toggle:hover { background: var(--ov-hover); }
+.ontologyviewer-root .ov-compact-toggle[hidden] { display: none; }
+.ontologyviewer-root .ov-compact-checkbox {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: #0878bd;
+  cursor: pointer;
+}
+/* Keyboard focus lands on the input, so raise the ring to the whole chip.
+   Scoped to :focus-visible so a mouse click does not leave a blue ring behind
+   that reads as "still enabled" on an unchecked control. */
+.ontologyviewer-root .ov-compact-toggle:has(.ov-compact-checkbox:focus-visible) {
+  outline: 2px solid #0878bd;
+  outline-offset: 1px;
+}
+/* Checked state also shifts the chip itself, so the setting reads at a glance
+   from across the toolbar rather than only from the 14px box. */
+.ontologyviewer-root .ov-compact-toggle:has(.ov-compact-checkbox:checked) {
+  border-color: #0878bd;
+  color: #0878bd;
+  font-weight: 600;
+}
+.ontologyviewer-root.ov-dark .ov-compact-toggle:has(.ov-compact-checkbox:checked) {
+  border-color: #4aa3dd;
+  color: #7dc4f0;
+}
 .ontologyviewer-root .ov-search {
   flex: 1 1 250px;
   min-width: 130px;