|
| 1 | +# neuDiff |
| 2 | + |
| 3 | +A (very simple) comparative visualization tool for exploring and comparing cell type pages from existing Cell Type Catalogues. This tool does not provide any new data, just basically shows two windows side-by-side. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +**neuDiff** is a static webpage that enables side-by-side comparison of cell types from neuroscience datasets. It provides an interactive interface for researchers to examine morphology, connectivity, and other properties of different cell types, either within the same dataset or across different datasets. |
| 8 | + |
| 9 | +## Features |
| 10 | + |
| 11 | +- **Side-by-Side Comparison**: View two cell type pages simultaneously in split-screen mode. |
| 12 | +- **Cross-Dataset Compatibility**: Compare cell types from different Janelia Cell Type Catalogues. |
| 13 | +- **Flexible Selection**: Compare different cell types within the same dataset, the same cell type across different datasets, or any combination thereof. |
| 14 | +- **URL State Management**: Share specific comparisons via URL parameters. |
| 15 | +- **Responsive Design**: Optimized for wide monitors. No fallback for smaller screens. |
| 16 | + |
| 17 | +## Getting Started |
| 18 | + |
| 19 | +### Prerequisites |
| 20 | + |
| 21 | +This is a static web application that requires only a modern web browser. No build process or dependencies are needed. |
| 22 | + |
| 23 | +### Installation |
| 24 | + |
| 25 | +1. Clone the repository: |
| 26 | + ```bash |
| 27 | + git clone <repository-url> |
| 28 | + cd neudiff |
| 29 | + ``` |
| 30 | + |
| 31 | +2. Serve the files using any static web server. For example: |
| 32 | + ```bash |
| 33 | + # Using Python 3 |
| 34 | + python -m http.server 8000 |
| 35 | + |
| 36 | + # Using Node.js http-server |
| 37 | + npx http-server |
| 38 | + ``` |
| 39 | + |
| 40 | +3. Open your browser and navigate to `http://localhost:8000` |
| 41 | + |
| 42 | +### Usage |
| 43 | + |
| 44 | +1. Select a dataset from the **Dataset A** dropdown menu |
| 45 | +2. Choose a cell type from the **Cell Type A** dropdown |
| 46 | +3. Select a dataset from the **Dataset B** dropdown menu |
| 47 | +4. Choose a cell type from the **Cell Type B** dropdown |
| 48 | +5. The interactive visualizations will appear side-by-side |
| 49 | + |
| 50 | +Click the **neuDiff** button in the top-left corner at any time to reset your selections and return to the welcome screen. |
| 51 | + |
| 52 | +## Implementation |
| 53 | + |
| 54 | +### Architecture |
| 55 | + |
| 56 | +neuDiff is built as a lightweight, client-side web application with the following structure: |
| 57 | + |
| 58 | +``` |
| 59 | +neudiff/ |
| 60 | +├── index.html # Main HTML structure |
| 61 | +├── scripts/ |
| 62 | +│ └── main.js # Core application logic |
| 63 | +├── styles/ |
| 64 | +│ ├── plume-all.css # UI framework styles |
| 65 | +│ └── main.css # Custom styles |
| 66 | +└── assets/ |
| 67 | + └── images/ # Image assets |
| 68 | +``` |
| 69 | + |
| 70 | +### Key Components |
| 71 | + |
| 72 | +#### Dataset Registry |
| 73 | + |
| 74 | +The application uses a dataset registry pattern to manage available datasets: |
| 75 | + |
| 76 | +```javascript |
| 77 | +datasetRegistry.add( |
| 78 | + "Dataset Name", |
| 79 | + "https://base-url-to-dataset/" |
| 80 | +); |
| 81 | +``` |
| 82 | + |
| 83 | +Default datasets include: |
| 84 | +- Male CNS |
| 85 | +- Female Adult Fly Brain |
| 86 | + |
| 87 | +#### Dynamic Content Loading |
| 88 | + |
| 89 | +Cell type data is dynamically fetched from the respective dataset repositories. The application: |
| 90 | +1. Parses JavaScript files from the source datasets to extract neuron type definitions |
| 91 | +2. Builds an index of available cell types |
| 92 | +3. Generates preview URLs for iframe embedding |
| 93 | +4. Handles cross-origin resource loading |
| 94 | + |
| 95 | +#### State Management |
| 96 | + |
| 97 | +- URL parameters encode the current selection state |
| 98 | +- Format: `?datasetA=<name>&celltypeA=<type>&datasetB=<name>&celltypeB=<type>` |
| 99 | +- Enables sharing specific comparisons via URL |
| 100 | + |
| 101 | +### Technologies Used |
| 102 | + |
| 103 | +- **HTML5**: Semantic markup and structure |
| 104 | +- **CSS3**: Styling with Plume CSS framework |
| 105 | +- **Vanilla JavaScript**: No framework dependencies for maximum compatibility |
| 106 | +- **Iframes**: For embedding cell type pages |
| 107 | + |
| 108 | +## Adding New Datasets |
| 109 | + |
| 110 | +To add a new dataset to neuDiff: |
| 111 | + |
| 112 | +1. Register the dataset in `scripts/main.js`: |
| 113 | + ```javascript |
| 114 | + datasetRegistry.add( |
| 115 | + "Your Dataset Name", |
| 116 | + "https://url-to-your-dataset/" |
| 117 | + ); |
| 118 | + ``` |
| 119 | + |
| 120 | +2. Ensure the dataset follows the Janelia Cell Type Catalogue structure with: |
| 121 | + - A `neuron_data.js` file containing cell type definitions |
| 122 | + - Individual cell type pages accessible via predictable URLs |
| 123 | + |
| 124 | +## Authors |
| 125 | + |
| 126 | +- Frank Loesche (https://github.com/loeschef) - Initial development and implementation |
| 127 | + |
| 128 | +## License |
| 129 | + |
| 130 | +This project is licensed under the GNU General Public License v3.0 (GPL-3.0) - see below for details. |
| 131 | + |
| 132 | +## Display Recommendations |
| 133 | + |
| 134 | +neuDiff works best on wide monitors where both cell types can be viewed side-by-side. For smaller screens or tablets, consider opening different cell type pages in separate browser tabs for optimal viewing. |
0 commit comments