minor fixes, update docs

docs/_config.yml

@@ -1,8 +1,8 @@
 theme: jekyll-theme-slate
-site_name: LogosJ
+site_name: LogoJS
 repo_name: logojs-package
 repo_url: https://www.github.com/weng-lab/logojs-package
-site_description: "LogosJ Javascript sequence logos"
+site_description: "LogoJS Javascript sequence logos"
 site_author: Henry Pratt
 remote_branch: master
 

docs/alphabet.md

@@ -2,7 +2,7 @@
 
 ## Alphabet overview
 
-LogosJ combines sets of individual glyphs into alphabets. An alphabet is an array of **symbols**,
+LogoJS combines sets of individual glyphs into alphabets. An alphabet is an array of **symbols**,
 each of which should have a unique color and glyph combination. Symbols are not restricted to
 just one glyph; if you are rendering a dinucleotide logo, for example, you might use symbols with
 two glyphs each. Alphabets can also have multiple symbols that use the same glyph with different
@@ -18,17 +18,17 @@ letter, a single value may be used in place of an array.
 * **component** an array of components used to render the glyphs in this symbol. Should be the
 same length as **color**. If your alphabet uses custom glyphs, import your custom glyph
 components and use them here. If the symbol is only one letter, a single component may be used
-in place of an array. If you are only using letters and digits which are built in to LogosJ, you
-can use the **regex** field instead, and LogosJ will populate this field for you using the
+in place of an array. If you are only using letters and digits which are built in to LogoJS, you
+can use the **regex** field instead, and LogoJS will populate this field for you using the
 `loadGlyphComponents` function.
 * **regex** a string representing the sequence of letters in this symbol. This field is not
 required, but may be used as a shorthand rather than explicitly including components in the
-**component** field. LogosJ will populate the **components** field for you automatically with
+**component** field. LogoJS will populate the **components** field for you automatically with
 matching built-in letters and digits if you leave it empty.
 
 ## Built-in alphabets
 
-LogosJ provides built-in alphabets for common use cases for convenience. If you need to render
+LogoJS provides built-in alphabets for common use cases for convenience. If you need to render
 a custom logo with these symbol sets, you can import these alphabets rather than build them
 yourself. In React, these can be imported directly from the `logojs` package; without React, they
 are accessible under the `logojs` namespace (i.e. `logojs.DNAAlphabet`).
@@ -50,7 +50,7 @@ with different symbols.
 ## Custom alphabets
 
 To make a custom alphabet, simply create a custom array of symbol objects as described above.
-If you have custom React components for custom glyphs not built-in to LogosJ, you can include
+If you have custom React components for custom glyphs not built-in to LogoJS, you can include
 them in the **components** field. The following is an example of a custom alphabet with **M**
 and **W** representing methylated **CpG** on the plus and minus strands (the syntax below
 first includes the core of the `DNAAlphabet`, then extends it with **M** and **W**):
