### Full SlickGrid Implementation Example Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-autotooltips.html Complete setup including data generation, grid initialization, and plugin registration with header cell support. ```javascript var tooltipsActivated = false; $("#btnjQTooltips").click(function () { if (!tooltipsActivated) { $( document ).tooltip( { tooltipClass: "slick-tooltip" } ); tooltipsActivated = true; } }); var grid; var columns = [ {id: "title", name: "Title", field: "title"}, {id: "duration", name: "Duration", field: "duration"}, {id: "%", name: "% Complete", field: "percentComplete"}, {id: "start", name: "Start", field: "start"}, {id: "finish", name: "Finish", field: "finish"}, {id: "effort-driven", name: "Effort Driven", field: "effortDriven"} ]; var options = { enableCellNavigation: true, enableColumnReorder: true }; $(function () { var data = []; for (var i = 0; i < 500; i++) { data[i] = { title: "Task " + i, duration: "5 days", percentComplete: Math.round(Math.random() * 100), start: "01/01/2009", finish: "01/05/2009", effortDriven: (i % 5 == 0) }; } grid = new Slick.Grid("#myGrid", data, columns, options); grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) ); grid.render(); }) ``` -------------------------------- ### Command Line Examples Source: https://github.com/achtman-lab/grapetree/blob/master/README.md Practical examples of how to run GrapeTree for different purposes. ```APIDOC ## Command line examples #### MSTree V2 ``` python grapetree.py -p examples/simulated_data.profile -m MSTreeV2 ``` #### NJ tree ``` python grapetree.py -p examples/simulated_data.profile -m NJ ``` #### distance matrix ``` python grapetree.py -p examples/simulated_data.profile -m distance ``` ``` -------------------------------- ### SlickGrid Initialization Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-select2-multiselect-editor.html Setup and initialization of the SlickGrid instance with columns and data. ```javascript var grid; var data = []; var columns = [ {id: "title", name: "Title", field: "title", width: 80, cssClass: "cell-title", editor: Slick.Editors.Text}, {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text}, {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date}, {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date}, {id: "CountryOfOrigin", name: "Country Of Origin", field: "country", minWidth: 200, formatter: Select2MultiFormatter, editor: Select2Editor, dataSource: countryIsoAndNameList } ]; var options = { editable: true, enableAddRow: true, enableCellNavigation: true, asyncEditorLoading: false, autoEdit: false }; $(function () { for (var i = 0; i < 500; i++) { var d = (data[i] = {}); d["title"] = "Task " + i; d["duration"] = "5 days"; d["start"] = "01/01/2009"; d["finish"] = "01/05/2009"; d["country"] = pickRandomProperty(countryIsoAndNameList); } grid = new Slick.Grid("#myGrid", data, columns, options); grid.setSelectionModel(new Slick.CellSelectionModel()); grid.onAddNewRow.subscribe(function (e, args) { var item = args.item; grid.invalidateRow(data.length); data.push(item); grid.updateRowCount(); grid.render(); }); }) ``` -------------------------------- ### Initialize SlickGrid with Grouping Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-grouping-checkbox-row-select.html Sets up the grid columns, options, and data view. Includes custom formatters for group totals and a filter function. This is the base setup for the grouping example. ```javascript function isIEPreVer9() { var v = navigator.appVersion.match(/MSIE (\d.\d+)/i); return (v ? v[1] < 9 : false); } var checkboxSelector = new Slick.CheckboxSelectColumn({ cssClass: "slick-cell-checkboxsel" }); var dataView; var grid; var data = []; var columns = [ checkboxSelector.getColumnDefinition(), { id: "sel", name: "#", field: "num", cssClass: "cell-selection", width: 40, resizable: false, selectable: false, focusable: false }, { id: "title", name: "Title", field: "title", width: 70, minWidth: 50, cssClass: "cell-title", sortable: true, editor: Slick.Editors.Text }, { id: "duration", name: "Duration", field: "duration", width: 70, sortable: true, groupTotalsFormatter: sumTotalsFormatter }, { id: "%", name: "% Complete", field: "percentComplete", width: 80, formatter: Slick.Formatters.PercentCompleteBar, sortable: true, groupTotalsFormatter: avgTotalsFormatter }, { id: "start", name: "Start", field: "start", minWidth: 60, sortable: true }, { id: "finish", name: "Finish", field: "finish", minWidth: 60, sortable: true }, { id: "cost", name: "Cost", field: "cost", width: 90, sortable: true, groupTotalsFormatter: sumTotalsFormatter }, { id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, sortable: true } ]; var options = { enableCellNavigation: true, editable: true }; var sortcol = "title"; var sortdir = 1; var percentCompleteThreshold = 0; var prevPercentCompleteThreshold = 0; function avgTotalsFormatter(totals, columnDef) { var val = totals.avg && totals.avg[columnDef.field]; if (val != null) { return "avg: " + Math.round(val) + "%"; } return ""; } function sumTotalsFormatter(totals, columnDef) { var val = totals.sum && totals.sum[columnDef.field]; if (val != null) { return "total: " + ((Math.round(parseFloat(val)*100)/100)); } return ""; } function myFilter(item, args) { return item["percentComplete"] >= args.percentComplete; } function percentCompleteSort(a, b) { return a["percentComplete"] - b["percentComplete"]; } function comparer(a, b) { var x = a[sortcol], y = b[sortcol]; return (x == y ? 0 : (x > y ? 1 : -1)); } ``` -------------------------------- ### Run GrapeTree from Source Code Source: https://github.com/achtman-lab/grapetree/blob/master/README.md Execute GrapeTree using Python from the command line after installing dependencies and setting up binaries. The program will start a local web server. ```bash python grapetree.py * Running on http://127.0.0.1:8000/ (Press CTRL+C to quit) ``` -------------------------------- ### Initialize and Configure D3MSTree Source: https://github.com/achtman-lab/grapetree/blob/master/documentation/developer/index.html Demonstrates the required script imports, HTML container setup, and basic configuration for a D3MSTree instance. ```html
``` -------------------------------- ### Install and Run GrapeTree via Pip Source: https://github.com/achtman-lab/grapetree/blob/master/README.md Install GrapeTree using pip and run it from the command line. This is the recommended method for installation. ```bash pip install grapetree grapetree ``` -------------------------------- ### Setup Enterobase Panel Source: https://github.com/achtman-lab/grapetree/blob/master/MSTree_holder.html Initializes the Enterobase panel if a `tree_id` is present. This suggests integration with an external system or data source named Enterobase. ```javascript if (tree_id){ setupEnterobasePan ``` -------------------------------- ### Metadata File Format Example Source: https://github.com/achtman-lab/grapetree/blob/master/README.md Example of a tab-delimited metadata file. The first row contains column labels. An 'ID' column can be used to correlate metadata with profile data. ```text ID Country Year 0 China 1983 1 China 1984 ... ``` -------------------------------- ### Initialize Checkbox Selection Grid Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-checkbox-row-select.html JavaScript setup for a grid with a checkbox selection column and row selection model. ```javascript var grid; var data = []; var options = { editable: true, enableCellNavigation: true, asyncEditorLoading: false, autoEdit: false }; var columns = []; $(function () { for (var i = 0; i < 100; i++) { var d = (data[i] = {}); d[0] = "Row " + i; } var checkboxSelector = new Slick.CheckboxSelectColumn({ cssClass: "slick-cell-checkboxsel" }); columns.push(checkboxSelector.getColumnDefinition()); for (var i = 0; i < 5; i++) { columns.push({ id: i, name: String.fromCharCode("A".charCodeAt(0) + i), field: i, width: 100, editor: Slick.Editors.Text }); } grid = new Slick.Grid("#myGrid", data, columns, options); grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false})); grid.registerPlugin(checkboxSelector); var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); grid.onSelectedRowsChanged.subscribe(function (e, args) { // debugging to see the active row in response to questions // active row has no correlation to the selected rows // it will remain null until a row is clicked and made active // selecting and deselecting rows via checkboxes will not change the active row var rtn = args.grid.getActiveCell(); var x = args.rows; }); }) ``` -------------------------------- ### Install Python Dependencies and Make Binaries Executable Source: https://github.com/achtman-lab/grapetree/blob/master/README.md Install required Python modules using pip and ensure binaries are executable on Linux or MacOSX. This is part of running GrapeTree from source code. ```bash pip install -r requirements.txt chmod +x binaries/ ``` -------------------------------- ### Generate Sample Data for SlickGrid Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-grouping.html Creates an array of sample data objects, each with properties like id, num, title, duration, percentComplete, start, finish, cost, and effortDriven. This data is then loaded into the DataView. ```javascript function loadData(count) { var someDates = ["01/01/2009", "02/02/2009", "03/03/2009"]; data = []; // prepare the data for (var i = 0; i < count; i++) { var d = (data[i] = {}); d["id"] = "id_" + i; d["num"] = i; d["title"] = "Task " + i; d["duration"] = Math.round(Math.random() * 30); d["percentComplete"] = Math.round(Math.random() * 100); d["start"] = someDates[ Math.floor((Math.random()*2)) ]; d["finish"] = someDates[ Math.floor((Math.random()*2)) ]; d["cost"] = Math.round(Math.random() * 10000) / 100; d["effortDriven"] = (i % 5 == 0); } dataView.setItems(data); } ``` -------------------------------- ### Initialize Grid with Footer Row Options Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-footer-totals.html Initializes a SlickGrid instance with options to enable a footer row. This setup is necessary for displaying totals or summary information at the bottom of the grid. ```javascript var grid; var data = []; var options = { enableCellNavigation: true, headerRowHeight: 30, editable: true, createFooterRow: true, showFooterRow: true, footerRowHeight: 21 }; var columns = []; for (var i = 0; i < 10; i++) { columns.push({ id: i, name: String.fromCharCode("A".charCodeAt(0) + i), field: i, width: 58, editor: Slick.Editors.Integer }); } ``` -------------------------------- ### SlickGrid Initialization with Async Post Render Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example10-async-post-render.html Initializes a SlickGrid with editable cells and enables asynchronous post-rendering for custom cell content. This setup is suitable for grids requiring dynamic or complex cell visualizations. ```javascript function requiredFieldValidator(value) { if (value == null || value == undefined || !value.length) { return {valid: false, msg: "This is a required field"}; } else { return {valid: true, msg: null}; } } function waitingFormatter(value) { return "wait..."; } function renderSparkline(cellNode, row, dataContext, colDef) { var vals = [ dataContext["n1"], dataContext["n2"], dataContext["n3"], dataContext["n4"], dataContext["n5"] ]; $(cellNode).empty().sparkline(vals, {width: "100%"}); } var grid; var data = []; var columns = [ {id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title"}, {id: "n1", name: "1", field: "n1", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator}, {id: "n2", name: "2", field: "n2", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator}, {id: "n3", name: "3", field: "n3", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator}, {id: "n4", name: "4", field: "n4", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator}, {id: "n5", name: "5", field: "n5", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator}, {id: "chart", name: "Chart", sortable: false, width: 60, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSparkline} ]; var options = { editable: true, enableAddRow: false, enableCellNavigation: true, asyncEditorLoading: false, enableAsyncPostRender: true }; $(function () { for (var i = 0; i < 500; i++) { var d = (data[i] = {}); d["title"] = "Record " + i; d["n1"] = Math.round(Math.random() * 10); d["n2"] = Math.round(Math.random() * 10); d["n3"] = Math.round(Math.random() * 10); d["n4"] = Math.round(Math.random() * 10); d["n5"] = Math.round(Math.random() * 10); } grid = new Slick.Grid("#myGrid", data, columns, options); }) ``` -------------------------------- ### Initialize SlickGrid with Header Row Filtering Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-header-row.html JavaScript setup for a DataView and Grid, including the filter function and event subscriptions for header row inputs. ```javascript var dataView; var grid; var data = []; var options = { enableCellNavigation: true, showHeaderRow: true, headerRowHeight: 30, explicitInitialization: true }; var columns = []; var columnFilters = {}; for (var i = 0; i < 10; i++) { columns.push({ id: i, name: String.fromCharCode("A".charCodeAt(0) + i), field: i, width: 60 }); } function filter(item) { for (var columnId in columnFilters) { if (columnId !== undefined && columnFilters[columnId] !== "") { var c = grid.getColumns()[grid.getColumnIndex(columnId)]; if (item[c.field] != columnFilters[columnId]) { return false; } } } return true; } $(function () { for (var i = 0; i < 100; i++) { var d = (data[i] = {}); d["id"] = i; for (var j = 0; j < columns.length; j++) { d[j] = Math.round(Math.random() * 10); } } dataView = new Slick.Data.DataView(); grid = new Slick.Grid("#myGrid", dataView, columns, options); dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); }); dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); }); $(grid.getHeaderRow()).on("change keyup", ":input", function (e) { var columnId = $(this).data("columnId"); if (columnId != null) { columnFilters[columnId] = $.trim($(this).val()); dataView.refresh(); } }); grid.onHeaderRowCellRendered.subscribe(function(e, args) { $(args.node).empty(); $("") .data("columnId", args.column.id) .val(columnFilters[args.column.id]) .appendTo(args.node); }); grid.init(); dataView.beginUpdate(); dataView.setItems(data); dataView.setFilter(filter); dataView.endUpdate(); }) ``` -------------------------------- ### Profile Data Format Example Source: https://github.com/achtman-lab/grapetree/blob/master/README.md This is an example of the tab-delimited profile file format required for GrapeTree. The first row must start with '#' and contains column labels. The first column contains unique strain identifiers. ```text #Strain Gene_1 Gene_2 Gene_3 Gene_4 Gene_5 Gene_6 Gene_7 ... 0 1 1 1 1 1 1 1 ... 1 1 1 1 1 1 1 1 ... 2 1 2 2 2 2 2 2 ... ... ``` -------------------------------- ### Initialize SlickGrid with DataView and Plugins Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-grouping.html Sets up the SlickGrid, DataView, and necessary plugins like GroupItemMetadataProvider and CellSelectionModel. This is typically done once when the grid is initialized. ```javascript var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider(); dataView = new Slick.Data.DataView({ groupItemMetadataProvider: groupItemMetadataProvider, inlineFilters: true }); grid = new Slick.Grid("#myGrid", dataView, columns, options); // register the group item metadata provider to add expand/collapse group handlers grid.registerPlugin(groupItemMetadataProvider); grid.setSelectionModel(new Slick.CellSelectionModel()); var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); ``` -------------------------------- ### Initialize SlickGrid with Data and Options Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-composite-editor-item-details.html Sets up the SlickGrid with columns, sample data, and editing options. Includes event subscriptions for adding new rows and handling validation errors. ```javascript var grid; var data = []; var columns = [ {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator}, {id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.Text}, {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text}, {id: "percent", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete}, {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date}, {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date}, {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox} ]; var options = { editable: true, enableAddRow: true, enableCellNavigation: true, asyncEditorLoading: false, autoEdit: false }; $(function () { for (var i = 0; i < 500; i++) { var d = (data[i] = {}); d["title"] = "Task " + i; d["description"] = "This is a sample task description.\n It can be multiline"; d["duration"] = "5 days"; d["percentComplete"] = Math.round(Math.random() * 100); d["start"] = "01/01/2009"; d["finish"] = "01/05/2009"; d["effortDriven"] = (i % 5 == 0); } grid = new Slick.Grid("#myGrid", data, columns, options); grid.onAddNewRow.subscribe(function (e, args) { var item = args.item; var column = args.column; grid.invalidateRow(data.length); data.push(item); grid.updateRowCount(); grid.render(); }); grid.onValidationError.subscribe(function (e, args) { // handle validation errors originating from the CompositeEditor if (args.editor && (args.editor instanceof Slick.CompositeEditor)) { var err; var idx = args.validationResults.errors.length; while (idx--) { err = args.validationResults.errors[idx]; $(err.container).stop(true, true).effect("highlight", {color: "red"}); } } }); grid.setActiveCell(0, 0); }) ``` -------------------------------- ### Initialize Grid and Register HeaderMenu Plugin Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-plugin-headermenu.html Set up the SlickGrid instance with data, columns, and options. Then, register the HeaderMenu plugin and subscribe to its events for custom behavior. ```javascript var grid; var options = { enableColumnReorder: false }; $(function () { var data = []; for (var i = 0; i < 500; i++) { data[i] = { title: "Task " + i, duration: "5 days", percentComplete: Math.round(Math.random() * 100), start: "01/01/2009", finish: "01/05/2009", effortDriven: (i % 5 == 0) }; } grid = new Slick.Grid("#myGrid", data, columns, options); var headerMenuPlugin = new Slick.Plugins.HeaderMenu({}); headerMenuPlugin.onBeforeMenuShow.subscribe(function(e, args) { var menu = args.menu; // We can add or modify the menu here, or cancel it by returning false. var i = menu.items.length; menu.items.push({ title: "Menu item " + i, command: "item" + i }); }); headerMenuPlugin.onCommand.subscribe(function(e, args) { alert("Command: " + args.command); }); grid.registerPlugin(headerMenuPlugin); }) ``` -------------------------------- ### Initialize SlickGrid with DataView and Options Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/tests/test-4-rows-paging.html Sets up the SlickGrid instance using a DataView for data management and defines grid options for interactivity and performance. Includes column definitions with various editors and formatters. ```javascript function isIEPreVer9() { var v = navigator.appVersion.match(/MSIE (\d.\d)/i); return (v ? v[1] < 9 : false); } var dataView; var grid; var data = []; var columns = [ {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, cannotTriggerInsert: true, resizable: false, selectable: false}, {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true}, {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text, sortable: true}, {id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete, sortable: true}, {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, sortable: true}, {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date, sortable: true}, {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, cannotTriggerInsert: true, sortable: true} ]; var options = { editable: true, enableAddRow: false, enableCellNavigation: true, asyncEditorLoading: true, forceFitColumns: false, topPanelHeight: 25 }; var sortcol = "title"; var sortdir = 1; var percentCompleteThreshold = 0; var searchString = ""; function requiredFieldValidator(value) { if (value == null || value == undefined || !value.length) { return {valid: false, msg: "This is a required field"}; } else { return {valid: true, msg: null}; } } function myFilter(item, args) { if (item["percentComplete"] < args.percentCompleteThreshold) { return false; } if (args.searchString != "" && item["title"].indexOf(args.searchString) == -1) { return false; } return true; } function percentCompleteSort(a, b) { return a["percentComplete"] - b["percentComplete"]; } function comparer(a, b) { var x = a[sortcol], y = b[sortcol]; return (x == y ? 0 : (x > y ? 1 : -1)); } function toggleFilterRow() { grid.setTopPanelVisibility(!grid.getOptions().showTopPanel); } $(".grid-header .ui-icon") .addClass("ui-state-default ui-corner-all") .mouseover(function (e) { $(e.target).addClass("ui-state-hover") }) .mouseout(function (e) { $(e.target).removeClass("ui-state-hover") }); $(function () { // prepare the data var x; for (var i = 0; i < 5; i++) { var d = (data[i] = {}); if (i == 0) x = "1"; if (i == 1) x = "11"; if (i == 2) x = "111"; if (i == 3) x = "1111"; if (i == 4) x = "2"; d["id"] = "id_" + i; d["num"] = i; d["title"] = "Task " + x; d["duration"] = "5 days"; d["percentComplete"] = Math.round(Math.random() * 100); d["start"] = "01/01/2009"; d["finish"] = "01/05/2009"; d["effortDriven"] = (i % 5 == 0); } dataView = new Slick.Data.DataView({ inlineFilters: true }); grid = new Slick.Grid("#myGrid", dataView, columns, options); grid.setSelectionModel(new Slick.RowSelectionModel()); var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); // move the filter panel defined in a hidden div into grid top panel $("#inlineFilterPanel") .appendTo(grid.getTopPanel()) .show(); grid.onCellChange.subscribe(function (e, args) { dataView.updateItem(args.item.id, args.item); }); grid.onAddNewRow.subscribe(function (e, args) { var item = {"num": data.length, "id": "ne ``` -------------------------------- ### Initialize Documentation UI and Syntax Highlighting Source: https://github.com/achtman-lab/grapetree/blob/master/documentation/developer/global.html Configures the documentation interface, including TOC generation, syntax highlighting via Sunlight, and UI component initialization. ```javascript $( function () { $( "[id*='$']" ).each( function () { var $this = $( this ); $this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) ); } ); $( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () { var $this = $( this ); var example = $this.find( "code" ); exampleText = example.html(); var lang = /{@lang (.*?)}/.exec( exampleText ); if ( lang && lang[1] ) { exampleText = exampleText.replace( lang[0], "" ); example.html( exampleText ); lang = lang[1]; } else { var langClassMatch = example.parent()[0].className.match(/lang-(\S+)/); lang = langClassMatch ? langClassMatch[1] : "javascript"; } if ( lang ) { $this .addClass( "sunlight-highlight-" + lang ) .addClass( "linenums" ) .html( example.html() ); } } ); Sunlight.highlightAll( { lineNumbers : false, showMenu : true, enableDoclinks : true } ); $.catchAnchorLinks( { navbarOffset: 10 } ); $( "#toc" ).toc( { anchorName : function ( i, heading, prefix ) { return $( heading ).attr( "id" ) || ( prefix + i ); }, selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4", showAndHide : false, smoothScrolling: true } ); $( "#main span[id^='toc']" ).addClass( "toc-shim" ); $( '.dropdown-toggle' ).dropdown(); $( "table" ).each( function () { var $this = $( this ); $this.addClass('table'); } ); } ); ``` ```javascript $(document).ready(function() { SearcherDisplay.init(); }); ``` -------------------------------- ### Initialize Basic SlickGrid Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example1-simple.html Use this code to set up a basic grid with predefined columns and options. Ensure you have SlickGrid and jQuery included. ```javascript var grid; var columns = [ {id: "title", name: "Title", field: "title"}, {id: "duration", name: "Duration", field: "duration"}, {id: "%", name: "% Complete", field: "percentComplete"}, {id: "start", name: "Start", field: "start"}, {id: "finish", name: "Finish", field: "finish"}, {id: "effort-driven", name: "Effort Driven", field: "effortDriven"} ]; var options = { enableCellNavigation: true, enableColumnReorder: false }; $(function () { var data = []; for (var i = 0; i < 500; i++) { data[i] = { title: "Task " + i, duration: "5 days", percentComplete: Math.round(Math.random() * 100), start: "01/01/2009", finish: "01/05/2009", effortDriven: (i % 5 == 0) }; } grid = new Slick.Grid("#myGrid", data, columns, options); }) ``` -------------------------------- ### Get Metadata Source: https://github.com/achtman-lab/grapetree/blob/master/documentation/developer/quicksearch.html Retrieves metadata associated with the tree. Inherited from D3BaseTree. ```javascript getMetadata(); ``` -------------------------------- ### Tree Structure and Visualization Source: https://github.com/achtman-lab/grapetree/blob/master/documentation/developer/D3MSTree.html Methods for getting the tree as an object and highlighting nodes. ```APIDOC ## GET /getTreeAsObject ### Description Returns the tree as an object [InitialData](global.html#InitialData), suitable for use in the trees constructor. ### Method GET ### Endpoint /getTreeAsObject ### Parameters None ### Request Example None ### Response #### Success Response (200) - **treeObject** (InitialData) - An object describing the tree #### Response Example ```json { "treeObject": { "nodes": [], "links": [] } } ``` ``` ```APIDOC ## POST /highlightIDs ### Description All nodes which contain metadata that has ID in the supplied list will have a large halo around them. ### Method POST ### Endpoint /highlightIDs ### Parameters #### Request Body - **IDs** (list) - Required - A list of IDs to highlight. The IDs will be either the IDs of items associated with a node or the ID of the node (if a one to one relationship). Even if only one ID is present in the node, then the whole node will be highlighted. - **color** (string) - Optional - The color of the halo (default yellow) ### Request Example ```json { "IDs": ["id1", "id2"], "color": "red" } ``` ### Response #### Success Response (200) None #### Response Example None ``` ```APIDOC ## POST /highlightNodes ### Description All nodes with the id in supplied list will have a large yellow halo around them. ### Method POST ### Endpoint /highlightNodes ### Parameters #### Request Body - **IDs** (list) - Required - A list of nodes IDs to highlight. - **color** (string) - Optional - The color of the halo (default yellow) ### Request Example ```json { "IDs": ["nodeId1", "nodeId2"], "color": "blue" } ``` ### Response #### Success Response (200) None #### Response Example None ``` -------------------------------- ### Initialize and Configure SlickGrid DataView Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-optimizing-dataview.html Sets up a large dataset with 500,000 rows and configures the DataView with inline filtering and performance hints. ```javascript var dataView; var grid; var data = []; var columns = [ {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false }, {id: "title", name: "Title", field: "title", width: 120, minWidth: 120, cssClass: "cell-title"}, {id: "duration", name: "Duration", field: "duration"}, {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar}, {id: "start", name: "Start", field: "start", minWidth: 60}, {id: "finish", name: "Finish", field: "finish", minWidth: 60}, {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark} ]; var options = { editable: false, enableAddRow: false, enableCellNavigation: true }; var percentCompleteThreshold = 0; var prevPercentCompleteThreshold = 0; var h_runfilters = null; function myFilter(item, args) { return item["percentComplete"] >= args; } function DataItem(i) { this.num = i; this.id = "id_" + i; this.percentComplete = Math.round(Math.random() * 100); this.effortDriven = (i % 5 == 0); this.start = "01/01/2009"; this.finish = "01/05/2009"; this.title = "Task " + i; this.duration = "5 days"; } $(function () { // prepare the data for (var i = 0; i < 500000; i++) { data[i] = new DataItem(i); } dataView = new Slick.Data.DataView({ inlineFilters: true }); grid = new Slick.Grid("#myGrid", dataView, columns, options); var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); // wire up model events to drive the grid dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); }); dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); }); // wire up the slider to apply the filter to the model $("#pcSlider").slider({ "range": "min", "slide": function (event, ui) { if (percentCompleteThreshold != ui.value) { window.clearTimeout(h_runfilters); h_runfilters = window.setTimeout(filterAndUpdate, 10); percentCompleteThreshold = ui.value; } } }); function filterAndUpdate() { var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold; var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold; var renderedRange = grid.getRenderedRange(); dataView.setFilterArgs(percentCompleteThreshold); dataView.setRefreshHints({ ignoreDiffsBefore: renderedRange.top, ignoreDiffsAfter: renderedRange.bottom + 1, isFilterNarrowing: isNarrowing, isFilterExpanding: isExpanding }); dataView.refresh(); prevPercentCompleteThreshold = percentCompleteThreshold; } // initialize the model after all the events have been hooked up dataView.beginUpdate(); dataView.setItems(data); dataView.setFilter(myFilter); dataView.setFilterArgs(0); dataView.endUpdate(); }) ``` -------------------------------- ### Get Tree Layout Data Source: https://github.com/achtman-lab/grapetree/blob/master/documentation/developer/quicksearch.html Retrieves the data that describes the current layout of the tree. ```javascript getLayout(); ``` -------------------------------- ### Initialize SlickGrid with Data and Options Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/examples/example-autocomplete-editor.html Defines grid columns, options, and initializes a SlickGrid instance with sample data. Includes an event handler for adding new rows. ```javascript var columns = [{id: "title", name: "Title", field: "title", editor: Slick.Editors.Text}, {id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text}, {id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date}, {id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date}, {id: "CountryOfOrigin", name: "Country Of Origin", field: "country", minWidth: 120, editor: AutoCompleteEditor, dataSource: countryList} ]; var options = { editable: true, enableAddRow: true, enableCellNavigation: true, asyncEditorLoading: false, autoEdit: false }; $(function () { for (var i = 0; i < 500; i++) { var d = (data[i] = {}); d["title"] = "Task " + i; d["duration"] = "5 days"; d["start"] = "01/01/2009"; d["finish"] = "01/05/2009"; d["country"] = countryList[Math.trunc(Math.random() * countryList.length)]; } grid = new Slick.Grid("#myGrid", data, columns, options); grid.setSelectionModel(new Slick.CellSelectionModel()); grid.onAddNewRow.subscribe(function (e, args) { var item = args.item; grid.invalidateRow(data.length); data.push(item); grid.updateRowCount(); grid.render(); }); }) ``` -------------------------------- ### Benchmark SlickGrid Initialization and Disposal Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/tests/init benchmark.html Runs a benchmark for initializing SlickGrids, with an option to dispose of them afterward. Measures the time taken for 20 grid initializations. ```javascript function bench(dispose) { var startTime = new Date(); var container = $("#container"); for (var i = 0; i < 20; i++) { var parentEl = $("
").appendTo(container); var grid = createGrid(parentEl); if (dispose) { grid.destroy(); parentEl.remove(); } } alert((new Date() - startTime)); } ``` -------------------------------- ### Get Tree as Object Source: https://github.com/achtman-lab/grapetree/blob/master/documentation/developer/quicksearch.html Returns the entire tree structure as an object, suitable for use in the tree's constructor. ```javascript getTreeAsObject(); ``` -------------------------------- ### Initialize SlickGrid and Data Source: https://github.com/achtman-lab/grapetree/blob/master/static/js/SlickGrid/tests/scrolling benchmark raf.html Configures the grid columns, options, and lazy-loading data source for the benchmark. ```javascript var grid; var data = []; var extraColumns = 100; function testPostRender(cellNode, row, dataContext, colDef) { cellNode.style.backgroundColor = 'yellow'; } var columns = [ {id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title"}, {id:"duration", name:"Duration", field:"duration", selectable:false}, {id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:Slick.Formatters.PercentCompleteBar}, {id:"start", name:"Start", field:"start", minWidth:60}, {id:"finish", name:"Finish", field:"finish", minWidth:60}, {id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:Slick.Formatters.Checkmark, asyncPostRender:testPostRender} ]; for (var i=0; i