lidaof · lidaof · Apr 20, 2020 · Apr 20, 2020
diff --git a/frontend/src/components/TextTrack.js b/frontend/src/components/TextTrack.js
@@ -78,9 +78,9 @@ chr1    791044  793910  chr8:248210-251154,2    7       .`
 "chr8:128109053-128110360<->chr8:129534833-129536039"	FALSE	FALSE	1425729.5	100	34.8639202860754
 "chr20:49345639-49354229<->chr20:50511129-50512012"	FALSE	FALSE	1161636.5	129	30.5556940820741`
     },
-    callingcard: {
-        label: 'callingcard',
-        desc: 'Text file in CCF format, comprising 4-6 columns: chrom, start, end, value; and, optionally, strand and annotation',
+    qbed: {
+        label: 'qBED',
+        desc: 'Text file in qBED format, comprising 4-6 columns: chrom, start, end, value; and, optionally, strand and annotation',
         example: `chr1    51441754        51441758        1       -       CTAGAGACTGGC
 chr1    51441754        51441758        21      -       CTTTCCTCCCCA
 chr1    51982564        51982568        3       +       CGCGATCGCGAC

diff --git a/frontend/src/components/TrackUpload.js b/frontend/src/components/TrackUpload.js
@@ -181,7 +181,7 @@ export class TrackUpload extends React.Component {
                             <option value="bed">bed</option>
                             <option value="refBed">refBed</option>
                             <option value="longrange">longrange</option>
-                            <option value="callingcard">callingcard</option>
+                            <option value="qbed">qBED</option>
                             <option value="bam">BAM</option>
                         </optgroup>
                     </select>

diff --git a/...nts/trackConfig/CallingCardTrackConfig.ts → ...components/trackConfig/QBedTrackConfig.ts b/...nts/trackConfig/CallingCardTrackConfig.ts → ...components/trackConfig/QBedTrackConfig.ts
@@ -1,10 +1,10 @@
 import { TrackModel } from './../../model/TrackModel';
 import { TrackConfig } from './TrackConfig';
-import CallingCardTrack, {DEFAULT_OPTIONS} from '../trackVis/CallingCardTrack';
+import QBedTrack, {DEFAULT_OPTIONS} from '../trackVis/QBedTrack';
 import WorkerSource from '../../dataSources/worker/WorkerSource';
 import { BedWorker } from '../../dataSources/WorkerTSHook';
 import LocalBedSource from '../../dataSources/LocalBedSource';
-import CallingCard from '../../model/CallingCard';
+import QBed from '../../model/QBed';
 import BedRecord from '../../dataSources/bed/BedRecord';
 import BedTextSource from "../../dataSources/BedTextSource";
 import HeightConfig from '../trackContextMenu/HeightConfig';
@@ -16,7 +16,7 @@ import MarkerSizeConfig from '../trackContextMenu/MarkerSizeConfig';
 import { BackgroundColorConfig, PrimaryColorConfig } from '../trackContextMenu/ColorConfig';
 
 
-export class CallingCardTrackConfig extends TrackConfig {
+export class QBedTrackConfig extends TrackConfig {
     constructor(trackModel: TrackModel) {
         super(trackModel);
         this.setDefaultOptions(DEFAULT_OPTIONS);
@@ -39,17 +39,17 @@ export class CallingCardTrackConfig extends TrackConfig {
     }
 
     /**
-     * Converts BedRecords to CallingCards.
+     * Converts BedRecords to QBeds.
      * 
      * @param {BedRecord[]} data - bed records to convert
-     * @return {CallingCard[]} CallingCard records
+     * @return {QBed[]} QBed records
      */
     formatData(data: BedRecord[]) {
-        return data.map(record => new CallingCard(record));
+        return data.map(record => new QBed(record));
     }
 
     getComponent() {
-        return CallingCardTrack;
+        return QBedTrack;
     }
 
     getMenuComponents() {

diff --git a/frontend/src/components/trackConfig/getTrackConfig.ts b/frontend/src/components/trackConfig/getTrackConfig.ts
@@ -1,7 +1,7 @@
 import { TrackConfig } from "./TrackConfig";
 import { BamTrackConfig } from "./BamTrackConfig";
 import { BedTrackConfig } from "./BedTrackConfig";
-import { CallingCardTrackConfig } from "./CallingCardTrackConfig";
+import { QBedTrackConfig } from "./QBedTrackConfig";
 import { CategoricalTrackConfig } from "./CategoricalTrackConfig";
 import { BigBedTrackConfig } from "./BigBedTrackConfig";
 import { BedGraphTrackConfig } from "./BedGraphTrackConfig";
@@ -32,7 +32,7 @@ export const INTERACTION_TYPES = ["hic", "longrange", "biginteract"];
 const TYPE_NAME_TO_CONFIG = {
     bam: BamTrackConfig,
     bed: BedTrackConfig,
-    callingcard: CallingCardTrackConfig,
+    qbed: QBedTrackConfig,
     categorical: CategoricalTrackConfig,
     bedgraph: BedGraphTrackConfig,
     bigbed: BigBedTrackConfig,

diff --git a/frontend/src/components/trackContextMenu/MarkerSizeConfig.js b/frontend/src/components/trackContextMenu/MarkerSizeConfig.js
@@ -2,7 +2,7 @@ import React from 'react';
 import NumberConfig from './NumberConfig';
 
 /**
- * A context menu item that configures marker size for calling card track.
+ * A context menu item that configures marker size for qBED track.
  * 
  * @param {Object} props - props as specified by React
  * @return {JSX.Element} element to render

diff --git a/frontend/src/components/trackManagers/CustomTrackAdder.js b/frontend/src/components/trackManagers/CustomTrackAdder.js
@@ -13,14 +13,13 @@ import { TrackOptionsUI } from "./TrackOptionsUI";
 // const TRACK_TYPES = ['bigWig', 'bedGraph', 'methylC', 'categorical', 'bed', 'bigBed', 'repeatmasker','refBed', 'hic', 'longrange', 'bigInteract', 'cool', 'bam'];
 
 export const TRACK_TYPES = {
-    Numerical: ["bigWig", "bedGraph"],
+    Numerical: ["bigWig", "bedGraph", "qBED"],
     Annotation: ["bed", "bigBed", "refBed"],
     Categorical: ["categorical"],
     Methylation: ["methylC"],
     Interaction: ["hic", "cool", "bigInteract", "longrange"],
     Repeats: ["repeatmasker"],
     Alignment: ["bam", "pairwise"],
-    Callingcard: ["callingcard"],
     "3D Structure": ["g3d"],
 };
 
@@ -41,7 +40,7 @@ const TYPES_DESC = {
     cool: "long range interaction data in cool format, use data uuid instead of URL",
     bam: "reads alignment data",
     pairwise: "pairwise alignment data",
-    callingcard: "calling card data",
+    qBED: "quantized numerical data, processed by tabix in .gz format",
     g3d: "3D structure in .g3d format",
 };
 

diff --git a/frontend/src/components/trackVis/3d/G3dTrack.js b/frontend/src/components/trackVis/3d/G3dTrack.js
@@ -19,7 +19,7 @@ export const DEFAULT_OPTIONS = {
  */
 class G3dTrack extends React.PureComponent {
     static propTypes = Object.assign({}, Track.propsFromTrackContainer, {
-        data: PropTypes.array.isRequired, // PropTypes.arrayOf(CallingCard)
+        data: PropTypes.array.isRequired, // PropTypes.arrayOf(QBed)
         options: PropTypes.shape({
             height: PropTypes.number.isRequired // Height of the track
         }).isRequired,

diff --git a/...c/components/trackVis/CallingCardTrack.js → ...tend/src/components/trackVis/QBedTrack.js b/...c/components/trackVis/CallingCardTrack.js → ...tend/src/components/trackVis/QBedTrack.js
@@ -30,14 +30,14 @@ export const DEFAULT_OPTIONS = {
 const TOP_PADDING = 5;
 
 /**
- * Track specialized in showing calling card data.
+ * Track specialized in showing qBED data.
  * 
  * @author Silas Hsu, Daofeng Li, and Arnav Moudgil
  */
-class CallingCardTrack extends React.PureComponent {
+class QBedTrack extends React.PureComponent {
     static propTypes = Object.assign({}, Track.propsFromTrackContainer,
         {
-        data: PropTypes.array.isRequired, // PropTypes.arrayOf(CallingCard)
+        data: PropTypes.array.isRequired, // PropTypes.arrayOf(QBed)
         options: PropTypes.shape({
             height: PropTypes.number.isRequired, // Height of the track
             color: PropTypes.string, // Color to draw circle
@@ -115,15 +115,15 @@ class CallingCardTrack extends React.PureComponent {
         const {trackModel, viewRegion, width} = this.props;
         const {markerSize} = this.props.options;
         // const radius = height * tooltipRadius;
-        var cards = [];
-        // Get nearest CallingCards to cursor along x-axis
+        var quanta = [];
+        // Get nearest QBeds to cursor along x-axis
         for (let i = relativeX - markerSize; i <= relativeX + markerSize; i++) {
-            cards = cards.concat(this.xToValue[i]);
+            quanta = quanta.concat(this.xToValue[i]);
         }
         // Draw tooltip only if there are values near this x position
-        if (cards !== undefined && cards.length > 0) {
-            // Now find nearest CallingCards to the cursor along y-axis
-            const nearest = this.nearestCards(cards, relativeX, relativeY, markerSize);
+        if (quanta !== undefined && quanta.length > 0) {
+            // Now find nearest QBeds to the cursor along y-axis
+            const nearest = this.nearestCards(quanta, relativeX, relativeY, markerSize);
             if (nearest.length > 0) {
                 return (
                     <div>
@@ -138,27 +138,27 @@ class CallingCardTrack extends React.PureComponent {
         };
     }
 
-    formatCards = (cards) => {
+    formatCards = (quanta) => {
         const head = (<thead>
             <tr>
               <th scope="col">Value</th>
               <th scope="col">Strand</th>
               <th scope="col">Annotation</th>
             </tr>
           </thead>);
-        const rows = cards.slice(0, 10).map((card,i) => <tr key={i}><td>{card.value}</td><td>{card.strand}</td><td>{card.annotation}</td></tr>);
+        const rows = quanta.slice(0, 10).map((quantum,i) => <tr key={i}><td>{quantum.value}</td><td>{quantum.strand}</td><td>{quantum.annotation}</td></tr>);
         return <table className="table table-striped table-sm">{head}<tbody>{rows}</tbody></table>;
     }
 
-    // Return closest calling cards to the cursor
-    nearestCards = (cards, relativeX, relativeY, radius) => {
-        const distances = cards.map((card) => Math.pow(relativeX - card.relativeX, 2) + Math.pow(relativeY - card.relativeY, 2));
+    // Return closest calling quanta to the cursor
+    nearestCards = (quanta, relativeX, relativeY, radius) => {
+        const distances = quanta.map((quantum) => Math.pow(relativeX - quantum.relativeX, 2) + Math.pow(relativeY - quantum.relativeY, 2));
         // Avoid taking square roots if possible; compare to radius^2
         const mindist = Math.min(...distances);
         if (mindist < radius * radius) {
             var returnCards = [];
             for (var i = 0; i < distances.length; i++) {
-                if (Math.abs(distances[i]) === mindist) returnCards.push(cards[i]);
+                if (Math.abs(distances[i]) === mindist) returnCards.push(quanta[i]);
             }
             return returnCards;
         } else {
@@ -181,8 +181,8 @@ class CallingCardTrack extends React.PureComponent {
         return a;
     }
 
-    randomCards = (cards, n) => {
-        return this.shuffleArray(cards).slice(0, n);
+    randomCards = (quanta, n) => {
+        return this.shuffleArray(quanta).slice(0, n);
     }
 
     downSample(xToValue, sampleSize) {
@@ -205,7 +205,7 @@ class CallingCardTrack extends React.PureComponent {
         const {height, color, colorAboveMax, markerSize, opacity, show, sampleSize} = options;
         this.xToValue = data.length > 0 ? this.aggregateFeatures(data, viewRegion, width) : [];
         this.scales = this.computeScales(this.xToValue, height);
-        // Set relative coordinates for each CallingCard (used for tooltip)
+        // Set relative coordinates for each QBed (used for tooltip)
         for (let i = 0; i < this.xToValue.length; i++) {
             for (let j = 0; j < this.xToValue[i].length; j++) {
                 this.xToValue[i][j].relativeX = i;
@@ -227,7 +227,7 @@ class CallingCardTrack extends React.PureComponent {
         const visualizer = 
         (
             <HoverTooltipContext tooltipRelativeY={height} getTooltipContents={this.renderTooltip} useRelativeY={true} >
-                <CallingCardPlot
+                <QBedPlot
                     xToValue={this.xToValue}
                     scales={this.scales}
                     height={height}
@@ -249,7 +249,7 @@ class CallingCardTrack extends React.PureComponent {
     }
 }
 
-class CallingCardPlot extends React.PureComponent {
+class QBedPlot extends React.PureComponent {
     static propTypes = {
         xToValue: PropTypes.array.isRequired,
         scales: PropTypes.object.isRequired,
@@ -278,8 +278,8 @@ class CallingCardPlot extends React.PureComponent {
             return null;
         }
         const {scales, color, markerSize, alpha} = this.props;
-        return value.map((card,idx) => {
-            const y = scales.valueToY(card.value);
+        return value.map((quantum,idx) => {
+            const y = scales.valueToY(quantum.value);
             const key = `${x}-${idx}`;
             return <circle key={key} cx={x} cy={y} r={markerSize} fill="none" stroke={color} strokeOpacity={alpha} />;
         });
@@ -294,4 +294,4 @@ class CallingCardPlot extends React.PureComponent {
     }
 }
 
-export default CallingCardTrack;
+export default QBedTrack;
diff --git a/frontend/src/model/CallingCard.ts → frontend/src/model/QBed.ts b/frontend/src/model/CallingCard.ts → frontend/src/model/QBed.ts
@@ -2,39 +2,39 @@ import Feature from './Feature';
 import ChromosomeInterval from './interval/ChromosomeInterval';
 import BedRecord from '../dataSources/bed/BedRecord';
 
-enum CallingCardColumnIndex {
+enum QBedColumnIndex {
     VALUE=3,
     STRAND=4,
     ANNOTATION=5
 };
 
 
 /**
- * A data container for a calling card.
+ * A data container for a qBED object.
  * 
  * @author Daofeng Li and Arnav Moudgil
  */
-class CallingCard extends Feature {
+class QBed extends Feature {
     /*
     Input， strings like following
     chr1    51441754        51441758        1       -       CTAGAGACTGGC
     chr1    51441754        51441758        21      -       CTTTCCTCCCCA
     chr1    51982564        51982568        3       +       CGCGATCGCGAC
     chr1    52196476        52196480        1       +       AGAATATCTTCA
     /**
-     * Constructs a new CallingCard, given a string from tabix
+     * Constructs a new QBed, given a string from tabix
      *
      */
     annotation: any;
     value: number;
-    relativeX: number; // Store relative position of CallingCard in visualizer
-    relativeY: number; // Used to find nearest CallingCard to cursor for tooltip; also for downsampling
+    relativeX: number; // Store relative position of QBed in visualizer
+    relativeY: number; // Used to find nearest QBed to cursor for tooltip; also for downsampling
     constructor(bedRecord: BedRecord) {
         const locus = new ChromosomeInterval(bedRecord.chr, bedRecord.start, bedRecord.end);
-        super('', locus, bedRecord[CallingCardColumnIndex.STRAND]);
-        this.value = Number.parseFloat(bedRecord[CallingCardColumnIndex.VALUE]);
-        this.annotation = bedRecord[CallingCardColumnIndex.ANNOTATION];
+        super('', locus, bedRecord[QBedColumnIndex.STRAND]);
+        this.value = Number.parseFloat(bedRecord[QBedColumnIndex.VALUE]);
+        this.annotation = bedRecord[QBedColumnIndex.ANNOTATION];
     }
 }
 
-export default CallingCard;
+export default QBed;