imerss-bioinfo 1.0.0

package/src/client/js/leafletMapWithRegions.js

@@ -0,0 +1,381 @@
+/* global L */
+
+"use strict";
+
+// noinspection ES6ConvertVarToLetConst // otherwise this is a duplicate on minifying
+var hortis = fluid.registerNamespace("hortis");
+
+fluid.defaults("hortis.leafletMap.withRegions", {
+    selectors: {
+        legendKeys: ".fld-imerss-map-legend-keys"
+    },
+    modelListeners: {
+        selectedRegions: [{
+            namespace: "map",
+            path: "selectedRegions",
+            func: "hortis.leafletMap.withRegions.showSelectedRegions",
+            args: ["{that}", "{change}.value"]
+        }, {
+            namespace: "legend",
+            path: "selectedRegions.*",
+            func: "hortis.legendKey.selectRegion",
+            args: ["{that}", "{change}.value", "{change}.path"]
+        }]
+    },
+    // See notes about this field in leafletMap
+    selectionTransactionSource: "map",
+    // legendKey: "@expand:hortis.leafletMap.renderLegendKey({that}.classes)",
+    model: {
+        // From leafletMap parent grade mapBlockTooltipId: string
+        // selectedRegions: classKey -> boolean
+        // selectedCommunities: communityKey -> boolean
+        // TODO: apparently this field is now disused
+        selectionRoute: "map" // either "map" or "taxa"
+    },
+    members: {
+        features: "{sunburst}.viz.features",
+        classes: "{sunburst}.viz.classes",
+        communities: "{sunburst}.viz.communities",
+        toPlot: "{sunburst}.viz.communities", // For general contract of hortis.mapBlockToFocusedTaxa - rename this field, e.g. selectableRegions
+        regions: "{sunburst}.viz.classes",
+        outerPanel: "{sunburst}.dom.mapOuterPanel"
+    },
+    listeners: {
+        "buildMap.addRegions": "hortis.leafletMap.withRegions.addRegions({that})",
+        "buildMap.drawRegions": "hortis.leafletMap.withRegions.drawRegions({that})",
+        "buildMap.drawLegend": "hortis.legendKey.drawLegend({that})",
+        "clearMapSelection.regions": "hortis.clearSelectedRegions({that})",
+        //                                                                          class,       community
+        "selectRegion.regionSelection": "hortis.leafletMap.regionSelection({that}, {arguments}.0, {arguments}.1)",
+        "onCreate.listenTaxonLinks": "hortis.listenTaxonLinks({sunburst})",
+        "onCreate.validateTaxonLinks": "hortis.validateTaxonLinks({sunburst}, {that})"
+    },
+    events: {
+        selectRegion: null
+    },
+    components: {
+        bannerManager: {
+            type: "hortis.bannerManager",
+            container: "body",
+            options: {
+                model: {
+                    selectedCommunities: "{hortis.leafletMap}.model.selectedCommunities"
+                }
+            }
+        }
+    }
+});
+
+fluid.registerNamespace("hortis.legendKey");
+
+hortis.legendKey.rowTemplate = "<div class=\"fld-imerss-legend-row\ %rowClass\">" +
+            "<span class=\"fld-imerss-legend-icon\"></span>" +
+            "<span class=\"fld-imerss-legend-preview %previewClass\" style=\"%previewStyle\"></span>" +
+            "<span class=\"fld-imerss-legend-label\">%keyLabel</span>" +
+            "</div>";
+
+hortis.legendKey.blockTemplate = "<div class=\"fld-imerss-legend-block\"><span class=\"fld-imerss-legend-block-name\">%community</span>%rows</div>";
+
+hortis.legendKey.renderMarkup = function (markup, clazz, className) {
+    const style = hortis.fillColorToStyle(clazz.fillColor || clazz.color);
+    const normal = hortis.normaliseToClass(className);
+    return fluid.stringTemplate(markup, {
+        rowClass: "fld-imerss-legend-row-" + normal,
+        previewClass: "fld-imerss-class-" + normal,
+        previewStyle: "background-color: " + style.fillColor,
+        keyLabel: className
+    });
+};
+
+hortis.legendKey.drawLegend = function (map) {
+    const blocks = fluid.transform(map.communities, function (community, key) {
+        const clazzRows = fluid.transform(community.classes, function (troo, className) {
+            return hortis.legendKey.renderMarkup(hortis.legendKey.rowTemplate, map.classes[className], className);
+        });
+        return fluid.stringTemplate(hortis.legendKey.blockTemplate, {
+            community: key,
+            rows: Object.values(clazzRows).join("\n")
+        });
+    });
+    const markup = Object.values(blocks).join("\n");
+    const legendKeys = map.locate("legendKeys");
+    legendKeys.html(markup);
+    map.clazzToLegendNodes = fluid.transform(map.classes, function (troo, className) {
+        const rowSel = ".fld-imerss-legend-row-" + hortis.normaliseToClass(className);
+        const row = legendKeys.find(rowSel);
+        row.click(function () {
+            map.events.selectRegion.fire(className, map.classes[className].community);
+        });
+    });
+};
+
+hortis.toggleClass = function (element, clazz, value) {
+    element.toggleClass(clazz, value);
+};
+
+hortis.legendKey.selectRegion = function (map, value, path) {
+    const className = fluid.peek(path);
+    const row = map.locate("legendKeys").find(".fld-imerss-legend-row-" + hortis.normaliseToClass(className));
+    row.toggleClass("fld-imerss-selected", value);
+};
+
+hortis.fillColorToStyle = function (fillColor) {
+    return {
+        fillColor: fluid.colour.arrayToString(fillColor),
+        fillOpacity: 1
+    };
+};
+
+
+fluid.defaults("hortis.bannerManager", {
+    gradeNames: "fluid.viewComponent",
+    selectors: {
+        banner: ".fl-xetthecum-banner"
+    },
+    modelListeners: {
+        "selectedCommunities.*": {
+            func: "hortis.bannerManager.toggleClass",
+            args: ["{that}.dom.banner", "{change}.value", "{change}.path"]
+        }
+    }
+});
+
+hortis.normaliseToClass = function (str) {
+    return str.toLowerCase().replace(/ /g, "-");
+};
+
+hortis.bannerManager.toggleClass = function (banner, state, path) {
+    const community = fluid.peek(path);
+    banner.toggleClass("fld-imerss-banner-" + hortis.normaliseToClass(community), state);
+};
+
+hortis.leafletMap.seColumns = ["What", "Where", "Importance", "Protection", "Source"];
+
+hortis.leafletMap.hulqNameTemplate = " / <span aria-label=\"%label\" title=\"%label\" class=\"fl-imerss-hulq-name\">%hulqName</span>";
+
+hortis.leafletMap.outerPanelPhoto = "<div class=\"fl-imerss-photo %photoClass\"></div>";
+
+hortis.leafletMap.outerPanelCommunity = "<div class=\"fld-imerss-map-community\">Community:<br/>%community%hulqBlock</div>";
+hortis.leafletMap.outerPanelClass = "<div class=\"fld-imerss-map-class\">%clazz%hulqBlock</div>";
+
+hortis.leafletMap.outerPanelBlock =
+    "<div class=\"fld-imerss-map-panel-block fld-taxonDisplay-expandable-header fl-taxonDisplay-runon-header\">%blockName" + hortis.expandButtonMarkup + "</div>" +
+    "<div class=\"fld-taxonDisplay-expandable-remainder fl-taxonDisplay-runon-remainder\">%block</div>";
+
+
+hortis.leafletMap.renderHulqName = function (row) {
+    return fluid.stringTemplate(hortis.leafletMap.hulqNameTemplate, {
+        hulqName: row.hulqName,
+        label: "Meaning: " + hortis.encodeHTML(row.hulqMeaning) + " Source: " + hortis.encodeHTML(row.hulqSource)
+    });
+};
+
+hortis.textToMarkup = function (text) {
+    return hortis.encodeHTML(text).replace(/\n/g, "<br/>");
+};
+
+hortis.taxonLinkRegex = /\[([^\[]+)\]\(([^\)]*)\)/gm;
+
+hortis.convertTaxonLinks = function (text) {
+    return text.replace(hortis.taxonLinkRegex, function (match, p1, p2) {
+        return "<a class=\"fld-imerss-taxon-link\" href=\"" + p2 + "\">" + p1 + "</a>";
+    });
+};
+
+hortis.linkToTaxon = function (sunburst, taxonLink) {
+    const targetTaxon = taxonLink.substring("#taxon:".length);
+    return sunburst.lookupTaxon(targetTaxon);
+};
+
+hortis.validateTaxonLinks = function (sunburst, map) {
+    fluid.each(map.communities, function (community, key) {
+        const text = community.culturalValues;
+        let match;
+        do { // Ridiculous syntax from https://stackoverflow.com/a/6323598
+            match = hortis.taxonLinkRegex.exec(text);
+            if (match) {
+                const taxonLink = match[2];
+                const taxon = hortis.linkToTaxon(sunburst, taxonLink);
+                if (!taxon) {
+                    console.log("Failed to look up taxon " + taxonLink + " for community key " + key);
+                }
+            }
+        } while (match);
+    });
+};
+
+// Accepts mouse event and function accepting row
+hortis.withTaxonLink = function (sunburst, e, func) {
+    const target = e.target.getAttribute("href");
+    e.preventDefault();
+    console.log("Got event target ", target);
+    if (target.startsWith("#taxon:")) {
+        const row = hortis.linkToTaxon(sunburst, target);
+        if (row) {
+            func(row);
+        }
+    }
+};
+
+hortis.listenTaxonLinks = function (sunburst) {
+    $(document).on("click", ".fld-imerss-taxon-link", function (e) {
+        hortis.withTaxonLink(sunburst, e, function (row) {
+            sunburst.events.changeLayoutId.fire(row.id);
+        });
+    });
+
+    $(document).on("mouseenter", ".fld-imerss-taxon-link", function (e) {
+        hortis.withTaxonLink(sunburst, e, function (row) {
+            sunburst.mouseEvent = e;
+            sunburst.applier.change("hoverId", row.id);
+        });
+    });
+    $(document).on("mouseleave", ".fld-imerss-taxon-link", function () {
+        sunburst.applier.change("hoverId", null);
+    });
+};
+
+hortis.leafletMap.renderMapOuterPanel = function (map) {
+    const selectedClazz = fluid.keyForValue(map.model.selectedRegions, true);
+    const clazz = map.classes[selectedClazz];
+    let topPanel = "";
+    if (clazz.hasImage) {
+        topPanel += fluid.stringTemplate(hortis.leafletMap.outerPanelPhoto, {
+            photoClass: "fld-imerss-class-image-" + hortis.normaliseToClass(selectedClazz)
+        });
+    }
+    const communityName = map.model.mapBlockTooltipId;
+    const community = map.communities[communityName];
+    topPanel += fluid.stringTemplate(hortis.leafletMap.outerPanelCommunity, {
+        community: map.model.mapBlockTooltipId,
+        hulqBlock: community.hulqName ? hortis.leafletMap.renderHulqName(community) : ""
+    });
+    topPanel += fluid.stringTemplate(hortis.leafletMap.outerPanelClass, {
+        clazz: selectedClazz,
+        hulqBlock: clazz.hulqName ? hortis.leafletMap.renderHulqName(clazz) : ""
+    });
+    let bottomPanel = "";
+    if (community.culturalValues) {
+        const cultureBlock =
+            hortis.convertTaxonLinks(hortis.textToMarkup(community.culturalValues)) +
+            "<br/><br/><div class=\"fld-imerss-map-class-se-col\">Sources:</div>" +
+            hortis.textToMarkup(community.culturalValuesSources);
+        const allCultureBlock = fluid.stringTemplate(hortis.leafletMap.outerPanelBlock, {
+            blockName: "Cultural Values",
+            block: cultureBlock
+        });
+        bottomPanel += allCultureBlock;
+    }
+    if (clazz["sE-Tagline"]) {
+        let ecoBlock = "<div class=\"fld-imerss-map-class-tagline\">" + clazz["sE-Tagline"] + "</div>";
+        hortis.leafletMap.seColumns.forEach(function (col) {
+            ecoBlock += "<div class=\"fld-imerss-map-class-se-col\">" + col + ": </div>";
+            ecoBlock += "<div class=\"fld-imerss-map-class-se-val\">" + clazz["sE-" + col] + "</div>";
+        });
+        const allEcoBlock = fluid.stringTemplate(hortis.leafletMap.outerPanelBlock, {
+            blockName: "Ecological Values",
+            block: ecoBlock
+        });
+        bottomPanel += allEcoBlock;
+    }
+    return topPanel + bottomPanel;
+};
+
+// Most code from here on gets preserved in Howe Sound
+
+hortis.leafletMap.withRegions.selectedRegions = function (selectedRegion, regions) {
+    return fluid.transform(regions, function (junk, key) {
+    // Note simplest way to avoid highlighting all when there is no map selection is to say none are selected
+        return selectedRegion ? key === selectedRegion : false;
+    });
+};
+
+// TODO: This gets preserved but we need to split off the outerPanel update
+hortis.leafletMap.regionSelection = function (map, className, community) {
+    map.applier.change("mapBlockTooltipId", community);
+    map.applier.change("selectedRegions", hortis.leafletMap.withRegions.selectedRegions(className, map.classes));
+    map.applier.change("selectedCommunities", hortis.leafletMap.withRegions.selectedRegions(community, map.communities));
+    map.outerPanel.html(hortis.leafletMap.renderMapOuterPanel(map));
+};
+
+// TODO: This gets preserved
+hortis.clearSelectedRegions = function (map) {
+    map.applier.change("selectedRegions", hortis.leafletMap.withRegions.selectedRegions(null, map.classes));
+    map.applier.change("selectedCommunities", hortis.leafletMap.withRegions.selectedRegions(null, map.communities));
+};
+
+
+hortis.regionOpacity = function (region) {
+    return "--imerss-" + hortis.normaliseToClass(region) + "-opacity";
+};
+
+hortis.regionBorder = function (region) {
+    return "--imerss-" + hortis.normaliseToClass(region) + "-stroke";
+};
+
+hortis.leafletMap.withRegions.showSelectedRegions = function (map, selectedRegions) {
+    const style = map.container[0].style;
+    const noSelection = map.model.mapBlockTooltipId === null;
+    Object.keys(map.regions).forEach(function (key) {
+        const lineFeature = map.classes[key].color;
+        style.setProperty(hortis.regionOpacity(key), selectedRegions[key] || noSelection ? "1.0" : "0.4");
+        style.setProperty(hortis.regionBorder(key), selectedRegions[key] ? "#FEF410" : (lineFeature ? fluid.colour.arrayToString(lineFeature) : "none"));
+    });
+};
+
+hortis.leafletMap.withRegions.addRegions = function (that) {
+    that.map.createPane("hortis-regions");
+    that.regionGroup = L.layerGroup({pane: "hortis-regions"}).addTo(that.map);
+};
+
+hortis.addStyle = function (text) {
+    const style = document.createElement("style");
+    style.type = "text/css";
+    style.innerText = text;
+    document.getElementsByTagName("head")[0].appendChild(style);
+};
+
+hortis.leafletMap.withRegions.drawRegions = function (map) {
+    const regionClass = function (className) {
+        return "fld-imerss-region-" + hortis.normaliseToClass(className);
+    };
+    map.applier.change("selectedRegions", hortis.leafletMap.withRegions.selectedRegions(null, map.classes));
+
+    map.regionGroup.clearLayers();
+
+    // Note nothing currently reads this property
+    map.liveFeatures = map.features.map(function (feature) {
+        const className = feature.properties.clazz;
+        const community = feature.properties.COMMUNITY;
+        const clazz = map.classes[className];
+        const options = clazz.fillColor ? {
+            style: hortis.fillColorToStyle(clazz.fillColor),
+            weight: 3,
+            stroke: "yellow" // Leaflet doesn't listen to weight if there is no initial stroke
+        } : {
+            style: {
+                color: fluid.colour.arrayToString(clazz.color),
+                weight: 3
+            }
+        };
+        options.className = regionClass(className) + " fld-imerss-region";
+        const Lpolygon = L.geoJSON(feature, options);
+        map.regionGroup.addLayer(Lpolygon);
+
+        Lpolygon.on("click", function () {
+            console.log("Map clicked on community ", community, " region ", className);
+            map.events.selectRegion.fire(className, community);
+        });
+        return {
+            Lpolygon: Lpolygon,
+            properties: feature.properties
+        };
+    });
+    const highlightStyle = Object.keys(map.regions).map(function (key) {
+        return "." + regionClass(key) + " {\n" +
+            "  fill-opacity: var(" + hortis.regionOpacity(key) + ");\n" +
+            "  stroke: var(" + hortis.regionBorder(key) + ");\n" +
+            "}\n";
+    });
+    hortis.addStyle(highlightStyle.join("\n"));
+};

