Merge remote-tracking branch 'origin/dev' into dev

pephub/routers/api/v1/namespace.py

@@ -42,6 +42,8 @@
 from ....helpers import parse_user_file_upload, split_upload_files_on_init_file
 from ...models import FavoriteRequest, ProjectJsonRequest, ProjectRawModel
 
+from attribute_standardizer import AttrStandardizer
+
 load_dotenv()
 
 namespaces = APIRouter(prefix="/api/v1/namespaces", tags=["namespace"])
@@ -456,3 +458,15 @@ async def get_archive(namespace: str, agent: PEPDatabaseAgent = Depends(get_db))
         item.file_path = os.path.join(ARCHIVE_URL_PATH, item.file_path)
 
     return result
+
+
+@namespace.get(
+    "/standardizer_schemas",
+    summary="Get metadata of all archived files of all projects in the namespace",
+)
+async def get_schemas(namespace: str, agent: PEPDatabaseAgent = Depends(get_db)):
+
+    model = AttrStandardizer("ENCODE")
+    schemas = model.get_available_schemas()
+
+    return schemas

pephub/routers/api/v1/project.py

@@ -1182,3 +1182,22 @@ async def get_standardized_cols(
         )
 
     return StandardizerResponse(results=results)
+
+
+@project.get(
+    "/history/{history_id}/zip",
+    summary="Zip a project history by id",
+    response_class=FileResponse,
+)
+def get_zip_snapshot(
+    namespace: str,
+    project: str,
+    history_id: int,
+    tag: str = DEFAULT_TAG,
+):
+    """
+    Get a project dict from history by id
+    """
+
+    schemas = model.show_available_schemas()
+    return schemas

web/src/api/namespace.ts

@@ -363,3 +363,9 @@ export const getNamespaceArchive = (namespace: string) => {
   const url = `${API_BASE}/namespaces/${namespace}/archive`;
   return axios.get<ArchiveResponse>(url).then((res) => res.data);
 };
+
+export const getStandardizerSchemas = (namespace: string) => {
+  const url = `${API_BASE}/namespaces/${namespace}/standardizer_schemas`;
+  return axios.get<string[]>(url).then((res) => res.data);
+};
+

web/src/components/browse/project-accordion.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { Markdown } from '../markdown/render';
 import { ProjectAnnotation } from '../../../types';
