Skip to content

B
bkunyun
Commit 0683510d authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat: 数据集优化完成、差联调

parent fdd7233b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 135 deletions
src/assets/project/card.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 5</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/图表排序">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#8A9099" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形备份-3" fill="#8A9099" x="3" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-7" fill="#8A9099" x="3" y="7.75" width="3.25" height="3.25"></rect>
<rect id="矩形备份-4" fill="#8A9099" x="7.75" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-9" fill="#8A9099" x="7.75" y="7.75" width="3.25" height="3.25"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/cardActive.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/图表排序备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/图表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#1370FF" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形备份-3" fill="#1370FF" x="3" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-7" fill="#1370FF" x="3" y="7.75" width="3.25" height="3.25"></rect>
<rect id="矩形备份-4" fill="#1370FF" x="7.75" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-9" fill="#1370FF" x="7.75" y="7.75" width="3.25" height="3.25"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/filter.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/筛选备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/筛选备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组" transform="translate(1.780000, 2.250000)" stroke="#565C66" stroke-linejoin="round" stroke-width="1.5">
<polygon id="路径-37" points="0 0 12.4359884 0 7.73913801 5.73968697 7.73913801 12 4.97439538 10.7631496 4.97439538 5.85023682"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/table.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/列表排序备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/列表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#8A9099" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形" fill="#8A9099" x="3" y="3" width="8" height="1.5"></rect>
<rect id="矩形备份-10" fill="#8A9099" x="3" y="6.25" width="8" height="1.5"></rect>
<rect id="矩形备份-11" fill="#8A9099" x="3" y="9.5" width="8" height="1.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/tableActive.svg 0 → 100644
View file @ 0683510d
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/列表排序备份 2</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/列表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#1370FF" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形" fill="#1370FF" x="3" y="3" width="8" height="1.5"></rect>
<rect id="矩形备份-10" fill="#1370FF" x="3" y="6.25" width="8" height="1.5"></rect>
<rect id="矩形备份-11" fill="#1370FF" x="3" y="9.5" width="8" height="1.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx
View file @ 0683510d
......@@ -8,12 +8,12 @@
*/
// 按钮样式的单选组
import classnames from "classnames";
import { useMemo } from "react";
import { ReactElement, useMemo } from "react";
import style from "./index.module.css";
type radioOption = {
value: string;
label: string;
label: string | ReactElement;
};
type IRadioGroupOfButtonStyleProps = {
......@@ -21,6 +21,7 @@ type IRadioGroupOfButtonStyleProps = {
value: string;
handleRadio: any;
RadiosBoxStyle?: object;
radioBoxStyle?: object;
radioStyle?: object;
radioActiveBgBoxStyle?: object;
};
......@@ -31,6 +32,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
value,
handleRadio,
RadiosBoxStyle,
radioBoxStyle,
radioStyle,
radioActiveBgBoxStyle,
} = props;
......@@ -72,6 +74,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
key={options.value}
className={style.radioBox}
onClick={() => handleRadio(options.value)}
style={radioBoxStyle}
>
<div
className={classnames({
......
src/components/mui/MyMultipleMenu.tsx
View file @ 0683510d
......@@ -82,6 +82,7 @@ type IMyMultipleMenuProps = {
showSelectAll?: boolean; // 是否显示全选
selectAllText?: string; // 全选的文字
showHiddenIcon?: boolean; // 是否显示 展开收起箭头
iconColor?: string; // 展开收起箭头的颜色
};
const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
......@@ -93,6 +94,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
showSelectAll = false,
selectAllText = "全部",
showHiddenIcon = true,
iconColor,
} = props;
// 下拉框展示的相对位置参考元素
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
......@@ -138,9 +140,15 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
const randerShowHiddenIcon = () => {
if (Boolean(anchorEl)) {
return <ArrowDropUpIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
return (
<ArrowDropUpIcon sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }} />
);
} else {
return <ArrowDropDownIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
return (
<ArrowDropDownIcon
sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }}
/>
);
}
};
......
src/components/mui/MyTableNew.tsx
View file @ 0683510d
......@@ -16,7 +16,7 @@ import { createTheme, ThemeProvider } from "@mui/material";
import MyTooltip from "./MyTooltip";
import noFile from "@/assets/project/noFile.svg";
type Order = "asc" | "desc"; // 升序为asc，降序为desc。
type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
export type sortState = {
field: string | null | undefined | ""; // 根据哪个属性来排序
......@@ -193,9 +193,6 @@ const MyTable = (props: IMyTableProps) => {
left: 0,
right: 0,
margin: "auto",
// top: "50%",
// left: "50%",
// transform: "translate(-50%, -50%)",
zIndex: 1,
},
},
......@@ -204,15 +201,16 @@ const MyTable = (props: IMyTableProps) => {
});
}, [hasCheckbox, hasTableFooter, loading]);
const onSelectAllClick = useCallback(() => {
return (e: any) => {
const onSelectAllClick = useCallback(
(e: any) => {
if (e.target.checked) {
setSelectItems && setSelectItems(rows.map((row) => row[key]));
} else {
setSelectItems && setSelectItems([]);
}
};
}, [setSelectItems, key, rows]);
},
[setSelectItems, key, rows]
);
const onSelectRowClick = useCallback(
(e: any, itemValue: string) => {
......@@ -233,26 +231,26 @@ const MyTable = (props: IMyTableProps) => {
const handleSort = useCallback(
(field: string) => {
if (sortState?.field === field) {
if (sortState?.order === "asc") {
if (sortState?.order === "ASC") {
setSortState({
field,
order: "desc",
order: "DESC",
});
} else if (sortState?.order === "desc") {
} else if (sortState?.order === "DESC") {
setSortState({
field,
order: "asc",
order: "ASC",
});
} else {
setSortState({
field,
order: "desc",
order: "DESC",
});
}
} else {
setSortState({
field,
order: "desc",
order: "DESC",
});
}
},
......@@ -270,7 +268,7 @@ const MyTable = (props: IMyTableProps) => {
selectItems.length > 0 && selectItems.length < rows.length
}
checked={rows.length > 0 && selectItems.length === rows.length}
onChange={onSelectAllClick}
onChange={(e) => onSelectAllClick(e)}
/>
</TableCell>
)}
......@@ -282,9 +280,9 @@ const MyTable = (props: IMyTableProps) => {
<img
src={
sortState?.field === headCell.id
? sortState?.order === "asc"
? sortState?.order === "ASC"
? ascIcon
: sortState?.order === "desc"
: sortState?.order === "DESC"
? descIcon
: sortIcon
: sortIcon
......
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.module.css 0 → 100644
View file @ 0683510d
.list {
flex: 1;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.datasetLi {
flex: 1;
min-width: 20%;
margin: 0 16px 16px 0;
border: 1px solid rgba(235, 237, 240, 1);
border-radius: 4px;
min-height: 275px;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.datasetLi:nth-child(4n) {
margin-right: 0;
}
.datasetLi:nth-last-child(1) {
margin-bottom: 0;
}
.datasetLi:nth-last-child(2) {
margin-bottom: 0;
}
.datasetLi:nth-last-child(3) {
margin-bottom: 0;
}
.datasetLi:nth-last-child(4) {
margin-bottom: 0;
}
.datasetLiTop {
height: 55%;
box-sizing: border-box;
}
.datasetLiBottom {
height: 45%;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
display: flex;
flex-direction: column;
}
.datasetLiTitle {
height: 38px;
line-height: 38px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
text-align: center;
font-weight: 600;
width: 100%;
overflow: hidden;
}
.datasetLiDataList {
flex: 1;
overflow: overlay;
}
.noDataList {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
}
.datasetLiDataLi {
height: 20px;
line-height: 20px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
padding: 0 16px;
display: flex;
justify-content: space-between;
}
.datasetLiDataLi:nth-child(2n) {
background-color: rgba(235, 237, 240, 1);
}
.datasetLiDataLiKey {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.datasetLiDataLiValue {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.nullBox {
visibility: hidden;
}
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.tsx
View file @ 0683510d
import { useState, useEffect, useMemo } from "react";
import { useMemo } from "react";
import NglView from "@/components/BusinessComponents/NglView";
import KekuleView from "@/components/BusinessComponents/KekuleView";
import MyTooltip from "@/components/mui/MyTooltip";
import Checkbox from "@mui/material/Checkbox";
import style from "./index.module.css";
import classNames from "classnames";
import NoData from "@/components/BusinessComponents/NoData";
type IDatasetCardTableProps = {};
type IDatasetCardTableProps = {
list: Array<any>;
graphicDimension: string;
showData: Array<string>;
selectItems: Array<string>;
setSelectItems: any;
};
const DatasetCardTable = (props: IDatasetCardTableProps) => {
const { list, graphicDimension, showData, selectItems, setSelectItems } =
props;
// 选择/取消分子
const handleSelectItem = (id: string) => {
let list: string[] = [...selectItems];
if (selectItems.filter((e) => e === id).length > 0) {
list = list.filter((e) => e !== id);
setSelectItems(list);
} else {
list.push(id);
setSelectItems(list);
}
};
// 空盒子用于布局
const nullBox = useMemo(() => {
if (list.length > 4) {
let nullBoxLength = 8 - list.length;
return new Array(nullBoxLength).fill("");
} else {
return [];
}
}, [list]);
return (
<div>
table
<div style={{ height: "300px" }}>123</div>
<div style={{ height: "300px" }}>123</div>
<div style={{ height: "300px" }}>123</div>
<div style={{ height: "300px" }}>123</div>
<div style={{ height: "300px" }}>123</div>
<div style={{ height: "300px" }}>123</div>
</div>
<>
{list.length !== 0 && (
<>
<div className={style.list}>
{list.map((item, index) => {
return (
<div
className={style.datasetLi}
key={item.id}
onClick={() => {
handleSelectItem(item.id);
}}
>
<div className={style.datasetLiTop}>
{graphicDimension === "2D" && (
<KekuleView id={`${index}2d`} smi={item.smiles} />
)}
{graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} />
)}
</div>
<div className={style.datasetLiBottom}>
<div className={style.datasetLiTitle} title={item.smiles}>
{item.smiles}
</div>
{showData.length !== 0 && (
<div className={style.datasetLiDataList}>
{Object.keys(item)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span className={style.datasetLiDataLiKey}>
{key}
</span>
<MyTooltip title={item[key]}>
<span className={style.datasetLiDataLiValue}>
{item[key]}
</span>
</MyTooltip>
</div>
);
})}
</div>
)}
{showData.length === 0 && (
<div className={style.noDataList}>请选择显示数据</div>
)}
</div>
{graphicDimension === "2D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{graphicDimension === "3D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
background: "RGBA(30, 38, 51, 1)",
border: "1px solid #565C66",
borderRadius: "2px",
}}
checked={selectItems.includes(item.id)}
/>
)}
</div>
);
})}
{nullBox.map((item, index) => {
return (
<div
className={classNames({
[style.datasetLi]: true,
[style.nullBox]: true,
})}
key={index + "null"}
></div>
);
})}
</div>
</>
)}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</>
);
};
......
src/views/Project/ProjectData/SeeDataset/components/DatasetTable/index.tsx
View file @ 0683510d
import { useState, useEffect, useMemo } from "react";
import { useMemo } from "react";
import MyTable from "@/components/mui/MyTableNew";
import { sortState } from "@/components/mui/MyTableNew";
type IDatasetTableProps = {
list: Array<any>;
showData: Array<string>;
selectItems: Array<any>;
setSelectItems: any;
sortState: sortState;
setSortState: any;
};
const DatasetTable = (props: IDatasetTableProps) => {
console.log(window.innerWidth);
const { list, showData } = props;
const {
list,
showData,
selectItems,
setSelectItems,
sortState,
setSortState,
} = props;
const headCells = useMemo(() => {
// let width = showData.length === 0 ? "100%" : `${100 / showData.length}%`;
let width =
showData.length === 0
? "100%"
: `${(window.innerWidth - 112) / showData.length}px`;
? window.innerWidth - 112
: `${(window.innerWidth - 112) / showData.length}`;
return showData.map((item, index) => {
return {
id: item,
label: item,
width,
showOverflowTooltip: true,
// width: index ? width : "",
// width: "100%",
// width: "200px",
sort: true,
};
});
......@@ -34,6 +41,10 @@ const DatasetTable = (props: IDatasetTableProps) => {
headCells={headCells}
hasCheckbox={true}
fixedHead={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
sortState={sortState}
setSortState={setSortState}
></MyTable>
);
};
......
src/views/Project/ProjectData/SeeDataset/components/Download/index.tsx
View file @ 0683510d
......@@ -102,7 +102,6 @@ const Download = (props: IDownloadProps) => {
value={downloadType}
options={options}
onChange={(e) => handleChange(e)}
// fullWidth={true}
title="下载格式"
isTitle={true}
sx={{
......
src/views/Project/ProjectData/SeeDataset/index.module.css
View file @ 0683510d
......@@ -30,134 +30,114 @@
justify-content: flex-start;
align-items: center;
}
.screensRight {
display: flex;
justify-content: flex-end;
align-items: center;
.separator {
width: 1px;
height: 20px;
background-color: rgba(230, 232, 235, 1);
margin: 0 15px;
}
.selectShowData {
margin-left: 24px;
font-size: 14px;
.graphicDimension {
line-height: 22px;
padding: 5px 16px;
color: rgba(138, 144, 153, 1);
background-color: #fff;
border-radius: 4px;
cursor: pointer;
}
.graphicDimensionActive {
color: rgba(19, 112, 255, 1);
background-color: rgba(240, 242, 245, 1);
}
.table {
flex: 1;
overflow-y: overlay;
display: flex;
flex-direction: column;
.marginRight20 {
margin-right: 20px;
}
.list {
flex: 1;
.screensRight {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
position: relative;
}
.datasetLi {
flex: 1;
min-width: 20%;
margin: 0 16px 16px 0;
border: 1px solid rgba(235, 237, 240, 1);
.searchBox {
position: absolute;
top: 36px;
right: 0;
width: 662px;
box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.14);
background-color: #fff;
border-radius: 4px;
min-height: 275px;
z-index: 10;
padding: 20px 24px 24px;
box-sizing: border-box;
position: relative;
}
.searchBox img {
cursor: pointer;
}
.datasetLi:nth-child(4n) {
margin-right: 0;
.searchTop {
margin-bottom: 12px;
}
.datasetLi:nth-last-child(1) {
margin-bottom: 0;
.searchTopText {
display: inline-block;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
margin-right: 16px;
font-weight: 600;
}
.datasetLi:nth-last-child(2) {
margin-bottom: 0;
.width250 {
width: 250px;
}
.datasetLi:nth-last-child(3) {
margin-bottom: 0;
.width120 {
width: 120px;
}
.datasetLi:nth-last-child(4) {
margin-bottom: 0;
.width180 {
width: 180px;
}
.datasetLiTop {
height: 55%;
box-sizing: border-box;
.searchList {
margin-bottom: 24px;
}
.datasetLiBottom {
height: 45%;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
.searchLi {
display: flex;
flex-direction: column;
}
.datasetLiTitle {
height: 38px;
line-height: 38px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
text-align: center;
font-weight: 600;
width: 100%;
overflow: hidden;
}
.datasetLiDataList {
flex: 1;
overflow: overlay;
justify-content: flex-start;
align-items: center;
margin-bottom: 16px;
}
.noDataList {
flex: 1;
.searchFooter {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
color: rgba(138, 144, 153, 1);
}
.searchFooterLeft {
color: rgba(19, 112, 255, 1);
font-size: 14px;
line-height: 22px;
}
.datasetLiDataLi {
height: 20px;
line-height: 20px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
padding: 0 16px;
display: flex;
justify-content: space-between;
}
.datasetLiDataLi:nth-child(2n) {
background-color: rgba(235, 237, 240, 1);
}
.datasetLiDataLiKey {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.datasetLiDataLiValue {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
.selectShowData {
font-size: 14px;
color: rgba(30, 38, 51, 1);
}
.pagination {
height: 76px;
min-height: 76px;
.table {
flex: 1;
overflow-y: overlay;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.foot {
position: absolute;
bottom: 0;
background-color: #fff;
width: 100%;
width: calc(100vw - 64px);
box-sizing: border-box;
height: 64px;
height: 76px;
padding: 0 32px;
margin: 0 32px;
display: flex;
justify-content: flex-end;
align-items: center;
box-shadow: 0px -3px 10px 0px rgba(0, 24, 57, 0.04);
}
.nullBox {
visibility: hidden;
.borderTop {
border-top: 1px solid rgba(240, 242, 245, 1);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment