ixbrl-viewer 1.4.1__py3-none-any.whl → 1.4.86__py3-none-any.whl

iXBRLViewerPlugin/viewer/src/js/viewer.js

@@ -1,11 +1,10 @@
 // See COPYRIGHT.md for copyright information
 
 import $ from 'jquery'
-import { numberMatchSearch, fullDateMatch } from './number-matcher.js'
+import { numberMatchSearch } from './number-matcher.js'
 import { TableExport } from './tableExport.js'
-import { escapeRegex } from './util.js'
 import { IXNode } from './ixnode.js';
-import { setDefault, runGenerator } from './util.js';
+import { getIXHiddenLinkStyle, runGenerator, viewerUniqueId, HIGHLIGHT_COLORS } from './util.js';
 import { DocOrderIndex } from './docOrderIndex.js';
 import { MessageBox } from './messagebox.js';
 
@@ -22,9 +21,9 @@ function localName(e) {
 
 
 export class Viewer {
-    constructor(iv, iframes, report) {
+    constructor(iv, iframes, reportSet) {
         this._iv = iv;
-        this._report = report;
+        this._reportSet = reportSet;
         this._iframes = iframes;
         this._contents = iframes.contents();
         this.onSelect = $.Callbacks();
@@ -65,9 +64,12 @@ export class Viewer {
 
                     viewer._iframes.each(function (docIndex) { 
                         $(this).data("selected", docIndex == viewer._currentDocumentIndex);
-                        viewer._preProcessiXBRL($(this).contents().find("body").get(0), docIndex);
+                        const reportIndex = $(this).data("report-index");
+                        viewer._preProcessiXBRL($(this).contents().find("body").get(0), reportIndex, docIndex, false);
                     });
 
+                    viewer._setContinuationMaps();
+
                     /* Call plugin promise for each document in turn */
                     (async function () {
                         for (const [docIndex, iframe] of viewer._iframes.toArray().entries()) {
@@ -91,7 +93,7 @@ export class Viewer {
                     })()
                         .then(() => viewer._iv.setProgress("Preparing document") )
                         .then(() => {
-                            this._report.setIXNodeMap(this._ixNodeMap);
+                            this._reportSet.setIXNodeMap(this._ixNodeMap);
                             this._applyStyles();
                             this._bindHandlers();
                             this.scale = 1;
@@ -105,14 +107,14 @@ export class Viewer {
     }
 
     _addDocumentSetTabs() {
-        if (this._report.isDocumentSet()) {
+        if (this._reportSet.isMultiDocumentViewer()) {
             $('#ixv .ixds-tabs').show();
-            for (const [i, doc] of this._report.documentSetFiles().entries()) {
-                $('<div class="tab">')
-                    .text(doc)
-                    .prop('title', doc)
+            for (const [i, doc] of this._reportSet.reportFiles().entries()) {
+                $('<button class="tab"></button>')
+                    .text(doc.file)
+                    .prop('title', doc.file)
                     .data('ix-doc-id', i)
-                    .click(() => this.selectDocument(i))
+                    .on("click", () => this.selectDocument(i))
                     .appendTo($('#ixv #viewer-pane .ixds-tabs .tab-area'));
             }
             $('#ixv #viewer-pane .ixds-tabs .tab-area .tab').eq(0).addClass("active");
@@ -123,16 +125,21 @@ export class Viewer {
     // display: block, a div is used, otherwise a span.  Returns the wrapper node
     // as a jQuery node
     _wrapNode(n) {
-        var wrapper = "<span>";
-        const nn = n.getElementsByTagName("*");
-        for (var i = 0; i < nn.length; i++) {
-            if (getComputedStyle(nn[i]).getPropertyValue('display') === "block") {
-                wrapper = '<div>';
-                break;
+        let wrapper = "<span>";
+        if (getComputedStyle(n).getPropertyValue("display") === "block") {
+            wrapper = '<div>';
+        }
+        else {
+            const nn = n.getElementsByTagName("*");
+            for (var i = 0; i < nn.length; i++) {
+                if (getComputedStyle(nn[i]).getPropertyValue('display') === "block") {
+                    wrapper = '<div>';
+                    break;
+                }
             }
         }
         $(n).wrap(wrapper);
-        return $(n).parent();
+        return n.parentNode;
     }
 
 
@@ -230,9 +237,9 @@ export class Viewer {
         const url = $(n).attr("href");
         if (url !== undefined) {
             const [file, fragment] = url.split('#', 2);
-            const docIndex = this._report.documentSetFiles().indexOf(file);
+            const docIndex = this._reportSet.reportFiles().indexOf(file);
             if (!url.includes('/') && docIndex != -1) {
-                $(n).click((e) => { 
+                $(n).on("click", (e) => { 
                     this._showDocumentAndElement(docIndex, fragment);
                     e.preventDefault(); 
                 });
@@ -246,44 +253,52 @@ export class Viewer {
         }
     }
 
-    _findOrCreateWrapperNode(domNode) {
+    _findOrCreateWrapperNode(domNode, inHidden) {
         const v = this;
+
+        if (inHidden) {
+            return $(domNode).addClass("ixbrl-element-hidden");
+        }
+
         /* Is the element the only significant content within a <td> or <th> ? If
-         * so, use that as the wrapper element. */
-        var nodes = $(domNode).closest("td,th").eq(0);
+         * so, use that as the wrapper element.
+         * Check for 'display: table-cell' to avoid using hidden cells */
+        const tableNode = domNode.closest("td,th");
+        const nodes = [];
         const innerText = $(domNode).text();
-        if (nodes.length == 1 && innerText.length > 0) {
+        if (tableNode !== null && getComputedStyle(tableNode).display === 'table-cell' && innerText.length > 0) {
             // Use indexOf rather than a single regex because innerText may
             // be too long for the regex engine 
-            const outerText = $(nodes).text();
+            const outerText = $(tableNode).text();
             const start = outerText.indexOf(innerText);
             const wrapper = outerText.substring(0, start) + outerText.substring(start + innerText.length);
-            if (/[0-9A-Za-z]/.test(wrapper)) {
-                nodes = $();
+            if (!/[0-9A-Za-z]/.test(wrapper)) {
+                nodes.push(tableNode)
             } 
         }
-        /* Otherwise, insert a <span> as wrapper */
+        /* Otherwise, insert a <span> or <div> as wrapper */
         if (nodes.length == 0) {
-            nodes = this._wrapNode(domNode);
-            // Create a node set of current node and all absolutely positioned
-            // descendants.
-            nodes = nodes.find("*").addBack().filter(function (n, e) {
-                return (this == nodes[0] || (getComputedStyle(this).getPropertyValue('position') === "absolute"));
-            });
+            nodes.push(this._wrapNode(domNode));
         }
-        nodes.each(function (i) {
+        // Create a list of the wrapper node, and all absolutely positioned descendants.
+        for (const e of nodes[0].querySelectorAll("*")) { 
+            if (getComputedStyle(e).getPropertyValue('position') === "absolute") { 
+                nodes.push(e);
+            } 
+        }
+        for (const [i, n] of nodes.entries()) {
             // getBoundingClientRect blocks on layout, so only do it if we've actually got absolute nodes
             if (nodes.length > 1) {
-                this.classList.add("ixbrl-contains-absolute");
+                n.classList.add("ixbrl-contains-absolute");
             }
             if (i == 0) {
-                this.classList.add("ixbrl-element");
+                n.classList.add("ixbrl-element");
             }
             else {
-                this.classList.add("ixbrl-sub-element");
+                n.classList.add("ixbrl-sub-element");
             }
-        });
-        return nodes;
+        }
+        return $(nodes);
     }
 
 
@@ -299,18 +314,21 @@ export class Viewer {
         const nextContinuationMap = {};
         // map of items in default target document to all their continuations
         const itemContinuationMap = {};
-        this._iframes.contents().find("body *").each(function () {
-            const name = localName(this.nodeName).toUpperCase();
-            if (['NONNUMERIC', 'NONFRACTION', 'FOOTNOTE', 'CONTINUATION'].includes(name)) {
-                const nodeId = this.getAttribute('id');
-                const continuedAtId = this.getAttribute("continuedAt");
-                if (continuedAtId !== null) {
-                    nextContinuationMap[nodeId] = continuedAtId;
-                }
-                if (name != 'CONTINUATION' && !this.hasAttribute('target')) {
-                    itemContinuationMap[nodeId] = [];
+        this._iframes.each((n, iframe) => {
+            const reportIndex = $(iframe).data("report-index");
+            $(iframe).contents().find("body *").each((m, node) => {
+                const name = localName(node.nodeName).toUpperCase();
+                if (['NONNUMERIC', 'NONFRACTION', 'FOOTNOTE', 'CONTINUATION'].includes(name) && node.hasAttribute('id')) {
+                    const nodeId = viewerUniqueId(reportIndex, node.getAttribute('id'));
+                    const continuedAtId = viewerUniqueId(reportIndex, node.getAttribute("continuedAt"));
+                    if (continuedAtId !== null) {
+                        nextContinuationMap[nodeId] = continuedAtId;
+                    }
+                    if (name != 'CONTINUATION') {
+                        itemContinuationMap[nodeId] = [];
+                    }
                 }
-            }
+            });
         });
 
         // Map of continuation IDs to list of (default target doc) items that
@@ -330,6 +348,24 @@ export class Viewer {
         this.itemContinuationMap = itemContinuationMap;
     }
 
+    _setContinuationMaps() {
+        for (const [itemId, itemContinuations] of Object.entries(this.itemContinuationMap)) {
+            this._ixNodeMap[itemId].continuations = itemContinuations.map(id => this._ixNodeMap[id]);
+        }
+    }
+
+    _getOrCreateIXNode(vuid, nodes, docIndex, isHidden) {
+        // We may have already created an IXNode for this ID from a -sec-ix-hidden
+        // element 
+        let ixn = this._ixNodeMap[vuid];
+        if (!ixn) {
+            ixn = new IXNode(vuid, nodes, docIndex);
+            this._ixNodeMap[vuid] = ixn;
+            ixn.isHidden = isHidden;
+        }
+        return ixn;
+    }
+
     //
     // Traverse the DOM hierarchy to find IX elements, and build maps and add
     // wrapper nodes and classes.
@@ -359,7 +395,7 @@ export class Viewer {
     // Viewer._docOrderItemIndex is a DocOrderIndex object that maintains a list of
     // fact and footnotes in document order.
     //
-    _preProcessiXBRL(n, docIndex, inHidden) {
+    _preProcessiXBRL(n, reportIndex, docIndex, inHidden) {
         const name = localName(n.nodeName).toUpperCase();
         const isFootnote = name === 'FOOTNOTE';
         const isContinuation = name === 'CONTINUATION';
@@ -367,59 +403,48 @@ export class Viewer {
         const isNonFraction = name === 'NONFRACTION';
         const isFact = isNonNumeric || isNonFraction;
         if (n.nodeType === 1) {
-            // Ignore iXBRL elements that are not in the default target document, as
-            // the viewer builder does not handle these, and the builder does not
-            // ensure that they have ID attributes.
-            const id = n.getAttribute("id");
-            if (((isFact || isFootnote) && !n.hasAttribute("target"))
-                || (isContinuation && this.continuationOfMap[id] !== undefined)) {
-                var nodes;
-                if (inHidden) {
-                    nodes = $(n);
-                } else {
-                    nodes = this._findOrCreateWrapperNode(n);
-                }
-
-                // For a continuation, store the IX ID(s) of the item(s), not the continuation
-                const headId = isContinuation ? this.continuationOfMap[id] : id;
-                this._addIdToNode(nodes.first(), headId);
-
-                // We may have already created an IXNode for this ID from a -sec-ix-hidden
-                // element 
-                var ixn = this._ixNodeMap[id];
-                if (!ixn) {
-                    ixn = new IXNode(id, nodes, docIndex);
-                    this._ixNodeMap[id] = ixn;
-                }
-                if (inHidden) {
-                    ixn.isHidden = true;
-                    nodes.addClass("ixbrl-element-hidden");
-                }
-                if (isContinuation) {
-                    $(nodes).addClass("ixbrl-continuation");
-                }
-                else {
-                    this._docOrderItemIndex.addItem(id, docIndex);
-                }
-                if (isNonFraction) {
-                    $(nodes).addClass("ixbrl-element-nonfraction");
-                    if (n.hasAttribute('scale')) {
-                        const scale = Number(n.getAttribute('scale'));
-                        // Set scale if the value is a valid number and is not a redundant 0/"ones" scale.
-                        if (!Number.isNaN(scale) && scale !== 0) {
-                            ixn.scale = scale;
+            const vuid = viewerUniqueId(reportIndex, n.getAttribute("id"));
+            if (isFact || isFootnote) {
+                // If @id is not present, it must be for a target document that wasn't processed.
+                if (n.hasAttribute("id")) {
+                    let nodes = this._findOrCreateWrapperNode(n, inHidden);
+
+                    this._addIdToNode(nodes.first(), vuid);
+                    let ixn = this._getOrCreateIXNode(vuid, nodes, docIndex, inHidden);
+                    this._docOrderItemIndex.addItem(vuid, docIndex);
+
+                    if (isNonFraction) {
+                        nodes.addClass("ixbrl-element-nonfraction");
+                        if (n.hasAttribute('scale')) {
+                            const scale = Number(n.getAttribute('scale'));
+                            // Set scale if the value is a valid number and is not a redundant 0/"ones" scale.
+                            if (!Number.isNaN(scale) && scale !== 0) {
+                                ixn.scale = scale;
+                            }
                         }
                     }
-                }
-                if (isNonNumeric) {
-                    $(nodes).addClass("ixbrl-element-nonnumeric");
-                    if (n.hasAttribute('escape') && n.getAttribute('escape').match(/^(true|1)$/)) {
-                        ixn.escaped = true;
+                    if (isNonNumeric) {
+                        nodes.addClass("ixbrl-element-nonnumeric");
+                        if (n.hasAttribute('escape') && n.getAttribute('escape').match(/^(true|1)$/)) {
+                            ixn.escaped = true;
+                        }
+                    }
+                    if (isFootnote) {
+                        nodes.addClass("ixbrl-element-footnote");
+                        ixn.footnote = true;
                     }
                 }
-                if (isFootnote) {
-                    $(nodes).addClass("ixbrl-element-footnote");
-                    ixn.footnote = true;
+            }
+            else if (isContinuation) {
+                if (n.hasAttribute("id") && this.continuationOfMap[vuid] !== undefined) {
+                    let nodes = this._findOrCreateWrapperNode(n, inHidden);
+
+                    // For a continuation, store the IX ID(s) of the item(s), not the continuation
+                    this._addIdToNode(nodes.first(), this.continuationOfMap[vuid]);
+
+                    this._getOrCreateIXNode(vuid, nodes, docIndex, inHidden);
+
+                    nodes.addClass("ixbrl-continuation");
                 }
             }
             else if(name == 'HIDDEN') {
@@ -427,21 +452,21 @@ export class Viewer {
             }
             else {
                 // Handle SEC/ESEF links-to-hidden
-                const id = this._getIXHiddenLinkStyle(n);
-                if (id !== null) {
-                    nodes = $(n);
-                    nodes.addClass("ixbrl-element").data('ivids', [id]);
-                    this._docOrderItemIndex.addItem(id, docIndex);
+                const vuid = viewerUniqueId(reportIndex, getIXHiddenLinkStyle(n));
+                if (vuid !== null) {
+                    let nodes = this._findOrCreateWrapperNode(n, inHidden);
+                    nodes.addClass("ixbrl-element").data('ivids', [vuid]);
+                    this._docOrderItemIndex.addItem(vuid, docIndex);
                     /* We may have already seen the corresponding ix element in the hidden
                      * section */
-                    const ixn = this._ixNodeMap[id];
+                    const ixn = this._ixNodeMap[vuid];
                     if (ixn) {
                         /* ... if so, update the node and docIndex so we can navigate to it */
                         ixn.wrapperNodes = nodes;
                         ixn.docIndex = docIndex;
                     }
                     else {
-                        this._ixNodeMap[id] = new IXNode(id, nodes, docIndex);
+                        this._ixNodeMap[vuid] = new IXNode(vuid, nodes, docIndex);
                     }
                 }
                 if (name == 'A') {
@@ -449,30 +474,19 @@ export class Viewer {
                 }
             }
         }
-        this._preProcessChildNodes(n, docIndex, inHidden);
+        this._preProcessChildNodes(n, reportIndex, docIndex, inHidden);
     }
 
-    _getIXHiddenLinkStyle(domNode) {
-        if (domNode.hasAttribute('style')) {
-            const re = /(?:^|\s|;)-(?:sec|esef)-ix-hidden:\s*([^\s;]+)/;
-            const m = domNode.getAttribute('style').match(re);
-            if (m) {
-                return m[1];
-            }
-        }
-        return null;
-    }
-
-    _preProcessChildNodes(domNode, docIndex, inHidden) {
+    _preProcessChildNodes(domNode, reportIndex, docIndex, inHidden) {
         for (const childNode of domNode.childNodes) {
-            this._preProcessiXBRL(childNode, docIndex, inHidden);
+            this._preProcessiXBRL(childNode, reportIndex, docIndex, inHidden);
         }
     }
 
     _applyStyles() {
         const stlyeElts = $("<style>")
             .prop("type", "text/css")
-            .text(require('css-loader!less-loader!../less/viewer.less').toString())
+            .text(require('../less/viewer.less').toString())
             .appendTo(this._iframes.contents().find("head"));
         this._iv.callPluginMethod("updateViewerStyleElements", stlyeElts);
     }
@@ -489,43 +503,43 @@ export class Viewer {
     // moving to the next/prev element
     //
     _selectAdjacentTag(offset, currentItem) {
-        var nextId;
+        var nextVuid;
         if (currentItem !== null) {
-            nextId = this._docOrderItemIndex.getAdjacentItem(currentItem.id, offset);
-            this.showDocumentForItemId(nextId);
+            nextVuid = this._docOrderItemIndex.getAdjacentItem(currentItem.vuid, offset);
+            this.showDocumentForItemId(nextVuid);
         }
         // If no fact selected go to the first or last in the current document
         else if (offset > 0) {
-            nextId = this._docOrderItemIndex.getFirstInDocument(this._currentDocumentIndex);
+            nextVuid = this._docOrderItemIndex.getFirstInDocument(this._currentDocumentIndex);
         } 
         else {
-            nextId = this._docOrderItemIndex.getLastInDocument(this._currentDocumentIndex);
+            nextVuid = this._docOrderItemIndex.getLastInDocument(this._currentDocumentIndex);
         }
         
-        const nextElement = this.elementsForItemId(nextId); 
+        const nextElement = this.elementsForItemId(nextVuid);
         this.showElement(nextElement);
         // If this is a table cell with multiple nested tags pass all tags so that
         // all are shown in the inspector. 
-        this.selectElement(nextId, this._ixIdsForElement(nextElement));
+        this.selectElement(nextVuid, this._ixIdsForElement(nextElement));
     }
 
     _bindHandlers() {
         const viewer = this;
         $('.ixbrl-element', this._contents)
-            .click(function (e) {
+            .on("click", function (e) {
                 e.stopPropagation();
                 viewer.selectElementByClick($(this));
             })
-            .mouseenter(function (e) { viewer._mouseEnter($(this)) })
-            .mouseleave(function (e) { viewer._mouseLeave($(this)) });
+            .on("mouseenter", function (e) { viewer._mouseEnter($(this)) })
+            .on("mouseleave", function (e) { viewer._mouseLeave($(this)) });
         $("body", this._contents)
-            .click(() => viewer.selectElement(null));
+            .on("click", () => viewer.selectElement(null));
         
-        $('#iframe-container .zoom-in').click(() => this.zoomIn());
-        $('#iframe-container .zoom-out').click(() => this.zoomOut());
-        $('#iframe-container .print').click(() => this.currentDocument().get(0).contentWindow.print());
+        $('#iframe-container .zoom-in').on("click", () => this.zoomIn());
+        $('#iframe-container .zoom-out').on("click", () => this.zoomOut());
+        $('#iframe-container .print').on("click", () => this.currentDocument().get(0).contentWindow.print());
 
-        TableExport.addHandles(this._contents, this._report);
+        TableExport.addHandles(this._contents, this._reportSet);
     }
 
     selectNextTag(currentFact) {
@@ -593,14 +607,14 @@ export class Viewer {
     /* If the specified element is not fully visible, scroll it into the center of
      * the viewport */
     showElement(e) {
-        const ee = e.get(0);
+        const ee = e.filter(':not(.ixbrl-no-highlight)').get(0);
         if (!this.isFullyVisible(ee)) {
             ee.scrollIntoView({ block: "center", inline: "center" });
         }
     }
 
     clearHighlighting() {
-        $("body", this._iframes.contents()).find(".ixbrl-element, .ixbrl-sub-element").removeClass("ixbrl-selected").removeClass("ixbrl-related").removeClass("ixbrl-linked-highlight");
+        $("body", this._iframes.contents()).find(".ixbrl-element").removeClass("ixbrl-selected").removeClass("ixbrl-related").removeClass("ixbrl-linked-highlight");
     }
 
     _ixIdsForElement(e) {
@@ -616,9 +630,9 @@ export class Viewer {
      * byClick indicates that the element was clicked directly, and in this
      * case we never scroll to make it more visible.
      */
-    selectElement(itemId, itemIdList, byClick) {
-        if (itemId !== null) {
-            this.onSelect.fire(itemId, itemIdList, byClick);
+    selectElement(vuid, itemIdList, byClick) {
+        if (vuid !== null) {
+            this.onSelect.fire(vuid, itemIdList, byClick);
         }
         else {
             this.onSelect.fire(null);
@@ -635,9 +649,9 @@ export class Viewer {
     // have nested elements, we select the innermost, as this gives the most
     // intuitive behaviour when clicking "next".
     selectElementByClick(e) {
-        var itemIDList = [];
+        let itemIDList = [];
         const viewer = this;
-        var sameContentAncestorId;
+        let sameContentAncestorVuid;
         // If the user clicked on a sub-element (and which is not also a proper
         // ixbrl-element) treat as if we clicked the first non-sub-element
         // ancestor in the DOM hierarchy - which would typically be
@@ -654,13 +668,13 @@ export class Viewer {
         // of the first one (sameContentAncestorId) that has exactly the same
         // content as "e"
         e.parents(".ixbrl-element").addBack().each(function () { 
-            const ids = viewer._ixIdsForElement($(this));
-            itemIDList = itemIDList.concat(ids); 
-            if ($(this).text() == e.text() && sameContentAncestorId === undefined) {
-                sameContentAncestorId = ids[0];
+            const vuids = viewer._ixIdsForElement($(this));
+            itemIDList = itemIDList.concat(vuids);
+            if ($(this).text() == e.text() && sameContentAncestorVuid === undefined) {
+                sameContentAncestorVuid = vuids[0];
             }
         });
-        this.selectElement(sameContentAncestorId, itemIDList, true);
+        this.selectElement(sameContentAncestorVuid, itemIDList, true);
     }
 
     _mouseEnter(e) {
@@ -674,12 +688,12 @@ export class Viewer {
     }
 
     highlightRelatedFact(f) {
-        this.changeItemClass(f.id, "ixbrl-related");
+        this.changeItemClass(f.vuid, "ixbrl-related");
     }
 
     highlightRelatedFacts(facts) {
         for (const f of facts) {
-            this.changeItemClass(f.id, "ixbrl-related");
+            this.changeItemClass(f.vuid, "ixbrl-related");
         }
     }
 
@@ -690,19 +704,24 @@ export class Viewer {
     // Return a jQuery node list for wrapper elements corresponding to 
     // the factId.  May contain more than one node if the IX node contains
     // absolutely positioned elements.
-    elementsForItemId(factId) {
-        return this._ixNodeMap[factId].wrapperNodes; 
+    elementsForItemId(vuid) {
+        if (!(vuid in this._ixNodeMap)){
+            throw new Error(`Attempting to retrieve IXNode with missing key: ${vuid}`);
+        }
+        return this._ixNodeMap[vuid].wrapperNodes;
     }
 
-    elementsForItemIds(ids) {
-        return $(ids.map(id => this._ixNodeMap[id].wrapperNodes.get()).flat());
+    // Returns a jQuery node list containing the primary wrapper node for each
+    // vuid provided
+    primaryElementsForItemIds(vuids) {
+        return $(vuids.map(vuid => this.elementsForItemId(vuid).first().get(0)));
     }
 
     /*
      * Add or remove a class to an item (fact or footnote) and any continuation elements
      */
-    changeItemClass(itemId, highlightClass, removeClass) {
-        const elements = this.elementsForItemIds([itemId].concat(this.itemContinuationMap[itemId]))
+    changeItemClass(vuid, highlightClass, removeClass) {
+        const elements = this.primaryElementsForItemIds([vuid].concat(this.itemContinuationMap[vuid]))
         if (removeClass) {
             elements.removeClass(highlightClass);
         }
@@ -714,15 +733,15 @@ export class Viewer {
     /*
      * Change the currently highlighted item
      */
-    highlightItem(factId) {
+    highlightItem(vuid) {
         this.clearHighlighting();
-        this.changeItemClass(factId, "ixbrl-selected");
+        this.changeItemClass(vuid, "ixbrl-selected");
     }
 
-    showItemById(id) {
-        if (id !== null) {
-            let elts = this.elementsForItemId(id);
-            this.showDocumentForItemId(id);
+    showItemById(vuid) {
+        if (vuid !== null) {
+            let elts = this.elementsForItemId(vuid);
+            this.showDocumentForItemId(vuid);
             /* Hidden elements will return an empty node list */
             if (elts.length > 0) {
                 this.showElement(elts);
@@ -733,9 +752,9 @@ export class Viewer {
     highlightAllTags(on, namespaceGroups) {
         const groups = {};
         $.each(namespaceGroups, function (i, ns) {
-            groups[ns] = i;
+            groups[ns] = i % HIGHLIGHT_COLORS;
         });
-        const report = this._report;
+        const reportSet = this._reportSet;
         const viewer = this;
         if (on) {
             $(".ixbrl-element", this._contents)
@@ -746,18 +765,20 @@ export class Viewer {
                     // highlight color for an element that is double tagged in a
                     // table cell.
                     const ixn = $(this).data('ivids').map(id => viewer._ixNodeMap[id]).filter(ixn => !ixn.footnote)[0];
-                    if (ixn != undefined) {
-                        const elements = viewer.elementsForItemIds(ixn.chainIXIds());
-                        const i = groups[report.getItemById(ixn.id).conceptQName().prefix];
-                        if (i !== undefined) {
-                            elements.addClass("ixbrl-highlight-" + i);
+                    if (ixn !== undefined ) {
+                        const item = reportSet.getItemById(ixn.id);
+                        if (item !== undefined) {
+                            const elements = viewer.primaryElementsForItemIds(ixn.chainIXIds());
+                            const i = groups[item.conceptQName().prefix];
+                            if (i !== undefined) {
+                                elements.addClass("ixbrl-highlight-" + i);
+                            }
                         }
                     }
             });
-            $(".ixbrl-sub-element", this._contents).addClass("ixbrl-highlight");
         }
         else {
-            $(".ixbrl-element, .ixbrl-sub-element", this._contents).removeClass(
+            $(".ixbrl-element", this._contents).removeClass(
                 (i, className) => (className.match (/(^|\s)ixbrl-highlight\S*/g) || []).join(' ')
             );
         }
@@ -784,7 +805,7 @@ export class Viewer {
 
     factsInSameTable(fact) {
         var facts = [];
-        const e = this.elementsForItemId(fact.id);
+        const e = this.elementsForItemId(fact.vuid);
         e.closest("table").find(".ixbrl-element").each(function () {
             facts = facts.concat($(this).data('ivids'));
         });
@@ -792,19 +813,22 @@ export class Viewer {
     }
 
     linkedHighlightFact(f) {
-        this.changeItemClass(f.id, "ixbrl-linked-highlight");
+        this.changeItemClass(f.vuid, "ixbrl-linked-highlight");
     }
 
     clearLinkedHighlightFact(f) {
-        this.changeItemClass(f.id, "ixbrl-linked-highlight", true);
+        this.changeItemClass(f.vuid, "ixbrl-linked-highlight", true);
     }
 
     _setTitle(docIndex) {
-        $('#top-bar .document-title').text($('head title', this._iframes.eq(docIndex).contents()).text());
+        const title = $('head title', this._iframes.eq(docIndex).contents()).text();
+        $('#top-bar .document-title')
+            .text(title)
+            .attr("aria-label", "Inline Viewer: " + title);
     }
 
-    showDocumentForItemId(itemId) {
-        this.selectDocument(this._ixNodeMap[itemId].docIndex);
+    showDocumentForItemId(vuid) {
+        this.selectDocument(this._ixNodeMap[vuid].docIndex);
     }
 
     currentDocument() {