package/src/client/js/renderSVG.js

@@ -0,0 +1,108 @@
+/*
+Copyright 2017 Antranig Basman
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+"use strict";
+
+var hortis = fluid.registerNamespace("hortis");
+
+hortis.encodeHTML = function (str) {
+    return str.replace(/[&<>'"]/g, function (tag) {
+        return {
+            "&": "&amp;",
+            "<": "&lt;",
+            ">": "&gt;",
+            "'": "&#39;",
+            "\"": "&quot;"
+        }[tag];
+    });
+};
+
+hortis.renderSVGElement = function (markup, parentContainer) {
+    // Approach taken from http://stackoverflow.com/a/36507333
+    var container = $.parseXML(markup);
+    var element = container.documentElement;
+    parentContainer.append(element);
+    return element;
+};
+
+hortis.renderNumber = function (number) {
+    if (Math.abs(number) < 1e-5) {
+        return "0";
+    } else {
+        return number.toFixed(3);
+    }
+};
+
+hortis.emitPath = function (elements) {
+    var togo = "";
+    elements.forEach(function (elem) {
+        if (typeof(elem) === "string") {
+            togo += elem;
+        } else {
+            togo += hortis.renderNumber(elem);
+        }
+    });
+    return togo;
+};
+
+hortis.circularPath = function (radius) {
+    var r = radius;
+    return hortis.emitPath(["M", -r, " ", 0,
+        "A", r, " ", r, " 0 1 0 ", r, " ", 0,
+        "A", r, " ", r, " 0 1 0 ", -r, " ", 0
+    ]);
+};
+
+hortis.annularPath = function (innerRadius, outerRadius) {
+    var ir = innerRadius, or = outerRadius;
+    return hortis.emitPath(["M", -or, " ", 0,
+        "A", or, " ", or, " 0 1 0 ", or, " ", 0,
+        "A", or, " ", or, " 0 1 0 ", -or, " ", 0,
+        "Z",
+        "M", -ir, " ", 0,
+        "A", ir, " ", ir, " 0 1 1 ", ir, " ", 0,
+        "A", ir, " ", ir, " 0 1 1 ", -ir, " ", 0,
+        "Z"
+    ]);
+};
+
+hortis.segmentPath = function (startAngle, endAngle, innerRadius, outerRadius) {
+    var cs = Math.cos(startAngle), ss = -Math.sin(startAngle),
+        ce = Math.cos(endAngle), se = -Math.sin(endAngle),
+        i = innerRadius, o = outerRadius,
+        lfa = (+((endAngle - startAngle) >= Math.PI)).toString();
+    // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Arcs
+    return hortis.emitPath(["M", cs * i, " ", ss * i,
+        "A", i, " ", i, " 0 ", lfa, " 0 ", ce * i, " ", se * i,
+        "L", ce * o, " ", se * o,
+        "A", o, " ", o, " 0 ", lfa, " 1 ", cs * o, " ", ss * o,
+        "Z"]);
+};
+
+hortis.linearTextPath = function (leftAngle, rightAngle, innerRadius, outerRadius) {
+    var midAngle = (leftAngle + rightAngle) / 2,
+        c = Math.cos(midAngle), s = -Math.sin(midAngle),
+        sr = c > 0 ? innerRadius : outerRadius,
+        fr = c > 0 ? outerRadius : innerRadius;
+    return hortis.emitPath(["M", c * sr, " ", s * sr, "L", c * fr, " ", s * fr]);
+};
+
+hortis.segmentTextPath = function (startAngle, endAngle, outerRadius) {
+    var cs = Math.cos(startAngle), ss = -Math.sin(startAngle),
+        ce = Math.cos(endAngle), se = -Math.sin(endAngle),
+        ar = outerRadius - 20,
+        lfa = (+((endAngle - startAngle) >= Math.PI)).toString();
+    return hortis.emitPath(["M", cs * ar, " ", ss * ar,
+        "A", ar, " ", ar, " 0 ", lfa, " 0 ", ce * ar, " ", se * ar]);
+};
+
+hortis.circularTextPath = function (outerRadius) {
+    var ar = outerRadius - 20;
+    return hortis.emitPath(["M", "-0.1 ", -ar,
+        "A", ar, " ", ar, " 0 1 0 ", "0.1 ", -ar]);
+};

package/src/client/js/tabs.js

@@ -0,0 +1,53 @@
+/*
+Copyright 2021 Antranig Basman
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+
+
+"use strict";
+
+var hortis = fluid.registerNamespace("hortis");
+
+/**********************
+ * Tabs *
+ *********************/
+
+fluid.defaults("hortis.tabs", {
+    gradeNames: ["fluid.viewComponent"],
+    tabOptions: {},
+    model: {
+        selectedTab: null
+    },
+    listeners: {
+        "onCreate.initTabs": {
+            "this": "{that}.container",
+            "method": "tabs",
+            "args": "{that}.options.tabOptions"
+        },
+        "onCreate.bindEvents": {
+            funcName: "hortis.tabs.bindEvents"
+        }
+    }
+});
+
+hortis.tabs.findTab = function (that, tabId) {
+    return fluid.find(that.options.tabIds, function (id, key) {
+        return id === tabId ? key : undefined;
+    });
+};
+
+hortis.tabs.bindEvents = function (that) {
+    that.container.on("tabsactivate", function (event, ui) {
+        const tabId = ui.newTab.find("a").attr("href").substring(1);
+        const tab = hortis.tabs.findTab(that, tabId);
+        that.applier.change("selectedTab", tab);
+    });
+    const initialIndex = Object.keys(that.options.tabIds).indexOf(that.model.selectedTab);
+    if (initialIndex !== -1) {
+        that.container.tabs("option", "active", initialIndex);
+    }
+};

