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

iXBRLViewerPlugin/viewer/src/js/inspector.js

@@ -1,12 +1,11 @@
 // See COPYRIGHT.md for copyright information
 
 import $ from 'jquery'
-import { formatNumber, wrapLabel, truncateLabel, runGenerator } from "./util.js";
-import { ReportSearch } from "./search.js";
-import { Calculation } from "./calculations.js";
-import { IXBRLChart } from './chart.js';
 import i18next from 'i18next';
 import jqueryI18next from 'jquery-i18next';
+import {formatNumber, wrapLabel, truncateLabel, runGenerator, SHOW_FACT, HIGHLIGHT_COLORS, viewerUniqueId, GLOSSARY_URL, FEATURE_HOME_LINK_URL, FEATURE_HOME_LINK_LABEL, FEATURE_SEARCH_ON_STARTUP, FEATURE_HIGHLIGHT_FACTS_ON_STARTUP, STORAGE_APP_LANGUAGE, STORAGE_HIGHLIGHT_FACTS, STORAGE_HOME_LINK_QUERY, FEATURE_HIDE_CALCULATION_MODE_OPTION} from "./util.js";
+import { ReportSearch } from "./search.js";
+import { IXBRLChart } from './chart.js';
 import { ViewerOptions } from './viewerOptions.js';
 import { Identifiers } from './identifiers.js';
 import { Menu } from './menu.js';
@@ -17,37 +16,57 @@ import { Footnote } from './footnote.js';
 import { ValidationReportDialog } from './validationreport.js';
 import { TextBlockViewerDialog } from './textblockviewer.js';
 import { MessageBox } from './messagebox.js';
-import { DocumentOutline } from './outline.js';
+import { Calculation } from "./calculation.js";
+import { CalculationInspector } from './calculationInspector.js';
+import { ReportSetOutline } from './outline.js';
 import { DIMENSIONS_KEY, DocumentSummary, MEMBERS_KEY, PRIMARY_ITEMS_KEY, TOTAL_KEY } from './summary.js';
+import { toggleTheme } from './theme.js';
 
 const SEARCH_PAGE_SIZE = 100
