@internetarchive/cdxsummary - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

cdxsummary.js

@@ -50,2 +50,16 @@ export class CDXSummary extends HTMLElement {
 
+  randNums(size, samples=1) {
+    const sidx = [...Array(size).keys()];
+    if(samples >= size) {
+      return sidx;
+    }
+    const ridx = [];
+    for (let i=0; i < samples; i++) {
+      const r = Math.floor(Math.random()*(size-i));
+      ridx[i] = sidx[r];
+      sidx[r] = sidx[size-i-1];
+    }
+    return ridx;
+  }
+
   overviewTable() {
@@ -85,3 +99,3 @@ return `
   gridTable(obj, group='', cols=[], format=c=>c) {
-    if (!cols.length) {
+    if(!cols.length) {
       cols = Object.keys(Object.values(obj)[0]);
@@ -157,3 +171,3 @@ }
     return `
-<details ${this.drawer} class="samples">
+<details${this.fold.includes('samples') ? '' : ' open'} class="samples">
 <summary data-open="Hide Sample URIs" data-close="Show ${this.data.samples.length} Random Sample URIs"></summary>
@@ -168,19 +182,12 @@ <ul>
   sampleThumbs() {
-    let s = this.data.samples;
-    const ridx = new Set();
-    while (ridx.size < Math.min(this.thumbs, s.length)) {
-      ridx.add(Math.floor(Math.random()*s.length));
-    }
-    return `
-<div class="sample-thumbs">
-${[...ridx].map(i => `
-  <div class="thumb-container">
-    <div class="thumb" style="animation-delay: -${Math.random()*10|0}s;">
-      <a href="${this.urim(s[i][0], s[i][1])}">${s[i][1]}</a>
-      <iframe src="${this.urim(s[i][0], s[i][1], 'if_')}" sandbox="allow-same-origin allow-scripts" scrolling="no" frameborder="0" onload="this.style.backgroundColor='white'"></iframe>
-    </div>
+    const s = this.data.samples;
+    const ridx = this.randNums(s.length, this.thumbs);
+    return this.randNums(s.length, this.thumbs).map(i => `
+<div class="thumb-container">
+  <div class="thumb" style="animation-delay: -${Math.random()*10|0}s;">
+    <a href="${this.urim(s[i][0], s[i][1])}">${s[i][1]}</a>
+    <iframe src="${this.urim(s[i][0], s[i][1], 'if_')}" sandbox="allow-same-origin allow-scripts" scrolling="no" frameborder="0" onload="this.style.backgroundColor='white'"></iframe>
   </div>
-`).join('\n')}
 </div>
-`;
+`).join('\n');
   }
@@ -190,3 +197,3 @@
     const container = this.shadow.getElementById('container');
