ddb85ced5e8b6127a233b5cda5fcb1fbe2260578
max
  Wed Mar 25 04:22:06 2026 -0700
Add detailsScript trackDb mechanism for JS visualizations on bigBed details pages

Changing based on feedback from Jonathan, Chris and Brian after group
discussion. Refactored existing Claude-generated code, moving functions
into libraries.

This is the first use of ES6 modules in the kent js code. In 2026, this
should be acceptable?

New trackDb syntax: detailsScript.<plotType>.<fieldName> <jsonConfig>
The C code (bigBedClick.c) collects these settings, exports field values as JSON
(bedDetails object), and dynamically imports hgc.<plotType>.js as an ES6 module.
Fields used by detailsScript are shown in the HTML table with empty values,
filled by JavaScript.

Includes hgc.histogram.js module for drawing SVG bar chart histograms from
logfmt-encoded data (space-separated key=value pairs). Applied to both the
trexplorer and webstr tracks in the strVar supertrack.

Also adds jsonWriteJsonElement() helper to jsonWrite.c for writing parsed
jsonElement trees into a jsonWrite stream.

max, refs #36652
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

diff --git src/hg/js/makefile src/hg/js/makefile
index a89a90ebf70..d2c43b9a3c7 100644
--- src/hg/js/makefile
+++ src/hg/js/makefile
@@ -1,31 +1,34 @@
 kentSrc = ../..
 include ../../inc/common.mk
 include install.mk
 
 SUBDIRS= external model react tutorials
 include subdirs.mk
 
 # UCSC js files must pass jshint
 UCSC_JS_FILES=ajax.js alleles.js assemblySearch.js autocomplete.js \
     autocompleteCat.js edwPersona.js facetedComposite.js \
     gar.js hgCustom.js hgCollection.js  hgGateway.js hgGtexTrackSettings.js \
-    detailsHistogram.js hgHubConnect.js hgTracks.js hgc.js hgMyData.js \
+    hgHubConnect.js hgTracks.js hgc.js hgMyData.js \
     hgVai.js hui.js jsHelper.js utils.js ddcl.js subCfg.js \
     encodeProject.js encodeDataSummary.js encodeDataMatrix.js encodeChipMatrix.js encodeMatrix.js d3.dendrograms.js \
 	cdwSummaryJs.js spectrum.min.js hgSearch.js lorax.js
 
+# ES6 module files loaded via dynamic import() on hgc details pages
+MODULE_FILES=hgc.histogram.js
+
 # STATIC files must pass jshint
 STATIC_FILES=staticDoc.js dbDbTaxonomy.js analytics.js
 
 # JQUERY files and other third pary files which have NOT BEEN TOUCHED by UCSC
 JQUERY_FILES_UNTOUCHED= \
     d3pie.min.js \
     jquery.js jquery.imgareaselect.js jquery-ui.js jquery.contextmenu.js \
     jquery.cookie.js jquery.watermark.js jquery.watermarkinput.js jquery.ui.colorPicker.js \
     jquery.floatheader.js jquery.rotateTableCellContent.js jquery.plugins.js \
     jquery.validate.min.js jquery.history.js jquery.treetable.js mousetrap.min.js dagre-d3.js \
     igv.min.js igvFileHelper.js
 
 # JQUERY or other third pary files which HAVE BEEN MODIFIED by UCSC
 JQUERY_FILES_MODIFIED=jquery.tablednd.js ui.dropdownchecklist.js
 
@@ -36,23 +39,24 @@
 SYMLINKED_FILES=${UCSC_JS_FILES} ${JQUERY_FILES}
 
 ifdef LOWELAB
     # LOWE lab files should be forced through jshint (but currently aren't)
     SYMLINKED_FILES += lowetooltip.js loweautocomplete.js
 endif
 
 jshintTop:
 	${JSHINT} ${UCSC_JS_FILES} ${STATIC_FILES}
 
 doInstallTop: jshintTop
 	@mkdir -p ${DEST}/
 	../utils/cpAndLinkToResourceFiles.pl ${extra} -exclude='makefile' \
 			-versionFile=../inc/versionInfo.h -destDir=${DEST} ${SYMLINKED_FILES}
 	rsync -a ${STATIC_FILES} ${DEST}/
+	rsync -a ${MODULE_FILES} ${DEST}/
 
 tags:
 	ctags ${UCSC_JS_FILES} model/*/*.js
 
 clean:
 	rm -f tags
 
 doInstall: doInstallTop ${SUBDIRS:%=%.doInstall}