### Installing MAAGE-Web Dependencies (Bash) Source: https://github.com/maage-brc/maage-web/blob/main/README.md Navigates into the cloned repository directory and installs Node.js dependencies using npm. This command fetches all required packages for the project. ```bash cd MAAGE-Web npm install ``` -------------------------------- ### Starting the MAAGE-Web Development Server (Bash) Source: https://github.com/maage-brc/maage-web/blob/main/README.md Starts the local development server for the MAAGE-Web application. After running this command, the application should be accessible in a web browser. ```bash npm start ``` -------------------------------- ### Starting the Example Snippets Server Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Runs the npm script 'sniper' to start a local server that hosts and allows browsing of code snippets at localhost:9090/snippets. ```bash npm run sniper ``` -------------------------------- ### Starting Development Watcher and Server Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Executes a shortcut command './w' in the project root directory, which automatically runs both the file watcher/recompiler and the example snippets server. ```bash ./w ``` -------------------------------- ### Cloning the MAAGE-Web Repository (Bash) Source: https://github.com/maage-brc/maage-web/blob/main/README.md Clones the MAAGE-Web repository from GitHub using the GitHub CLI tool. This is the first step to obtain the project code. ```bash gh repo clone MAAGE-BRC/MAAGE-Web ``` -------------------------------- ### Updating MAAGE-Web Submodules (Bash) Source: https://github.com/maage-brc/maage-web/blob/main/README.md Initializes and updates Git submodules required by the MAAGE-Web project. This ensures that any linked repositories are correctly fetched and updated. ```bash git submodule update --init ``` -------------------------------- ### Install Dependencies (npm) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/BVBRC_build.txt Installs the necessary project dependencies using npm. This command reads the package.json file and downloads the required packages into the node_modules directory. ```shell npm install ``` -------------------------------- ### Setting Up the MSA Development Environment Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Provides bash commands to clone the MSA repository, navigate into the directory, and install project dependencies using npm. Requires npm and Node.js. ```bash git clone https://github.com/wilzbach/msa cd msa npm install ``` -------------------------------- ### Running All Unit Tests with Gulp Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Executes all unit tests using the gulp task runner. Requires gulp to be installed globally. ```bash gulp test ``` -------------------------------- ### Running ESLint on Specific File (Shell) Source: https://github.com/maage-brc/maage-web/blob/main/docs/pre-commit-linting.md Shows how to run ESLint on a single file (`public/js/p3/widget/ProteinFamiliesContainer.js`) to check for violations. The example output illustrates a typical error message from ESLint. Requires ESLint installed. ```shell ./node_modules/.bin/eslint public/js/p3/widget/ProteinFamiliesContainer.js ``` -------------------------------- ### HTML Skeleton for jsPhyloSVG Installation Source: https://github.com/maage-brc/maage-web/blob/main/public/js/jsphylosvg-1.55/readme.txt This HTML snippet demonstrates the basic structure required to include the jsPhyloSVG library and its dependency, Raphael, in a web page. It shows the correct order and placement of the script tags and a div element for the SVG canvas. ```HTML