-    if (this.data['msg']) {
+    if(this.data['msg']) {
       container.innerHTML = `<p class="msg">${this.data['msg']}</p>`;
@@ -208,3 +215,3 @@ return;
 <h2>Overview</h2>
-<p>
+<p${this.compact}>
 This overview is based on the sorted unique capture index (CDX) file of all the WARC files in the ${this.type}.
@@ -216,3 +223,3 @@ The <code>Total WARC Records Size</code> value is neither the combined size of the WARC files nor the sum of the sizes of the archived resources, instead, it is the sum of the sizes of the compressed WARC Response records (including their headers).
 <h2>MIME Type and Status Code</h2>
-<p>
+<p${this.compact}>
 The matrix below shows HTTP status code groups of captures of various media types in this ${this.type}.
@@ -225,3 +232,3 @@ The <code>Revisit</code> records do not represent an independent media type, instead, they reflect an unchanged state of representations of resources from some of their prior observations (i.e., the same content digest for the same URI).
 <h2>Path Segment and Query Parameter</h2>
-<p>
+<p${this.compact}>
 The matrix below shows the number of path segments and the number of query parameters of various URIs in this ${this.type}.
@@ -235,3 +242,3 @@ For example, the cell <code>P0</code> and <code>Q0</code> shows the number of captures of homepages of various hosts with zero path segments and zero query parameters.
 <h2>Year and Month</h2>
-<p>
+<p${this.compact}>
 The matrix below shows the number of captures of this ${this.type} observed in different calendar years and months.
@@ -243,3 +250,3 @@ The <code>TOTAL</code> column shows combined counts for corresponding years and the <code>TOTAL</code> row (displayed only if the captures were observed across multiple calendar years) shows the combined number of captures observed in the corresponding calendar months irrespective of their years.
 <h2>Top <i>${this.toNum(Object.keys(this.data.tophosts).length)}</i> Out of <i>${this.toNum(this.data.hosts)}</i> Hosts</h2>
-<p>
+<p${this.compact}>
 The table below shows the top hosts of this ${this.type} based on the number of captures of URIs from each host.
@@ -251,4 +258,9 @@ The <code>OTHERS</code> row, if present, is the sum of the longtail of hosts.
 <h2>Random HTML Capture Samples</h2>
-${this.sampleThumbs()}
-<p>
+${this.thumbs ? `
+<button id="thumb-loader">Load ${this.thumbs == 1 ? 'a Sample' : `${this.thumbs} Samples`}</button>
+<div id="sample-thumbs">
+${this.fold.includes('thumbs') ? '' : this.sampleThumbs()}
+</div>` : ''
+}
+<p${this.compact}>
 Below is a list of random sample of captured URIs linked to their corresponding Wayback Machine playback URIs from this ${this.type}.
@@ -260,2 +272,8 @@ The sample is chosen only from captures that were observed with the <code>text/html</code> media type and <code>200 OK</code> HTTP status code.
 `;
+
+    if(this.thumbs) {
+      this.shadow.getElementById('thumb-loader').onclick = e => {
+        this.shadow.getElementById('sample-thumbs').innerHTML = this.sampleThumbs();
+      };
+    }
   }
@@ -277,3 +295,4 @@
     this.formatter = (this.format == 'short') ? this.toSn : (this.format == 'percent') ? this.toPerc : this.toNum
-    this.drawer = this.getAttribute('drawer') || '';
+    this.fold = (this.getAttribute('fold') || '').split(/\W+/).filter(Boolean);
+    this.compact = this.fold.includes('description') ? ` title="Click to expand, if truncated..." class="compact" onclick="this.classList.toggle('compact')"` : '';
     this.type = this.getAttribute('type') || 'CDX';
@@ -335,3 +354,3 @@ this.name = this.getAttribute('name') || '';
   }
-  .msg{
+  .msg {
     margin: 5px;
@@ -359,4 +378,2 @@ padding: 5px;
   .thumb-container {
-    width: 294px;
-    height: 186px;
     display: inline-block;
@@ -367,4 +384,5 @@ overflow: hidden;
   .thumb {
-    width: 288px;
-    height: 180px;
+    width: calc(960px * var(--cdxsummary-thumb-scale, 0.3));
+    aspect-ratio: 16 / 10;
+    overflow: hidden;
     border: 1px solid #333;
@@ -401,6 +419,16 @@ border-radius: 4px;
     width: 960px;
-    height: 600px;
+    aspect-ratio: 16 / 10;
     transform-origin: 0 0;
-    transform: scale(0.3, 0.3);
+    transform: scale(var(--cdxsummary-thumb-scale, 0.3));
   }
+  button {
+    margin-bottom: 10px;
+    padding: 5px 15px;
+  }
+  .compact {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+  }
 </style>
@@ -407,0 +435,0 @@ <div id="container">

package.json

 {
   "name": "@internetarchive/cdxsummary",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A Web Component to render CDX Summary JSON files",
@@ -5,0 +5,0 @@ "main": "cdxsummary.js",

README.md

@@ -19,3 +19,3 @@ # CDX Summary Web Component
 To control the maximum number of thumbnails of random sample captures (rendered by embedding them in iframes), specify a positive integer in the `thumbs` attribute.
-The list of random sample capture playback URIs are hidden by default, but can be expanded by setting the `drawer` attribute to `open`.
+Specify a space-separated list of terms `thumbs`, `samples`, and `description` in the `fold` attribute to configure the initial folding/hiding of thumbnails, list of random sample capture playback URIs, and descriptions (the latter, if folded, truncates the paragraph at one line and toggles when clicked).
 The element accepts a `name` attribute, which defaults to the name of the summary file (without extensions).
@@ -35,6 +35,14 @@ A `type` attribute can be used to customize textual descriptions with a value of `collection`, `item`, or `CDX` (defaults to `CDX`).
              playback="https://archive.example.com/memento/"
-             drawer="open">
+             fold="thumbs samples description">
 </cdx-summary>
 ```
 
+Override the `--cdxsummary-thumb-scale` CSS variable to change the size of the thumbnail from the original `960x600` iframe dimension (default scale is set to `0.3`).
+
+```css
+:root {
+  --cdxsummary-thumb-scale: 0.25;
+}
+```
+
 An [interactive test interface](https://internetarchive.github.io/cdx-summary/webcomponent/) is available for the Web Component that renders the JSON summary.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65669

increased by2.44%

Lines of code

1682

increased by1.57%

Number of lines in readme file

47

increased by20.51%

No dependency changes