Thanks to visit codestin.com
Credit goes to github.com

Skip to content

remove extra navigation icon and add control for search button #501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blrchen merged 4 commits into from
Jul 26, 2022
Merged

remove extra navigation icon and add control for search button #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
94d07b1
remove extra navigation icon and add control for search button
Jul 25, 2022
c53df61
move 'isFeature' to utils and make node types enums
Jul 25, 2022
d1801f2
Merge branch 'main' into enya/ui-bug-fix
Jul 26, 2022
513a04d
codes' details and formats improvement
Jul 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ui/src/components/featureList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,7 @@ const FeatureList: React.FC = () => {
onPressEnter={onClickSearch}
/>
<Button
disabled={!project}
onClick={onClickSearch}
type="primary"
style={{ marginLeft: "5px" }}
Expand Down
4 changes: 3 additions & 1 deletion ui/src/components/graph/graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import ReactFlow, {
import { useSearchParams } from "react-router-dom";
import LineageNode from "./graphNode";
import { findNodeInElement, getLayoutedElements } from "./utils";
import { isFeature } from "../../utils/utils";

const nodeTypes = {
"custom-node": LineageNode,
Expand Down Expand Up @@ -108,7 +109,8 @@ const Graph: React.FC<Props> = ({ data, nodeId }) => {
},
data: {
...element.data,
active: element.id === node.id,
active:
element.id === node.id && isFeature(element.data?.subtitle),
},
});
}
Expand Down
12 changes: 4 additions & 8 deletions ui/src/components/graph/graphNodeDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { fetchFeature } from "../../api";
import { Feature } from "../../models/model";
import { LoadingOutlined } from "@ant-design/icons";
import { Card, Spin, Typography } from "antd";
import { isFeature } from "../../utils/utils";

const { Title } = Typography;

Expand All @@ -20,13 +21,6 @@ const GraphNodeDetails: React.FC = () => {
const [feature, setFeature] = useState<Feature>();
const [loading, setLoading] = useState<boolean>(false);

const isFeature = (featureType: string) => {
return (
featureType === "feathr_anchor_feature_v1" ||
featureType === "feathr_derived_feature_v1"
);
};

useEffect(() => {
const fetchFeatureData = async () => {
setFeature(undefined);
Expand All @@ -47,7 +41,9 @@ const GraphNodeDetails: React.FC = () => {
<Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
) : (
<div style={{ margin: "2%" }}>
{!feature && <p>Click on node to show metadata and metric details</p>}
{!feature && (
<p>Click on feature node to show metadata and metric details</p>
)}
{feature?.attributes.transformation && (
<Card>
<Title level={4}>Transformation</Title>
Expand Down
11 changes: 6 additions & 5 deletions ui/src/pages/feature/lineageGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { FeatureLineage } from "../../models/model";
import { LoadingOutlined } from "@ant-design/icons";
import GraphNodeDetails from "../../components/graph/graphNodeDetails";
import { getElements } from "../../components/graph/utils";
import { FeatureType } from "../../utils/utils";

const { Title } = Typography;
const { TabPane } = Tabs;
Expand Down Expand Up @@ -67,13 +68,13 @@ const LineageGraph: React.FC = () => {
value={featureType}
onChange={(e) => toggleFeatureType(e.target.value)}
>
<Radio.Button value="all_nodes">All Features</Radio.Button>
<Radio.Button value="feathr_source_v1"> Source </Radio.Button>
<Radio.Button value="feathr_anchor_v1">Anchor</Radio.Button>
<Radio.Button value="feathr_anchor_feature_v1">
<Radio.Button value={FeatureType.AllNodes}>All Nodes</Radio.Button>
<Radio.Button value={FeatureType.Source}> Source </Radio.Button>
<Radio.Button value={FeatureType.Anchor}>Anchor</Radio.Button>
<Radio.Button value={FeatureType.AnchorFeature}>
Anchor Feature
</Radio.Button>
<Radio.Button value="feathr_derived_feature_v1">
<Radio.Button value={FeatureType.DerivedFeature}>
Derived Feature
</Radio.Button>
</Radio.Group>
Expand Down
15 changes: 15 additions & 0 deletions ui/src/utils/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,18 @@ export const getMsalConfig = () => {

return new PublicClientApplication(msalConfig);
};

export const enum FeatureType {
AllNodes = "all_nodes",
Source = "feathr_source_v1",
Anchor = "feathr_anchor_v1",
AnchorFeature = "feathr_anchor_feature_v1",
DerivedFeature = "feathr_derived_feature_v1",
}

export const isFeature = (featureType: string) => {
return (
featureType === FeatureType.AnchorFeature ||
featureType === FeatureType.DerivedFeature
);
};