Skip to content

Commit 0abdf8d

Browse files
yiqunzhengyiqunzheng
committed
Merge branch 'dev' into yiqun/new
2 parents 89f75dc + 4af4473 commit 0abdf8d

22 files changed

+3305
-422
lines changed

‎mlflow-site/public/assets/MLflow-js-logo.png

19.9 KB
Loading

‎mlflow-site/public/assets/Mlflow-js-symbol.png

18.8 KB
Loading

‎mlflow-site/src/app/components/Button.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,18 @@
33
const Button = () => {
44
return (
55
<div className='button'>
6-
<a href='https://github.com/oslabs-beta/mlflow-js' className='homeButton homeButtonDownload text-white'>Download</a>
7-
<a href='https://github.com/oslabs-beta/mlflow-js/tree/dev/mlflow/docs' className='homeButton homeButtonRead'>Read the Docs</a>
6+
<a
7+
href='https://github.com/oslabs-beta/mlflow-js'
8+
className='homeButton homeButtonDownload text-white'
9+
>
10+
Download
11+
</a>
12+
<a
13+
href='/documentation'
14+
className='homeButton homeButtonRead'
15+
>
16+
Read the Docs
17+
</a>
818
</div>
919
);
1020
};

‎mlflow-site/src/app/components/Demo.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ const Demo = () => {
1313
'Description for what\'s happening in Demo 3. This block of text will contain all the info needed to understand the demo.'
1414
];
1515
const demoCardVideos = [
16-
"https://player.vimeo.com/video/1022732764",
17-
"https://player.vimeo.com/video/1022732772",
16+
'https://player.vimeo.com/video/1023585657',
17+
'',
18+
'',
1819
];
1920
for (let i = 0; i < 3; i++) {
2021
demos.push(

‎mlflow-site/src/app/components/Method.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import MethodRequest from './MethodRequest';
2+
3+
interface MethodIndividualProps {
4+
name: string;
5+
description: string;
6+
requestProps: Array<{ name: string; type: string; description: string }>;
7+
responseType: string;
8+
responseDescription: string;
9+
}
10+
11+
const Method: React.FC<MethodIndividualProps> = ({
12+
name,
13+
description,
14+
requestProps,
15+
responseType,
16+
responseDescription,
17+
}) => {
18+
return (
19+
<div className='method' id={`${name}`}>
20+
<div className='methodName'>{name}</div>
21+
<div className='methodDescription'>{description}</div>
22+
<div>
23+
<div className='responseStructure'>Request Structure</div>
24+
<div className='requestStructureWrapper'>
25+
<div className='methodRequest mRHeader'>
26+
<div className='methodRequestLeft textLeftPadding'>Field Name</div>
27+
<div className='methodRequestMid textLeftPadding'>Type</div>
28+
<div className='methodRequestRight textLeftPadding'>
29+
Description
30+
</div>
31+
</div>
32+
{requestProps.map((method, index) => (
33+
<MethodRequest
34+
key={`methodBarIndividual:${index}`}
35+
num={index}
36+
name={method.name}
37+
type={method.type}
38+
description={method.description}
39+
/>
40+
))}
41+
</div>
42+
<div className='responseStructure'>Response</div>
43+
<div className='responseFormat responseFormatHeader'>
44+
<div className='methodRequestLeft textLeftPadding'>Type</div>
45+
<div className='methodRequestMid textLeftPadding'>Description</div>
46+
</div>
47+
<div className='responseFormat methodRequestBG'>
48+
<div className='methodRequestLeft textLeftPadding textHorizontalOverflow'>
49+
{responseType}
50+
</div>
51+
<div className='methodRequestMid textLeftPadding textHorizontalOverflow'>
52+
{responseDescription}
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
);
58+
};
59+
60+
export default Method;

‎mlflow-site/src/app/components/MethodBar.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
'use client';
2+
3+
interface MethodBarIndividualProps {
4+
name: string;
5+
}
6+
7+
const MethodBarIndividual: React.FC<MethodBarIndividualProps> = ({ name }) => {
8+
return (
9+
<div
10+
className='methodBarIndividual'
11+
onClick={() => {
12+
const element = document.getElementById(`${name}`);
13+
element?.scrollIntoView({ behavior: 'smooth' });
14+
}}
15+
>
16+
{name}
17+
</div>
18+
);
19+
};
20+
21+
export default MethodBarIndividual;

‎mlflow-site/src/app/components/MethodRequest.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use client';
2+
3+
interface keystring {
4+
name: string
5+
type: string
6+
description: string
7+
num: number
8+
}
9+
10+
const MethodRequest: React.FC<keystring> = ( property ) => {
11+
if (property.num % 2 === 0) {
12+
return (
13+
<div className='methodRequest methodRequestBG'>
14+
<div className='methodRequestLeft textLeftPadding textHorizontalOverflow'>{property.name}</div>
15+
<div className='methodRequestMid textLeftPadding textHorizontalOverflow'>{property.type}</div>
16+
<div className='methodRequestRight textLeftPadding textHorizontalOverflow'>{property.description}</div>
17+
</div>
18+
);
19+
} else {
20+
return (
21+
<div className='methodRequest'>
22+
<div className='methodRequestLeft textLeftPadding textHorizontalOverflow'>{property.name}</div>
23+
<div className='methodRequestMid textLeftPadding textHorizontalOverflow'>{property.type}</div>
24+
<div className='methodRequestRight textLeftPadding textHorizontalOverflow'>{property.description}</div>
25+
</div>
26+
);
27+
};
28+
}
29+
30+
export default MethodRequest;

‎mlflow-site/src/app/components/NavBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Image from 'next/image';
55
const NavBar = () => {
66
return (
77
<div className='navBar'>
8-
<div className='navBarMlflow'>MLflow.js</div>
8+
<div className='navBarMlflow'><Image src={'/assets/MLflow-js-logo.png'} width={64} height={32} alt='G' className='mlflow-logo'/></div>
99
<div className='navBarLinks'>
1010
<button
1111
onClick={() => {

‎mlflow-site/src/app/documentation/documentation.css

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
.documentationWrapper {
2+
position: fixed;
3+
width: 100%;
4+
height: 100%;
5+
left: 0;
6+
top: 0;
7+
display: grid;
8+
grid-template-columns: 300px 1fr;
9+
grid-template-rows: 50px 1fr;
10+
}
11+
12+
.documentationHeader {
13+
grid-column: 1/3;
14+
border-bottom: 1px solid black;
15+
display: grid;
16+
align-items: center;
17+
}
18+
19+
.documentationImage {
20+
margin-left: 1rem;
21+
}
22+
23+
.mlFlowOfficialLink {
24+
color: rgb(1, 148, 226)
25+
}
26+
27+
.mlFlowReference {
28+
font-size: 1.5rem;
29+
}
30+
31+
.documentationLeftSideBar {
32+
overflow-y: auto;
33+
overflow-x: hidden;
34+
scrollbar-width: none;
35+
border-right: 1px solid black;
36+
}
37+
38+
.documentationMainWrapper {
39+
display: grid;
40+
width: 100%;
41+
grid-template-columns: 2rem 1fr 2rem;
42+
overflow-y: auto;
43+
overflow-x: auto;
44+
scrollbar-width: thin;
45+
text-wrap: wrap;
46+
}
47+
48+
.documentationMain {
49+
grid-column: 2;
50+
}
51+
52+
.documentationLeftHeader {
53+
padding-left: 10px;
54+
padding-right: 1rem;
55+
font-size: 1.4rem;
56+
cursor: pointer;
57+
}
58+
59+
.documentationLeftHeader:hover {
60+
background-color: rgb(132, 185, 46);
61+
}
62+
63+
.documentationLeftHeader2 {
64+
padding-left: 10px;
65+
padding-right: 1rem;
66+
font-size: 1.2rem;
67+
cursor: pointer;
68+
}
69+
70+
.documentationLeftHeader2:hover {
71+
background-color: rgb(132, 185, 46);
72+
}
73+
74+
.method {
75+
margin-bottom: 2rem;
76+
}
77+
78+
.methodsHeader {
79+
font-size: 3rem;
80+
}
81+
82+
.methodsHeader2 {
83+
font-size: 2.5rem;
84+
}
85+
86+
.methodBarIndividual {
87+
cursor: pointer;
88+
padding-left: 1rem;
89+
padding-right: 1rem;
90+
}
91+
92+
.methodBarIndividual:hover {
93+
background-color: rgb(132, 185, 46);
94+
}
95+
96+
.methodName {
97+
font-size: 2rem;
98+
}
99+
100+
.methodDescription {
101+
font-size: 1rem;
102+
}
103+
104+
.methodRequest {
105+
display: grid;
106+
width: 100%;
107+
grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
108+
grid-template-rows: 100%;
109+
}
110+
111+
.methodRequestBG {
112+
background-color: rgb(165, 211, 51);
113+
}
114+
115+
.methodRequestLeft {
116+
border: 1px solid black;
117+
border-right: 0px;
118+
}
119+
120+
.methodRequestMid {
121+
border: 1px solid black;
122+
}
123+
124+
.methodRequestRight {
125+
border: 1px solid black;
126+
border-left: 0px;
127+
}
128+
129+
.mRHeader {
130+
font-weight: bold;
131+
}
132+
133+
.responseStructure {
134+
font-size: 1.7rem;
135+
}
136+
137+
.responseFormat {
138+
display: grid;
139+
grid-template-columns: calc(100% / 3) calc(200% / 3);
140+
}
141+
142+
.responseFormatHeader {
143+
font-weight: bold;
144+
}
145+
146+
.textLeftPadding {
147+
padding-left: 0.8rem;
148+
}
149+
150+
.documentationImageLink {
151+
width: fit-content;
152+
height: fit-content;
153+
}
154+
155+
@media (max-width: 1000px) {
156+
.documentationLeftSideBar {
157+
display: none;
158+
}
159+
160+
.documentationMainWrapper {
161+
grid-column: 1/3;
162+
grid-template-columns: 1rem minmax(340px, 1fr) calc(1rem+20px);
163+
}
164+
165+
.mlFlowOfficialLink {
166+
word-break: break-all;
167+
}
168+
169+
.textLeftPadding {
170+
padding-left: 0.4rem;
171+
}
172+
173+
.textHorizontalOverflow::-webkit-scrollbar {
174+
height: 10px;
175+
}
176+
}
177+
178+
.textHorizontalOverflow {
179+
overflow-x: auto;
180+
}

0 commit comments

Comments
 (0)