Skip to content

Commit 51a34c1

Browse files
awolf-libawolf-lib
committed
removed unnecessary jbrowse core/plugins; fixed tailwind config; fixed layout for large assembly names
1 parent d012ea8 commit 51a34c1

File tree

11 files changed

+97
-78
lines changed

11 files changed

+97
-78
lines changed

‎default.config

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
DATA_DIR=/path/to/_gnom/data
33
IMPORT_DIR=/path/to/_gnom/import
44

5-
# INITIAL USER
6-
INITIAL_USER_USERNAME=admin
7-
INITIAL_USER_PASSWORD=admin
8-
95
# Server
106
SERVER_ADRESS=127.0.0.1
117

8+
# INITIAL USER
9+
INITIAL_USER_USERNAME=admin
10+
INITIAL_USER_PASSWORD=JaghRMI104
11+
1212
# Docker
1313
## Docker network
1414
DOCKER_NETWORK_NAME=gnom_app
@@ -21,7 +21,7 @@ MYSQL_CONTAINER_NAME=gnom_mysql
2121
FRONTEND_CONTAINER_NAME=gnom_react
2222

2323
## FLASK SERVER
24-
API_PORT=3002
24+
API_PORT=5001
2525
API_ADRESS=127.0.0.1
2626
API_CONTAINER_NAME=gnom_flask
2727

‎react-frontend/package.json

+3-17
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,6 @@
55
"dependencies": {
66
"@craco/craco": "6.4.3",
77
"@fontsource/roboto": "4.5.1",
8-
"@jbrowse/core": "1.5.3",
9-
"@jbrowse/plugin-alignments": "1.5.3",
10-
"@jbrowse/plugin-bed": "1.5.3",
11-
"@jbrowse/plugin-circular-view": "1.5.3",
12-
"@jbrowse/plugin-config": "1.5.3",
13-
"@jbrowse/plugin-data-management": "1.5.3",
14-
"@jbrowse/plugin-gff3": "1.5.3",
15-
"@jbrowse/plugin-linear-genome-view": "1.5.3",
16-
"@jbrowse/plugin-sequence": "1.5.3",
17-
"@jbrowse/plugin-svg": "1.5.3",
18-
"@jbrowse/plugin-trix": "1.5.3",
19-
"@jbrowse/plugin-variants": "1.5.3",
20-
"@jbrowse/plugin-wiggle": "1.5.3",
218
"@jbrowse/react-linear-genome-view": "1.5.3",
229
"react-use-dimensions": "1.2.1",
2310
"@testing-library/jest-dom": "5.16.1",
@@ -30,7 +17,6 @@
3017
"bcryptjs": "2.4.3",
3118
"classnames": "2.3.1",
3219
"grommet-icons": "4.7.0",
33-
"install": "0.13.0",
3420
"npm": "8.3.0",
3521
"plotly.js": "2.8.3",
3622
"react": "17.0.2",
@@ -109,17 +95,17 @@
10995
"@types/plotly.js": "^1.54.18",
11096
"@types/uuid": "^8.3.3",
11197
"assert": "^2.0.0",
112-
"autoprefixer": "^9.8.8",
98+
"autoprefixer": "^10.4.2",
11399
"browserify-zlib": "^0.2.0",
114100
"buffer": "^6.0.3",
115101
"os-browserify": "^0.3.0",
116102
"path-browserify": "^1.0.1",
117-
"postcss": "^8.1.4",
103+
"postcss": "^8.4.6",
118104
"postcss-flexbugs-fixes": "^5.0.2",
119105
"postcss-loader": "^6.2.1",
120106
"stream-browserify": "^3.0.0",
121107
"stream-http": "^3.2.0",
122-
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
108+
"tailwindcss": "^3.0.23",
123109
"url": "^0.11.0"
124110
}
125111
}