@@ -67,12 +67,12 @@ export const METHYL_ALPHABET = loadGlyphComponents([
 
 ## Alphabet utilities
 
-LogosJ provides two utility functions to make generating custom alphabets easier in particular
+LogoJS provides two utility functions to make generating custom alphabets easier in particular
 use cases.
 
 The `loadGlyphComponents` function reads the optional **regex** field of each symbol in a
 custom alphabet and automatically populates the corresponding **component** field with built-in
-glyphs from LogosJ. If a symbol has a **component** field already but has no **regex** field,
+glyphs from LogoJS. If a symbol has a **component** field already but has no **regex** field,
 it will be left unchanged; however, if it has a **regex** field and a **components** field the
 contents of the **components** field will be overwritten. The regex field must only contain the
 letters A-Z and a-z and the digits 0-9. The function takes the following argument:

docs/custom.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-LogosJ supports a wide array of customizations for logos. You can use custom alphabets, make
+LogoJS supports a wide array of customizations for logos. You can use custom alphabets, make
 logos where some letters extend below the x-axis, or take advantage of SVG components to layer
 on custom annotations. Several advanced React components are available offering varying degrees
 of customization.
@@ -118,7 +118,7 @@ takes the following arguments:
 <a name="rawlogo"></a>
 ## Logos without axes
 
-Logos do not need to be rendered with the default, built-in axes. LogosJ provides a `RawLogo` component
+Logos do not need to be rendered with the default, built-in axes. LogoJS provides a `RawLogo` component
 which just renders glyphs. A `RawLogo` component does not render its own `<svg>` tag; you need to provide it
 yourself. This adds flexibility, however, to render the logo on top of other SVG annotations.
 

docs/glyph.md

@@ -2,14 +2,14 @@
 
 ## Glyph overview
 
-Glyphs are the smallest building blocks of LogosJ logos. Each glyph is a self-contained SVG
+Glyphs are the smallest building blocks of LogoJS logos. Each glyph is a self-contained SVG
 object which renders itself within a 100 by 100 square. Logo components are responsible for
 applying the appropriate transforms to the glyph objects they contain to adjust their positions
 within the logo and their heights.  
 
 ## Built-in glyphs
 
-LogosJ uses a custom font to render its glyphs, which include the capital letters A-Z, the lower
+LogoJS uses a custom font to render its glyphs, which include the capital letters A-Z, the lower
 case letters a-z, and the digits 0-9. Most glyphs contain a single SVG `path` element, and apply
 their props directly to it. You can apply properties including, but not limited to:
 
@@ -20,7 +20,7 @@ being opaque.
 In general, it is not necessary to render glyphs directly; instead, they should be passed as
 properties to logo components in alphabet arrays (see the alphabet page for details). When you need
 to include built-in symbols in a custom alphabet, you can import built-in glyphs directly from the
-LogosJ package. Capital letters are their own components; lower case letters are represented as LC_a,
+LogoJS package. Capital letters are their own components; lower case letters are represented as LC_a,
 LC_b, etc. and numbers as N1, N2, etc. For example the following code imports capital A,
 lower case a, and the number 1:
 
@@ -33,13 +33,13 @@ In plain Javascript, these are available in the `logojs` namespace as `logojs.A`
 
 ## Custom glyphs
 
-If you want to add a custom symbol which is not built in to LogosJ, you can make a custom glyph
+If you want to add a custom symbol which is not built in to LogoJS, you can make a custom glyph
 component. Glyph components should render an SVG element, such as a `path` or a collection of
 `path`s contained with a `g`, with a width of 100 and a height of 100. When rendered in a logo,
 your custom glyph will be scaled automatically.
 
 It is best practice to pass the full collection of properties your glyph receives on to the SVG
-element it renders. For example, here is the source code for LogosJ's built-in **C**, which passes
+element it renders. For example, here is the source code for LogoJS's built-in **C**, which passes
 all its properties on to a single child `path`:
 
 ```js

docs/index.md

@@ -1,17 +1,17 @@
 ---
-title: 'LogosJ: Embeddable SVG Sequence Logos'
+title: 'LogoJS: Embeddable SVG Sequence Logos'
 ---
 
-LogosJ is a Javascipt package for creating SVG sequence logos.
+LogoJS is a Javascipt package for creating SVG sequence logos.
 In addition to basic DNA, RNA, and protein logos, we support
 custom alphabets and variety of advanced logo types and custom annotations.
 
-LogosJ can be used with and without ReactJS. A companion web app makes it easy to share
+LogoJS can be used with and without ReactJS. A companion web app makes it easy to share
 SVG logos and generate them in batches from the output of common tools such as the MEME Suite.
 
 ## Examples
 
-LogosJ supports a wide range of biological use cases. Detailed examples with code samples
+LogoJS supports a wide range of biological use cases. Detailed examples with code samples
 are available in this documentation and through our [companion site](http://logojs.wenglab.org/app/gallery).
 Shown below are protein, RNA, methyl DNA, dinucleotide, and protein/DNA interaction logos.
 
@@ -33,7 +33,7 @@ advanced annotations<br>
 </center>
 
 ## Using in your web application
-You can add LogosJ to your project using NPM or Yarn:
+You can add LogoJS to your project using NPM or Yarn:
 ```sh
 yarn add logojs-react
 ```
@@ -42,8 +42,8 @@ or
 npm install logojs-react
 ```
 
-If you want to use LogosJ in a static web page, you can simply include the package with a
-static script tag, which will add LogosJ to the global namespace as `logojs`:
+If you want to use LogoJS in a static web page, you can simply include the package with a
+static script tag, which will add LogoJS to the global namespace as `logojs`:
 
 ```html
 <script src="http://bundle.logojs.wenglab.org/bundle.js" type="text/javascript">
@@ -52,7 +52,7 @@ static script tag, which will add LogosJ to the global namespace as `logojs`:
 
 ## Quick example: a DNA logo
 
-The transcription factor CTCF binds a well-known consensus DNA sequence, rendered below with LogosJ:
+The transcription factor CTCF binds a well-known consensus DNA sequence, rendered below with LogoJS:
 
 <img src="http://logojs.wenglab.org/svg/eyJwcG0iOltbMC4wOSwwLjMxLDAuMDgsMC41XSxbMC4xOCwwLjE1LDAuNDUsMC4yXSxbMC4zLDAuMDUsMC40OSwwLjE0XSxbMC4wNiwwLjg3LDAuMDIsMC4wM10sWzAsMC45OCwwLDAuMDJdLFswLjgxLDAuMDEsMC4wNywwLjA5XSxbMC4wNCwwLjU3LDAuMzYsMC4wMV0sWzAuMTEsMC40NywwLjA1LDAuMzVdLFswLjkzLDAuMDEsMC4wMywwLjAxXSxbMCwwLDAuOTksMC4wMV0sWzAuMzYsMCwwLjY0LDBdLFswLjA1LDAuMDEsMC41NSwwLjM3XSxbMC4wMywwLDAuOTcsMF0sWzAuMDYsMCwwLjg1LDAuMDddLFswLjExLDAuOCwwLDAuMDddLFswLjQsMC4wMSwwLjU1LDAuMDFdLFswLjA5LDAuNTMsMC4zMywwLjA0XSxbMC4xMiwwLjM1LDAuMDgsMC40M10sWzAuNDQsMC4xOSwwLjI5LDAuMDZdXSwidHlwZWlkIjowLCJzY2FsZSI6MSwiaXNmcmVxIjpmYWxzZSwiZmlyc3RiYXNlIjoxLCJhbHBoYWJldCI6W3sicmVnZXgiOiJBIiwiY29sb3IiOiJyZWQifSx7InJlZ2V4IjoiQyIsImNvbG9yIjoiYmx1ZSJ9LHsicmVnZXgiOiJHIiwiY29sb3IiOiJvcmFuZ2UifSx7InJlZ2V4IjoiVCIsImNvbG9yIjoiIzIyOGIyMiJ9XX0" alt="CTCF logo" width="50%">
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "logojs-react",
   "license": "MIT",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "React Components for rendering sequence logos",
   "main": "index.js",
   "author": "Henry Pratt",

src/components/logo/logo.jsx

@@ -64,7 +64,7 @@ export const RawLogo = ({ values, glyphWidth, stackHeight, alphabet, onSymbolMou
  * @prop yAxisMax if set, uses an explicit maximum value for the y-axis rather than the total number of bits possible. This is ignored in FREQUENCY mode.
  */
 const Logo = React.forwardRef(
-    ({ ppm, pfm, fasta, mode, height, width, alphabet, glyphwidth, scale, startpos, showGridLines, backgroundFrequencies, constantPseudocount,
+    ({ ppm, pfm, values, fasta, mode, height, width, alphabet, glyphwidth, scale, startpos, showGridLines, backgroundFrequencies, constantPseudocount,
        yAxisMax, onSymbolMouseOver, onSymbolMouseOut, onSymbolClick, noFastaNames, countUnaligned }, ref
 ) => {
 
@@ -86,7 +86,7 @@ const Logo = React.forwardRef(
     let alphabetSize = ppm[0].length;
     if (!backgroundFrequencies)
         backgroundFrequencies = ppm[0].map( _ => 1.0 / alphabetSize );
-    let likelihood = ( mode !== FREQUENCY
+    let likelihood = values || ( mode !== FREQUENCY
 		       ? ppm.map(logLikelihood(backgroundFrequencies))
 		       : ppm.map(x => x.map(v => v * Math.log2(alphabetSize))) );
     const theights = mode === FREQUENCY ? [ Math.log2(alphabetSize) ] : backgroundFrequencies.map( x => Math.log2(1.0 / (x || 0.01)) );

src/components/logo/logowithnegatives.jsx

@@ -97,7 +97,7 @@ const LogoWithNegatives = React.forwardRef(
 	          x1={0} x2={viewBoxW - 80} />
             <g transform="translate(80,10)">
                 {values.map((lv, i) =>
-		    gposition(lv.map(x => x > 0.0 ? x / mvalue : 0.0), 'translate(' + glyphWidth * i + ',0)', i, alphabet,
+		            gposition(lv.map(x => x > 0.0 ? x / mvalue : 0.0), 'translate(' + glyphWidth * i + ',0)', i, alphabet, false,
 		              { onSymbolMouseOver, onSymbolMouseOut, onSymbolClick })
 	        )}
 	        {values.map((lv, i) =>