``` -------------------------------- ### Running ESLint on Directory (Shell) Source: https://github.com/maage-brc/maage-web/blob/main/docs/pre-commit-linting.md Demonstrates how to manually execute the ESLint command-line tool on a specified directory (`public/js/p3`) to check for code style and linting issues. This requires ESLint to be installed locally in `node_modules/.bin`. ```shell ./node_modules/.bin/eslint public/js/p3 ``` -------------------------------- ### Loading D3 v4 Bundle with Plugin - HTML Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This example demonstrates how to load the default D3 version 4 bundle followed by an optional plugin, such as d3-scale-chromatic, using separate script tags in an HTML file. This extends the core D3 functionality. ```HTML ``` -------------------------------- ### Compiling Browser Assets with Gulp Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md This command executes the Gulp task responsible for regenerating CSS and JavaScript files, including minimization. It is typically run automatically by Travis CI or during `npm install`, so manual execution is usually not required. ```Shell gulp build ``` -------------------------------- ### Example Output of d3.stack Generator - JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet shows the structure of the output generated by applying the d3.stack function to the input data. It is an array where each element represents a series (e.g., "apples"). Each series is an array of points, and each point is a two-element array [baseline, topline] representing the start and end values for that point in the stack. ```JavaScript [ [[ 0, 3840], [ 0, 1600], [ 0, 640], [ 0, 320]], // apples [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320, 800]], // bananas [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates ] ``` -------------------------------- ### Exporting and Sharing MSA Data (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Provides examples for exporting MSA data in various formats (FASTA, GFF3, PNG) and generating shareable links for the data, including integration with Jalview. ```JavaScript m.utils.export.saveAsFile(m, "all.fasta") // export seqs m.utils.export.saveSelection(m, "selection.fasta") m.utils.export.saveAnnots(m, "features.gff3") m.utils.export.saveAsImg(m,"biojs-msa.png") // share the seqs with the public = get a public link m.utils.export.shareLink(m, function(link){ window.open(link, '_blank') }) // share via jalview var url = m.g.config.get('url') if url.indexOf("localhost") || url === "dragimport" m.utils.export.publishWeb(m, function(link){ m.utils.export.openInJalview(link, m.g.colorscheme.get("scheme")) }); }else{ m.utils.export.openInJalview(url, m.g.colorscheme.get("scheme")) } ``` -------------------------------- ### Listening to Residue Interaction Events (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Provides examples of how to register listeners for mouse interactions (click, mousein, mouseout) on individual residues within the alignment view. Requires enabling `conf.registerMouseHover`. ```JavaScript msa.g.on("residue:click", function(data){ ... }); msa.g.on("residue:mousein", function(data){ ... }); msa.g.on("residue:mouseout", function(data){ ... }); ``` -------------------------------- ### Manipulating MSA Sequences (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Provides various examples of interacting with the sequence collection, including hiding, getting/setting sequence data, adding/removing sequences, sorting, and managing features. ```JavaScript m.seqs.at(0).set("hidden", true) // hides the first seq m.seqs.at(0).get("seq") // get raw seq m.seqs.at(0).get("seqId") // get seqid m.seqs.at(0).set("seq", "AAAA") // sets seq m.seqs.add({seq: "AAA"}); // we add a new seq at the end m.seqs.unshift({seq: "AAA"}); // we add a new seq at the beginning m.seqs.pop() // remove and return last seq m.seqs.shift() // remove and return first seq m.seqs.length // nr m.seqs.pluck("seqId") // ["id1", "id2", ..] m.seqs.remove(m.seqs.at(2)) // remove seq2 m.seqs.getMaxLength() // 200 m.seqs.addFeatures() m.seqs.removeAllFeatures() m.seqs.setRef(m.seqs.at(1)) // sets the second seq as reference (default: first) m.seqs.comparator = "seqId" // sort after seqId m.seqs.sort() // apply our new comparator m.seqs.comparator = function(a,b){ return - a.get("seq").localeCompare(b.get("seq"))} // sort after the seq itself in descending order m.seqs.sort() ``` -------------------------------- ### Creating Oscillating D3 Transition with d3.active (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Shows how to create a continuously repeating animation using the d3.active method and transition events. The 'start' event listener retrieves the currently active transition on the element using d3.active(this) and schedules the next step of the animation, including calling itself again on the next transition's 'start' event. ```JavaScript d3.select("circle") .transition() .on("start", function repeat() { d3.active(this) .style("fill", "red") .transition() .style("fill", "blue") .transition() .on("start", repeat); }); ``` -------------------------------- ### Example Tabular Data (CSV) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md An example of hierarchical data represented in a tabular format, suitable for processing with d3.stratify. It shows parent-child relationships using 'name' and 'parent' columns. ```csv name,parent Eve, Cain,Eve Seth,Eve Enos,Seth Noam,Seth Abel,Eve Awan,Eve Enoch,Awan Azura,Eve ``` -------------------------------- ### Converting Tabular Data to D3 Hierarchy Node (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates how to use d3.stratify to convert tabular data (like the CSV example) into a D3 hierarchy root node. It specifies which columns represent the node ID and the parent ID. ```javascript var root = d3.stratify() .id(function(d) { return d.name; }) .parentId(function(d) { return d.parent; }) (nodes); ``` -------------------------------- ### Auto-fixing ESLint Issues (Shell) Source: https://github.com/maage-brc/maage-web/blob/main/docs/pre-commit-linting.md Illustrates how to use the `--fix` option with the ESLint command to automatically correct certain linting and code style issues found in a specific file. This option can resolve many common formatting problems. Requires ESLint installed. ```shell ./node_modules/.bin/eslint public/js/p3/widget/ProteinFamiliesContainer.js --fix ``` -------------------------------- ### Creating d3.set with Value Accessor - JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates how to create a d3.set from an array of objects, using a function to specify which property of each object should be used as the set's value. This example extracts the 'site' property from each object in the 'yields' array. Requires the d3-collection library. ```javascript var yields = [ {yield: 22.13333, variety: "Manchuria", year: 1932, site: "Grand Rapids"}, {yield: 26.76667, variety: "Peatland", year: 1932, site: "Grand Rapids"}, {yield: 28.10000, variety: "No. 462", year: 1931, site: "Duluth"}, {yield: 38.50000, variety: "Svansota", year: 1932, site: "Waseca"}, {yield: 40.46667, variety: "Svansota", year: 1931, site: "Crookston"}, {yield: 36.03333, variety: "Peatland", year: 1932, site: "Waseca"}, {yield: 34.46667, variety: "Wisconsin No. 38", year: 1931, site: "Grand Rapids"} ]; var sites = d3.set(yields, function(d) { return d.site; }); // Grand Rapids, Duluth, Waseca, Crookston ``` -------------------------------- ### Generate Numeric Ticks with d3.ticks (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Illustrates the use of the d3.ticks method to generate a sequence of human-readable numeric ticks between a start and end value, given a desired count of ticks. This provides a low-level way to create tick values. ```js var ticks = d3.ticks(0, 10, 5); // [0, 2, 4, 6, 8, 10] ``` -------------------------------- ### Interpolating Objects (v3.x) - d3-interpolate - JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Shows how d3.interpolateObject in D3 version 3.x handles properties present in the start object (a) but not in the end object (b). In this version, such properties are included in the interpolated result. ```JavaScript d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {bar: 1, foo: 2.5} in 3.x ``` -------------------------------- ### Git Pre-commit Hook Script (Shell) Source: https://github.com/maage-brc/maage-web/blob/main/docs/pre-commit-linting.md A bash script designed to be placed in `.git/hooks/pre-commit`. It checks staged JavaScript, JSX, and HTML files for ESLint violations. If any file fails linting, the script prints an error and prevents the commit, ensuring only lint-free code is committed. Requires ESLint installed and executable permissions on the hook file. ```shell #!/bin/bash for file in $(git diff --cached --name-only | grep -E '\.(js|jsx|html)$') do git show ":$file" | node_modules/.bin/eslint --stdin --stdin-filename "$file" # we only want to lint the staged changes, not any un-staged changes if [ $? -ne 0 ]; then echo "ESLint failed on staged file '$file'. Please check your code and try again. You can run ESLint manually via npm run eslint." exit 1 # exit with failure status fi done ``` -------------------------------- ### Applying Gamma Correction to RGB Interpolation - d3-interpolate - JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Shows how to create a gamma-corrected RGB color interpolator using the .gamma() method. This example sets the gamma value to 2.2 for interpolating between "purple" and "orange". ```JavaScript var interpolate = d3.interpolateRgb.gamma(2.2)("purple", "orange"); ``` -------------------------------- ### Interpolating Objects (v4.0) - d3-interpolate - JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Illustrates the updated behavior of d3.interpolateObject in D3 version 4.0. Properties present in the start object (a) but not in the end object (b) are now ignored, resulting in an interpolated object that only contains properties from b. ```JavaScript d3.interpolateObject({foo: 2, bar: 1}, {foo: 3})(0.5); // {foo: 2.5} in 4.0 ``` -------------------------------- ### Find Index of Least Element with d3.scan (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates using d3.scan to find the index of the element with the minimum value in an array of objects, using a custom comparator function. This is useful for locating the position of an extreme value rather than just getting the value itself. ```js var data = [ {name: "Alice", value: 2}, {name: "Bob", value: 3}, {name: "Carol", value: 1}, {name: "Dwayne", value: 5} ]; var i = d3.scan(data, function(a, b) { return a.value - b.value; }); // 2 data[i]; // {name: "Carol", value: 1} ``` -------------------------------- ### Generating D3 v4 Time Range with Step > 1 (Days) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet shows the updated behavior of `d3.timeDays` in D3 v4 when a step greater than one is used. Unlike v3, it now behaves like `d3.range`, simply skipping every `step`th date starting from the initial date, providing a more predictable sequence. ```javascript d3.timeDays(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sat May 28 2016 00:00:00 GMT-0700 (PDT), // Mon May 30 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` -------------------------------- ### Calculating Day of Year in D3 v4 using .count() Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md In D3 v4, the functionality of `d3.time.dayOfYear` is replaced by the `.count()` method available on time intervals. This snippet demonstrates how to calculate the day of the year by counting the number of `d3.timeDay` intervals between the start of the year (`d3.timeYear(now)`) and the current date (`now`). ```javascript var now = new Date; d3.timeDay.count(d3.timeYear(now), now); // 165 ``` -------------------------------- ### Calculating Week of Year in D3 v4 using .count() Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Similar to calculating the day of year, the week of the year can be calculated in D3 v4 using the `.count()` method on the `d3.timeWeek` interval. This snippet counts the number of full weeks between the start of the year and the current date. ```javascript d3.timeWeek.count(d3.timeYear(now), now); // 24 ``` -------------------------------- ### D3 Ordinal Scale Custom Unknown Behavior (v4) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This example demonstrates how to set the `unknown` property on a D3 v4 ordinal scale. Setting `unknown` to a specific value (like `undefined`) prevents unknown inputs from extending the domain and instead returns the specified value. ```javascript var x = d3.scaleOrdinal() .domain([0, 1]) .range(["red", "green", "blue"]) .unknown(undefined); x.domain(); // [0, 1] x(2); // undefined x.domain(); // [0, 1] ``` -------------------------------- ### Generating D3 v4 Filtered Time Range using .every() (Days) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md To replicate the D3 v3 behavior of filtering dates by their field number when using a step, D3 v4 introduces the `.every()` method. This snippet demonstrates how to use `d3.timeDay.every(2).range()` to get a sequence of dates where only every second day (based on the day of the month) is included, similar to the old v3 behavior. ```javascript d3.timeDay.every(2).range(new Date(2016, 4, 28), new Date(2016, 5, 5)); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` -------------------------------- ### Calculating Hour of Week in D3 v4 using .count() Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md The `.count()` method in D3 v4 is general and can be used with any time interval. This snippet shows how to calculate the hour index within the current week by counting `d3.timeHour` intervals from the start of the week (`d3.timeWeek(now)`) to the current date (`now`), useful for applications like heatmaps. ```javascript d3.timeHour.count(d3.timeWeek(now), now); // 64 ``` -------------------------------- ### Generating D3 v3 Time Range with Step > 1 (Days) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet demonstrates the behavior of `d3.time.days` in D3 v3 when a step greater than one is provided. The method filters dates based on their field number (day of month), which can lead to unexpected results like skipping the start date if its field number doesn't match the step parity, and non-uniform intervals between returned dates. ```javascript d3.time.days(new Date(2016, 4, 28), new Date(2016, 5, 5), 2); // [Sun May 29 2016 00:00:00 GMT-0700 (PDT), // Tue May 31 2016 00:00:00 GMT-0700 (PDT), // Wed Jun 01 2016 00:00:00 GMT-0700 (PDT), // Fri Jun 03 2016 00:00:00 GMT-0700 (PDT)] ``` -------------------------------- ### Run Build Script (npm) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/BVBRC_build.txt Executes the build script defined in the package.json file using npm. This typically compiles, bundles, or processes the source code. ```shell npm run build ``` -------------------------------- ### Initializing MSA with Colorscheme (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Demonstrates how to initialize the MSA viewer with a specified DOM element, import data from a URL, and apply a predefined colorscheme. ```JavaScript var msa = require("msa"); var opts = { el: rootDiv, importURL: "./data/fer1.clustal", colorscheme: {"scheme": "hydro"} }; var m = new msa(opts); ``` -------------------------------- ### Initialize MSA Viewer with Import URL JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Shows how to initialize the MSA viewer using `require` (e.g., in a module environment) and configure it to load sequences directly from a specified URL upon initialization. Requires a root DOM element (`rootDiv`). ```JavaScript var msa = require("msa"); var opts = { el: rootDiv, importURL: "./data/fer1.clustal", }; var m = new msa(opts); ``` -------------------------------- ### Running Unit Tests from CLI Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Executes all unit tests for the project from the command line using the standard npm test script. ```bash npm test ``` -------------------------------- ### Using d3.formatPrefix for SI-Prefix Formatting (d3-format) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Illustrates the usage of `d3.formatPrefix` to create a format function that applies a consistent SI-prefix (here, 'k' for thousands) based on a reference value. Shows how it formats numbers relative to the specified prefix. ```js var f = d3.formatPrefix(",.0", 1e3); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1,000k" ``` -------------------------------- ### Loading D3 v5 via CDN Script Tag Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/README.md This HTML snippet demonstrates how to include the full D3.js version 5 library in a web page using a script tag pointing to the official CDN. This method is suitable for simple projects or quick prototyping. ```HTML ``` -------------------------------- ### Initialize MSA Viewer with Asynchronous Import JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Illustrates how to initialize the MSA viewer and then asynchronously load sequences using a separate library (`biojs-io-clustal`) before rendering. The sequences are reset on the viewer instance once loaded. ```JavaScript var msa = require("msa"); var clustal = require("biojs-io-clustal"); var m = new msa({ el: rootDiv, }); clustal.read("https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal", function(err, seqs){ m.seqs.reset(seqs); m.render(); }); ``` -------------------------------- ### Configuring Main Parameters in g Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Defines the main configuration object 'g' for the MSA viewer, including settings for mouse events, data import, event bus, alphabet size, debugging, reference sequences, manual rendering, color schemes, column visibility, and various visualization options. ```JSON conf: { registerMouseHover: false, registerMouseClicks: true, importProxy: "https://cors-anywhere.herokuapp.com/", eventBus: true, alphabetSize: 20, dropImport: false, debug: false, hasRef: false // hasReference, manualRendering: false // manually control the render (not recommened) }, colorscheme: { scheme: "taylor", // name of your color scheme colorBackground: true, // otherwise only the text will be colored showLowerCase: true, // used to hide and show lowercase chars in the overviewbox opacity: 0.6 //opacity for the residues }, columns: { hidden: [] // hidden columns }, vis: { sequences: true, markers: true, metacell: false, conserv: false, overviewbox: false, seqlogo: false, gapHeader: false, leftHeader: true, // about the labels labels: true, labelName: true, labelId: true, labelPartition: false, labelCheckbox: false, // meta stuff metaGaps: true, metaIdentity: true, metaLinks: true }, zoomer: { // general alignmentWidth: "auto", alignmentHeight: 225, columnWidth: 15, rowHeight: 15, autoResize: true // only for the width // labels textVisible: true, labelIdLength: 30, labelNameLength: 100, labelPartLength: 15, labelCheckLength: 15, labelFontsize: 13, labelLineHeight: "13px", // marker markerFontsize: "10px", stepSize: 1, markerStepSize: 2, markerHeight: 20, // canvas residueFont: "13", //in px canvasEventScale: 1, // overview box boxRectHeight: 2, boxRectWidth: 2, overviewboxPaddingTop: 10, // meta cell metaGapWidth: 35, metaIdentWidth: 40, metaLinksWidth: 25 } ``` -------------------------------- ### Initialize MSA Viewer with Generated Sequences JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Demonstrates initializing the MSA viewer with sequences generated programmatically using `msa.utils.seqgen.genConservedSequences`. The generated sequences are passed directly as an array to the `seqs` option. Requires rendering after initialization. ```JavaScript var msa = require("msa"); var m = new msa({ el: rootDiv, seqs: msa.utils.seqgen.genConservedSequences(10,30, "ACGT-") // an array of seq files }); m.render() ``` -------------------------------- ### Adding and Setting Custom Colorscheme (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Shows how to define a custom static colorscheme with specific color mappings for residues and apply it to the MSA viewer after initialization. ```JavaScript var msa = require("msa"); var opts = { el: rootDiv, importURL: "./data/fer1.clustal", colorscheme: {"scheme": "hydro"} }; var m = new msa(opts); m.g.colorscheme.addStaticScheme("own",{A: "orange", C: "red", G: "green", T: "blue"}); m.g.colorscheme.set("scheme", "own"); ``` -------------------------------- ### Watching and Recompiling Source Files Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Runs the npm script 'watch' which uses watchify to automatically recompile JavaScript files into the build folder whenever changes are detected in the source code. ```bash npm run watch ``` -------------------------------- ### Include MSA Viewer via CDN HTML Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Demonstrates how to include the MSA viewer library in an HTML page using a script tag pointing to a CDN. This is the recommended way to use the minified, gzipped production version. ```HTML ``` -------------------------------- ### Configuring Menu Properties Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Defines the configuration properties for the menu component, allowing customization of font sizes, line height, margins, and padding. ```JSON menu: { menuFontsize: "14px", menuItemFontsize: "14px", menuItemLineHeight: "14px", menuMarginLeft: "3px", menuPadding: "3px 4px 3px 4px" } ``` -------------------------------- ### Loading Minified D3 v5 via CDN Script Tag Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/README.md This HTML snippet shows how to include the minified version of D3.js version 5 in a web page using a script tag. The minified version is smaller and recommended for production environments to reduce load times. ```HTML ``` -------------------------------- ### Apply Patch to stat.seqs (shell) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/BVBRC_build.txt Applies a patch file to a specific file within the stat.seqs module using the patch command. This is often required to fix bugs or modify behavior in dependencies. ```shell patch -p 1 node_modules/stat.seqs/lib/index.js < stat.seqs.patch ``` -------------------------------- ### Loading Default D3 v4 Bundle - HTML Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet shows the standard way to include the default D3 version 4 bundle in an HTML document using a script tag, providing access to the combined set of D3 microlibraries under the global 'd3' object. ```HTML ``` -------------------------------- ### Loading Specific D3 v4 Microlibrary - HTML Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet illustrates how to load a single D3 version 4 microlibrary, specifically d3-selection, as a standalone library using a script tag. This is useful when only a subset of D3's features is required, reducing the overall file size. ```HTML ``` -------------------------------- ### Listening to Generic Collection Events (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Shows how to attach a listener to the generic `change` event on a collection (like the selection collection) to react to any modifications within that collection. ```JavaScript m.g.selcol.on("change", function(prev, new){ }) ``` -------------------------------- ### Loading Specific D3 Module via CDN Script Tag Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/README.md This HTML snippet illustrates how to load a specific D3 microlibrary, such as d3-selection, directly via a script tag from the CDN. This is useful if you only need a subset of D3's functionality. ```HTML ``` -------------------------------- ### Synchronizing D3 Transitions with Shared Instance (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates how to synchronize multiple transitions by applying a single, pre-configured transition instance to different selections. This ensures all elements transition simultaneously with the same duration and easing properties, replacing the older transition.each method for this purpose. ```JavaScript var t = d3.transition() .duration(750) .ease(d3.easeLinear); d3.selectAll(".apple").transition(t) .style("fill", "red"); d3.selectAll(".orange").transition(t) .style("fill", "orange"); ``` -------------------------------- ### Styling and Rendering D3 v3 Axis - HTML/CSS/JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet shows the approach to rendering and styling axes in D3.js v3. It requires explicit CSS rules to style the axis elements (path, line, text) and uses the `d3.svg.axis()` constructor with `.orient()` to create the axis, which is then applied using `.call()`. ```css .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .axis text { font: 10px sans-serif; } ``` ```javascript d3.select(".axis") .call(d3.svg.axis() .scale(x) .orient("bottom")); ``` -------------------------------- ### Using 's' Directive for SI-Prefix Formatting (d3-format) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates the behavior of the `s` format directive in `d3.format`. It automatically selects the appropriate SI-prefix (k, M, etc.) based on the magnitude of the input number, unlike `d3.formatPrefix`. ```js var f = d3.format(".0s"); f(1e3); // "1k" f(1e4); // "10k" f(1e5); // "100k" f(1e6); // "1M" ``` -------------------------------- ### Testing the Git Pre-commit Hook (Shell) Source: https://github.com/maage-brc/maage-web/blob/main/docs/pre-commit-linting.md Demonstrates attempting a Git commit after the pre-commit hook has been set up and made executable. The output shows that the commit is blocked because the ESLint hook detected an error in the staged file, confirming the hook is active and preventing commits with linting issues. ```shell git commit public/js/p3/widget/ProteinFamiliesContainer.js -m 'test' ``` -------------------------------- ### Importing Entire D3 Library in ES Module Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/README.md This JavaScript snippet shows how to import the entire D3 library into a namespace, typically named `d3`, using ES2015 module syntax. This provides access to all D3 functions under the `d3` object. ```JavaScript import * as d3 from "d3"; ``` -------------------------------- ### Requiring and Combining Specific D3 Modules in CommonJS Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/README.md This JavaScript snippet illustrates how to load specific D3 modules using `require` and combine them into a single object using `Object.assign`. This allows for creating a custom D3 build with only the necessary modules in a CommonJS environment. ```JavaScript var d3 = Object.assign({}, require("d3-format"), require("d3-geo"), require("d3-geo-projection")); ``` -------------------------------- ### Using 'c' Directive for String Padding (d3-format) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Shows how the `c` format directive in `d3.format` is used for formatting character data (strings). It demonstrates applying padding and alignment (right, center, left) to a string, similar to padding functions like 'left-pad'. ```js d3.format(">10c")("foo"); // " foo" d3.format("^10c")("foo"); // " foo " d3.format("<10c")("foo"); // "foo " ``` -------------------------------- ### Making Git Hook Executable (Shell) Source: https://github.com/maage-brc/maage-web/blob/main/docs/pre-commit-linting.md Command to change the file permissions of the `pre-commit` script located in the `.git/hooks` directory. This step is essential to make the script executable, allowing Git to run it automatically before each commit. ```shell chmod +x pre-commit ``` -------------------------------- ### Creating D3 v4 Quadtree Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet demonstrates the updated syntax for creating a quadtree in D3 version 4. It uses the d3.quadtree constructor and adds data separately using the .addAll() method. ```javascript var quadtree = d3.quadtree() .extent([[0, 0], [width, height]]) .addAll(data); ``` -------------------------------- ### Adding Selections to MSA (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Shows how to create and add different types of selections (row, column, position) to the MSA viewer's selection collection. ```JavaScript m.g.selcol.add(new msa.selection.rowsel({seqId: "f1"})); // row-based m.g.selcol.add(new msa.selection.columnsel({xStart: 10, xEnd: 12})); // column-wise m.g.selcol.add(new msa.selection.possel({xStart: 10, xEnd: 12, seqId: "f1"})); // union of row and column m.g.selcol.reset([new msa.selection.rowsel({seqId: "f1"})]); // reset ``` -------------------------------- ### Adding Features from GFF Data (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Illustrates how to load feature data from GFF files using XHR and a GFF parser, then add these features to the MSA sequence collection for visualization. ```JavaScript var msa = require("msa"); var xhr = require("xhr"); var gffParser = require("biojs-io-gff"); var m = msa({el: rootDiv, importURL: "https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal"); // add features xhr("./data/fer1.gff3", function(err, request, body) { var features = gffParser.parseSeqs(body); m.seqs.addFeatures(features); }); // or even more xhr("./data/fer1.gff_jalview", function(err, request, body) { var features = gffParser.parseSeqs(body); m.seqs.addFeatures(features); }); ``` -------------------------------- ### Requiring Entire D3 Library in CommonJS Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/README.md This JavaScript snippet demonstrates how to load the full D3 library using the CommonJS `require` function. This method is typically used in Node.js environments or older module systems. ```JavaScript var d3 = require("d3"); ``` -------------------------------- ### Listening to Specific Attribute Change Events (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Illustrates how to listen for changes to a specific attribute (e.g., `alignmentWidth`) on a component using the `change:attributeName` event syntax. ```JavaScript m.g.vis.on("change:alignmentWidth", function(prev, new){ }) ``` -------------------------------- ### Querying and Modifying Selections (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Demonstrates methods for retrieving selected blocks, inverting selections by row or column, resetting the entire selection, and using the search functionality. ```JavaScript m.g.selcol.getBlocksForRow() // array of all selected residues for a row m.g.selcol.getAllColumnBlocks() // array with all selected columns m.g.selcol.invertRow(@model.pluck "id") m.g.selcol.invertCol([0,1,2]) m.g.selcol.reset() // remove the entire selection m.g.user.set("searchText", search) // search ``` -------------------------------- ### Correct Icon Class Reference - HTML Source: https://github.com/maage-brc/maage-web/blob/main/docs/adding-icons.md Shows the correct format for referencing an icon within HTML using the generated class name from the custom font. This format ensures the icon displays correctly based on the generated stylesheet. ```HTML class="icon-sort-alpha-asc" ``` -------------------------------- ### Registering Multiple Event Listeners (d3-dispatch) - JS Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Illustrates how to attach the same listener function to multiple event types ('foo' and 'bar') simultaneously using the .on method with space-separated typenames. ```js dispatcher.on("foo bar", function(message) { console.log(message); }); ``` -------------------------------- ### Creating D3 v3 Quadtree Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet shows the syntax for creating a quadtree in D3 version 3 using the generator pattern. It sets the extent and immediately processes the data. ```javascript var quadtree = d3.geom.quadtree() .extent([[0, 0], [width, height]]) (data); ``` -------------------------------- ### Listening to Other Interaction Events (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Shows how to listen for click events on other elements within the MSA view, such as rows, columns, or meta-information areas, providing flexibility in handling user interactions. ```JavaScript msa.g.on("row:click", function(data){ ... }); msa.g.on("column:click", function(data){ ... }); msa.g.on("meta:click", function(data){ ... }); ... ``` -------------------------------- ### Creating Categorical Color Scale (D3.js v3.x) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet demonstrates the method used in D3.js v3.x to create a categorical color scale using the dedicated d3.scale.category10() constructor. ```javascript var color = d3.scale.category10(); ``` -------------------------------- ### Parsing Time in D3 v3.x (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates the method for creating a time parser using the now-removed `.parse` method of a format constructor in D3 version 3.x. ```JavaScript var parseTime = d3.time.format("%c").parse; ``` -------------------------------- ### Creating and Applying d3.stack Generator - JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet demonstrates how to create a d3.stack generator. It configures the generator by specifying the keys (data properties) to stack and setting the order and offset methods. The generator is then applied to the data array (defined previously) to produce the stacked series data. ```JavaScript var stack = d3.stack() .keys(["apples", "bananas", "cherries", "dates"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); var series = stack(data); ``` -------------------------------- ### Defining the Sequence Data Model Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Describes the structure of a sequence object used within the MSA viewer, including properties for name, ID, sequence string, display height, and whether it is a reference sequence. ```JSON { name: "", id: "", seq: "", height: 1, ref: false // reference: the sequence used in BLAST or the consensus seq } ``` -------------------------------- ### Formatting Negative Numbers with Parentheses (d3-format) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Shows how the new `(` sign option in `d3.format` can be used to format negative numbers by enclosing them in parentheses. Also demonstrates combining this option with the `+` sign and the `$` symbol. ```js d3.format("+".0f")(-42); // "-42" d3.format("(.0f")(-42); // "(42)" d3.format("+$.0f")(-42); // "-$42" d3.format("($.0f")(-42); // "($42)" ``` -------------------------------- ### Promoting Value to Function using Constant Helper in D3.js (JS) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates how to check if a variable `x` is a function and, if not, convert it into a function that returns `x` using the `constant` helper function. This pattern is used to handle values that can be either constants or functions. ```js var fx = typeof x === "function" ? x : constant(x); ``` -------------------------------- ### Dispatching Event D3 3.x (d3-dispatch) - JS Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates how to dispatch a 'foo' event using the D3 3.x API, where event types were properties on the dispatcher object. ```js dispatcher.foo.call(that, "Hello, Foo!"); ``` -------------------------------- ### Rendering D3 v4 Axis - JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet demonstrates the simplified API for rendering a bottom axis in D3.js v4. It uses the dedicated `d3.axisBottom()` constructor, which accepts the scale directly and includes default styling, eliminating the need for explicit CSS in many cases. The axis is applied using `.call()`. ```javascript d3.select(".axis") .call(d3.axisBottom(x)); ``` -------------------------------- ### Updating Visualization Attributes (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/msa/README.md Demonstrates how to modify visualization settings like hiding markers or changing the alignment height using the `vis` and `zoomer` components' `set` methods. ```JavaScript msa.g.vis.set("marker", false); // hides the markers msa.g.zoomer.set("alignmentHeight", 500) // modifies the default height ``` -------------------------------- ### Making XML Request with Custom MIME Type using D3.js Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet demonstrates how to make an XML request using the updated D3.js v4+ API. It shows how to specify a custom MIME type for the request using the `.mimeType()` method before calling `.get()` to initiate the request and handle the response or error in a callback function. ```JavaScript d3.xml("file.svg").mimeType("image/svg+xml").get(function(error, svg) { … }); ``` -------------------------------- ### Using D3.js Easing with Optional Arguments (v3.x) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet demonstrates how to create a parameterizable easing function in D3 version 3.x. It uses the `d3.ease` function with the easing type string and an optional second argument for the parameter (like amplitude). ```JavaScript var e = d3.ease("elastic-out-in", 1.2); ``` -------------------------------- ### Attaching Multiple Event Listeners with D3.js Selection.on - JavaScript Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md This snippet demonstrates how to use the `selection.on` method in D3.js v4 to attach multiple event listeners simultaneously by providing a string of whitespace-separated event typenames. The callback function receives the standard D3 arguments (datum, index, group) and `this` refers to the element. ```JavaScript selection.on("mousedown touchstart", function() { console.log(d3.event.type); }); ``` -------------------------------- ### Parsing Time in D3 v4.x (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Shows the updated approach for creating a time parser in D3 version 4.x using the new dedicated `d3.timeParse` constructor, replacing the old `.parse` method. ```JavaScript var parseTime = d3.timeParse("%c"); ``` -------------------------------- ### Formatting Numbers with Default Precision (d3-format) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates the default precision behavior of `d3.format` when no precision is specified, using the "e" directive. Shows how it formats integers and floating-point sums, resulting in a fixed number of digits after the decimal point (default 6). ```js var f = d3.format("e"); f(42); // "4.200000e+1" f(0.1 + 0.2); // "3.000000e-1" ``` -------------------------------- ### D3.js 3.x General Update Pattern (JavaScript) Source: https://github.com/maage-brc/maage-web/blob/main/public/js/d3.v5/CHANGES.md Demonstrates the general update pattern in D3.js version 3.x. In this version, the `.enter().append()` call directly modifies the `circle` update selection, merging entering nodes into it implicitly. ```JavaScript var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue"); circle.exit().remove(); // EXIT circle.enter().append("circle") // ENTER; modifies UPDATE! 🌶 .style("fill", "green"); circle // ENTER + UPDATE .style("stroke", "black"); ```