package/src/client/js/xetthecum.js

@@ -0,0 +1,106 @@
+/*
+Copyright 2022 Antranig Basman
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+
+"use strict";
+
+var hortis = fluid.registerNamespace("hortis");
+
+fluid.defaults("hortis.xetthecumSunburstLoader", {
+    gradeNames: "fluid.viewComponent",
+    bioPanelLabel: "Biodiversity",
+    mapPanelLabel: "Ecological Communities",
+    distributeOptions: {
+        sunburstLabel: {
+            target: "{that hortis.sunburst}.options.model.panelLabel",
+            source: "{that}.options.bioPanelLabel"
+        },
+        checklistLabel: {
+            target: "{that hortis.checklist}.options.model.panelLabel",
+            source: "{that}.options.bioPanelLabel"
+        },
+        mapWithLabel: {
+            record: "hortis.withPanelLabel",
+            target: "{that hortis.leafletMap}.options.gradeNames"
+        },
+        mapLabel: {
+            target: "{that hortis.leafletMap}.options.model.panelLabel",
+            source: "{that}.options.mapPanelLabel"
+        },
+        outerPanelSelector: {
+            target: "{that hortis.sunburst}.options.selectors.mapOuterPanel",
+            record: ".fld-imerss-map-outer-panel"
+        }
+    },
+    components: {
+        infoPanelManager: {
+            type: "hortis.infoPanelManager",
+            container: "{sunburstLoader}.container",
+            createOnEvent: "sunburstLoaded",
+            options: {
+                listeners: { // Another one for the reuse failure up to 5.x - we have to put these here because of createOnEvent
+                    "{hortis.leafletMap}.events.selectRegion": {
+                        namespace: "updateInfoPanel",
+                        changePath: "{infoPanelManager}.model.visiblePanel",
+                        value: "map"
+                    },
+                    // TODO: Horrid notational problem here - can't duplicate key in JSON and can't put namespace in it
+                    "{sunburst}.events.changeLayoutId": [{
+                        namespace: "clearMapSelection",
+                        listener: "hortis.clearMapSelectionConditionally",
+                        args: ["{hortis.leafletMap}", "{arguments}.0", "{arguments}.1"]
+                    }, {
+                        namespace: "changeLayoutId",
+                        changePath: "{infoPanelManager}.model.visiblePanel",
+                        value: "taxa"
+                    }]
+                }
+            }
+        }
+    }
+});
+
+hortis.clearMapSelectionConditionally = function (map, layoutId, source) {
+    console.log("ClearMapSelectionConditionally with layoutId ", layoutId, " source " + source);
+    if (source !== "rowFocus") {
+        map.events.clearMapSelection.fire();
+    }
+};
+
+fluid.defaults("hortis.infoPanelManager", {
+    gradeNames: "fluid.viewComponent",
+    selectors: {
+        map: ".fld-imerss-map-outer-panel-wrapper",
+        taxa: ".fld-imerss-taxonDisplay-wrapper"
+    },
+    panels: {
+        map: true,
+        taxa: true
+    },
+    model: {
+        visiblePanel: "taxa",
+        visiblePanels: {}
+    },
+    modelRelay: {
+        visiblePanels: {
+            target: "visiblePanels",
+            func: (panel, panels) => {
+                return fluid.transform(panels, (troo, thisPanel) => panel === thisPanel);
+            },
+            args: ["{that}.model.visiblePanel", "{that}.options.panels"]
+        },
+        visibleMap: {
+            target: "dom.map.visible",
+            source: "visiblePanels.map"
+        },
+        visibleTaxa: {
+            target: "dom.taxa.visible",
+            source: "visiblePanels.taxa"
+        }
+    }
+});

package/src/client/json/emptyPhyloMap.json

@@ -0,0 +1 @@
+{}

package/src/client/json/kingdomPhyloMap.json

@@ -0,0 +1,17 @@
+{
+    "kingdom:Animalia": {
+        "colour": "#f26522"
+    },
+    "kingdom:Chromista": {
+        "colour": "#009fd3"
+    },
+    "kingdom:Plantae": {
+        "colour": "#8cc63f"
+    },
+    "kingdom:Protozoa": {
+        "colour": "#1eb28f"
+    },
+    "kingdom:Fungi": {
+        "colour": "#f06"
+    }
+}