+const SEARCH_FILTER_MULTISELECTS = {
+  periodFilter: "search-filter-period",
+  dimensionTypeFilter: "search-filter-dimension-type",
+  namespacesFilter: "search-filter-namespaces",
+  targetDocumentFilter: "search-filter-target-document",
+  scalesFilter:"search-filter-scales",
+  unitsFilter: "search-filter-units",
+  calculationsFilter: "search-filter-calculations",
+  dataTypesFilter: "search-filter-datatypes",
+};
 
 export class Inspector {
     constructor(iv) {
         this._iv = iv;
         this._viewerOptions = new ViewerOptions()
         this._currentItem = null;
+        this._useCalc11 = true;
     }
 
     i18nInit() {
+        const langs = ["cy", "da", "de", "en", "es", "fr", "nl", "uk"];
+        const bundles = [
+          "translation",
+          "referenceParts",
+          "currencies",
+          "dataTypes",
+          "labelRoles",
+          "scale",
+          "balanceTypes",
+          "tooltips"
+        ];
         return i18next.init({
             lng: this.preferredLanguages()[0],
+            reloadOnLanguageChange: true,
             // Do not apply translations that are present but with an empty string
             returnEmptyString: false,
             fallbackLng: 'en',
             debug: false,
-            resources: {
-                en: { 
-                    translation: require('../i18n/en/translation.json'),
-                    referenceParts: require('../i18n/en/referenceparts.json'),
-                    currencies: require('../i18n/en/currencies.json')
-                },
-                es: { 
-                    translation: require('../i18n/es/translation.json'),
-                    referenceParts: require('../i18n/es/referenceparts.json'),
-                    currencies: require('../i18n/es/currencies.json')
-                }
-            }
+            resources: 
+                Object.fromEntries(
+                  langs.map(l => [l, Object.fromEntries(
+                    bundles.map(n => [n, require(`../i18n/${l}/${n.toLowerCase()}.json`)]))
+                  ])
+                )
         }).then((t) => {
             jqueryI18next.init(i18next, $, {
                 tName: 't', // --> appends $.t = i18next.t
@@ -61,15 +80,15 @@ export class Inspector {
         });
     }
 
-    initialize(report, viewer) {
+    initialize(reportSet, viewer) {
         const inspector = this;
         this._viewer = viewer;
         return new Promise(function (resolve, reject) {
             inspector._chart = new IXBRLChart();
-            inspector._report = report;
+            inspector._reportSet = reportSet;
             inspector.i18nInit().then((t) => {
                 
-                $(".collapsible-header").on("click", function () { 
+                $(".collapsible-header button:first-of-type").on("click", function () { 
                     const d = $(this).closest(".collapsible-section");
                     d.toggleClass("collapsed"); 
                     if (d.hasClass("collapsed")) {
@@ -86,56 +105,98 @@ export class Inspector {
                         }
                     }
                 });
-                $("#inspector .controls .search-button").on("click", function () {
-                    $(this).closest("#inspector").removeClass(["summary-mode", "outline-mode"]).toggleClass("search-mode");
+                $("#inspector .controls .search-button").on("click", () => inspector.inspectorMode("search-mode", true));
+                $("#inspector .controls .summary-button").on("click", () => inspector.inspectorMode("summary-mode", true));
+                $("#inspector .controls .outline-button").on("click", () => inspector.inspectorMode("outline-mode", true));
+                $("#inspector .back").on("click", () => inspector.popInspectorMode());
+                $(".popup-trigger").on("mouseenter", function () {
+                    $(this).find(".popup-content").show()
+                }).on("mouseleave", function () {
+                    $(this).find(".popup-content").hide()
                 });
-                $("#inspector .controls .summary-button").on("click", function () {
-                    $(this).closest("#inspector").removeClass(["outline-mode", "search-mode"]).toggleClass("summary-mode");
-                });
-                $("#inspector .controls .outline-button").on("click", function () {
-                    $(this).closest("#inspector").removeClass(["summary-mode", "search-mode"]).toggleClass("outline-mode");
-                });
-                $("#inspector-head .back").on("click", function () {
-                    $(this).closest("#inspector").removeClass(["summary-mode", "outline-mode", "search-mode"]);
-                });
-                $(".popup-trigger").hover(function () { $(this).find(".popup-content").show() }, function () { $(this).find(".popup-content").hide() });
                 $("#inspector").on("click", ".clipboard-copy", function () {
                     navigator.clipboard.writeText($(this).data("cb-text"));
                 });
+
+                inspector.initializeTooltips();
+
                 inspector._toolbarMenu = new Menu($("#toolbar-highlight-menu"));
                 inspector.buildToolbarHighlightMenu();
 
                 inspector._optionsMenu = new Menu($("#display-options-menu"));
                 inspector.buildDisplayOptionsMenu();
 
+                inspector.buildHomeLink()
+
                 $("#ixv").localize();
 
                 // Listen to messages posted to this window
                 $(window).on("message", (e) => inspector.handleMessage(e));
-                report.setViewerOptions(inspector._viewerOptions);
-                inspector.summary = new DocumentSummary(report);
+                reportSet.viewerOptions = inspector._viewerOptions;
+                inspector.summary = new DocumentSummary(reportSet);
                 inspector.createSummary()
-                inspector.outline = new DocumentOutline(report);
+                inspector.outline = new ReportSetOutline(reportSet);
                 inspector.createOutline();
                 inspector._iv.setProgress(i18next.t("inspector.initializing")).then(() => {
-                    inspector._search = new ReportSearch(report);
-                    inspector.buildDisplayOptionsMenu();
-                    inspector.buildToolbarHighlightMenu();
-                    inspector.buildHighlightKey();
+                    inspector._search = new ReportSearch(reportSet);
+                    inspector.handleFactDeepLink();
+                    inspector.rebuildViewer();
                     inspector.setupValidationReportIcon();
                     inspector.initializeViewer();
+                    inspector.doInitialSelection();
                     resolve();
                 });
             });
         });
     }
 
+    initializeTooltips() {
+        $("html").on("click", e => 
+            this.hideTooltip()
+        );
+        $("#inspector .inspector-body").on("scroll", e => 
+            this.hideTooltip()
+        );
+        $(document).on("keyup", (e) => {
+            if (e.keyCode == 27) { 
+                this.hideTooltip();
+            }
+        });
+        $("#ixv").on("click", ".tooltip-icon", (e) => {
+            this.toggleTooltip($(e.currentTarget));
+            e.stopPropagation();
+        });
+
+        let tooltipHoverCount = 0;
+        $("#ixv").on("mouseenter", ".tooltip-icon", e => {
+            tooltipHoverCount++;
+            setTimeout(t => {
+                if (tooltipHoverCount > 0) {
+                    this.showTooltip($(e.currentTarget), true);
+                }
+            }, 250);
+        });
+        $("#ixv").on("mouseenter", "#tooltip", e => tooltipHoverCount++);
+        $("#ixv").on("mouseleave", "#tooltip, .tooltip-icon", e => {
+            tooltipHoverCount--;
+            setTimeout(e => {
+                if (tooltipHoverCount == 0) {
+                    this.hideTooltip(true);
+                }
+            }, 500);
+        });
+    }
+
     initializeViewer() {
-        this._viewer.onSelect.add((id, eltSet, byClick) => this.selectItem(id, eltSet, byClick));
+        this._viewer.onSelect.add((vuid, eltSet, byClick) => this.selectItem(vuid, eltSet, byClick));
         this._viewer.onMouseEnter.add((id) => this.viewerMouseEnter(id));
         this._viewer.onMouseLeave.add(id => this.viewerMouseLeave(id));
-        $('.ixbrl-next-tag').click(() => this._viewer.selectNextTag(this._currentItem));
-        $('.ixbrl-prev-tag').click(() => this._viewer.selectPrevTag(this._currentItem));
+        $('.ixbrl-next-tag').on("click", () => this._viewer.selectNextTag(this._currentItem));
+        $('.ixbrl-prev-tag').on("click", () => this._viewer.selectPrevTag(this._currentItem));
+        $('#toggle-dark-mode')
+                .attr('title', i18next.t('toolbar.toggleDarkMode'))
+                .attr('aria-label', i18next.t('toolbar.toggleDarkMode'))
+                .on('click', toggleTheme);
     }
 
     postLoadAsync() {
@@ -145,10 +206,26 @@ export class Inspector {
     /*
      * Check for fragment identifier pointing to a specific fact and select it if
      * present.
+     *
+     * Legacy format: #f-FACT_ID
+     * New format: #fN-FACT_ID where N is report index
+     * For N == 0, we use the legacy format.
+     *
      */
     handleFactDeepLink() {
-        if (location.hash.startsWith("#f-")) {
-            this.selectItem(location.hash.slice(3));
+        const match = location.hash.match(/^#f([0-9]+)?-(.*)$/);
+        if (match !== null) {
+            const reportId = match[1] ?? 0;
+            const id = viewerUniqueId(reportId, match[2]);
+            if (this._reportSet.getItemById(id) !== undefined) {
+                this.selectItem(id);
+            }
+        }
+    }
+
+    doInitialSelection() {
+        if (!this._currentItem && this._iv.isFeatureEnabled(FEATURE_SEARCH_ON_STARTUP)) {
+            this.inspectorMode("search-mode");
         }
     }
 
@@ -163,9 +240,14 @@ export class Inspector {
             // messages to itself when exporting files.
             return;
         }
-
-        if (data.task == 'SHOW_FACT') {
-            this.selectItem(data.factId);
+        const task = data["task"];
+        if (task === SHOW_FACT) {
+            let docSetId = Number(data["docSetId"]);
+            if (!docSetId) { // Handles NaN
+                docSetId = 0;
+            }
+            const vuid = viewerUniqueId(docSetId, data['factId']);
+            this.selectItem(vuid);
         }
         else {
             console.log("Not handling unsupported task message: " + jsonString);
@@ -174,7 +256,9 @@ export class Inspector {
 
     updateURLFragment() {
         if (this._currentItem) {
-            location.hash = "#f-" + this._currentItem.id;
+            // Don't include report number for first report for compatibility
+            // with legacy fragments
+            location.hash = "#f" + this._currentItem.vuid.replace(/^0-/,  "-");
         }
         else {
             location.hash = "";
@@ -183,21 +267,108 @@ export class Inspector {
 
     buildDisplayOptionsMenu() {
         this._optionsMenu.reset();
-        if (this._report) {
-            const dl = this.selectDefaultLanguage();
-            this._optionsMenu.addCheckboxGroup(this._report.availableLanguages(), this._report.languageNames(), dl, (lang) => { this.setLanguage(lang); this.update() }, "select-language");
-            this.setLanguage(dl);
-            if (this._report.filingDocuments()) {
-                this._optionsMenu.addDownloadButton("Download filing documents", this._report.filingDocuments())
+        if (this._reportSet) {
+            // Doc language
+            const defaultDocLang = this.selectDefaultLanguage();
+            const docLangs = this._reportSet.availableLanguages();
+            const docLangNames = new Intl.DisplayNames(this.preferredLanguages(), { "type": "language" });
+
+            this._optionsMenu.addLabel(i18next.t("menu.documentLanguage"));
+            this._optionsMenu.addCheckboxGroup(
+                docLangs,
+                Object.fromEntries(docLangs.map((l) => [l, docLangNames.of(l)])),
+                defaultDocLang,
+                (lang) => { this.setDocumentLanguage(lang); this.update() },
+                "select-language"
+            );
+            this.setDocumentLanguage(defaultDocLang);
+
+            // Application language
+            const defaultAppLang = i18next.language.substring(0, 2);
+            const appLangs = Object.keys(i18next.options.resources);
+            const appLangNames = new Intl.DisplayNames(this.preferredLanguages(), { "type": "language" });
+
+            this._optionsMenu.addLabel(i18next.t("menu.applicationLanguage"));
+            this._optionsMenu.addCheckboxGroup(
+                    appLangs,
+                    Object.fromEntries(appLangs.map((l) => [l, appLangNames.of(l)])),
+                    defaultAppLang,
+                    (lang) => { this.changeApplicationLanguage(lang); },
+                    "select-user-language"
+            );
+
+            // Actions
+            if (this._reportSet.filingDocuments()) {
+                this._optionsMenu.addLabel(i18next.t("menu.actions"));
+                this._optionsMenu.addDownloadButton("Download filing documents", this._reportSet.filingDocuments())
+            }
+
+            // Options
+            if (this._reportSet.usesCalculations() && !this._iv.isFeatureEnabled(FEATURE_HIDE_CALCULATION_MODE_OPTION)) {
+                this._optionsMenu.addLabel(i18next.t("menu.options"));
+                this._optionsMenu.addCheckboxItem(i18next.t("calculation.useCalculations11"), (useCalc11) => this.setCalculationMode(useCalc11), "calculation-mode", "select-language", this._useCalc11);
+            }
+        }
+        let helpLinks = {}
+        let supportLinkUrl = this._iv.getSupportLinkUrl();
+        if (supportLinkUrl) {
+            helpLinks[i18next.t("menu.contactUs")] = supportLinkUrl;
+        }
+        let surveyLinkUrl = this._iv.getSurveyLinkUrl();
+        if (surveyLinkUrl) {
+            helpLinks[i18next.t("menu.survey")] = surveyLinkUrl;
+        }
+        if (Object.entries(helpLinks).length > 0) {
+            this._optionsMenu.addLabel(i18next.t("menu.help"));
+            for (const [label, value] of Object.entries(helpLinks)) {
+                this._optionsMenu.addLink(label, value);
             }
         }
         this._iv.callPluginMethod("extendDisplayOptionsMenu", this._optionsMenu);
     }
 
+    buildHomeLink() {
+        $('#top-bar #home-link').remove();
+        if (!this._iv.isStaticFeatureEnabled(FEATURE_HOME_LINK_URL)) {
+            return;
+        }
+        $("#top-bar img.header").remove();
+        let homeLinkUrl = this._iv.getStaticFeatureValue(FEATURE_HOME_LINK_URL);
+        let homeLinkText;
+        if (this._iv.isStaticFeatureEnabled(FEATURE_HOME_LINK_LABEL)) {
+            homeLinkText = this._iv.getStaticFeatureValue(FEATURE_HOME_LINK_LABEL);
+        } else {
+            homeLinkText = i18next.t("toolbar.homePage");
+        }
+        const query = sessionStorage.getItem(STORAGE_HOME_LINK_QUERY);
+        if (query) {
+            if (!homeLinkUrl.includes("?")) {
+                homeLinkUrl += "?";
+            } else {
+                homeLinkUrl += "&";
+            }
+            homeLinkUrl += query;
+        }
+        const homeLink = $('<a></a>')
+                .attr('href', homeLinkUrl)
+                .attr('id', 'home-link')
+                .text(homeLinkText);
+        $('#top-bar').prepend(homeLink);
+    }
+
+
+    highlightTagsOnStartup() {
+        const pref = window.localStorage.getItem(STORAGE_HIGHLIGHT_FACTS);
+        if (pref !== null) {
+            return JSON.parse(pref);
+        }
+        return this._iv.isFeatureEnabled(FEATURE_HIGHLIGHT_FACTS_ON_STARTUP);
+    }
+
     buildToolbarHighlightMenu() {
         const iv = this._iv;
         this._toolbarMenu.reset();
-        this._toolbarMenu.addCheckboxItem(i18next.t("toolbar.xbrlElements"), (checked) => this.highlightAllTags(checked), "highlight-tags", null, this._iv.options.highlightTagsOnStartup);
+        this._toolbarMenu.addCheckboxItem(i18next.t("toolbar.xbrlElements"), (checked, explicitClick) => this.highlightAllTags(checked, explicitClick), "highlight-tags", null, this.highlightTagsOnStartup())
         if (iv.isReviewModeEnabled()) {
             this._toolbarMenu.addCheckboxItem("Untagged Numbers", function (checked) {
                 const body = iv.viewer.contents().find("body");
@@ -232,28 +403,98 @@ export class Inspector {
                 "Untagged Dates",
             ]
         } else {
-            key = this._report.namespaceGroups();
+            key = this._reportSet.namespaceGroups().map(p => this._reportSet.preferredPrefix(p));
         }
         this._iv.callPluginMethod("extendHighlightKey", key);
 
         for (const [i, name] of key.entries()) {
             $("<div>")
                 .addClass("item")
-                .append($("<span></span>").addClass("sample").addClass("sample-" + i))
+                .append($("<span></span>").addClass("sample").addClass("sample-" + (i % HIGHLIGHT_COLORS)))
                 .append($("<span></span>").text(name))
                 .appendTo($(".highlight-key .items"));
         }
     }
 
-    highlightAllTags(checked) {
-        this._viewer.highlightAllTags(checked, this._report.namespaceGroups());
+    buildUserGuideLink() {
+        $('.top-bar-controls #user-guide-link').remove();
+        const userGuideUrl = this._iv.getGuideLinkUrl();
+        const userGuideLink = $('<a></a>')
+                .attr('href', userGuideUrl)
+                .attr('id', 'user-guide-link')
+                .attr('target', '_blank')
+                .text(i18next.t("menu.userGuide"));
+        userGuideLink.insertBefore('#toggle-dark-mode');
+    }
+
+    changeApplicationLanguage(lang) {
+        localStorage.setItem(STORAGE_APP_LANGUAGE, lang);
+        i18next.changeLanguage(lang);
+        this.rebuildViewer();
+    }
+
+    rebuildViewer() {
+        $("#ixv").localize();
+        $('html').attr('lang', i18next.resolvedLanguage);
+        this.buildDisplayOptionsMenu();
+        this.buildHomeLink()
+        this.buildToolbarHighlightMenu();
+        this.buildHighlightKey();
+        this.buildUserGuideLink();
+        this.update();
+        this.search();
+    }
+
+    inspectorMode(mode, toggle) {
+        const allModes = ["summary-mode", "outline-mode", "search-mode"];
+        const i = $("#inspector").removeClass(allModes.filter(m => m !== mode));
+        if (mode === undefined) {
+            this._prevInspectorMode = undefined;
+            return;
+        }
+        if (toggle) {
+            i.toggleClass(mode);
+        }
+        else {
+            i.addClass(mode);
+        }
+    }
+
+    /* 
+     * Controls where the "back" button takes you. We only set this when you
+     * follow a link that switches between modes, otherwise back just takes you
+     * back to the main inspector mode.
+     */
+    pushInspectorMode(newMode, oldMode) {
+        this._prevInspectorMode = oldMode;
+        this.inspectorMode(newMode);
+    }
+
+    popInspectorMode() {
+        this.inspectorMode(this._prevInspectorMode);
+        this._prevInspectorMode = undefined;
+    }
+
+    setCalculationMode(useCalc11) {
+        this._useCalc11 = useCalc11;
+        if (this._currentItem instanceof Fact) {
+            this.updateCalculation(this._currentItem);
+        }
+    }
+
+    highlightAllTags(checked, explicitClick) {
+        if (explicitClick) {
+            window.localStorage.setItem(STORAGE_HIGHLIGHT_FACTS, JSON.stringify(checked));
+        }
+        this._viewer.highlightAllTags(checked, this._reportSet.namespaceGroups());
     }
 
     factListRow(f) {
-        const row = $('<div class="fact-list-item"></div>')
-            .click(() => this.selectItem(f.id))
-            .dblclick(() => $('#inspector').removeClass("search-mode"))
-            .mousedown((e) => { 
+        const row = $('<button class="fact-list-item"></button>')
+            // soft focus - highlight the fact, but don't close the search results
+            .on("click", () => this.selectItem(f.vuid, undefined, undefined, true))
+            .on("dblclick", () => this.selectItem(f.vuid))
+            .on("mousedown", (e) => { 
                 /* Prevents text selection via double click without
                  * disabling click+drag text selection (which user-select:
                  * none would )
@@ -262,38 +503,48 @@ export class Inspector {
                     e.preventDefault() 
                 } 
             })
-            .mouseenter(() => this._viewer.linkedHighlightFact(f))
-            .mouseleave(() => this._viewer.clearLinkedHighlightFact(f))
-            .data('ivid', f.id);
-        $('<div class="select-icon"></div>')
-            .click(() => {
-                this.selectItem(f.id);
-                $('#inspector').removeClass("search-mode");
+            .on("mouseenter", () => this._viewer.linkedHighlightFact(f))
+            .on("mouseleave", () => this._viewer.clearLinkedHighlightFact(f))
+            .data('ivid', f.vuid);
+        $('<button class="select-icon"></button>')
+            .attr("title", i18next.t("search.viewFact"))
+            .on("click", () => {
+                this.selectItem(f.vuid);
             })
             .appendTo(row)
-        $('<div class="title"></div>')
-            .text(f.getLabelOrName("std"))
+        this._setLabelWithLang($('<div class="title"></div>'), f.getLabelOrNameAndLang("std"))
+            .appendTo(row);
+        const dt = f.concept().dataType();
+        if (dt !== undefined) {
+           $('<div class="datatype"></div>')
+            .text(dt.label())
             .appendTo(row);
+        }
         $('<div class="dimension"></div>')
             .text(f.period().toString())
             .appendTo(row);
 
         for (const aspect of f.aspects()) {
             if (aspect.isTaxonomyDefined() && !aspect.isNil()) {
-                $('<div class="dimension"></div>')
-                    .text(aspect.valueLabel())
+                this._setLabelWithLang($('<div class="dimension"></div>'), aspect.valueLabelAndLang())
                     .appendTo(row);
             }
         }
+        const tags = $("<div></div>").addClass("block-list-item-tags").appendTo(row);
+        if (f.targetDocument() !== null) {
+            $('<div class="hidden"></div>')
+                .text(f.targetDocument())
+                .appendTo(tags);
+        }
         if (f.isHidden()) {
             $('<div class="hidden"></div>')
                 .text(i18next.t("search.hiddenFact"))
-                .appendTo(row);
+                .appendTo(tags);
         }
         else if (f.isHTMLHidden()) {
             $('<div class="hidden"></div>')
                 .text(i18next.t("search.concealedFact"))
-                .appendTo(row);
+                .appendTo(tags);
         }
         return row;
     }
@@ -315,24 +566,39 @@ export class Inspector {
     searchSpec() {
         const spec = {};
         spec.searchString = $('#ixbrl-search').val();
-        spec.showVisibleFacts = $('#search-visible-fact-filter').prop('checked');
-        spec.showHiddenFacts = $('#search-hidden-fact-filter').prop('checked');
-        spec.namespacesFilter = $('#search-filter-namespaces select').val();
-        spec.unitsFilter = $('#search-filter-units select').val();
-        spec.scalesFilter = $('#search-filter-scales select').val();
-        spec.periodFilter = $('#search-filter-period select').val();
+        spec.visibilityFilter = $('#search-filter-visibility').val();
+        spec.showMandatoryFacts = $('#search-mandatory-fact-filter').prop('checked');
         spec.conceptTypeFilter = $('#search-filter-concept-type').val();
+        for (const [key, name] of Object.entries(SEARCH_FILTER_MULTISELECTS)) {
+          spec[key] = $(`#${name} select`).val();
+        }
+
+        const selectedDataTypes = this._reportSet.getUsedConceptDataTypes().filter(d => spec.dataTypesFilter.includes(d.dataType.name));
+        if (
+            (spec.conceptTypeFilter == 'numeric' && selectedDataTypes.some(dt => !dt.isNumeric)) ||
+            (spec.conceptTypeFilter == 'text' && selectedDataTypes.some(dt => dt.isNumeric))) {
+            $("#search-filter-datatypes .datatype-conflict-warning").show();
+        }
+        else {
+            $("#search-filter-datatypes .datatype-conflict-warning").hide();
+        }
         spec.factValueFilter = $('#search-filter-fact-value').val();
-        spec.calculationsFilter = $('#search-filter-calculations select').val();
-        spec.dimensionTypeFilter = $('#search-filter-dimension-type select').val();
         return spec;
     }
 
+    hasActiveSearchFilters(searchSpec) {
+      return Object.keys(SEARCH_FILTER_MULTISELECTS).some(k => searchSpec[k].length > 0) ||
+        searchSpec.visibilityFilter !== '*' ||
+        searchSpec.showMandatoryFacts ||
+        searchSpec.conceptTypeFilter !== "*" ||
+        searchSpec.factValueFilter !== "*" ;
+    }
+
     setupSearchControls(viewer) {
         const inspector = this;
-        $('.search-controls input, .search-controls select').change(() => this.search());
-        $(".search-controls div.filter-toggle").click(() => $(".search-controls").toggleClass('show-filters'));
-        $(".search-controls .search-filters .reset").click(() => this.resetSearchFilters());
+        $('.search-controls input, .search-controls select').on("change", () => this.search());
+        $(".search-controls button.filter-toggle").on("click", () => $(".search-controls").toggleClass('show-filters'));
+        $(".search-controls .reset").on("click", () => this.resetSearchFilters());
         $(".search-controls .search-filters .reset-multiselect").on("click", function () {
             $(this).siblings().children('select option:selected').prop('selected', false);
             inspector.search();
@@ -343,16 +609,39 @@ export class Inspector {
                 .text(this._search.periods[key])
                 .appendTo('#search-filter-period select');
         }
-        for (const prefix of this._report.getUsedPrefixes()) {
+        for (const prefix of this._reportSet.getUsedConceptPrefixes()) {
             $("<option>")
                 .attr("value", prefix)
-                .text(`${prefix} (${this._report.prefixMap()[prefix]})`)
+                .text(`${this._reportSet.preferredPrefix(prefix)} (${this._reportSet.prefixMap()[prefix]})`)
                 .appendTo('#search-filter-namespaces select');
         }
-        for (const unit of this._report.getUsedUnits()) {
+        if (this._reportSet.getUsedConceptDataTypes().length > 0) {
+            for (const dataType of this._reportSet.getUsedConceptDataTypes()) {
+                $("<option>")
+                    .attr("value", dataType.dataType.name)
+                    .text(dataType.dataType.label())
+                    .appendTo('#search-filter-datatypes select');
+            }
+        }
+        else {
+            $('#search-filter-datatypes').hide();
+        }
+        const targetDocuments = Array.from(this._reportSet.getTargetDocuments());
+        if (targetDocuments.length == 1 && targetDocuments[0] == null) {
+            $('#search-filter-target-document').hide();
+        }
+        else {
+            for (const targetDocument of targetDocuments) {
+                $("<option>")
+                    .attr("value", targetDocument ?? ':default')
+                    .text(targetDocument ?? `<${i18next.t("search.default")}>`)
+                    .appendTo('#search-filter-target-document select');
+            }
+        }
+        for (const unit of this._reportSet.getUsedUnits()) {
             $("<option>")
                     .attr("value", unit)
-                    .text(`${this._report.getUnit(unit)?.label()} (${unit})`)
+                    .text(`${this._reportSet.getUnit(unit)?.label()} (${unit})`)
                     .appendTo('#search-filter-units select');
         }
         const scalesOptions = this._getScalesOptions();
@@ -366,7 +655,7 @@ export class Inspector {
 
     _getScalesOptions() {
         const scalesOptions = {}
-        const usedScalesMap = this._report.getUsedScalesMap();
+        const usedScalesMap = this._reportSet.getUsedScalesMap();
         Object.keys(usedScalesMap).sort().forEach(scale => {
             const labels = Array.from(usedScalesMap[scale]).sort();
             if (labels.length > 0) {
@@ -379,17 +668,16 @@ export class Inspector {
         return scalesOptions;
     }
 
-    resetSearchFilters() {
+    resetSearchFilters(defaults) {
+        defaults = defaults ?? {};
         $("#search-filter-period select option:selected").prop("selected", false);
+        $("#search-filter-visibility").val(defaults.visibility ?? "*");
         $("#search-filter-concept-type").val("*");
         $("#search-filter-fact-value").val("*");
-        $("#search-filter-calculations select option:selected").prop("selected", false);
-        $("#search-filter-dimension-type select option:selected").prop("selected", false);
-        $("#search-hidden-fact-filter").prop("checked", true);
-        $("#search-visible-fact-filter").prop("checked", true);
-        $("#search-filter-namespaces select option:selected").prop("selected", false);
-        $("#search-filter-units select option:selected").prop("selected", false);
-        $("#search-filter-scales select option:selected").prop("selected", false);
+        $("#search-mandatory-fact-filter").prop("checked", defaults.mandatoryFacts ?? false);
+        for (const name of Object.values(SEARCH_FILTER_MULTISELECTS)) {
+          $(`#${name} select option:selected`).prop("selected", false);
+        }
         this.search();
     }
 
@@ -400,14 +688,20 @@ export class Inspector {
         this.search();
     }
 
-    search () {
+    search() {
         const spec = this.searchSpec();
+        if (this.hasActiveSearchFilters(spec)) {
+            $("#inspector .search-controls").addClass("active-filters");
+        }
+        else {
+            $("#inspector .search-controls").removeClass("active-filters");
+        }
         const results = this._search.search(spec);
         if (results === undefined) {
             return;
         }
         const container = $('#inspector .search-results .results');
-        $('div', container).remove();
+        container.empty();
         this._viewer.clearRelatedHighlighting();
         const overlay = $('#inspector .search-results .search-overlay');
         if (results.length > 0) {
@@ -419,17 +713,14 @@ export class Inspector {
             $(".text", overlay).text(i18next.t("search.tryAgainDifferentKeywords"));
             overlay.show();
         }
-        $("#matching-concepts-count").text(results.length);
+        $("#matching-facts-summary").text(i18next.t("search.matchingFactsSummary", {nMatches: results.length, nTotal: this._reportSet.facts().length}));
         /* Don't highlight search results if there's no search string */
         if (spec.searchString != "") {
             this._viewer.highlightRelatedFacts(results.map(r => r.fact));
         }
-        this.updateMultiSelectSubheader('search-filter-scales');
-        this.updateMultiSelectSubheader('search-filter-units');
-        this.updateMultiSelectSubheader('search-filter-namespaces');
-        this.updateMultiSelectSubheader('search-filter-dimension-type');
-        this.updateMultiSelectSubheader('search-filter-calculations');
-        this.updateMultiSelectSubheader('search-filter-period');
+        for (const name of Object.values(SEARCH_FILTER_MULTISELECTS)) {
+          this.updateMultiSelectSubheader(name);
+        }
     }
 
     updateMultiSelectSubheader(id) {
@@ -447,7 +738,7 @@ export class Inspector {
     }
 
     updateCalculation(fact, elr) {
-        $('.calculations .tree').empty().append(this._calculationHTML(fact, elr));
+        $('.calculations .tree').empty().append(this._calculationHTML(fact));
     }
 
     createSummary() {
@@ -455,13 +746,40 @@ export class Inspector {
         this._populateFactSummary(summaryDom);
         this._populateTagSummary(summaryDom);
         this._populateFileSummary(summaryDom);
+        this._populateReportCreation(summaryDom);
     }
 
     _populateFactSummary(summaryDom) {
         const totalFacts = this.summary.totalFacts();
-        $("<span></span>")
-                .text(totalFacts)
-                .appendTo(summaryDom.find(".total-facts-value"));
+        $(".total-facts-value", summaryDom)
+            .text(totalFacts)
+            .on("click", () => {
+                this.resetSearchFilters();
+                this.pushInspectorMode("search-mode", "summary-mode");
+            });
+
+        const hiddenFacts = this.summary.hiddenFacts();
+        $(".hidden-facts-value", summaryDom)
+            .text(hiddenFacts)
+            .on("click", () => {
+                this.resetSearchFilters({visibility: 'hidden'});
+                this.pushInspectorMode("search-mode", "summary-mode");
+            });
+
+        const mandatoryFacts = this.summary.mandatoryFacts();
+        if (!mandatoryFacts) {
+            $('#mandatory-facts-row').hide();
+            $('#mandatory-fact-filter-checkbox').hide();
+        } else {
+            $('#mandatory-facts-row').show();
+            $('#mandatory-fact-filter-checkbox').show();
+            $(".mandatory-facts-value", summaryDom)
+                    .text(mandatoryFacts)
+                    .on("click", () => {
+                        this.resetSearchFilters({mandatoryFacts: true});
+                        this.pushInspectorMode("search-mode", "summary-mode");
+                    });
+        }
     }
 
     _populateTagSummary(summaryDom) {
@@ -500,7 +818,7 @@ export class Inspector {
         const sortedPrefixCounts = [...tagCounts.entries()].sort((a, b) => a[0].localeCompare(b[0]));
         for (const [prefix, counts] of sortedPrefixCounts) {
             const countRow = $("<tr></tr>").appendTo(summaryTagsTableBody);
-            countRow.append($("<th></th>").attr("scope", "row").text(prefix));
+            countRow.append($("<th></th>").attr("scope", "row").text(this._reportSet.preferredPrefix(prefix)));
             insertTagCount(countRow, counts[PRIMARY_ITEMS_KEY], totalPrimaryItemTags);
             insertTagCount(countRow, counts[DIMENSIONS_KEY], totalDimensionTags);
             insertTagCount(countRow, counts[MEMBERS_KEY], totalMemberTags);
@@ -555,16 +873,31 @@ export class Inspector {
         }
     };
 
+    _populateReportCreation(summaryDom) {
+        const softwareCredits = this.summary.getSoftwareCredits();
+
+        const reportCreationContent = summaryDom.find(".report-creation");
+
+        if (softwareCredits.length > 0) {
+            const ul = reportCreationContent.find('ul');
+            for (const softwareCredit of softwareCredits) {
+                ul.append($("<li></li>").text(softwareCredit));
+            }
+        } else {
+            reportCreationContent.hide();
+        }
+    };
+
     createOutline() {
         if (this.outline.hasOutline()) {
             $('.outline .no-outline-overlay').hide();
             const container = $('<div class="fact-list"></div>').appendTo($('.outline .body'));
-            for (const elr of this.outline.sortedSections()) {
-                $('<div class="fact-list-item"></div>')
-                    .text(this._report.getRoleLabel(elr))
-                    .click(() => this.selectItem(this.outline.sections[elr].id))
-                    .dblclick(() => $('#inspector').removeClass("outline-mode"))
-                    .mousedown((e) => {
+            for (const group of this.outline.sortedSections()) {
+                $('<button class="fact-list-item"></button>')
+                    .text(group.report.getRoleLabelOrURI(group.elr))
+                    .on("click", () => this.selectItem(group.fact.vuid))
+                    .on("dblclick", () => $('#inspector').removeClass("outline-mode"))
+                    .on("mousedown", (e) => {
                         // Prevent text selection by double click
                         if (e.detail > 1) { 
                             e.preventDefault() 
@@ -577,10 +910,10 @@ export class Inspector {
 
     updateOutline(cf) {
         $('.fact-groups').empty();
-        for (const elr of this.outline.groupsForFact(cf)) {
-            $('<div class="fact-list-item"></div>')
-                .text(this._report.getRoleLabel(elr))
-                .click(() => this.selectItem(this.outline.sections[elr].id))
+        for (const group of this.outline.groupsForFact(cf)) {
+            $('<button class="fact-list-item"></button>')
+                .text(cf.report.getRoleLabelOrURI(group.elr))
+                .on("click", () => this.selectItem(group.fact.vuid))
                 .appendTo($('.fact-groups'));
         }
 
@@ -608,12 +941,12 @@ export class Inspector {
         const html = $("<ul></ul>");
         if (anchors.length > 0) {
             for (const c of anchors) {
-                const otherFacts = this._report.getAlignedFacts(fact, { "c": c });
-                const label = this._report.getLabel(c, "std", true);
+                const otherFacts = fact.report.getAlignedFacts(fact, { "c": c });
+                const labelLang = fact.report.getLabelAndLang(c, "std", true);
 
                 $("<li></li>")
                     .appendTo(html)
-                    .append(this.factLinkHTML(label, otherFacts));
+                    .append(this.factLinkHTML(labelLang, otherFacts));
             }
         }
         else {
@@ -625,7 +958,7 @@ export class Inspector {
     }
 
     updateAnchoring(fact) {
-        if (!this._report.usesAnchoring()) {
+        if (!this._reportSet.usesAnchoring()) {
             $('.anchoring').hide();
         }
         else {
@@ -642,8 +975,38 @@ export class Inspector {
 
     }
 
+    labelRoleSort([role1, roleLabel1, label1], [role2, roleLabel2, label2]) {
+        // Sort built-ins before others. Reverse so that -1 (not found) sorts
+        // after the last built-in.
+        const builtIn = ['std', 'doc'].reverse();
+        const p1 = builtIn.indexOf(role1);
+        const p2 = builtIn.indexOf(role2);
+
+        if (p1 != p2) {
+            return p2 - p1;
+        }
+    
+        return roleLabel1.localeCompare(roleLabel2);
+    }
+
+    updateLabels(fact) {
+        const container = $("div.labels").empty();  
+        const dl = $("<dl></dl>").appendTo(container);
+        for (const [role, roleLabel, label] of 
+            Object.entries(fact.concept().labels())
+            .map(([role, label]) => [role, fact.report.getLabelRoleLabel(role), label])
+            .sort(this.labelRoleSort)) {
+            $("<dt></dt>")
+                .text(roleLabel)
+                .appendTo(dl);
+            $("<dd></dd>")
+                .text(label)
+                .appendTo(dl);
+        }
+        return dl;
+    }
+
     _referencesHTML(fact) {
-        const c = fact.concept();
         const a = new Accordian();
         for (const [i, r] of fact.concept().references().entries()) {
             const title = $("<span></span>").text(r[0].value);
@@ -665,47 +1028,95 @@ export class Inspector {
     }
 
     _calculationHTML(fact, elr) {
-        const calc = new Calculation(fact);
+        const calc = new Calculation(fact, this._useCalc11);
         if (!calc.hasCalculations()) {
             return "";
         }
         const tableFacts = this._viewer.factsInSameTable(fact);
-        if (!elr) {
-            elr = calc.bestELRForFactSet(tableFacts);
-        }
-        const report = this._report;
-        const inspector = this;
+        const selectedELR = calc.bestELRForFactSet(tableFacts);
+        const report = fact.report;
         const a = new Accordian();
 
-        for (const [e, rolePrefix] of Object.entries(calc.elrs())) {
-            const label = report.getRoleLabel(rolePrefix, inspector._viewerOptions);
-
-            const rCalc = calc.resolvedCalculation(e);
+        for (const rCalc of calc.resolvedCalculations()) {
+            const label = report.getRoleLabelOrURI(rCalc.elr);
             const calcBody = $('<div></div>');
-            for (const [i, r] of rCalc.entries()) {
-                const itemHTML = $("<div></div>")
+            const calcTable = $('<table></table>')
+                .addClass("calculation-table")
+                .appendTo(calcBody);
+
+            for (const r of rCalc.rows) {
+                const itemHTML = $("<tr></tr>")
                     .addClass("item")
-                    .append($("<span></span>").addClass("weight").text(r.weightSign + " "))
-                    .append($("<span></span>").addClass("concept-name").text(report.getLabelOrName(r.concept, "std")))
-                    .appendTo(calcBody);
+                    .append($("<td></td>").addClass("weight").text(r.weightSign))
+                    .append($("<td></td>").addClass("concept-name").text(r.concept.label()))
+                    .append($("<td></td>").addClass("value"))
+                    .appendTo(calcTable);
 
-                // r.facts is a map of fact IDs to Fact objects
-                if (r.facts) {
+                if (!r.facts.isEmpty()) {
                     itemHTML.addClass("calc-fact-link");
-                    itemHTML.data('ivids', Object.keys(r.facts));
-                    itemHTML.click(() => inspector.selectItem(Object.values(r.facts)[0].id));
-                    itemHTML.mouseenter(() => Object.values(r.facts).forEach(f => this._viewer.linkedHighlightFact(f)));
-                    itemHTML.mouseleave(() => Object.values(r.facts).forEach(f => this._viewer.clearLinkedHighlightFact(f)));
-                    Object.values(r.facts).forEach(f => this._viewer.highlightRelatedFact(f));
+                    itemHTML.find(".concept-name").contents().wrap($("<button></button>").addClass("inline-button"));
+                    itemHTML.data('ivids', r.facts.items().map(f => f.vuid));
+                    itemHTML.on("click", () => this.selectItem(r.facts.items()[0].vuid));
+                    itemHTML.on("mouseenter", () => r.facts.items().forEach(f => this._viewer.linkedHighlightFact(f)));
+                    itemHTML.on("mouseleave", () => r.facts.items().forEach(f => this._viewer.clearLinkedHighlightFact(f)));
+                    r.facts.items().forEach(f => this._viewer.highlightRelatedFact(f));
+                    itemHTML.find(".value").text(r.facts.mostPrecise().readableValue());
                 }
             }
-            $("<div></div>").addClass("item").addClass("total")
-                .append($("<span></span>").addClass("weight"))
-                .append($("<span></span>").addClass("concept-name").text(fact.getLabelOrName("std")))
+            $("<tr></tr>").addClass("item").addClass("total")
+                .append($("<td></td>").addClass("weight"))
+                .append($("<td></td>").addClass("concept-name").text(fact.concept().label()))
+                .append($("<td></td>").addClass("value").text(fact.readableValue()))
+                .appendTo(calcTable);
+
+            const calcStatusIcon = $("<span></span>");
+            const cardTitle = $("<span></span>")
+                .append(calcStatusIcon)
+                .append($("<span></span>").text(label));
+            const calcStatusText = $("<span></span>");
+            const calcDetailsLink = $("<button></button>")
+                    .addClass("calculation-details-link")
+                    .attr("title", i18next.t('factDetails.viewCalculationDetails'))
+                    .text("details")
+                    .on("click", (e) => {
+                        const dialog = new CalculationInspector();
+                        dialog.displayCalculation(rCalc);
+                        dialog.show();
+                        e.stopPropagation();
+                    })
+            $("<p></p>")
+                .append(calcStatusText)
+                .append($("<span></span>").text(" ("))
+                .append(calcDetailsLink)
+                .append($("<span></span>").text(")"))
                 .appendTo(calcBody);
+            if (rCalc.binds()) {
+                if (rCalc.isConsistent()) {
+                    calcStatusIcon
+                        .addClass("consistent-flag")
+                        .attr("title", i18next.t('factDetails.calculationIsConsistent'))
+                    calcStatusText.text(i18next.t('factDetails.calculationIsConsistent'));
+                }
+                else {
+                    calcStatusIcon
+                        .addClass("inconsistent-flag")
+                        .attr("title", i18next.t('factDetails.calculationIsInconsistent'))
+                    calcStatusText.text(i18next.t('factDetails.calculationIsInconsistent'));
+                }
+            }
+            else if (rCalc.unchecked()) {
+                calcStatusIcon
+                    .addClass("unchecked-flag")
+                    .attr("title", i18next.t('factDetails.calculationUnchecked'))
+                if (rCalc.uncheckedDueToVersionMismatch()) {
+                    calcStatusText.text(i18next.t('factDetails.calculationUncheckedIncorrectVersion'));
+                }
+                else {
+                    calcStatusText.text(i18next.t('factDetails.calculationUnchecked'));
+                }
+            }
 
-            a.addCard($("<span></span>").text(label), calcBody, e == elr);
-
+            a.addCard(cardTitle, calcBody, rCalc.elr == selectedELR);
         }
         return a.contents();
     }
@@ -714,12 +1125,12 @@ export class Inspector {
         const html = $("<div></div>").addClass("fact-list");
         for (const fn of fact.footnotes()) {
             if (fn instanceof Footnote) {
-                $("<div></div>")
+                $("<button></button>")
                     .addClass("block-list-item")
                     .text(truncateLabel(fn.textContent(), 120))
-                    .mouseenter(() => this._viewer.linkedHighlightFact(fn))
-                    .mouseleave(() => this._viewer.clearLinkedHighlightFact(fn))
-                    .click(() => this.selectItem(fn.id))
+                    .on("mouseenter", () => this._viewer.linkedHighlightFact(fn))
+                    .on("mouseleave", () => this._viewer.clearLinkedHighlightFact(fn))
+                    .on("click", () => this.selectItem(fn.vuid))
                     .appendTo(html);
             }
             else if (fn instanceof Fact) {
@@ -760,14 +1171,15 @@ export class Inspector {
         }
     }
 
-    factLinkHTML(label, factList) {
-        const html = $("<span></span>").text(label);
+    factLinkHTML(labelLang, factList) {
+        const html = $("<span></span>");
+        this._setLabelWithLang(html, labelLang);
         if (factList.length > 0) {
             html
             .addClass("fact-link")
-            .click(() => this.selectItem(factList[0].id))
-            .mouseenter(() => factList.forEach(f => this._viewer.linkedHighlightFact(f)))
-            .mouseleave(() => factList.forEach(f => this._viewer.clearLinkedHighlightFact(f)));
+            .on("click", () => this.selectItem(factList[0].vuid))
+            .on("mouseenter", () => factList.forEach(f => this._viewer.linkedHighlightFact(f)))
+            .on("mouseleave", () => factList.forEach(f => this._viewer.clearLinkedHighlightFact(f)));
         }
         return html;
     }
@@ -775,7 +1187,7 @@ export class Inspector {
     getPeriodIncrease(fact) {
         let s = "";
         if (fact.isNumeric()) {
-            const otherFacts = this._report.getAlignedFacts(fact, {"p":null });
+            const otherFacts = fact.report.getAlignedFacts(fact, {"p":null });
             var mostRecent;
             if (fact.periodTo()) {
                 for (const other of otherFacts) {
@@ -785,10 +1197,10 @@ export class Inspector {
                 }
             }
             if (mostRecent) {
-                const allMostRecent = this._report.getAlignedFacts(mostRecent);
+                const allMostRecent = fact.report.getAlignedFacts(mostRecent);
                 s = $("<span></span>")
                         .text(this.describeChange(mostRecent, fact))
-                        .append(this.factLinkHTML(mostRecent.periodString(), allMostRecent));
+                        .append(this.factLinkHTML({label: mostRecent.periodString()}, allMostRecent));
 
             }
             else {
@@ -796,18 +1208,18 @@ export class Inspector {
             }
         }
         else {
-            s = $("<i>").text("n/a").attr("title", "non-numeric fact");
+            s = $("<i>").text("n/a").attr("title", i18next.t('factDetails.nonNumericFact'));
         }
         $(".fact-properties tr.change td").html(s);
 
     }
 
     _updateValue(item, showAll, context) {
-        const text = item.readableValue();
+        const valueHTML = item.readableValueHTML();
         const tr = $('tr.value', context);
-        let v = text;
-        if (!showAll) {
-            const vv = wrapLabel(text, 120);
+        const valueSpan = tr.find('td .value').empty();
+        if (!(item instanceof Fact && item.isNumeric()) && !showAll) {
+            const vv = wrapLabel(valueHTML.textContent, 120);
             if (vv.length > 1) {
                 tr.addClass("truncated");
                 tr.find('.show-all')
@@ -817,10 +1229,11 @@ export class Inspector {
             else {
                 tr.removeClass('truncated');
             }
-            v = vv[0];
+            valueSpan.text(vv[0]);
         }
         else {
             tr.removeClass('truncated');
+            valueSpan.append(valueHTML);
         }
 
         // Only enable text block viewer for escaped, text block facts.  This
@@ -830,17 +1243,12 @@ export class Inspector {
             tr
                 .addClass('text-block')
                 .find('.expand-text-block')
-                    .off().click(() => this.showTextBlock(item));
+                    .off().on("click", () => this.showTextBlock(item));
         }
         else {
             tr.removeClass('text-block');
         }
 
-        const valueSpan = tr.find('td .value').empty().text(v);
-        if (item instanceof Fact && (item.isNil() || item.isInvalidIXValue())) {
-            valueSpan.wrapInner("<i></i>");
-        }
-
     }
 
     showTextBlock(item) {
@@ -849,6 +1257,38 @@ export class Inspector {
         tbd.show();
     }
 
+    _updateDataType(fact, context) {
+        const dt = fact.concept()?.dataType();
+        if (dt !== undefined) {
+            $('tr.datatype td', context).text(dt.label());
+        }
+        else {
+            $('tr.datatype', context).hide();
+        }
+    }
+
+    _updateBalance(fact, context) {
+        const b = fact.concept()?.balance();
+        if (b !== undefined) {
+            $('tr.balance td', context).text(b.label());
+        }
+        else {
+            $('tr.balance', context).hide();
+        }
+    }
+
+    _updateConcept(fact, context) {
+        $('tr.concept td', context)
+            .find('.text')
+                .text(fact.conceptDisplayName())
+                .attr("title", fact.conceptDisplayName())
+            .end()
+            .find('.clipboard-copy')
+                .data('cb-text', fact.conceptDisplayName())
+            .end();
+
+    }
+
     _updateEntityIdentifier(fact, context) {
         $('tr.entity-identifier td', context)
             .empty()
@@ -863,6 +1303,20 @@ export class Inspector {
         return html;
     }
 
+    _setLabelWithLang(elt, labelLang) {
+        elt.removeAttr("lang");
+        if (labelLang.label !== undefined) {
+            elt.text(labelLang.label);
+            if (labelLang.lang !== undefined) {
+                elt.attr("lang", labelLang.lang);
+            }
+        }
+        else {
+            elt.text("");
+        }
+        return elt;
+    }
+
     /* 
      * Build an accordian containing a summary of all nested facts/footnotes
      * corresponding to the current viewer selection.
@@ -872,7 +1326,7 @@ export class Inspector {
 
         // dissolveSingle => title not shown if only one item in accordian
         const a = new Accordian({
-            onSelect: (id) => this.switchItem(id),
+            onSelect: (vuid) => this.switchItem(vuid),
             alwaysOpen: true,
             dissolveSingle: true,
         });
@@ -883,26 +1337,22 @@ export class Inspector {
             const title = fs.minimallyUniqueLabel(fact);
             if (fact instanceof Fact) {
                 factHTML = $(require('../html/fact-details.html')); 
-                $('.std-label', factHTML).text(fact.getLabelOrName("std", true));
-                $('.documentation', factHTML).text(fact.getLabel("doc") || "");
-                $('tr.concept td', factHTML)
-                    .find('.text')
-                        .text(fact.conceptName())
-                        .attr("title", fact.conceptName())
-                    .end()
-                    .find('.clipboard-copy')
-                        .data('cb-text', fact.conceptName())
-                    .end();
+                this._setLabelWithLang($('.std-label', factHTML), fact.getLabelOrNameAndLang("std", true));
+                this._setLabelWithLang($('.documentation', factHTML), fact.getLabelAndLang("doc"));
+                this._updateConcept(fact, factHTML);
                 $('tr.period td', factHTML)
                     .text(fact.periodString());
                 if (fact.isNumeric()) {
                     $('tr.period td', factHTML).append(
-                        $("<span></span>") 
-                            .addClass("analyse")
+                        $("<button></button>") 
+                            .addClass(["analyse", "inline-button"])
+                            .attr("title", i18next.t("inspector.showAnalysisChart"))
                             .text("")
-                            .click(() => this.analyseDimension(fact, ["p"]))
+                            .on('click', () => this.analyseDimension(fact, ["p"]))
                     );
                 }
+                this._updateDataType(fact, factHTML);
+                this._updateBalance(fact, factHTML);
                 this._updateEntityIdentifier(fact, factHTML);
                 this._updateValue(fact, false, factHTML);
 
@@ -922,19 +1372,18 @@ export class Inspector {
                     $('#dimensions-label', factHTML).hide();
                 }
                 for (const aspect of taxonomyDefinedAspects) {
-                    const h = $('<div class="dimension"></div>')
-                        .text(aspect.label() || aspect.name())
+                    const h = this._setLabelWithLang($('<div class="dimension"></div>'), aspect.labelOrNameAndLang())
                         .appendTo($('#dimensions', factHTML));
                     if (fact.isNumeric()) {
                         h.append(
-                            $("<span></span>") 
-                                .addClass("analyse")
+                            $("<button></button>") 
+                                .addClass(["analyse", "inline-button"])
+                                .attr("title", i18next.t("inspector.showAnalysisChart"))
                                 .text("")
                                 .on("click", () => this.analyseDimension(fact, [aspect.name()]))
                         )
                     }
-                    const s = $('<div class="dimension-value"></div>')
-                        .text(aspect.valueLabel())
+                    const s = this._setLabelWithLang($('<div class="dimension-value"></div>'), aspect.valueLabelAndLang())
                         .appendTo(h);
                     if (aspect.isNil()) {
                         s.wrapInner("<i></i>");
@@ -948,8 +1397,8 @@ export class Inspector {
             a.addCard(
                 title,
                 factHTML, 
-                fact.id == cf.id,
-                fact.id
+                fact.vuid == cf.vuid,
+                fact.vuid
             );
         }
         return a;
@@ -960,6 +1409,62 @@ export class Inspector {
         chart.analyseDimension(fact, dimensions);
     }
 
+    toggleTooltip(icon) {
+        if ($("#tooltip").hasClass("show")) {
+            this.hideTooltip();
+        }
+        else {
+            this.showTooltip(icon);
+        }
+    }
+
+    showTooltip(icon, hoverShow) {
+        icon.closest(".has-tooltip").attr("aria-describedby", "tooltip");
+        $("#tooltip .tooltip-text").text(i18next.t(`tooltips:${icon.data("tooltip-name")}`));
+        $("#tooltip").addClass(hoverShow ? "hover-show" : "show");
+        const glossaryLink = icon.data("tooltip-glossary-link");
+        if (glossaryLink) {
+            $("#tooltip").addClass("with-glossary-link");
+            const url = new URL(GLOSSARY_URL);
+            if (typeof glossaryLink === 'string' && glossaryLink.startsWith("#")) {
+                url.hash = glossaryLink;
+            }
+            $("#tooltip .glossary-link a").attr("href", url.href);
+        }
+        else {
+            $("#tooltip").removeClass("with-glossary-link");
+        }
+        this.positionTooltip(icon);
+    }
+
+    hideTooltip(hoverShow) {
+        const t = $("#tooltip");
+        t.removeClass(hoverShow ? "hover-show" : "show");
+        if (!t.hasClass("hover-show") && !t.hasClass("show")) {
+            $(".has-tooltip").removeAttr("aria-describedby");
+        }
+    }
+
+
+    positionTooltip(e) {
+        const iconPos = e.offset();
+        const tooltipWidth = 300;
+        const clientWidth = document.documentElement.clientWidth;
+        const right = clientWidth - Math.min(clientWidth - 30, iconPos.left + tooltipWidth);
+        const left = Math.min(clientWidth - tooltipWidth, iconPos.left);
+
+        $("#tooltip")
+            .css("inset","")
+            .css("position", "fixed")
+            .css("left",  left)
+            .css("right",  right)
+            .css("top", iconPos.top + 30);
+
+        if ($("#tooltip").get(0).getBoundingClientRect().bottom > document.documentElement.clientHeight) {
+          $("#tooltip").css("top","").css("bottom", 30);
+        }
+    }
+
     update() {
         const cf = this._currentItem;
         if (!cf) {
@@ -968,6 +1473,7 @@ export class Inspector {
         } 
         else { 
             $('#inspector').removeClass('no-fact-selected').removeClass("hidden-fact").removeClass("html-hidden-fact");
+            $('#inspector .tags').show();
 
             $('#inspector .fact-inspector')
                 .empty()
@@ -981,20 +1487,21 @@ export class Inspector {
                 this.updateFootnotes(cf);
                 this.updateAnchoring(cf);
                 $('div.references').empty().append(this._referencesHTML(cf));
+                this.updateLabels(cf);
                 $('#inspector .search-results .fact-list-item').removeClass('selected');
-                $('#inspector .search-results .fact-list-item').filter((i, e) => $(e).data('ivid') == cf.id).addClass('selected');
+                $('#inspector .search-results .fact-list-item').filter((i, e) => $(e).data('ivid') == cf.vuid).addClass('selected');
 
                 const duplicates = cf.duplicates();
                 let n = 0;
                 const ndup = duplicates.length;
                 for (var i = 0; i < ndup; i++) {
-                    if (cf.id == duplicates[i].id) {
+                    if (cf.vuid == duplicates[i].vuid) {
                         n = i;
                     }
                 }
                 $('.duplicates .text').text(i18next.t('factDetails.duplicatesCount', { current: n + 1, total: ndup}));
-                $('.duplicates .prev').off().click(() => this.selectItem(duplicates[(n+ndup-1) % ndup].id));
-                $('.duplicates .next').off().click(() => this.selectItem(duplicates[(n+1) % ndup].id));
+                $('.duplicates .prev').off().on("click", () => { this.selectItem(duplicates[(n+ndup-1) % ndup].vuid); $('.duplicates .prev').get(0).focus(); });
+                $('.duplicates .next').off().on("click", () => { this.selectItem(duplicates[(n+1) % ndup].vuid); $('.duplicates .next').get(0).focus(); });
 
                 this.getPeriodIncrease(cf);
                 if (cf.isHidden()) {
@@ -1004,10 +1511,19 @@ export class Inspector {
                     $('#inspector').addClass('html-hidden-fact');
                 }
 
+                const target = cf.targetDocument();
+                if (target !== null) {
+                    $('#inspector .target-document-tag').text(target).show();
+                }
+                else {
+                    $('#inspector .target-document-tag').hide();
+                }
+
             }
             else if (cf instanceof Footnote) {
                 $('#inspector').addClass('footnote-mode');
                 $('#inspector .footnote-details .footnote-facts').empty().append(this._footnoteFactsHTML(cf));
+                $('#inspector .tags').hide();
             }
             $('.fact-details').localize();
         }
@@ -1024,18 +1540,24 @@ export class Inspector {
      *
      * If itemIdList is omitted, the currently selected item list is reset to just
      * the primary item.
+     *
+     * noInspectorReset selects the fact, but doesn't close
+     * search/summary/outline mode in the inspector.
      */
-    selectItem(id, itemIdList, noScroll) {
+    selectItem(vuid, itemIdList, noScroll, noInspectorReset) {
         if (itemIdList === undefined) {
-            this._currentItemList = [ this._report.getItemById(id) ];
+            this._currentItemList = [ this._reportSet.getItemById(vuid) ];
         }
         else {
             this._currentItemList = [];
             for (const itemId of itemIdList) {
-                this._currentItemList.push(this._report.getItemById(itemId));
+                this._currentItemList.push(this._reportSet.getItemById(itemId));
             }
         }
-        this.switchItem(id, noScroll);
+        this.switchItem(vuid, noScroll);
+        if (!noInspectorReset) {
+            this.inspectorMode(undefined);
+        }
     }
 
     /*
@@ -1046,13 +1568,13 @@ export class Inspector {
      *
      * For footnotes, we currently only support a single footnote being selected.
      */
-    switchItem(id, noScroll) {
-        if (id !== null) {
-            this._currentItem = this._report.getItemById(id);
+    switchItem(vuid, noScroll) {
+        if (vuid !== null) {
+            this._currentItem = this._reportSet.getItemById(vuid);
             if (!noScroll) {
-                this._viewer.showItemById(id);
+                this._viewer.showItemById(vuid);
             }
-            this._viewer.highlightItem(id);
+            this._viewer.highlightItem(vuid);
         }
         else {
             this._currentItem = null;
@@ -1066,6 +1588,10 @@ export class Inspector {
         if (urlParams.has("lang")) {
             return [ urlParams.get("lang") ];
         }
+        const localStorageAppLang = localStorage.getItem(STORAGE_APP_LANGUAGE);
+        if (localStorageAppLang) {
+            return [ localStorageAppLang ];
+        }
         const langs = window.navigator.languages || [ window.navigator.language || window.navigator.userLanguage ] ;
         if (langs.length == 0 || !langs[0]) {
             return ["en"];
@@ -1074,7 +1600,7 @@ export class Inspector {
     }
 
     selectDefaultLanguage() {
-        const al = this._report.availableLanguages();
+        const al = this._reportSet.availableLanguages();
         for (const pl of this.preferredLanguages()) {
             for (const l of al) {
                 if (l.toLowerCase() == pl.toLowerCase()) {
@@ -1082,27 +1608,27 @@ export class Inspector {
                 }
             }
         }
-        return this._report.availableLanguages()[0];
+        return this._reportSet.availableLanguages()[0];
     }
 
-    setLanguage(lang) {
+    setDocumentLanguage(lang) {
         this._viewerOptions.language = lang;
     }
 
     showValidationReport() {
         const vr = new ValidationReportDialog();
-        vr.displayErrors(this._report.data.validation);
+        vr.displayErrors(this._reportSet.validation());
         vr.show();
     }
 
     setupValidationReportIcon() {
-        if (this._report.hasValidationErrors()) {
+        if (this._reportSet.hasValidationErrors()) {
             $("#ixv .validation-warning").show().on("click", () => this.showValidationReport());
         }
     }
 
     showValidationWarning() {
-        if (this._report.hasValidationErrors()) {
+        if (this._reportSet.hasValidationErrors()) {
             const message = $("<div></div>").append("<p>This report contains <b>XBRL validation errors</b>.  These errors may prevent this document from opening correctly in other XBRL software.</p>");
             const mb = new MessageBox("Validation errors", message, "View Details", "Dismiss");
             mb.show(() => this.showValidationReport());