‎react-frontend/src/App.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ div {
1111

1212
/* width */
1313
::-webkit-scrollbar {
14-
width: 7px;
14+
width: 10px;
15+
height: 10px;
1516
}
1617

1718
/* Track */

‎react-frontend/src/screens/MainRouter/components/AssembliesList/components/AssembliesGridElement/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const AssembliesGridElement = ({
103103
/>
104104
</div>
105105
)}
106-
<div className="w-full text-white px-4 py-2">
106+
<div className="w-full text-white px-4 py-2 truncate">
107107
<div className="text-xl font-semibold h-8 truncate">{label || name}</div>
108108
<div className="text-sm h-6 truncate">{scientificName}</div>
109109
<div className="h-16 w-full flex items-center"></div>

‎react-frontend/src/screens/MainRouter/components/AssembliesList/components/AssembliesListElement/index.tsx

+34-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import classNames from "classnames";
44
import SpeciesProfilePictureViewer from "../../../../../../components/SpeciesProfilePictureViewer";
55
import { AssemblyInterface } from "../../../../../../tsInterfaces/tsInterfaces";
66
import { Checkmark, Close } from "grommet-icons";
7+
import { useRef } from "react";
78

89
const AssembliesListElement = ({
910
assembly,
@@ -66,6 +67,11 @@ const AssembliesListElement = ({
6667
return date.toLocaleDateString();
6768
};
6869

70+
const ref1 = useRef<HTMLDivElement>(null);
71+
const ref2 = useRef<HTMLDivElement>(null);
72+
const ref3 = useRef<HTMLDivElement>(null);
73+
const ref4 = useRef<HTMLDivElement>(null);
74+
6975
return (
7076
<Link
7177
to={"/g-nom/assemblies/assembly?assemblyID=" + id}
@@ -81,8 +87,20 @@ const AssembliesListElement = ({
8187
/>
8288
</div>
8389
</div>
84-
<div className="w-2/12 truncate">{scientificName}</div>
85-
<div className="w-3/12 truncate">{label || name}</div>
90+
<div
91+
ref={ref1}
92+
className="px-2 py-2 w-2/12 truncate hover:whitespace-normal hover:text-clip hover:overflow-auto"
93+
onMouseLeave={() => ref1.current?.scrollTo(0, 0)}
94+
>
95+
{scientificName}
96+
</div>
97+
<div
98+
ref={ref2}
99+
className="px-2 py-2 w-3/12 truncate hover:whitespace-normal hover:text-clip hover:overflow-auto"
100+
onMouseLeave={() => ref2.current?.scrollTo(0, 0)}
101+
>
102+
{label || name}
103+
</div>
86104
{annotations && annotations > 0 ? (
87105
<div className="w-1/12 text-green-600">
88106
<Checkmark className="stroke-current" color="blank" />
@@ -128,8 +146,20 @@ const AssembliesListElement = ({
128146
<Close className="stroke-current" color="blank" />
129147
</div>
130148
)}
131-
<div className="w-1/12 truncate">{username}</div>
132-
<div className="w-1/12 truncate">{formatDate(addedOn)}</div>
149+
<div
150+
ref={ref3}
151+
className="px-2 py-2 w-1/12 truncate hover:whitespace-normal hover:text-clip hover:overflow-auto"
152+
onMouseLeave={() => ref3.current?.scrollTo(0, 0)}
153+
>
154+
{username || "deleted"}
155+
</div>
156+
<div
157+
ref={ref4}
158+
className="px-2 py-2 w-1/12 truncate hover:whitespace-normal hover:text-clip hover:overflow-auto"
159+
onMouseLeave={() => ref4.current?.scrollTo(0, 0)}
160+
>
161+
{formatDate(addedOn)}
162+
</div>
133163
</div>
134164
</Link>
135165
);

‎react-frontend/src/screens/MainRouter/components/AssembliesList/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const AssembliesList = ({
127127
};
128128

129129
const viewTypeClass = classNames("animate-grow-y", {
130-
"grid grid-cols-2 2xl:grid-cols-3 p-8 gap-8": view === "grid",
130+
"grid grid-cols-2 3xl:grid-cols-3 p-8 gap-8": view === "grid",
131131
});
132132

133133
const headerClass = classNames(
@@ -287,7 +287,7 @@ const AssembliesList = ({
287287
return <div />;
288288
})
289289
) : (
290-
<div className="w-full flex justify-center items-center border py-8 shadow col-span-2">
290+
<div className="w-full flex justify-center items-center border py-8 shadow col-span-2 3xl:col-span-3">
291291
{loadingAssemblies || onLoadingAssembliesTimeout ? (
292292
<LoadingSpinner label="Loading..." />
293293
) : (

‎react-frontend/src/screens/MainRouter/components/AssemblyInformation/components/AssemblyStatisticsTable/index.tsx

+28-28
Original file line numberDiff line numberDiff line change
@@ -10,90 +10,90 @@ const AssemblyStatisticsTable = ({ assembly }: { assembly: AssemblyInterface })
1010
<table className="w-full bg-white table-fixed">
1111
<tbody>
1212
<tr className="border border-gray-400">
13-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
13+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
1414
DB name
1515
</td>
16-
<td className="px-4">{assembly.name}</td>
16+
<td className="px-4 truncate">{assembly.name}</td>
1717
</tr>
1818
{assembly.label && (
1919
<tr className="border border-gray-400">
20-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
20+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
2121
Label
2222
</td>
23-
<td className="px-4">{assembly.label}</td>
23+
<td className="px-4 truncate">{assembly.label}</td>
2424
</tr>
2525
)}
2626
<tr className="border border-gray-400">
27-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
27+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
2828
# of sequences
2929
</td>
30-
<td className="px-4">{formatNumbers(assembly.numberOfSequences)}</td>
30+
<td className="px-4 truncate">{formatNumbers(assembly.numberOfSequences)}</td>
3131
</tr>
3232
<tr className="border border-gray-400">
33-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
33+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
3434
Cumulative sequence length (bp)
3535
</td>
36-
<td className="px-4">{formatNumbers(assembly.cumulativeSequenceLength)}</td>
36+
<td className="px-4 truncate">{formatNumbers(assembly.cumulativeSequenceLength)}</td>
3737
</tr>
3838
<tr className="border border-gray-400">
39-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
39+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
4040
Largest sequence (bp)
4141
</td>
42-
<td className="px-4">{formatNumbers(assembly.largestSequence)}</td>
42+
<td className="px-4 truncate">{formatNumbers(assembly.largestSequence)}</td>
4343
</tr>
4444
<tr className="border border-gray-400">
45-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
45+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
4646
Shortest sequence (bp)
4747
</td>
48-
<td className="px-4">{formatNumbers(assembly.shortestSequence)}</td>
48+
<td className="px-4 truncate">{formatNumbers(assembly.shortestSequence)}</td>
4949
</tr>
5050
<tr className="border border-gray-400">
51-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
51+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
5252
Mean sequenve length (bp)
5353
</td>
54-
<td className="px-4">{formatNumbers(assembly.meanSequence)}</td>
54+
<td className="px-4 truncate">{formatNumbers(assembly.meanSequence)}</td>
5555
</tr>
5656
<tr className="border border-gray-400">
57-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
57+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
5858
Median sequence length (bp)
5959
</td>
60-
<td className="px-4">{formatNumbers(assembly.medianSequence)}</td>
60+
<td className="px-4 truncate">{formatNumbers(assembly.medianSequence)}</td>
6161
</tr>
6262
<tr className="border border-gray-400">
63-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
63+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
6464
N50 (bp)
6565
</td>
66-
<td className="px-4">{formatNumbers(assembly.n50)}</td>
66+
<td className="px-4 truncate">{formatNumbers(assembly.n50)}</td>
6767
</tr>
6868
<tr className="border border-gray-400">
69-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
69+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
7070
N90 (bp)
7171
</td>
72-
<td className="px-4">{formatNumbers(assembly.n90)}</td>
72+
<td className="px-4 truncate">{formatNumbers(assembly.n90)}</td>
7373
</tr>
7474
<tr className="border border-gray-400">
75-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
75+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
7676
Type
7777
</td>
78-
<td className="px-4">{assembly.sequenceType.toUpperCase()}</td>
78+
<td className="px-4 truncate">{assembly.sequenceType.toUpperCase()}</td>
7979
</tr>
8080
<tr className="border border-gray-400">
81-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
81+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
8282
GC (%)
8383
</td>
84-
<td className="px-4">{assembly.gcPercent}</td>
84+
<td className="px-4 truncate">{assembly.gcPercent}</td>
8585
</tr>
8686
<tr className="border border-gray-400">
87-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
87+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
8888
Added by
8989
</td>
90-
<td className="px-4">{assembly.username}</td>
90+
<td className="px-4 truncate">{assembly.username}</td>
9191
</tr>
9292
<tr className="border border-gray-400">
93-
<td className="px-4 py-3 text-base font-semibold text-right border-r border-gray-400">
93+
<td className="px-4 py-3 font-semibold text-right border-r border-gray-400 truncate hover:whitespace-normal hover:text-ellipsis hover:overflow-visible">
9494
Added on
9595
</td>
96-
<td className="px-4">{assembly.addedOn}</td>
96+
<td className="px-4 truncate">{assembly.addedOn}</td>
9797
</tr>
9898
</tbody>
9999
</table>

‎react-frontend/src/screens/MainRouter/components/AssemblyInformation/index.tsx

+17-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Book, Bookmark, Close, Configure, Contract, Down, LinkTop, Up } from "grommet-icons";
2-
import { useEffect, useState } from "react";
2+
import { useEffect, useRef, useState } from "react";
33
import { Link, useSearchParams } from "react-router-dom";
44

55
import {
@@ -413,24 +413,26 @@ const AssemblyInformation = () => {
413413

414414
const userRole = JSON.parse(sessionStorage.getItem("userRole") || "");
415415

416+
const ref1 = useRef<HTMLDivElement>(null);
417+
416418
return (
417419
<div className="pb-32 bg-gradient-to-tr from-gray-900 via-gray-800 to-gray-600 text-gray-800 animate-fade-in">
418420
{/* Header */}
419421
<div className="h-1 bg-gradient-to-t from-gray-900 via-gray-500 to-gray-200" />
420-
<div className="z-20 flex justify-between items-center bg-gradient-to-tr from-gray-900 via-gray-800 to-gray-600 text-white sticky top-16 h-16 px-4 text-xl font-bold shadow-lg border-b border-gray-500">
421-
{taxon?.scientificName ? (
422-
<div className="flex justify-between items-center">
423-
<div className="px-2 animate-fade-in">{taxon.scientificName}</div>
424-
{assembly?.label && assembly?.name && (
425-
<div className="flex items-center animate-fade-in">
426-
<div className="px-2">{">"}</div>
427-
<div className="px-2">{assembly.label}</div>
428-
<div className="px-2 font-normal">{"(" + assembly.name + ")"}</div>
429-
</div>
430-
)}
431-
{!assembly?.label && assembly?.name && (
432-
<div className="px-2 animate-fade-in">{"> " + assembly.name}</div>
433-
)}
422+
<div className="z-20 flex justify-between items-center bg-gradient-to-tr from-gray-900 via-gray-800 to-gray-600 text-white sticky top-16 py-2 px-4 text-xl font-bold shadow-lg border-b border-gray-500">
423+
{taxon && assembly ? (
424+
<div className="flex justify-start items-center w-3/4">
425+
<div className="px-2 whitespace-nowrap animate-fade-in">{taxon.scientificName}</div>
426+
<div className="px-2 animate-fade-in">{">"}</div>
427+
<div
428+
ref={ref1}
429+
onMouseLeave={() => {
430+
ref1.current?.scrollTo(0, 0);
431+
}}
432+
className="px-2 animate-fade-in truncate hover:whitespace-normal hover:text-clip hover:overflow-auto"
433+
>
434+
{assembly?.label ? assembly.label : assembly.name}
435+
</div>
434436
</div>
435437
) : (
436438
<div>

‎react-frontend/tailwind.config.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ module.exports = {
22
content: ["./src/**/*.{js,jsx,ts,tsx}"],
33
purge: false,
44
theme: {
5-
screens: {},
65
extend: {
6+
screens: {
7+
"3xl": "1920px",
8+
},
79
inset: { 16: "4rem" },
810
transitionPropery: { width: "width", height: "height" },
911
transitionDuration: {
@@ -97,6 +99,7 @@ module.exports = {
9799
ringWidth: ["responsive", "hover", "focus"],
98100
animation: ["responsive", "hover", "focus"],
99101
maxHeight: ["responsive", "hover"],
102+
textOverflow: ["responsive", "hover", "focus"],
100103
},
101104
},
102105
plugins: [],

‎setup.sh

+1-3
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,8 @@ cd ./jbrowse
127127
docker build -t gnom/jbrowse .
128128
echo "RABBIT_CONTAINER_NAME=${RABBIT_CONTAINER_NAME}" > .env
129129
docker run --name $JBROWSE_CONTAINER_NAME --network $DOCKER_NETWORK_NAME --restart on-failure:10 -d -p 8082:80 -v ${DATA_DIR}/taxa:/flask-backend/data/storage/taxa --env-file .env gnom/jbrowse
130-
131130
docker exec $JBROWSE_CONTAINER_NAME bash -c "npm i -g @jbrowse/[email protected]"
132131
docker exec $JBROWSE_CONTAINER_NAME bash -c "jbrowse create -f /usr/local/apache2/htdocs"
133-
134132
cd ..
135133

136134
# setup missing directories
@@ -157,4 +155,4 @@ docker exec $API_CONTAINER_NAME bash -c "cd src/ && python3 -m modules.taxa relo
157155

158156
# ============================================ #
159157

160-
echo "Successfully setup G-nom!"
158+
echo "Setup finished!"

‎uninstall.sh

-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ echo "Removing G-nom..."
1717
docker rm -f $MYSQL_CONTAINER_NAME $FRONTEND_CONTAINER_NAME $API_CONTAINER_NAME $JBROWSE_CONTAINER_NAME $RABBIT_CONTAINER_NAME $FILE_SERVER_CONTAINER_NAME gnom_fileserver
1818
# docker rm -f $NEXTCLOUD_CONTAINER_NAME
1919
docker network rm $DOCKER_NETWORK_NAME
20-
docker volume prune
2120

2221
while true; do
2322
read -p "Also remove data/import directory (y/N): " yn

0 commit comments

Comments
 (0)