Skip to content

Commit

Permalink
taxonomy!!!!!
Browse files Browse the repository at this point in the history
  • Loading branch information
donywang922 committed Nov 24, 2023
1 parent d8eec59 commit 2808edd
Show file tree
Hide file tree
Showing 8 changed files with 61,725 additions and 185 deletions.
2 changes: 1 addition & 1 deletion app/SampleData.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"common_name": "European Silver Fir",
"scientific_name": ["Abies alba"],
"other_name": ["Common Silver Fir"],
"family": null,
"family": "Asteraceae",
"origin": [
"Austria",
"Germany",
Expand Down
37 changes: 35 additions & 2 deletions app/components/component.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,49 @@
aspect-ratio: 1/1;
overflow: hidden;
}

.dropdown {
margin-bottom: 20px;
width: 100%;
display: flex;
color:rgb(235, 249, 235)
color: rgb(235, 249, 235)
}

.dropdown-item-custom {
display: flex;
justify-content: left;
}

.plantIco img {
margin:0 0.5em;
margin: 0 0.5em;
}

.atxlst {
font-weight: bold;
color: #5b5b5b;
}

.atxlst > div > div:nth-last-child(n+2) {
border-left: 3px solid;
border-image: linear-gradient(#fff, #a2a2a2, #fff) 30;
}

.atxlst .highlight {
font-weight: bolder;
color: #257e19;
position: relative;
display: flex;
}

.atxlst > div > div:nth-child(n+2) > .highlight:after {
content: "◀";
position: absolute;
display: block;
color: #a2a2a2;
left: 100%;
}

.atxlst .rank {
color: #444444;
text-align: center;
}
49 changes: 49 additions & 0 deletions app/components/taxonomy_list.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import styles from "./component.module.css"
import React from "react";
import {taxonomy} from "@/app/taxonomy";

export default function Taxonomy_list(ctx: {
family: string,
}) {
let bread: string[] = []
let lst: React.JSX.Element[][] = []
let tax = taxonomy[ctx.family];
let n: string = ctx.family
let r = tax["r"]
bread.push(n)
while (true) {
let nn = tax["p"];
tax = taxonomy[nn];
if (tax == null) break;
let b = tax["c"]
let tmp: React.JSX.Element[] = []
tmp.push(<div key="rank" className={styles.rank}>
{r}
</div>)
for (let t of b) {
tmp.push(<div key={n} className={`${t == n && styles.highlight}`}>
{t}
</div>)
}
n = nn
r = tax["r"]
lst.push(tmp)
if (r != "CLADE")
bread.push(n)

}
lst.push([<div key={n} className={styles.highlight}>{n}</div>])
bread.reverse()
return <div className={styles.atxlst}>
<nav aria-label="breadcrumb">
<ol className="breadcrumb">
{bread.map((b, i) => {
return <li className="breadcrumb-item" key={i}>{b}</li>
})}
</ol>
</nav>
<div className='row flex-nowrap overflow-x-auto flex-row-reverse'>
{lst.map((t, i) => <div key={i} className="col">{t.map((item) => item)}</div>)}
</div>
</div>
}
24 changes: 3 additions & 21 deletions app/display/page.jsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,12 @@
'use client';
import React, {useEffect, useState} from 'react'

import React from 'react'
import Taxonomy_list from "../components/taxonomy_list";


function Display() {

const [prevSearchQuery, setPrevSearchQuery] = useState("");

useEffect(() => {
const searchQuery = localStorage.getItem('lastSearchQuery');

if (searchQuery !== null) {
console.log('Your search: ', searchQuery);
setPrevSearchQuery(searchQuery);

localStorage.removeItem('lastSearchQuery');
}
else {
console.log("no data");
}
}, [])


return (
prevSearchQuery && <div>your search is: {prevSearchQuery}</div>
)
return <Taxonomy_list family="Asteraceae"/>
}

export default Display;
115 changes: 60 additions & 55 deletions app/filtering/Filter.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
.main-filter{
.main-filter {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
flex-grow: 1;
max-height: 100vh;
overflow-y: auto;
background-color: white;
padding: 50px 200px;
}

.filterPart {
Expand All @@ -16,19 +14,19 @@
justify-content: right;
/* width: 185em; */
padding: 0px 20px;

}

/* these are the filter categories ex. names,size,edible, etc */
#full-width {
background-color: rgb(235, 249, 235);
color:black;
color: black;
flex: 1;
font-size: 25px;
text-align: left;
border:none;
padding:0;
border: none;
padding: 0;

}

/* .filterFullArea {
Expand All @@ -53,6 +51,7 @@
justify-content: center;
font-size: 25px;
}

.filterBlock {
height: 400px;
width: 1000px;
Expand All @@ -63,13 +62,13 @@
padding-top: 20px;
border: 2px solid black;
border-radius: 20px 0px 0px 20px;
margin: right;
margin: right;
padding: 50px;
text-align: center;
overflow: hidden;
overflow-y: scroll;
font-size: 25px;

}

/* name of filter */
Expand All @@ -78,29 +77,34 @@
font-size: 25px;
}


