feat: Rename cell to protein.

chanzuckerberg · Dec 11, 2024 · 889c11c · 889c11c
1 parent fd8b47b
commit 889c11c
Show file tree

Hide file tree

Showing 33 changed files with 111 additions and 105 deletions.
diff --git a/client/.prettierignore b/client/.prettierignore
@@ -0,0 +1 @@
+index_template.html
diff --git a/client/configuration/webpack/obsoleteHTMLTemplate.html b/client/configuration/webpack/obsoleteHTMLTemplate.html
@@ -22,7 +22,7 @@
 >
   <img
     src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/cellxgene-logo.png"
-    style="width: 320px;"
+    style="width: 320px"
   />
   <div
     style="
@@ -37,36 +37,34 @@
       max-width: 550px;
     "
   >
-    <div style="margin-bottom: 0; font-weight: bolder; font-size: 1.2em;">
+    <div style="margin-bottom: 0; font-weight: bolder; font-size: 1.2em">
       Unsupported Browser
     </div>
-    <div style="margin-top: 0;">
-      cellxgene is currently supported on the following browsers
+    <div style="margin-top: 0">
+      proteinxlocation is currently supported on the following browsers
     </div>
-    <div
-      style="display: flex; justify-content: space-around; margin-top: 16px;"
-    >
+    <div style="display: flex; justify-content: space-around; margin-top: 16px">
       <a
         href="https://www.google.com/chrome/?hl=en%22"
         aria-label="Download Google Chrome"
       >
         <img
           src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/chrome.png"
-          style="width: 80px; height: 80px;"
+          style="width: 80px; height: 80px"
         />
         <div>Chrome &gt; 60</div>
       </a>
       <a href="https://www.mozilla.com/firefox/" aria-label="Download Firefox">
         <img
           src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/firefox.png"
-          style="width: 80px; height: 80px;"
+          style="width: 80px; height: 80px"
         />
         <div>Firefox ≥ 60</div>
       </a>
       <a href="//www.microsoft.com/edge" aria-label="Download Edge">
         <img
           src="https://cellxgene.cziscience.com/s3/cellxgene/static/images/edge.png"
-          style="width: 80px; height: 80px;"
+          style="width: 80px; height: 80px"
         />
         <div>Edge ≥ 79</div>
       </a>

diff --git a/client/index.html b/client/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>CELL&times;GENE | Annotate</title>
+    <title>PROTEIN&times;LOCATION | Annotate</title>
     <style>
       html,
       body,

diff --git a/client/index_template.html b/client/index_template.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>CELL&times;GENE | Annotate</title>
+    <title>PROTEIN&times;LOCATION | Annotate</title>
     <style>
       html,
       body,
@@ -37,27 +37,31 @@
   </head>
   <body>
     <script type="text/javascript">
+      // Global configuration for CELLXGENE
       window.CELLXGENE = {};
       window.CELLXGENE.API = {
         prefix: `${location.origin}${location.pathname}api/`,
         version: "v0.2/",
       };
     </script>
-    <noscript
-      >If you're seeing this message, that means
+    <noscript>
+      If you're seeing this message, that means
       <strong>JavaScript has been disabled on your browser</strong>, please
       <strong>enable JS</strong> to make this app work.
     </noscript>
 
     <div id="root"></div>
+
+    <!-- Dynamically injected scripts -->
     {% for script in SCRIPTS -%}
-    <script type="text/javascript"
+    <script type="text/javascript" 
       {{ ('integrity="%s"' % script.integrity) | safe if script.integrity }}
       {{ ('crossorigin="%s"' % script.crossorigin) | safe if script.crossorigin }}
-      src="{{script.src | safe}}"
-    ></script>
+      src="{{script.src | safe}}">
+    </script>
     {%- endfor %}
 
+    <!-- Inline scripts included dynamically -->
     {% for ils in INLINE_SCRIPTS %}
     <script type="text/javascript" no-csp-hash>{% include ils %}</script>
     {% endfor %}

