plexora 0.0.30__tar.gz → 0.0.31__tar.gz

{plexora-0.0.30/plexora.egg-info → plexora-0.0.31}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plexora
-Version: 0.0.30
+Version: 0.0.31
 Summary: OpenSeadragon-based cellular image viewing and analysis tool.
 Author-email: BioCognia <support@biocognia.com>
 License-Expression: LicenseRef-Plexora-EULA-1.0

{plexora-0.0.30 → plexora-0.0.31}/plexora/client/src/css/main.css

@@ -1214,6 +1214,53 @@ html.is-native-dragging.has-drop-target body::after {
     gap: var(--space-4);
 }
 
+/* Title and subtitle on the left, the X on the right: the way out of the
+   form, in the corner every Plexora dialog puts it, rather than a Cancel
+   among the answers. */
+.requirements-head,
+.channel-names-head {
+    align-items: flex-start;
+    display: flex;
+    gap: var(--space-3);
+}
+
+.requirements-heading,
+.channel-names-heading {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+}
+
+/* Pulled up and out by its own padding, so the glyph -- not the button's
+   box -- lines up with the title's cap height and the form's right edge. */
+.requirements-close,
+.channel-names-close {
+    border-radius: var(--radius-sm);
+    flex: 0 0 auto;
+    margin: -4px -6px 0 0;
+    padding: 6px 8px;
+    transition: color var(--duration-fast) var(--ease-standard),
+                background-color var(--duration-fast) var(--ease-standard);
+}
+
+.requirements-close:hover:not(:disabled),
+.channel-names-close:hover {
+    background: var(--surface-2);
+}
+
+.requirements-close:focus-visible,
+.channel-names-close:focus-visible {
+    outline: 2px solid var(--accent-channel);
+    outline-offset: 1px;
+}
+
+.requirements-close:disabled {
+    cursor: default;
+    opacity: 0.4;
+}
+
 .requirements-title {
     margin: 0;
     font-size: 1.1rem;
@@ -1454,6 +1501,12 @@ html.is-native-dragging.has-drop-target body::after {
     gap: var(--space-2);
 }
 
+/* Skip, on a form that is not all optional. `.btn` sets `display`, which
+   defeats the hidden attribute -- there is no global guard in this app. */
+.requirements-actions > [hidden] {
+    display: none;
+}
+
 /* ------------------------------------------------------------------ */
 /* Column classifier — the marker/metadata split                        */
 /* Two boxes side by side, columns dragged between them (see            */
@@ -2181,6 +2234,12 @@ html.is-native-dragging.has-drop-target body::after {
     gap: var(--space-2);
 }
 
+/* The first stage's one action is Load, in its row; the way out is the X.
+   An empty row would still take the form's gap. */
+.channel-names-actions:empty {
+    display: none;
+}
+
 /* -- stage: which file --------------------------------------------- */
 
 /* One field, asked in one row: which machine, then which file on it. The
@@ -2200,15 +2259,6 @@ html.is-native-dragging.has-drop-target body::after {
     color: var(--text-secondary);
 }
 
-/* The chip names the chosen machine, and in this dialog it is competing with a
-   cluster path for one 560px row. Capped tighter than the import form's 12rem,
-   where there is a page's width to spend: the hint under the row spells the
-   name out in full, so what gets ellipsized here is never the only place it is
-   said. */
-.channel-names-modal .data-location-place {
-    max-width: 7rem;
-}
-
 .channel-names-path .field-hint {
     margin: 0;
     color: var(--text-muted);
@@ -2253,12 +2303,6 @@ html.is-native-dragging.has-drop-target body::after {
     white-space: nowrap;
 }
 
-/* Same reason as `.channel-names-modal .data-location-place`: a dialog is
-   560px and the chip is competing with a cluster path for the row. */
-dialog .file-source .data-location-place {
-    max-width: 7rem;
-}
-
 /* -- stage: which column ------------------------------------------- */
 
 .channel-names-check {
@@ -2580,10 +2624,10 @@ dialog .file-source .data-location-place {
 }
 
 .import-field-row > .form-control,
+.import-field-row > :where(.plx-machine-field) > .form-control,
 .import-field-row > .form-select,
 .import-field-row > .browse-button,
 .import-field-row > .browse-kind-split,
-.import-field-row > .data-location-toggle,
 .quick-view-path-row > input[type="text"],
 .quick-view-path-row > .sidebar-action {
     height: var(--control-height);
@@ -2592,8 +2636,13 @@ dialog .file-source .data-location-place {
 }
 
 /* Vertical centring is the height's job, not the padding's -- padding and
-   a fixed height fight each other the moment either one changes. */
+   a fixed height fight each other the moment either one changes.
+
+   `:where()` on the machine chip's box (machineChip.wrap) keeps an input in
+   one at the specificity it had as the row's own child, so a dialog that
+   sizes its fields (`.gene-modal .form-control`, 34px) still wins. */
 .import-field-row > .form-control,
+.import-field-row > :where(.plx-machine-field) > .form-control,
 .import-field-row > .form-select,
 .quick-view-path-row > input[type="text"] {
     padding-top: 0;
@@ -2613,12 +2662,14 @@ dialog .file-source .data-location-place {
    area: the box IS the target. Three classes deep, so it beats Bootstrap's
    `.form-control:focus`, which is injected after this sheet (see the note on
    `.requirements-modal .form-control:focus`). */
-.import-field-row.is-drop-over > .form-control {
+.import-field-row.is-drop-over > .form-control,
+.import-field-row.is-drop-over > .plx-machine-field > .form-control {
     border-color: var(--accent-channel);
     box-shadow: 0 0 0 3px var(--accent-channel-soft);
 }
 
-.import-field-row.is-drop-refused > .form-control {
+.import-field-row.is-drop-refused > .form-control,
+.import-field-row.is-drop-refused > .plx-machine-field > .form-control {
     border-color: var(--accent-danger);
     box-shadow: 0 0 0 3px var(--accent-danger-soft);
 }
@@ -2766,109 +2817,53 @@ dialog .file-source .data-location-place {
 
 /* ------------------------------------------------------------------ */
 /* Local / Remote — which machine a file is on                          */
-/* One switch per data field (see services/dataLocation.js), mounted    */
-/* INSIDE the field's row, immediately before the path box it governs.  */
-/* Every field carries its own, so a project can mix freely: image on   */
-/* a cluster, mask on a cluster, table on this computer.                */
+/* The home page's chip (views/machineChip.js), at the front of each    */
+/* data field's path box. Every field carries its own, so a project can */
+/* mix freely: image on a cluster, mask on a cluster, table here.       */
 /*                                                                      */
-/* A segmented control, and deliberately a quiet one. It appears three  */
-/* times on the import form and would shout if it carried colour; the   */
-/* active side is marked by a raised surface and full-strength text,    */
-/* which is enough. Status and colour live on the line below the field, */
-/* where there is one message rather than three.                        */
+/* The chip and its menu are the Import dialog's own classes            */
+/* (`.plx-import-machine`, `.plx-import-menu-*`, further down); what is */
+/* here is only what it takes to sit inside a form's input. It floats   */
+/* over the input's left padding, so the input keeps whatever its       */
+/* dialog gives a `.form-control` -- height, ground, focus ring, the    */
+/* red of a path that is not there. Status lives on the line below.     */
 /* ------------------------------------------------------------------ */
 
-.data-location {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    flex: 0 0 auto;
-}
-
-/* The track is a WELL and the active side is RAISED out of it: track darker
-   than the surface it sits on, active chip lighter. Inverted -- a chip darker
-   than its track -- and the active side reads as a hole punched in the
-   control rather than as the selected one. */
-.data-location-toggle {
-    display: inline-flex;
-    align-items: stretch;
-    /* The tooltip (services/tooltip.js) is what carries the meaning of the
-       two letters to a mouse, and it is placed from this box, so the flex
-       context must not squash it. */
-    flex: 0 0 auto;
-    /* The inset is what reads as "one of these two" rather than "a button".
-       `--dl-inset` is shared with the chip's radius below so the two curves
-       stay concentric at any size a caller scales this to. */
-    --dl-inset: 3px;
-    padding: var(--dl-inset);
-    gap: 2px;
-    background: var(--surface-0);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-sm);
-}
-
-/* One letter each. Sized as a square rather than by its text, so L and R --
-   which are different widths in every proportional face -- do not make the two
-   halves of the switch different sizes. Tabular figures for the same reason a
-   table uses them: the control must not change shape as it is toggled. */
-.data-location-option {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 22px;
-    background: transparent;
-    color: var(--text-muted);
-    border: 0;
-    border-radius: calc(var(--radius-sm) - var(--dl-inset));
-    padding: 4px 6px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.03em;
-    line-height: 1.3;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: color 120ms ease, background-color 120ms ease;
-}
-
-.data-location-option:hover {
-    color: var(--text-primary);
-}
-
-/* Raised out of the well, and tinted rather than coloured: which machine a
-   file is on is a statement of fact, not a status, so green-for-local /
-   red-for-remote would be reading a judgement into it that is not there. */
-.data-location-option.is-active {
-    background: var(--surface-2);
-    color: var(--text-primary);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
-                inset 0 0 0 1px var(--accent-channel-soft);
+.plx-machine-field {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    position: relative;
 }
 
-.data-location-option:focus-visible {
-    outline: 2px solid var(--accent-channel);
-    outline-offset: 1px;
+/* Three classes deep so it beats every dialog's own `.form-control`
+   padding (`.gene-modal .form-control`, `.import-page .form-control`).
+   The width is the chip's, measured as it changes (machineChip.wrap);
+   the fallback is "Local", for the frame before it is. */
+.import-field-row .plx-machine-field > .form-control {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-left: calc(var(--plx-machine-chip-width, 78px) + 12px);
+    width: 100%;
 }
 
-/* Which machine "Remote" currently means. A button rather than a label,
-   because changing machines must not require toggling back through Local
-   and losing the field's value on the way. */
-.data-location-place {
-    background: transparent;
-    border: 0;
-    border-bottom: 1px dotted var(--border-strong);
-    border-radius: 0;
-    color: var(--text-secondary);
-    padding: 2px 1px;
+.plx-machine-field > .plx-machine-chip {
+    bottom: 5px;
     font-size: 12px;
-    max-width: 12rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
+    height: auto;
+    left: 5px;
+    margin: 0;
+    /* A long server name ellipsizes before it crowds the path out. */
+    max-width: min(168px, 48%);
+    padding: 0 6px 0 8px;
+    position: absolute;
+    top: 5px;
+    z-index: 1;
 }
 
-.data-location-place:hover {
-    color: var(--text-primary);
+.plx-machine-field > .plx-machine-chip .plx-import-machine-label {
+    max-width: none;
+    min-width: 0;
 }
 
 .data-location-status {
@@ -6085,7 +6080,9 @@ dialog .file-source .data-location-place {
 
 /* -- The machine menu, fixed under the chip (importSample's `openMenu`). */
 .plx-import-menu {
-    animation: plx-import-menu-in 180ms var(--plx-import-ease-out);
+    /* The fallback is for the same menu opened outside the Import dialog,
+       which is where the variable is set (machineChip.js). */
+    animation: plx-import-menu-in 180ms var(--plx-import-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
     background: rgba(15, 20, 28, 0.98);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 10px;
@@ -8900,7 +8897,7 @@ dialog .file-source .data-location-place {
 .layer-card-retry {
     background: none;
     border: 1px solid currentColor;
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-control);
     color: inherit;
     cursor: pointer;
     font-size: 10px;
@@ -9022,7 +9019,7 @@ dialog .file-source .data-location-place {
 .layer-card-channel {
     background: var(--surface-2);
     border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-control);
     color: var(--text-primary);
     flex: 1 1 auto;
     font-size: 11px;
@@ -9469,7 +9466,7 @@ dialog .file-source .data-location-place {
     align-items: center;
     background: transparent;
     border: 0;
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-control);
     color: var(--text-muted);
     cursor: pointer;
     display: inline-flex;
@@ -9529,11 +9526,29 @@ dialog .file-source .data-location-place {
    the two controls are the same object to look at and to use.
    ----------------------------------------------------------------------- */
 
-.gradient-range-row {
+/* The bar's numbers stand under the BAR, not under the whole row: the row's
+   buttons (palette, Auto, an eye) come after the bar, and a scale that ran
+   under them too put the high value under the buttons rather than under the
+   end of the colours it names. A grid with the row flattened into it -- the
+   bar in the first column, each button in a column of its own -- and the
+   scale in the first column of the next line. The low value's first digit
+   then stands under the bar's left edge and the high value's last digit
+   under its right edge (the -4px gives back the boxes' own padding). Cell
+   Explorer did this alone first; the density map and the Visium heatmap had
+   the same misalignment. */
+.gradient-range {
     align-items: center;
-    display: flex;
-    gap: 6px;
-    min-width: 0;
+    column-gap: 6px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.gradient-range-row {
+    display: contents;
+}
+
+.gradient-range-row > * {
+    grid-row: 1;
 }
 
 /* Dimmed while whatever it colours is switched off, so the control says which
@@ -9605,11 +9620,8 @@ dialog .file-source .data-location-place {
 }
 
 /* The two ends, under the bar and not beside it: put inline they would take a
-   hundred pixels out of the bar they are read against. */
-.gradient-range-scale .plx-number {
-    --plx-number-width: 56px;
-}
-
+   hundred pixels out of the bar they are read against. Each takes half the
+   bar's width rather than a fixed 56px, which cut a long value off. */
 .gradient-range-scale {
     align-items: center;
     color: var(--text-secondary);
@@ -9617,10 +9629,29 @@ dialog .file-source .data-location-place {
     font-size: 11px;
     font-variant-numeric: tabular-nums;
     gap: 6px;
+    grid-column: 1;
+    grid-row: 2;
     justify-content: space-between;
     margin-top: 4px;
 }
 
+.gradient-range-scale .plx-number-group {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.gradient-range-scale .plx-number {
+    --plx-number-width: 100%;
+}
+
+.gradient-range-scale .plx-number-group:first-child {
+    margin-left: -4px;
+}
+
+.gradient-range-scale .plx-number-group:last-child {
+    margin-right: -4px;
+}
+
 /* The lower end reads left-to-right off the left of the bar. */
 .gradient-range-scale .plx-number-group:first-child {
     justify-content: flex-start;
@@ -10734,15 +10765,6 @@ dialog .file-source .data-location-place {
     color: var(--accent-channel);
 }
 
-/* The Local/Remote switch is dataLocation's own control -- a well with the
-   active letter raised out of it -- and keeps every bit of that. All it
-   needs here is the row's height, or a 30px switch beside a 34px box reads
-   as two rows that happen to overlap. The letters stretch to fill it, so
-   this is the only number to set. */
-.gene-modal .data-location-toggle {
-    height: 34px;
-}
-
 /* One line under the row, for the waits and failures getting hold of the
    file. It sits between the row and the hint, so it needs the hint's size
    rather than the 12px it takes in a full-width import form. */

{plexora-0.0.30 → plexora-0.0.31}/plexora/client/src/css/tokens.css

@@ -41,6 +41,16 @@
     --radius-sm: 6px;
     --radius-md: 8px;
     --radius-lg: 12px;
+    /* What the sidebar's corners mean, on the scale above. Every control --
+       button, field, select, segmented control, an icon button's hover ground,
+       a list row's -- takes --radius-control; a card takes --radius-card; a box
+       inside a card (a plot, a notice, the save-as form) is a control's size,
+       so the card's corner stays the outer one. Two values, so a button and the
+       field beside it can never disagree again: they did (6px against 2px).
+       Not for shapes: dots and swatches stay round, count badges and
+       progress tracks stay pills, key caps keep their own small corner. */
+    --radius-control: var(--radius-md);
+    --radius-card: var(--radius-lg);
     /* One height for every control that can share a horizontal row -- a path
        box, its Local/Remote switch, its File/Folder pair, the button beside
        it. Set here rather than per control so a row reads as one group
@@ -50,6 +60,38 @@
 
        See main.css's "Inline control rows". */
     --control-height: 40px;
+    /* A tool panel's measures -- the body of a card in the viewer's sidebar.
+       Every plugin panel is built from these, so four panels open at once
+       read as one sidebar rather than four authors. Cell Explorer is the
+       reference; website/content/docs/(guide)/plugins/build-a-plugin.mdx
+       ("Design the sidebar panel") is the rule, with the reasons.
+
+       Four type sizes and no others: names and values, then counts and
+       summaries, then captions and notes, then the footer band. */
+    --panel-font-body: 13px;
+    --panel-font-meta: 12px;
+    --panel-font-note: 11px;
+    --panel-font-footer: 10px;
+    /* Three heights for single-line controls, by where they stand:
+       - 34px: the select a panel is about, a text field, a link-out row;
+       - 28px: a line of buttons, or a segmented control, on its own line
+         (core's Cells control was already this);
+       - 24px: anything set inside a row -- an icon button (eye, menu, close),
+         a header's Run, a row's Approve.
+       A list row is 32px; one nested under it, 28px. Corners are
+       --radius-control throughout (above). */
+    --panel-control-height: 34px;
+    --panel-button-height: 28px;
+    --panel-row-height: 32px;
+    --panel-icon-button: 24px;
+    --panel-field-ground: rgba(255, 255, 255, 0.03);
+    --panel-hover-ground: rgba(255, 255, 255, 0.05);
+    /* The hairline between a panel's parts. Quieter than --border-subtle,
+       which is for edges of things; this only says "next part". */
+    --panel-rule: rgba(255, 255, 255, 0.07);
+    /* The step between a panel's blocks, and the space each side of a rule
+       is built from (see the guide: equal above and below). */
+    --panel-gap: 8px;
     --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
     --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.35);
     --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.4);