Skip to content

Commit

Permalink
Merge pull request #484 from EBISPOT/issue-438
Browse files Browse the repository at this point in the history 
issue-438: fix entity and ontotlogy page widths extending beyond screen
  • Loading branch information
@serjoshua
serjoshua authored Aug 24, 2023
2 parents 05a928b + 6a955ee commit 8d24dc8
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 137 deletions.
100 changes: 50 additions & 50 deletions frontend/src/pages/ontologies/OntologyPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,56 +209,8 @@ export default function OntologyPage() {
/>
</div>
</div>
<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
</summary>
<div className="p-2 break-words space-y-2">
<div>
<span className="font-bold">Ontology IRI: </span>
<a
id="ontologyIri"
href={ontology.getIri() || ontology.getOntologyPurl()}
className="link-default"
target="_blank"
rel="noopener noreferrer"
>
{ontology.getIri() || ontology.getOntologyPurl()}
</a>
</div>
{ontology.getVersionIri() && (
<div>
<span className="font-bold">Version IRI: </span>
<a
id="versionIri"
href={ontology.getVersionIri()}
className="link-default"
target="_blank"
rel="noopener noreferrer"
>
{ontology.getVersionIri()}
</a>
</div>
)}
{/* todo remove hack when datarelease has completed; this should always be present */}
{ontology.getSourceFileTimestamp() && (
<div>
<span className="font-bold">Last loaded: </span>
<a
id="lastLoaded"
href={ontology.getSourceFileTimestamp()}
>
{ontology.getSourceFileTimestamp()}
</a>
</div>
)}
<OntologyAnnotationsSection ontology={ontology} />
</div>
</details>
</div>
<div className="basis-2/3">
<div className="flex flex-col-reverse lg:grid lg:grid-cols-3 lg:gap-4">
<div className="lg:col-span-2 flex flex-col">
<Tabs
value={tab}
onChange={(value: any) => {
Expand Down Expand Up @@ -355,6 +307,54 @@ export default function OntologyPage() {
/>
)}
</div>
<div className="lg:col-span-1">
<details open className="p-2">
<summary className="p-2 mb-2 border-b-2 border-grey-default text-lg link-default">
Ontology Information
</summary>
<div className="p-2 break-words space-y-2">
<div>
<span className="font-bold">Ontology IRI: </span>
<a
id="ontologyIri"
href={ontology.getIri() || ontology.getOntologyPurl()}
className="link-default"
target="_blank"
rel="noopener noreferrer"
>
{ontology.getIri() || ontology.getOntologyPurl()}
</a>
</div>
{ontology.getVersionIri() && (
<div>
<span className="font-bold">Version IRI: </span>
<a
id="versionIri"
href={ontology.getVersionIri()}
className="link-default"
target="_blank"
rel="noopener noreferrer"
>
{ontology.getVersionIri()}
</a>
</div>
)}
{/* todo remove hack when datarelease has completed; this should always be present */}
{ontology.getSourceFileTimestamp() && (
<div>
<span className="font-bold">Last loaded: </span>
<a
id="lastLoaded"
href={ontology.getSourceFileTimestamp()}
>
{ontology.getSourceFileTimestamp()}
</a>
</div>
)}
<OntologyAnnotationsSection ontology={ontology} />
</div>
</details>
</div>
</div>
</div>
) : null}
Expand Down
144 changes: 72 additions & 72 deletions frontend/src/pages/ontologies/entities/EntityPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,8 +329,78 @@ export default function EntityPage({
linkedEntities={linkedEntities}
/>
</div>
<div className="flex flex-col lg:flex-row-reverse lg:gap-8">
<div className="basis-1/3">
<div className="flex flex-col-reverse lg:grid lg:grid-cols-3 lg:gap-4">
<div className="lg:col-span-2">
<div className="py-2">
<button
className={`font-bold mr-3 ${
viewMode === "tree"
? "button-orange-active"
: "button-orange"
}`}
onClick={() => setViewMode("tree")}
>
<div className="flex gap-2">
<AccountTree />
<div>Tree</div>
</div>
</button>
<button
className={`font-bold ${
viewMode === "graph"
? "button-orange-active"
: "button-orange"
}`}
onClick={() => setViewMode("graph")}
>
<div className="flex gap-2">
<Share />
<div>Graph</div>
</div>
</button>
</div>
{viewMode === "graph" ? (
<EntityGraph
ontologyId={ontologyId}
entityType={
{
class: "classes",
property: "properties",
individual: "individuals",
}[entity.getType()]
}
selectedEntity={entity}
/>
) : (
<EntityTree
ontology={ontology}
entityType={
{
class: "classes",
property: "properties",
individual: "individuals",
}[entity.getType()]
}
selectedEntity={entity}
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="lg:col-span-1">
<details open className="p-2">
<summary className="p-2 mb-2 border-b-2 border-grey-default text-lg link-orange">
<span className="capitalize">
Expand Down Expand Up @@ -412,76 +482,6 @@ export default function EntityPage({
</div>
</details>
</div>
<div className="basis-2/3">
<div className="py-2">
<button
className={`font-bold mr-3 ${
viewMode === "tree"
? "button-orange-active"
: "button-orange"
}`}
onClick={() => setViewMode("tree")}
>
<div className="flex gap-2">
<AccountTree />
<div>Tree</div>
</div>
</button>
<button
className={`font-bold ${
viewMode === "graph"
? "button-orange-active"
: "button-orange"
}`}
onClick={() => setViewMode("graph")}
>
<div className="flex gap-2">
<Share />
<div>Graph</div>
</div>
</button>
</div>
{viewMode === "graph" ? (
<EntityGraph
ontologyId={ontologyId}
entityType={
{
class: "classes",
property: "properties",
individual: "individuals",
}[entity.getType()]
}
selectedEntity={entity}
/>
) : (
<EntityTree
ontology={ontology}
entityType={
{
class: "classes",
property: "properties",
individual: "individuals",
}[entity.getType()]
}
selectedEntity={entity}
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
30 changes: 15 additions & 15 deletions frontend/src/pages/ontologies/entities/EntityTree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,8 +313,21 @@ export default function EntityTree({
}
return (
<ThemeProvider theme={theme}>
<div className="flex flex-col lg:flex-row-reverse lg:justify-between">
<div className="flex flex-col bg-white px-2 mb-2 rounded-lg">
<div className="flex flex-col-reverse lg:grid lg:grid-cols-3 lg:gap-4">
{rootNodes ? (
<div className="lg:col-span-2 relative">
<div
className="px-3 pb-3 jstree jstree-1 jstree-proton overflow-x-auto"
role="tree"
>
{renderNodeChildren(rootNodes, 0)}
</div>
{numPendingTreeRequests > 0 ? (
<div className="absolute spinner-default w-7 h-7 -top-1 -left-4 z-auto" />
) : null}
</div>
) : null}
<div className="lg:col-span-1 flex flex-col bg-white px-2 mb-2 rounded-lg">
{entityType === "classes" &&
ontology.getPreferredRoots().length > 0 && (
<div className="mb-2">
Expand Down Expand Up @@ -370,19 +383,6 @@ export default function EntityTree({
/>
)}
</div>
{rootNodes ? (
<div className="relative">
<div
className="px-3 pb-3 jstree jstree-1 jstree-proton overflow-x-auto"
role="tree"
>
{renderNodeChildren(rootNodes, 0)}
</div>
{numPendingTreeRequests > 0 ? (
<div className="absolute spinner-default w-7 h-7 -top-1 -left-4 z-auto" />
) : null}
</div>
) : null}
</div>
</ThemeProvider>
);
Expand Down

0 comments on commit 8d24dc8

Please sign in to comment.