Skip to content

Commit

Permalink
Merge pull request #479 from EBISPOT/issue-438
Browse files Browse the repository at this point in the history 
issue-438: handle narrow screens for entity and ontology views
  • Loading branch information
@serjoshua
serjoshua authored Aug 21, 2023
2 parents ed63bf1 + 3557ac4 commit aa4697e
Show file tree
Hide file tree
Showing 5 changed files with 291 additions and 275 deletions.
12 changes: 7 additions & 5 deletions frontend/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { Link } from "react-router-dom";
import urlJoin from 'url-join'
import urlJoin from "url-join";

export default function Header({ section }: { section?: string }) {
return (
<header
className="bg-black bg-right bg-cover"
style={{
backgroundImage:
"url('" + urlJoin(process.env.PUBLIC_URL!, "/embl-ebi-background-4.jpg") + "')"
"url('" +
urlJoin(process.env.PUBLIC_URL!, "/embl-ebi-background-4.jpg") +
"')",
}}
>
<div className="container mx-auto flex flex-row gap-10">
<div className="py-6">
<div className="container mx-auto flex flex-col md:flex-row md:gap-10">
<div className="py-6 self-center">
<a href={urlJoin(process.env.PUBLIC_URL!, "/")}>
<img
alt="OLS logo"
Expand All @@ -22,7 +24,7 @@ export default function Header({ section }: { section?: string }) {
</div>
<nav className="self-center">
<ul
className="bg-transparent text-white flex divide-white divide-x"
className="bg-transparent text-white flex flex-wrap divide-white divide-x"
data-description="navigational"
role="menubar"
data-dropdown-menu="6mg2ht-dropdown-menu"
Expand Down
200 changes: 105 additions & 95 deletions frontend/src/pages/ontologies/OntologyPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,11 @@ export default function OntologyPage() {
return (
<div>
<Header section="ontologies" />
<main className="container mx-auto" style={{ position: "relative" }}>
<main className="container mx-auto">
{ontology ? (
<div className="my-8 mx-2">
<div className="flex flex-row justify-between items-center px-2 mb-4">
<div>
<div className="my-8">
<div className="flex flex-wrap justify-between items-center px-2 mb-4">
<div className="mb-2 lg:m-0">
<Link
className="link-default"
to={"/ontologies"}
Expand Down Expand Up @@ -129,7 +129,7 @@ export default function OntologyPage() {
/>
</div>
</div>
<div className="bg-gradient-to-r from-neutral-light to-white rounded-lg p-8 mb-4 text-neutral-black">
<div className="bg-gradient-to-r from-neutral-light to-white rounded-lg p-8 mb-4 text-neutral-black overflow-x-auto">
<div className="text-2xl font-bold mb-4">
{ontology.getName() || ontology.getOntologyId()}
</div>
Expand All @@ -147,7 +147,7 @@ export default function OntologyPage() {
<OntologyImportsSection ontology={ontology} />
<OntologyImportedBySection ontology={ontology} />

<div className="flex gap-2 mt-6 mb-6">
<div className="flex flex-wrap gap-2 mt-6 mb-6">
{ontology.getOntologyPurl() && (
<Link
to={ontology.getOntologyPurl()}
Expand Down Expand Up @@ -209,95 +209,8 @@ export default function OntologyPage() {
/>
</div>
</div>
<div className="grid grid-cols-3 gap-8">
<div className="col-span-2">
<Tabs
value={tab}
onChange={(value: any) => {
setSearchParams((params) => {
params.set("tab", value);
return params;
});
}}
>
<Tab
label={`Classes (${ontology
.getNumClasses()
.toLocaleString()})`}
value="classes"
disabled={!(ontology.getNumClasses() > 0)} // !(value) handles NaN
/>
<Tab
label={`Properties (${ontology
.getNumProperties()
.toLocaleString()})`}
value="properties"
disabled={!(ontology.getNumProperties() > 0)}
/>
<Tab
label={`Individuals (${ontology
.getNumIndividuals()
.toLocaleString()})`}
value="individuals"
disabled={!(ontology.getNumIndividuals() > 0)}
/>
</Tabs>
{tab !== "classes" || ontology.getNumClasses() > 0 ? (
<div className="py-2 mb-2 flex justify-between">
<div>
<button
disabled={tab === "individuals"}
className={`font-bold mr-3 ${
viewMode === "tree"
? "button-primary-active"
: "button-primary"
}`}
onClick={() =>
setSearchParams((params) => {
params.set("viewMode", "tree");
return params;
})
}
>
<div className="flex gap-2">
<AccountTree />
<div>Tree</div>
</div>
</button>
<button
className={`font-bold ${
viewMode === "list"
? "button-primary-active"
: "button-primary"
}`}
onClick={() =>
setSearchParams((params) => {
params.set("viewMode", "list");
return params;
})
}
>
<div className="flex gap-2">
<FormatListBulletedIcon />
<div>List</div>
</div>
</button>
</div>
</div>
) : null}
{viewMode === "list" ? (
<EntityList ontologyId={ontologyId} entityType={tab} />
) : (
<EntityTree
ontology={ontology}
entityType={tab}
lang={lang}
onNavigateToEntity={(ontology, entity) => navigate(`/ontologies/${ontology.getOntologyId()}/${entity.getTypePlural()}/${encodeURIComponent(encodeURIComponent(entity.getIri()))}?lang=${lang}`)}
onNavigateToOntology={(ontologyId, entity) => navigate(`/ontologies/${ontologyId}/${entity.getTypePlural()}/${encodeURIComponent(encodeURIComponent(entity.getIri()))}?lang=${lang}`)}
/>
)}
</div>
<div className="col-span-1">
<div className="flex flex-col lg:flex-row-reverse lg:gap-8">
<div className="basis-1/3">
<details open className="p-2">
<summary className="p-2 mb-2 border-b-2 border-grey-default text-lg link-default">
Ontology Information
Expand Down Expand Up @@ -345,6 +258,103 @@ export default function OntologyPage() {
</div>
</details>
</div>
<div className="basis-2/3">
<Tabs
value={tab}
onChange={(value: any) => {
setSearchParams((params) => {
params.set("tab", value);
return params;
});
}}
>
<Tab
label={`Classes (${ontology
.getNumClasses()
.toLocaleString()})`}
value="classes"
disabled={!(ontology.getNumClasses() > 0)} // !(value) handles NaN
/>
<Tab
label={`Properties (${ontology
.getNumProperties()
.toLocaleString()})`}
value="properties"
disabled={!(ontology.getNumProperties() > 0)}
/>
<Tab
label={`Individuals (${ontology
.getNumIndividuals()
.toLocaleString()})`}
value="individuals"
disabled={!(ontology.getNumIndividuals() > 0)}
/>
</Tabs>
{tab !== "classes" || ontology.getNumClasses() > 0 ? (
<div className="py-2">
<button
disabled={tab === "individuals"}
className={`font-bold mr-3 ${
viewMode === "tree"
? "button-primary-active"
: "button-primary"
}`}
onClick={() =>
setSearchParams((params) => {
params.set("viewMode", "tree");
return params;
})
}
>
<div className="flex gap-2">
<AccountTree />
<div>Tree</div>
</div>
</button>
<button
className={`font-bold ${
viewMode === "list"
? "button-primary-active"
: "button-primary"
}`}
onClick={() =>
setSearchParams((params) => {
params.set("viewMode", "list");
return params;
})
}
>
<div className="flex gap-2">
<FormatListBulletedIcon />
<div>List</div>
</div>
</button>
</div>
) : null}
{viewMode === "list" ? (
<EntityList ontologyId={ontologyId} entityType={tab} />
) : (
<EntityTree
ontology={ontology}
entityType={tab}
lang={lang}
onNavigateToEntity={(ontology, entity) =>
navigate(
`/ontologies/${ontology.getOntologyId()}/${entity.getTypePlural()}/${encodeURIComponent(
encodeURIComponent(entity.getIri())
)}?lang=${lang}`
)
}
onNavigateToOntology={(ontologyId, entity) =>
navigate(
`/ontologies/${ontologyId}/${entity.getTypePlural()}/${encodeURIComponent(
encodeURIComponent(entity.getIri())
)}?lang=${lang}`
)
}
/>
)}
</div>
</div>
</div>
) : null}
Expand Down
62 changes: 33 additions & 29 deletions frontend/src/pages/ontologies/entities/EntityList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,35 +35,39 @@ export default function EntityList({

const navigate = useNavigate();
return (
<DataTable
columns={columns}
data={entities}
dataCount={totalEntities}
placeholder={`Search ${entityType}...`}
page={page}
rowsPerPage={rowsPerPage}
onPageChange={(pg: number) => {
setPage(pg);
}}
onRowsPerPageChange={(rows: number) => {
setRowsPerPage((prev) => {
if (rows !== prev) setPage(0);
return rows;
});
}}
onSelectRow={(row) => {
const termUrl = encodeURIComponent(
encodeURIComponent(row.properties.iri)
);
navigate(`/ontologies/${ontologyId}/${row.getTypePlural()}/${termUrl}`);
}}
onFilter={(key: string) => {
setSearch((prev) => {
if (key !== prev) setPage(0);
return key;
});
}}
/>
<div className="mt-2">
<DataTable
columns={columns}
data={entities}
dataCount={totalEntities}
placeholder={`Search ${entityType}...`}
page={page}
rowsPerPage={rowsPerPage}
onPageChange={(pg: number) => {
setPage(pg);
}}
onRowsPerPageChange={(rows: number) => {
setRowsPerPage((prev) => {
if (rows !== prev) setPage(0);
return rows;
});
}}
onSelectRow={(row) => {
const termUrl = encodeURIComponent(
encodeURIComponent(row.properties.iri)
);
navigate(
`/ontologies/${ontologyId}/${row.getTypePlural()}/${termUrl}`
);
}}
onFilter={(key: string) => {
setSearch((prev) => {
if (key !== prev) setPage(0);
return key;
});
}}
/>
</div>
);
}

Expand Down
Loading

0 comments on commit aa4697e

Please sign in to comment.