imerss-bioinfo 1.13.0 → 1.14.0

package/build.js

@@ -81,6 +81,8 @@ const buildIndex = {
     newSource: [
         "node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js",
         "src/client/css/mapbox-gl-draw.css", // has our own overrides
+        "src/client/css/data-table.css",
+        "src/client/css/resize-bar.css",
         "node_modules/papaparse/papaparse.min.js",
         "node_modules/pako/dist/pako_inflate.min.js",
         "node_modules/pretty-checkbox/dist/pretty-checkbox.min.css",
@@ -91,6 +93,8 @@ const buildIndex = {
         "src/client/js/new/filters.js",
         "src/client/js/new/polygon-draw.js",
         "src/client/js/new/dual-range-input.js",
+        "src/client/js/new/data-table.js",
+        "src/client/js/new/resize-bar.js",
         "src/client/js/autocomplete.js",
         "src/client/js/tabs.js"
     ],
@@ -126,6 +130,9 @@ const buildIndex = {
     }, {
         src: "src/client/js/new/imerss-blitz.js",
         dest: "docs/js/imerss-blitz.js"
+    }, {
+        src: "src/client/js/new/imerss-plants.js",
+        dest: "docs/js/imerss-plants.js"
     }, {
         src: "src/lib/vizjs.js",
         dest: "docs/js/vizjs.js"
@@ -180,6 +187,15 @@ const buildIndex = {
     }, {
         src: "data/b-team/plant-pollinators-WaBA-2025-regionIndirection.csv",
         dest: "docs/data/b-team/plant-pollinators-WaBA-2025-regionIndirection.csv"
+    }, {
+        src: "data/b-team/plant-pollinators-BCBA-labels.viz",
+        dest: "docs/data/b-team/plant-pollinators-BCBA-labels.viz"
+    }, {
+        src: "data/b-team/plant-pollinators-BCBA-assigned-taxa.viz",
+        dest: "docs/data/b-team/plant-pollinators-BCBA-assigned-taxa.viz"
+    }, {
+        src: "data/b-team/plant-pollinators-BCBA-regionIndirection.csv",
+        dest: "docs/data/b-team/plant-pollinators-BCBA-regionIndirection.csv"
     }, {
         src: "data/Galiano 2023 BioBlitz/Galiano_Island_vascular_plant_records_consolidated-prepared.csv",
         dest: "docs/data/Galiano 2023 BioBlitz/Galiano_Island_vascular_plant_records_consolidated-prepared.csv"
@@ -266,13 +282,7 @@ const minify = async function (hash, filename) {
     });
 };
 
-const buildFromFiles = async function (buildIndex) {
-    const allOldFiles = buildIndex.libSource.concat(buildIndex.oldSource);
-    console.log("allOldFiles ", allOldFiles);
-
-    const oldJsHash = filesToContentHash(allOldFiles, ".js");
-    const allOldJsHash = fluid.extend({header: buildIndex.codeHeader}, oldJsHash, {footer: buildIndex.codeFooter});
-    const minifiedAllOld = await minify(allOldJsHash, "imerss-viz-all.js");
+const buildStory = async function (buildIndex) {
 
     // imerss-viz-lib.js contains just upstream libraries we depend on, to support reasonably easy deploy of "new" framework
     const libJsHash = filesToContentHash(buildIndex.libSource, ".js");
@@ -287,10 +297,6 @@ const buildFromFiles = async function (buildIndex) {
     console.log("newFiles ", buildIndex.newSource);
     const newJs = await minify(newJsHash, "imerss-viz-new.js");
 
-    fs.removeSync("docs");
-    fs.ensureDirSync("docs/js");
-    fs.writeFileSync("docs/js/imerss-viz-all.js", minifiedAllOld.code, "utf8");
-    fs.writeFileSync("docs/js/imerss-viz-all.js.map", minifiedAllOld.map);
     fs.writeFileSync("docs/js/imerss-viz-lib.js", minifiedLib.code, "utf8");
     fs.writeFileSync("docs/js/imerss-viz-lib.js.map", minifiedLib.map);
     fs.writeFileSync("docs/js/imerss-viz-new-core.js", newCoreJs.code, "utf8");
@@ -298,9 +304,6 @@ const buildFromFiles = async function (buildIndex) {
     fs.writeFileSync("docs/js/imerss-viz-new.js", newJs.code, "utf8");
     fs.writeFileSync("docs/js/imerss-viz-new.js.map", newJs.map);
 
-    const allOldCssHash = filesToContentHash(allOldFiles, ".css");
-    const allOldCssConcat = String.prototype.concat.apply("", Object.values(allOldCssHash));
-
     const cssLibHash = filesToContentHash(buildIndex.libSource, ".css");
     const cssLibConcat = String.prototype.concat.apply("", Object.values(cssLibHash));
 
@@ -310,12 +313,34 @@ const buildFromFiles = async function (buildIndex) {
     const cssNewHash = filesToContentHash(buildIndex.newSource, ".css");
     const cssNewConcat = String.prototype.concat.apply("", Object.values(cssNewHash));
 
-    fs.ensureDirSync("docs/css");
-    fs.writeFileSync("docs/css/imerss-viz-all.css", allOldCssConcat);
     fs.writeFileSync("docs/css/imerss-viz-lib.css", cssLibConcat);
     fs.writeFileSync("docs/css/imerss-viz-new-core.css", cssNewCoreConcat);
     fs.writeFileSync("docs/css/imerss-viz-new.css", cssNewConcat);
 
+};
+
+const buildFromFiles = async function (buildIndex) {
+    const allOldFiles = buildIndex.libSource.concat(buildIndex.oldSource);
+    console.log("allOldFiles ", allOldFiles);
+
+    const oldJsHash = filesToContentHash(allOldFiles, ".js");
+    const allOldJsHash = fluid.extend({header: buildIndex.codeHeader}, oldJsHash, {footer: buildIndex.codeFooter});
+    const minifiedAllOld = await minify(allOldJsHash, "imerss-viz-all.js");
+
+    fs.removeSync("docs");
+    fs.ensureDirSync("docs/js");
+    fs.writeFileSync("docs/js/imerss-viz-all.js", minifiedAllOld.code, "utf8");
+    fs.writeFileSync("docs/js/imerss-viz-all.js.map", minifiedAllOld.map);
+
+
+    const allOldCssHash = filesToContentHash(allOldFiles, ".css");
+    const allOldCssConcat = String.prototype.concat.apply("", Object.values(allOldCssHash));
+
+    fs.ensureDirSync("docs/css");
+    fs.writeFileSync("docs/css/imerss-viz-all.css", allOldCssConcat);
+
+    await buildStory(buildIndex);
+
     buildIndex.copy.forEach(function (oneCopy) {
         copyDep(oneCopy.src, oneCopy.dest);
     });
@@ -324,6 +349,8 @@ const buildFromFiles = async function (buildIndex) {
 
 fluid.setLogging(true);
 
-buildFromFiles(buildIndex).then(null, function (error) {
+const buildFn = process.argv[2] === "story" ? buildStory : buildFromFiles;
+
+buildFn(buildIndex).then(null, function (error) {
     console.log(error);
 });

package/docs/css/data-table.css

@@ -0,0 +1,176 @@
+
+:root {
+    --data-table-bg: #0e1117;
+    --data-table-surface: #161b22;
+    --data-table-border: #2a2f3a;
+    --data-table-text: #e2e6ed;
+    --data-table-text-dim: #7d8590;
+    --data-table-accent: #58a6ff;
+    --data-table-accent-dim: rgba(88, 166, 255, 0.12);
+    --data-table-radius: 8px;
+    --data-table-font: "DM Sans", sans-serif;
+}
+
+.hortis-dataTable {
+    height: 100%;
+    display: flex;
+}
+
+.hortis-dataTable-icon {
+    width: 24px;
+    height: 24px;
+}
+
+.hortis-dataTable-sort {
+    line-height: 0;
+}
+
+.hortis-dataTable-sort-wrap {
+    display: flex;
+    align-items: center;
+}
+
+.hortis-dataTable-selected-row {
+    background-color: #a5d6ff;
+}
+
+.hortis-dataTable-row-check {
+    display: block;
+}
+
+
+.hortis-dataTable-wrap {
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    overflow: hidden;
+    border: 1px solid var(--data-table-border);
+    border-radius: var(--data-table-radius);
+    background: var(--data-table-surface);
+    display: flex;
+    flex-direction: column;
+}
+
+.hortis-dataTable-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+
+.hortis-dataTable-scroll table {
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+
+.hortis-dataTable-scroll thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--data-table-surface);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--data-table-text-dim);
+    text-align: left;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--data-table-border);
+    white-space: nowrap;
+}
+
+.hortis-dataTable-scroll thead th.hortis-dataTable-num {
+    text-align: right;
+}
+
+.hortis-dataTable-scroll tbody td {
+    padding: 3px 10px;
+    font-size: 13px;
+    border-bottom: 1px solid var(--data-table-border);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.hortis-dataTable-scroll tbody tr {
+    transition: background 0.15s ease;
+}
+
+.hortis-dataTable-scroll tbody tr:last-child td {
+    border-bottom: none;
+}
+
+:root {
+    --datatable-scrollbar-width: 12px;
+}
+
+.hortis-dataTable-wrap ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: var(--datatable-scrollbar-width);
+    background-color: #eee
+}
+
+.hortis-dataTable-wrap ::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background-color: #C1C1C1;
+    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+
+.hortis-dataTable-wrap ::-webkit-scrollbar-thumb:hover {
+    background-color: #A8A8A8;
+}
+
+
+td.hortis-dataTable-num, th.hortis-dataTable-num {
+    text-align: right;
+    font-size: 12px;
+}
+
+/* ── Pagination bar ── */
+.hortis-dataTable-pagination {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border-top: 1px solid var(--data-table-border);
+    font-size: 12px;
+    color: var(--data-table-text-dim);
+    user-select: none;
+}
+
+.hortis-dataTable-pageInfo {
+}
+
+.hortis-dataTable-pageControls {
+    display: flex;
+    gap: 4px;
+}
+
+.hortis-dataTable-pagination button {
+    font-family: var(--data-table-font);
+    font-size: 12px;
+    font-weight: 500;
+    background: transparent;
+    border: 1px solid var(--data-table-border);
+    border-radius: 6px;
+    color: var(--data-table-text-dim);
+    padding: 4px 12px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.hortis-dataTable-pagination button:hover:not(:disabled) {
+    border-color: var(--data-table-accent);
+    color: var(--data-table-accent);
+    background: var(--data-table-accent-dim);
+}
+
+.hortis-dataTable-pagination button:disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+
+.hortis-dataTable-pagination button.hortis-dataTable-active {
+    border-color: var(--data-table-accent);
+    color: var(--data-table-accent);
+    background: var(--data-table-accent-dim);
+}

package/docs/css/imerss-bbea.css

@@ -185,10 +185,6 @@ body {
 }
 
 
-.imerss-collector-report.imerss-hidden {
-    display: none;
-}
-
 .imerss-sex-filter-checks {
     display: flex;
     flex-direction: row;

package/docs/css/imerss-core.css

@@ -80,6 +80,7 @@
     width: 10em;
     margin-left: auto;
     margin-right: 10px;
+    margin-top: 8px;
     background: #555e;
     pointer-events: all;
     display: flex;
@@ -362,6 +363,9 @@
     margin-top: 0.5rem;
 }
 
+.imerss-tooltip.imerss-grid-tooltip div.text {
+    max-width: none;
+}
 
 .imerss-autocomplete {
     width: 30em;
@@ -431,6 +435,10 @@
 
 .imerss-filter {
     padding: 2px 0 2px;
+    margin-top: -1px;
+    margin-bottom: 1px;
+    display: flex;
+    flex-direction: column;
     border-bottom: 1px solid #dbe3e7;
 }
 
@@ -498,10 +506,6 @@
     background: #d0d7de33;
 }
 
-.imerss-filter-clear.imerss-hidden {
-    display: none;
-}
-
 .imerss-free-region-filter {
     display: flex;
     flex-direction: column;
@@ -573,6 +577,11 @@
     padding: 10px;
 }
 
+/** Override core definition in tooltip.css */
+.ui-tooltip {
+    max-width: none;
+}
+
 #fli-tab-checklist.ui-tabs-panel, #fli-tab-simple-checklist.ui-tabs-panel {
     padding: 0;
 }
@@ -617,7 +626,13 @@
     width: calc(100% - 20px)
 }
 
-.imerss-search-checklist svg {
+/** This one hits the close box next to the filter */
+.imerss-search-checklist .imerss-filter-clear {
+    right: -12px;
+}
+
+/** This one hits the magnifying glass icon inside the search box */
+.imerss-search-checklist > svg {
     left: 0;
     top: -2px;
     position: absolute;

package/docs/css/imerss-viz-all.css

@@ -776,6 +776,7 @@ a.ui-button:active,
     width: 10em;
     margin-left: auto;
     margin-right: 10px;
+    margin-top: 8px;
     background: #555e;
     pointer-events: all;
     display: flex;
@@ -1058,6 +1059,9 @@ a.ui-button:active,
     margin-top: 0.5rem;
 }
 
+.imerss-tooltip.imerss-grid-tooltip div.text {
+    max-width: none;
+}
 
 .imerss-autocomplete {
     width: 30em;
@@ -1127,6 +1131,10 @@ a.ui-button:active,
 
 .imerss-filter {
     padding: 2px 0 2px;
+    margin-top: -1px;
+    margin-bottom: 1px;
+    display: flex;
+    flex-direction: column;
     border-bottom: 1px solid #dbe3e7;
 }
 
@@ -1194,10 +1202,6 @@ a.ui-button:active,
     background: #d0d7de33;
 }
 
-.imerss-filter-clear.imerss-hidden {
-    display: none;
-}
-
 .imerss-free-region-filter {
     display: flex;
     flex-direction: column;
@@ -1269,6 +1273,11 @@ a.ui-button:active,
     padding: 10px;
 }
 
+/** Override core definition in tooltip.css */
+.ui-tooltip {
+    max-width: none;
+}
+
 #fli-tab-checklist.ui-tabs-panel, #fli-tab-simple-checklist.ui-tabs-panel {
     padding: 0;
 }
@@ -1313,7 +1322,13 @@ a.ui-button:active,
     width: calc(100% - 20px)
 }
 
-.imerss-search-checklist svg {
+/** This one hits the close box next to the filter */
+.imerss-search-checklist .imerss-filter-clear {
+    right: -12px;
+}
+
+/** This one hits the magnifying glass icon inside the search box */
+.imerss-search-checklist > svg {
     left: 0;
     top: -2px;
     position: absolute;

package/docs/css/imerss-viz-lib.css

@@ -776,6 +776,7 @@ a.ui-button:active,
     width: 10em;
     margin-left: auto;
     margin-right: 10px;
+    margin-top: 8px;
     background: #555e;
     pointer-events: all;
     display: flex;
@@ -1058,6 +1059,9 @@ a.ui-button:active,
     margin-top: 0.5rem;
 }
 
+.imerss-tooltip.imerss-grid-tooltip div.text {
+    max-width: none;
+}
 
 .imerss-autocomplete {
     width: 30em;
@@ -1127,6 +1131,10 @@ a.ui-button:active,
 
 .imerss-filter {
     padding: 2px 0 2px;
+    margin-top: -1px;
+    margin-bottom: 1px;
+    display: flex;
+    flex-direction: column;
     border-bottom: 1px solid #dbe3e7;
 }
 
@@ -1194,10 +1202,6 @@ a.ui-button:active,
     background: #d0d7de33;
 }
 
-.imerss-filter-clear.imerss-hidden {
-    display: none;
-}
-
 .imerss-free-region-filter {
     display: flex;
     flex-direction: column;
@@ -1269,6 +1273,11 @@ a.ui-button:active,
     padding: 10px;
 }
 
+/** Override core definition in tooltip.css */
+.ui-tooltip {
+    max-width: none;
+}
+
 #fli-tab-checklist.ui-tabs-panel, #fli-tab-simple-checklist.ui-tabs-panel {
     padding: 0;
 }
@@ -1313,7 +1322,13 @@ a.ui-button:active,
     width: calc(100% - 20px)
 }
 
-.imerss-search-checklist svg {
+/** This one hits the close box next to the filter */
+.imerss-search-checklist .imerss-filter-clear {
+    right: -12px;
+}
+
+/** This one hits the magnifying glass icon inside the search box */
+.imerss-search-checklist > svg {
     left: 0;
     top: -2px;
     position: absolute;