diff --git a/client/package.json b/client/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "cellxgene",
+  "name": "proteinxlocation",
   "version": "1.3.0",
   "license": "MIT",
-  "description": "cellxgene is a web application for the interactive exploration of single cell sequence data.",
-  "repository": "https://github.com/chanzuckerberg/cellxgene",
+  "description": "proteinxlocation is a web application for the interactive exploration of single cell sequence data.",
+  "repository": "https://github.com/czbiohub-sf/proteinxlocation",
   "scripts": {
     "build": "npm run clean && webpack --config",
     "clean": "rimraf build",

diff --git a/client/src/actions/annotation.js b/client/src/actions/annotation.js
@@ -142,7 +142,7 @@ export const annotationCreateLabelInCategory =
   (categoryName, labelName, assignSelected) => async (dispatch, getState) => {
     /*
   Add a new label to a user-defined category.  If assignSelected is true, assign
-  the label to all currently selected cells.
+  the label to all currently selected proteins.
   */
     const { annoMatrix: prevAnnoMatrix, obsCrossfilter: prevObsCrossfilter } =
       getState();
@@ -248,7 +248,7 @@ export const annotationLabelCurrentSelection =
     );
 
     dispatch({
-      type: "annotation: label current cell selection",
+      type: "annotation: label current protein selection",
       metadataField: categoryName,
       label: labelName,
       obsCrossfilter,

diff --git a/client/src/actions/index.js b/client/src/actions/index.js
@@ -141,7 +141,7 @@ const dispatchDiffExpErrors = (dispatch, response) => {
   switch (response.status) {
     case 403:
       dispatchNetworkErrorMessageToUser(
-        "Too many cells selected for differential experesion calculation - please make a smaller selection."
+        "Too many proteins selected for differential experesion calculation - please make a smaller selection."
       );
       break;
     case 501:

diff --git a/client/src/actions/selection.js b/client/src/actions/selection.js
@@ -186,7 +186,7 @@ export const setCellSetFromSelection = (cellSetId) => (dispatch, getState) => {
   const selected = obsCrossfilter.allSelectedLabels();
 
   dispatch({
-    type: `store current cell selection as differential set ${cellSetId}`,
+    type: `store current protein selection as differential set ${cellSetId}`,
     data: selected.length > 0 ? selected : null,
   });
 };
diff --git a/client/src/annoMatrix/annoMatrix.js b/client/src/annoMatrix/annoMatrix.js
@@ -67,7 +67,7 @@ export default class AnnoMatrix {
       * nObs, nVar - size of each dimension.  These will accurately reflect the
         size of the current annoMatrix view.  For example, if you subset the view,
         the nObs will be smaller.
-      * rowIndex - a rowIndex shared by all data on this view (ie, the list of cells).
+      * rowIndex - a rowIndex shared by all data on this view (ie, the list of proteins).
         The row index labels are as defined by the base dataset from the server.
       * isView - true if this is a view, false if not.
       * viewOf - pointer to parent annomatrix if a view, undefined/null if not a view.
@@ -209,7 +209,7 @@ export default class AnnoMatrix {
        the columns:
 
 			const df = await fetch("obs", ["n_genes", "louvain"])
-      console.log("Cell 0 has category: ", df.at(0, "louvain"));
+      console.log("Protein 0 has category: ", df.at(0, "louvain"));
 
     3. Fetch an entire X (expression counts) column that has a var annotation
        value "TYMP" in the var index.
@@ -272,7 +272,7 @@ export default class AnnoMatrix {
 
     Example:
 
-      addObsAnnoCategory("my cell type", "left toenail") -> AnnoMatrix
+      addObsAnnoCategory("my protein type", "left toenail") -> AnnoMatrix
 
     */
     _subclassResponsibility();
@@ -353,7 +353,7 @@ export default class AnnoMatrix {
 
     Example:
 
-      renameObsColumn('cell type', 'old cell type') -> AnnoMatrix.
+      renameObsColumn('protein type', 'old protein type') -> AnnoMatrix.
 
     */
     _subclassResponsibility();
@@ -363,8 +363,8 @@ export default class AnnoMatrix {
   async setObsColumnValues(col, obsLabels, value) {
     /*
     Set all obs with label in array 'obsLabels' to have 'value'.  Typical use would be
-    to set a group of cells to have a label on a user-created categorical anntoation
-    (eg set all selected cells to have a label).
+    to set a group of proteins to have a label on a user-created categorical anntoation
+    (eg set all selected proteins to have a label).
 
     NOTE: async method, as it may need to fetch.
 

diff --git a/client/src/components/app.js b/client/src/components/app.js
@@ -41,7 +41,7 @@ class App extends React.Component {
     const { loading, error, graphRenderCounter } = this.props;
     return (
       <Container>
-        <Helmet title="CELL&times;GENE | Annotate" />
+        <Helmet title="PROTEIN&times;LOCATION | Annotate" />
         {loading ? (
           <div
             style={{
@@ -51,7 +51,7 @@ class App extends React.Component {
               left: window.innerWidth / 2 - 50,
             }}
           >
-            loading cellxgene
+            loading proteinxlocation
           </div>
         ) : null}
         {error ? (
@@ -63,7 +63,7 @@ class App extends React.Component {
               left: window.innerWidth / 2 - 50,
             }}
           >
-            error loading cellxgene
+            error loading proteinxlocation
           </div>
         ) : null}
         {loading || error ? null : (

diff --git a/client/src/components/autosave/index.js b/client/src/components/autosave/index.js
@@ -56,7 +56,7 @@ class Autosave extends React.Component {
   };
 
   needToSaveObsAnnotations = () => {
-    /* return true if we need to save obs cell labels, false if we don't */
+    /* return true if we need to save obs protein labels, false if we don't */
     const { annoMatrix, lastSavedAnnoMatrix } = this.props;
     return actions.needToSaveObsAnnotations(annoMatrix, lastSavedAnnoMatrix);
   };

diff --git a/client/src/components/categorical/annoSelect.js b/client/src/components/categorical/annoSelect.js
@@ -27,13 +27,13 @@ class DuplicateCategorySelect extends React.PureComponent {
           }
           filterable={false}
           itemRenderer={(d, { handleClick }) => (
-              <MenuItem
-                data-testclass="duplicate-category-dropdown-option"
-                onClick={handleClick}
-                key={d}
-                text={d}
-              />
-            )}
+            <MenuItem
+              data-testclass="duplicate-category-dropdown-option"
+              onClick={handleClick}
+              key={d}
+              text={d}
+            />
+          )}
           noResults={<MenuItem disabled text="No results." />}
           onItemSelect={(d) => {
             handleModalDuplicateCategorySelection(d);
@@ -42,7 +42,7 @@ class DuplicateCategorySelect extends React.PureComponent {
           {/* children become the popover target; render value here */}
           <Button
             data-testid="duplicate-category-dropdown"
-            text={categoryToDuplicate || "None (all cells 'unassigned')"}
+            text={categoryToDuplicate || "None (all proteins 'unassigned')"}
             rightIcon="double-caret-vertical"
           />
         </Select>

diff --git a/client/src/components/categorical/category/annoDialogAddLabel.js b/client/src/components/categorical/category/annoDialogAddLabel.js
@@ -60,7 +60,8 @@ class Category extends React.PureComponent {
     return isLabelErroneous(name, metadataField, schema);
   };
 
-  instruction = (label) => labelPrompt(this.labelNameError(label), "New, unique label", ":");
+  instruction = (label) =>
+    labelPrompt(this.labelNameError(label), "New, unique label", ":");
 
   handleChangeOrSelect = (label) => {
     this.setState({ newLabelText: label });
@@ -85,7 +86,7 @@ class Category extends React.PureComponent {
           instruction={this.instruction(newLabelText)}
           cancelTooltipContent="Close this dialog without adding a label."
           primaryButtonText="Add label"
-          secondaryButtonText={`Add label & assign ${obsCrossfilter.countSelected()} selected cells`}
+          secondaryButtonText={`Add label & assign ${obsCrossfilter.countSelected()} selected proteins`}
           handleSecondaryButtonSubmit={this.addLabelAndAssignCells}
           text={newLabelText}
           validationError={this.labelNameError(newLabelText)}

diff --git a/client/src/components/categorical/category/index.js b/client/src/components/categorical/category/index.js
@@ -443,7 +443,7 @@ const CategoryHeader = React.memo(
             isUserAnno={isUserAnno}
             createText="Add a new label to this category"
             editText="Edit this category's name"
-            deleteText="Delete this category, all associated labels, and remove all cell assignments"
+            deleteText="Delete this category, all associated labels, and remove all protein assignments"
           />
 
           <Tooltip

diff --git a/client/src/components/categorical/value/index.js b/client/src/components/categorical/value/index.js
@@ -122,7 +122,8 @@ class CategoryValue extends React.Component {
     return isLabelErroneous(name, metadataField, schema);
   };
 
-  instruction = (label) => labelPrompt(this.labelNameError(label), "New, unique label", ":");
+  instruction = (label) =>
+    labelPrompt(this.labelNameError(label), "New, unique label", ":");
 
   activateEditLabelMode = () => {
     const { dispatch, metadataField, categoryIndex, label } = this.props;
@@ -268,7 +269,7 @@ class CategoryValue extends React.Component {
   ) => {
     /*
       Knowing that colorScale is based off continuous data,
-      createHistogramBins fetches the continuous data in relation to the cells relevant to the category value.
+      createHistogramBins fetches the continuous data in relation to the proteins relevant to the category value.
       It then separates that data into 50 bins for drawing the mini-histogram
     */
     const groupBy = categoryData.col(metadataField);
@@ -310,7 +311,7 @@ class CategoryValue extends React.Component {
   ) => {
     /*
       Knowing that the color scale is based off of categorical data,
-      createOccupancyStack obtains a map showing the number if cells per colored value
+      createOccupancyStack obtains a map showing the number if proteins per colored value
       Using the colorScale a stack of colored bars is drawn representing the map
      */
     const groupBy = categoryData.col(metadataField);
@@ -350,16 +351,16 @@ class CategoryValue extends React.Component {
   isAddCurrentSelectionDisabled(crossfilter, category, value) {
     /*
     disable "add current selection to label", if one of the following is true:
-    1. no cells are selected
-    2. all currently selected cells already have this label, on this category
+    1. no proteins are selected
+    2. all currently selected proteins already have this label, on this category
     */
     const { categoryData } = this.props;
 
-    // 1. no cells selected?
+    // 1. no proteins selected?
     if (crossfilter.countSelected() === 0) {
       return true;
     }
-    // 2. all selected cells already have the label
+    // 2. all selected proteins already have the label
     const mask = crossfilter.allSelectedMask();
     if (
       AnnotationsHelpers.allHaveLabelByMask(categoryData, category, value, mask)

diff --git a/client/src/components/categorical/value/occupancy.js b/client/src/components/categorical/value/occupancy.js
@@ -19,7 +19,7 @@ class Occupancy extends React.PureComponent {
   createHistogram = () => {
     /*
       Knowing that colorScale is based off continous data,
-      createHistogram fetches the continous data in relation to the cells releveant to the catagory value.
+      createHistogram fetches the continous data in relation to the proteins releveant to the catagory value.
       It then seperates that data into 50 bins for drawing the mini-histogram
     */
     const { metadataField, categoryData, colorData, categoryValue } =
@@ -72,7 +72,7 @@ class Occupancy extends React.PureComponent {
   createOccupancyStack = () => {
     /*
       Knowing that the color scale is based off of catagorical data,
-      createOccupancyStack obtains a map showing the number if cells per colored value
+      createOccupancyStack obtains a map showing the number if proteins per colored value
       Using the colorScale a stack of colored bars is drawn representing the map
      */
     const {