/* information inside of bottom scroll bar */
.information {
color: black;
font-size: 25px;
padding: 20px;
text-align: left;
width: 100%;
}

/* size of the scroll bar */
.scroll-object1{
height: 300px;
background-color: rgb(235, 249, 235);
width: 1415px;
margin-top: 50px;
margin-bottom: 50px;
.information > div {
background-color: rgb(235, 249, 235);
border: 2px solid black;
border-radius: 20px 0px 0px 20px;
margin: auto;
padding: 20px;
width: 100%;
border-radius: 20px;
margin-top: 20px;
}


/* size of the scroll bar */
.scroll-object1 {
font-size: 25px;
height: 300px;
margin: auto;
text-align: left;
overflow: hidden;
overflow-y: scroll;
border-radius: 20px 0 0 20px!important;
}

/* adjusts page width */
Expand All @@ -111,26 +115,28 @@ html, body {
font-family: Arial, Helvetica, sans-serif;

}
.multi-level, item ul, .nav{

.multi-level, item ul, .nav {
display: none;


}

#menu:checked ~ .multi-level, .item input:checked ~ ul{
#menu:checked ~ .multi-level, .item input:checked ~ ul {
display: block;
}

/* Arrow */
.arrow{
.arrow {
width: 12px;
height: 12px;
vertical-align: middle;
float: left;
z-index: 0;
margin: 17px 1em 0 2em;
}
.item input + .arrow{

.item input + .arrow {
transform: rotate(-90deg);
transition: 0.1s;

Expand All @@ -139,37 +145,37 @@ html, body {
.item input:checked + .arrow {
transform: rotate(0deg);
transition: 0.1s;
}
}


/* using new code for filters */
details {
user-select: none;
}
details>summary span.icon {
}

details > summary span.icon {
width: 24px;
height: 24px;
transition: all 0.3s;
margin-left:0%;
}
details[open] summary span.icon {
margin-left: 0%;
}

details[open] summary span.icon {
transform: rotate(90deg);
color:green;
}
summary {
color: green;
}

summary {
display: flex;
justify-content: flex-start;
cursor: pointer;
}
summary::-webkit-details-marker {
}

summary::-webkit-details-marker {
display: none;
}
}

.focus-capturer:focus-within .collapsible-content {
.focus-capturer:focus-within .collapsible-content {
display: block;
}

Expand All @@ -192,17 +198,16 @@ details {
margin-bottom: 20px;
}

.container{
.container {
display: flex;
justify-content: space-evenly;

}

}


@media (max-width: 850px) {
.main-filter {
padding: 20px;
padding: 20px;
margin: 0;
display: flex;
flex-direction: column;
Expand All @@ -213,23 +218,23 @@ details {
}

#full-width {
font-size: 20px;
font-size: 20px;
}

.filterBlock {
width: 100%;
border-radius: 0;
padding: 20px;
margin: 0;
width: 100%;
border-radius: 0;
padding: 20px;
margin: 0;
}

.scroll-object1 {
width: 100%;
border-radius: 0;
width: 100%;
border-radius: 0;
font-size: 20px; /* Adjust font size for smaller screens */
}

.information {
font-size: 20px; /* Adjust font size for smaller screens */
padding: 10px; /* Adjust padding for smaller screens */
margin: 0;
width: 95vw;
Expand Down
Loading

0 comments on commit 2808edd

Please sign in to comment.