-import { dateStringToDateTime } from '../../utils/dates'
+import { dateStringToDateTime, dateStringToDateTimeShort } from '../../utils/dates'
 
 type Props = {
   projects: ProjectAnnotation[];
@@ -29,7 +29,14 @@ export const ProjectAccordion = (props: Props) => {
             >
               <span style={{minWidth: '2.5em'}}>{index + 1}.</span>
               <span className='w-75'>{project.namespace}/<span className='fw-semibold'>{project.name}</span>:{project.tag}</span>
-              <span style={{marginLeft: '10em', minWidth: '4.5em'}} className='text-center text-sm border border-dark rounded-2 px-2 py-1'>{project.stars_number} Stars</span>
+
+              <span className='text-xs text-start d-flex justify-content-between' style={{width: '15%'}}>
+
+                <span className='ps-1' style={{minWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}><span className='fw-medium'>Sample Count: </span>{project.number_of_samples}</span>
+                <span> | </span>
+                <span className='ps-1' style={{minWidth: '20%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}><span className='fw-medium'>Stars: </span>{project.stars_number}</span>
+
+              </span>
             </button>
           </h2>
           <div
@@ -42,11 +49,10 @@ export const ProjectAccordion = (props: Props) => {
               <div className='row'>
                 <div className='col'>
                   {project.description ? <Markdown>{project.description}</Markdown> : <p className='fst-italic'>No description</p>}
-                  <p className='m-0 text-sm'><span className='fw-semibold'>Sample Count:</span> {project.number_of_samples}</p>
-                  <p className='m-0 text-sm'><span className='fw-semibold'>Created:</span> {dateStringToDateTime(project.submission_date)}</p>
-                  <p className='m-0 text-sm'><span className='fw-semibold'>Updated:</span> {dateStringToDateTime(project.last_update_date)}</p>
+                  <span className='m-0 pe-4 text-sm'><span className='fw-medium'>Created:</span> {dateStringToDateTime(project.submission_date)}</span>
+                  <span className='m-0 text-sm'><span className='fw-medium'>Updated:</span> {dateStringToDateTime(project.last_update_date)}</span>
                 </div>
-                <div className='col-1 d-flex align-items-center justify-content-end'>
+                <div className='col-2 d-flex align-items-center justify-content-end'>
                   <a
                     className='btn btn-dark fw-medium'
                     href={`${project.namespace}/${project.name}?tag=${project.tag}`}

web/src/components/layout/nav/nav-mobile.tsx

@@ -85,26 +85,26 @@ export const MobileNav = () => {
             <Dropdown.Divider />
           </Fragment>
         )}
-        <Dropdown.Item href="https://github.com/pepkit/pephub">
-          <i className="bi bi-github me-2" />
-          GitHub
+        <Dropdown.Item href="/search">
+          <i className="bi bi-search me-2" />
+          Search
         </Dropdown.Item>
-        <Dropdown.Item href="/schemas">
-          <i className="bi bi-file-earmark-check me-2" />
-          Schemas
+        <Dropdown.Item href="/browse">
+          <i className="bi bi-globe2 me-2" />
+          Browse
         </Dropdown.Item>
         <Dropdown.Item href="/validate">
           <i className="bi bi-check-circle me-2" />
           Validation
         </Dropdown.Item>
-        <Dropdown.Item href="/search">
-          <i className="bi bi-search me-2" />
-          Search
-        </Dropdown.Item>
         <Dropdown.Item href="/about">
-          <i className="bi bi-info-circle me-2" />
+          <i className="bi bi-file-earmark-text me-2" />
           Docs
         </Dropdown.Item>
+        <Dropdown.Item href="https://github.com/pepkit/pephub">
+          <i className="bi bi-github me-2" />
+          GitHub
+        </Dropdown.Item>
         <Dropdown.Divider />
                 <Dropdown.Item as="a" href="https://github.com/pepkit/pephub/discussions" target="_blank" rel="noopener noreferrer">
                   {/*<i className="bi bi-pencil-square me-1"></i>*/}

web/src/components/modals/standardize-metadata.tsx

@@ -9,6 +9,7 @@ import { useEditProjectMetaMutation } from '../../hooks/mutations/useEditProject
 import { useProjectAnnotation } from '../../hooks/queries/useProjectAnnotation';
 import { useSampleTable } from '../../hooks/queries/useSampleTable';
 import { useStandardize } from '../../hooks/queries/useStandardize';
+import { useStandardizerSchemas } from '../../hooks/queries/useStandardizerSchemas';
 import { formatToPercentage } from '../../utils/etc';
 import { arraysToSampleList, sampleListToArrays } from '../../utils/sample-table';
 import { ProjectMetaEditForm } from '../forms/edit-project-meta';
@@ -31,8 +32,6 @@ type Props = {
 type TabDataRow = string[];
 type TabData = TabDataRow[];
 type SelectedValues = Record<string, string>;
-type AvailableSchemas = 'ENCODE' | 'FAIRTRACKS';
-
 type StandardizedData = Record<string, Record<string, number>>;
 
 export const StandardizeMetadataModal = (props: Props) => {
@@ -50,6 +49,8 @@ export const StandardizeMetadataModal = (props: Props) => {
     setResetStandardizedData,
   } = props;
 
+  const { data: schemaOptions} = useStandardizerSchemas(namespace);
+
   const tabDataRaw = newSamples;
   const tabData = tabDataRaw[0]
     .map((_, colIndex) => tabDataRaw.map((row) => row[colIndex]))
@@ -62,7 +63,7 @@ export const StandardizeMetadataModal = (props: Props) => {
   const originalCols: string[] = useMemo(() => Object.keys(tabData), []);
   const newCols: string[] = Object.keys(tabData);
 
-  const [selectedOption, setSelectedOption] = useState<{ value: AvailableSchemas; label: string } | null>(null);
+  const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
   const [selectedValues, setSelectedValues] = useState<SelectedValues>({});
   const [whereDuplicates, setWhereDuplicates] = useState<number[] | null>(null);
 
@@ -220,17 +221,11 @@ export const StandardizeMetadataModal = (props: Props) => {
                       styles={{
                         control: (provided) => ({
                           ...provided,
-                          borderRadius: '.333333em', // Left radii set to 0, right radii kept at 4px
+                          borderRadius: '.375em', // Left radii set to 0, right radii kept at 4px
                         }),
                       }}
-                      options={[
-                        // @ts-ignore
-                        { value: 'ENCODE', label: 'ENCODE' },
-                        // @ts-ignore
-                        { value: 'FAIRTRACKS', label: 'Fairtracks' },
-                        // @ts-ignore
-                        { value: 'BEDBASE', label: 'BEDBASE' },
-                      ]}
+                      // @ts-ignore
+                      options={schemaOptions?.map(option => ({ value: option, label: option }))}
                       defaultValue={selectedOption}
                       value={selectedOption}
                       onChange={(selectedOption) => {

web/src/components/namespace/project-cards/project-card-dropdown.tsx

@@ -29,9 +29,6 @@ export const ProjectCardDropdown: FC<Props> = (props) => {
 
   const [localStarred, setLocalStarred] = useState(isStarred);
 
-  console.log('isStarred ' + project?.name + ' ' + isStarred)
-  console.log('localStarred ' + project?.name + ' ' + localStarred)
-
   return (
     <Dropdown as={ButtonGroup}>
       <Button

web/src/components/project/view-selector.tsx

@@ -66,7 +66,7 @@ export const ViewSelector = (props: ViewSelectorProps) => {
             }
             style={{ transitionDuration: '250ms' }}
           >
-            <i className="bi bi-pin-angle-fill"></i>
+            <i className="bi bi-display"></i>
           </button>
         ) : null}
           <div className="w-100" >

web/src/globals.css

@@ -832,6 +832,17 @@ body {
   border-radius: .375rem;
 }
 
+@-moz-document url-prefix() {
+  .breadcrumb-item a,
+  .dark-link {
+    color: #052c65cf !important;
+    text-decoration: none;
+    padding: 5px;
+    margin: -5px 0;
+    border-radius: .375rem;
+  }
+}
+
 .breadcrumb-item a:hover,
 .dark-link:hover {
   color: #052c65 !important;

web/src/hooks/queries/useStandardizerSchemas.ts

@@ -0,0 +1,18 @@
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { getStandardizerSchemas } from '../../api/namespace';
+
+export const useStandardizerSchemas = (
+  namespace: string | undefined,
+): UseQueryResult<string[], Error> => {
+
+  return useQuery<string[], Error>({
+    queryKey: ['standardizerSchemas', namespace],
+    queryFn: () => {
+      if (!namespace) {
+        throw new Error('Namespace is required');
+      }
+      return getStandardizerSchemas(namespace);
+    },
+    enabled: !!namespace,
+  });
+};

web/src/pages/Browse.tsx

@@ -231,7 +231,7 @@ export function Browse() {
                   <>
                     <div className='text-center'>
                       <a
-                        className='fs-6 fw-semibold text-decoration-none text-reset dark-link'
+                        className='fs-6 fw-medium shadow-sm btn btn-outline-dark'
                         href={`${selectedNamespace}`}
                         target="_blank"
                         rel="noopener noreferrer"

web/src/utils/dates.ts

@@ -3,6 +3,11 @@ export const dateStringToDateTime = (dateString: string) => {
   return date.toLocaleString('default', { month: 'long', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second:'numeric'});
 };
 
+export const dateStringToDateTimeShort = (dateString: string) => {
+  const date = new Date(dateString);
+  return date.toLocaleString('default', { month: 'short', year: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second:'numeric'});
+};
+
 export const dateStringToDate = (dateString: string) => {
   const date = new Date(dateString);
   // give full month name