Merge pull request #23 from broadinstitute/data-preview-26q1

Datafile preview 26q1

Author: naquib314

README.md

@@ -123,6 +123,14 @@ docker stop ministack    # stop
 docker rm ministack      # remove entirely
 ```
 
+### File uploads and the S3 copy workaround
+
+> **Warning:** File uploads may fail with MiniStack because MiniStack omits the `ETag` header that boto3's high-level `Bucket.copy()` uses for validation. When `S3_ENDPOINT_URL` is set in `settings.cfg`, `aws.copy_object()` (in `taiga2/third_party_clients/aws.py`) automatically uses the low-level client API which does not require ETags. When `S3_ENDPOINT_URL` is empty or unset, the standard resource-level `Bucket.copy()` is used.
+>
+> If you see upload failures locally (errors mentioning ETag or copy validation), make sure `S3_ENDPOINT_URL` is set to your MiniStack endpoint (`http://localhost:4566`).
+>
+> **Note on tests:** The test suite does not set `S3_ENDPOINT_URL`, so tests always exercise the `Bucket.copy()` path. If you add `S3_ENDPOINT_URL` to the test config, `imp_conv_test.py` will fail because `MockS3Client` does not implement `copy_object`. This is intentional — tests validate the production (real AWS) code path.
+
 ### Switching back to no-S3 mode
 
 Set `S3_ENDPOINT_URL = ''` and clear the AWS keys in `settings.cfg`. The app runs fine without S3 — you just can't upload files.

autoapp.py

@@ -9,7 +9,7 @@
 
 from werkzeug.middleware.dispatcher import DispatcherMiddleware
 
-settings_file = os.getenv("TAIGASETTINGSFILE", "settings.cfg")
+settings_file = os.getenv("TAIGA_SETTINGS_FILE", "settings.cfg")
 
 print("Using settings from: {}".format(settings_file))
 

migrations/versions/495216f833f4_add_datafile_previews.py

@@ -0,0 +1,29 @@
+"""add datafile_previews table
+
+Revision ID: 495216f833f4
+Revises: c1be0bfabe2e
+Create Date: 2026-04-27 12:44:54.336754
+
+"""
+
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = "495216f833f4"
+down_revision = "c1be0bfabe2e"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    op.create_table(
+        "datafile_previews",
+        sa.Column("datafile_id", sa.String(80), sa.ForeignKey("datafiles.id"), primary_key=True),
+        sa.Column("preview_data", sa.JSON(), nullable=True),
+        sa.Column("created_at", sa.DateTime(), nullable=False, server_default=sa.func.now()),
+    )
+
+
+def downgrade():
+    op.drop_table("datafile_previews")

react_frontend/src/components/DatasetView.tsx

@@ -7,6 +7,7 @@ import update from "immutability-helper";
 
 import { LeftNav } from "./LeftNav";
 import { EntryUsersPermissions } from "./modals/EntryUsersPermissions";
+import { PreviewModal } from "./modals/PreviewModal";
 
 import * as Models from "../models/models";
 import { TaigaApi } from "../models/api";
@@ -94,6 +95,9 @@ export interface DatasetViewState {
       readableTaigaId?: string;
     }
   >;
+
+  previewFileId?: string;
+  previewFileName?: string;
 }
 
 const buttonUploadNewVersionStyle = {
@@ -1071,6 +1075,20 @@ export class DatasetView extends React.Component<
                 {this.state.figshareLinkedFiles && <td>{figshareLinked}</td>}
                 <td>{conversionTypesOutput}</td>
                 <td>{copy_button}</td>
+                <td>
+                  <button
+                    className="btn btn-default btn-xs"
+                    title="Preview data"
+                    onClick={() =>
+                      this.setState({
+                        previewFileId: df.id,
+                        previewFileName: df.name,
+                      })
+                    }
+                  >
+                    <span className="glyphicon glyphicon-eye-open" />
+                  </button>
+                </td>
               </tr>
             );
           });
@@ -1363,6 +1381,7 @@ export class DatasetView extends React.Component<
                       )}
                       <th>Download</th>
                       <th>Datafile Id</th>
+                      <th>Preview</th>
                     </tr>
                   </thead>
                   <tbody>{entries}</tbody>
@@ -1423,6 +1442,16 @@ export class DatasetView extends React.Component<
             cancel={() => this.cancelDeprecation()}
             save={(reason) => this.deprecateDatasetVersion(reason)}
           />
+
+          <PreviewModal
+            isOpen={!!this.state.previewFileId}
+            datafileId={this.state.previewFileId || null}
+            datafileName={this.state.previewFileName || null}
+            tapi={this.getTapi()}
+            onClose={() =>
+              this.setState({ previewFileId: undefined, previewFileName: undefined })
+            }
+          />
         </div>
       );
     }

react_frontend/src/components/modals/PreviewModal.scss

@@ -0,0 +1,104 @@
+.Modal {
+  position: absolute;
+  margin: auto;
+  top: 30px;
+  left: 5vw;
+  right: 5vw;
+  bottom: 30px;
+  border-radius: 4px;
+  outline: none;
+  border: none;
+  padding: 0;
+  overflow: visible;
+  max-width: 1800px;
+}
+
+.Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1050;
+}
+
+.modalBody {
+  overflow: auto;
+  max-height: calc(100vh - 180px);
+  padding: 15px 20px;
+}
+
+.tableWrapper {
+  overflow: auto;
+  max-height: calc(100vh - 260px);
+  border: 1px solid #ddd;
+}
+
+.previewTable {
+  margin-bottom: 0;
+  font-size: 13px;
+  white-space: nowrap;
+
+  th, td {
+    padding: 4px 8px !important;
+    border: 1px solid #ddd !important;
+    vertical-align: middle !important;
+  }
+
+  thead th {
+    position: sticky;
+    top: 0;
+    background-color: #f5f5f5;
+    z-index: 2;
+    font-weight: 600;
+  }
+}
+
+.rowNameCell {
+  position: sticky;
+  left: 0;
+  background-color: #f9f9f9;
+  font-weight: 600;
+  z-index: 1;
+}
+
+.cornerCell {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  background-color: #f5f5f5;
+}
+
+.dimensionsBadge {
+  color: #777;
+  font-size: 13px;
+  font-weight: normal;
+  margin-left: 10px;
+}
+
+.footerNote {
+  color: #777;
+  font-size: 12px;
+  margin-top: 8px;
+  font-style: italic;
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  color: #777;
+  font-size: 16px;
+}
+
+.emptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  color: #999;
+  font-size: 15px;
+}