From 4dbbef0ec33c8a37300295e5ed5a940c981a3ce8 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 2 Mar 2020 23:14:24 +0000 Subject: [PATCH 1/9] Improving structure and sidebar scrolling --- .../query_string_input/query_string_input.tsx | 1 - .../public/angular/templates/_graph.scss | 17 +- .../graph/public/angular/templates/index.html | 74 ++-- .../plugins/graph/public/components/_app.scss | 165 +++---- .../graph/public/components/_index.scss | 1 + .../components/add_data/_add_data_panel.scss | 103 +++++ .../public/components/add_data/_index.scss | 1 + .../components/add_data/add_data_panel.tsx | 417 ++++++++++-------- .../plugins/graph/public/components/app.tsx | 59 ++- .../public/components/edit_nodes_panel.tsx | 196 ++++---- .../guidance_panel/_guidance_panel.scss | 4 +- .../guidance_panel/guidance_panel.tsx | 6 +- 12 files changed, 580 insertions(+), 464 deletions(-) create mode 100644 x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss create mode 100644 x-pack/legacy/plugins/graph/public/components/add_data/_index.scss diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx index 8d031690e996c..f1f055160a3ca 100644 --- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx +++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx @@ -524,7 +524,6 @@ export class QueryStringInputUI extends Component {
- - +
@@ -11,10 +10,7 @@ i18n-default-message="Inspect" >
-
+
http://host:port/{{ selectedIndex.name }}/_graph/explore
  • @@ -49,39 +45,45 @@
-
- -
+
-
- +
+
+
+ +
diff --git a/x-pack/legacy/plugins/graph/public/components/_app.scss b/x-pack/legacy/plugins/graph/public/components/_app.scss index 8df55e5995034..5d85452cb9314 100644 --- a/x-pack/legacy/plugins/graph/public/components/_app.scss +++ b/x-pack/legacy/plugins/graph/public/components/_app.scss @@ -1,129 +1,90 @@ -.gphGraph__bar { - margin: 0px $euiSizeS $euiSizeS $euiSizeS; +@import "@elastic/eui/src/components/header/variables"; + +// variables +$sidebarWidth: $euiSizeXXL * 10; + +.gphGraph__workspace, +.gphGraph__workspace__inner { + position: relative; + flex-grow: 1; + display: flex; + flex-direction: column; } -.gphAddData { +.gphGraph__visContainer { position: absolute; - right: 0; - bottom: 0; + top: 116px; + left: 0; + width: 100%; height: calc(100% - 116px); - background-color: $euiPageBackgroundColor; - width: $euiSizeXXL * 10; - border-top: 1px solid $euiBorderColor; - z-index: $euiZNavigation; - - &__body { - padding: $euiSize; - - .euiPanel { - margin-bottom: $euiSize; - } - .euiText { - margin-bottom: $euiSizeXS; - } - } - - &__editNodeName + &__editNodeName { - margin-top: $euiSizeS; - } + width: calc(100% - #{$sidebarWidth}); - &__prependIcon { - display: flex; - width: $euiSize * 2; - align-items: center; - justify-content: center; - background: $euiColorLightShade; - border-right: 1px solid $euiBorderColor; + .gphVisualization { + height: 100%; } +} - &__circleIcon { - display: flex; - width: $euiSizeL; - height: $euiSizeL; - align-items: center; - justify-content: center; - border-radius: 50%; - - .gphLegacyIcon { - margin-right: 0; - text-align: center; - display: inline-flex; - width: auto; - font-size: 12px; - } - } +.gphGraph__bar { + margin: 0px $euiSizeS $euiSizeS $euiSizeS; } -.gphAddData__header { +.gphGraph__mainWrapper { + flex-grow: 1; display: flex; - border-bottom: 1px solid $euiBorderColor; - padding: $euiSize 0; - - &__title { - flex: 1; - padding: 0 $euiSize; - } - - &__title, - &__toggleIcon { - padding: 0 $euiSize; - } + flex-direction: column; } +.gphGraph__openSidebar { + @include euiBottomShadowSmall; + position: absolute; + top: $euiSizeS; + right: $euiSizeXS; + background: $euiColorEmptyShade; + padding: $euiSizeXS; +} -.gphAddData__nodesArea { +.gphGraph__graphWrapper { + background-color: $euiColorEmptyShade; position: relative; - padding: $euiSize $euiSizeS; - border: $euiBorderThin; - border-radius: $euiBorderRadius; - margin-top: $euiSizeS; - margin-bottom: $euiSize; +} - > span { - margin-right: $euiSizeXS; +.gphGraphSidebar { + background-color: $euiPageBackgroundColor; + width: $sidebarWidth; + overflow: hidden; - &:last-of-type { - margin-right: 0 - } + > * { + width: $sidebarWidth; } - span + span { - margin-top: $euiSizeXS; + &__header { + display: flex; + border-bottom: 1px solid $euiBorderColor; + padding: $euiSize 0; + } + &__title { + flex: 1; + padding: 0 $euiSize; } - &:hover, - &:focus { - .gphAddData__nodesArea__delete { - visibility: visible; - opacity: 1; - } + &__title, + &__toggleIcon { + padding: 0 $euiSize; } - &__delete { - @include euiBottomShadowSmall; - position: absolute; - top: 50%; - right: 0; - margin-right: -$euiSizeS; - margin-top: -$euiSizeM; - background: $euiColorEmptyShade; - padding: $euiSizeXS; - visibility: hidden; - opacity: 0; + &__body { + @include euiScrollBar; + padding-bottom: 0; /* 1 */ + flex-grow: 1; + flex-basis: 1px; /* Fixes scrolling for Firefox */ + overflow-y: auto; } -} -.gphAddData__nodesAddList { - box-sizing: border-box; + &__bodyOverflow { + padding: $euiSize; - .gphAddData__circleIcon { - margin-right: $euiSizeS; + > *:last-child { + margin-bottom: $euiSize; /* 1 */ + } } } - -.gphGraph__openSidebar { - @include euiBottomShadowSmall; - background: $euiColorEmptyShade; - padding: $euiSizeXS; -} - diff --git a/x-pack/legacy/plugins/graph/public/components/_index.scss b/x-pack/legacy/plugins/graph/public/components/_index.scss index a06209e7e4d34..a20d78e0f5f79 100644 --- a/x-pack/legacy/plugins/graph/public/components/_index.scss +++ b/x-pack/legacy/plugins/graph/public/components/_index.scss @@ -7,3 +7,4 @@ @import './settings/index'; @import './legacy_icon/index'; @import './field_manager/index'; +@import './add_data/index'; \ No newline at end of file diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss b/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss new file mode 100644 index 0000000000000..7ff96cfaee727 --- /dev/null +++ b/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss @@ -0,0 +1,103 @@ +.gphAddData { + width: $sidebarWidth; + border-top: 1px solid $euiBorderColor; + background-color: $euiPageBackgroundColor; + overflow: hidden; + + &__inner { + display: flex; + flex: 1; + flex-direction: column; + } + + &__body { + padding: $euiSize; + + .euiPanel { + margin-bottom: $euiSize; + } + .euiText { + margin-bottom: $euiSizeXS; + } + } + + &__editNodeName + &__editNodeName { + margin-top: $euiSizeS; + } + + &__prependIcon { + display: flex; + width: $euiSize * 2; + align-items: center; + justify-content: center; + background: $euiColorLightShade; + border-right: 1px solid $euiBorderColor; + } + + &__circleIcon { + display: flex; + width: $euiSizeL; + height: $euiSizeL; + align-items: center; + justify-content: center; + border-radius: 50%; + + .gphLegacyIcon { + margin-right: 0; + text-align: center; + display: inline-flex; + width: auto; + font-size: 12px; + } + } +} + +.gphAddData__nodesArea { + position: relative; + padding: $euiSize $euiSizeS; + border: $euiBorderThin; + border-radius: $euiBorderRadius; + margin-top: $euiSizeS; + margin-bottom: $euiSize; + + > span { + margin-right: $euiSizeXS; + + &:last-of-type { + margin-right: 0; + } + } + + span + span { + margin-top: $euiSizeXS; + } + + &:hover, + &:focus { + .gphAddData__nodesArea__delete { + visibility: visible; + opacity: 1; + } + } + + &__delete { + @include euiBottomShadowSmall; + position: absolute; + top: 50%; + right: 0; + margin-right: -$euiSizeS; + margin-top: -$euiSizeM; + background: $euiColorEmptyShade; + padding: $euiSizeXS; + visibility: hidden; + opacity: 0; + } +} + +.gphAddData__nodesAddList { + box-sizing: border-box; + + .gphAddData__circleIcon { + margin-right: $euiSizeS; + } +} diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/_index.scss b/x-pack/legacy/plugins/graph/public/components/add_data/_index.scss new file mode 100644 index 0000000000000..2e524691078f3 --- /dev/null +++ b/x-pack/legacy/plugins/graph/public/components/add_data/_index.scss @@ -0,0 +1 @@ +@import './add_data_panel'; \ No newline at end of file diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx index 3575f638207a4..7f5d7bd74eca4 100644 --- a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx @@ -22,6 +22,7 @@ import { EuiTextAlign, } from '@elastic/eui'; import { connect } from 'react-redux'; +import classNames from 'classnames'; import { GraphState, metaDataSelector, selectedFieldsSelector } from '../../state_management'; import { SignificantSearchBar } from './significant_search_bar'; import { EditNodesPanel, NodeIcon } from '../edit_nodes_panel'; @@ -77,14 +78,14 @@ function AddDataPanelComponent(props: any) { return ; } return ( -
-
- + +
+

Add Data

 { @@ -92,211 +93,239 @@ function AddDataPanelComponent(props: any) { }} />
- {workspace && ( -
- - - - - {(query || !props.selectedNodes || !props.selectedNodes.length > 0) && ( - { - setQuery(query); - }} - /> - )} - - {query ? ( -

- Based on current search query{' '} - setQuery(undefined)} - color="danger" +

+
+ {workspace && ( + + + + +

Significant vertices

+ + } + > + + {(query || !props.selectedNodes || !props.selectedNodes.length > 0) && ( + { + setQuery(query); + }} /> -

- ) : props.selectedNodes && props.selectedNodes.length > 0 ? ( - <> - -

Based on current selection of {props.selectedNodes.length} vertices:

- -
- {props.selectedNodes.map(node => ( - - - - ))} + )} + + {query ? ( +

+ Based on current search query{' '} setQuery(undefined)} color="danger" - onClick={() => { - workspace.selectNone(); - props.notifyAngular(); - }} /> -

- - ) : ( - -

Based on vertices in the workspace

- - )} - - !workspace.nodes || - !workspace.nodes.some( - (workspaceNode: any) => - workspaceNode.data.term === vertex.term && - workspaceNode.data.field === vertex.field - ) - ) - .map(vertex => ({ - label: `${vertex.field}: ${vertex.term}`, - icon: , - size: 's', - onClick: async () => { - await workspace.addNodes([vertex]); - await loadInterestingNodes(workspace); - }, - }))} - /> - - { - await workspace.addNodes(significantVertices); - await loadInterestingNodes(workspace); +

+ ) : props.selectedNodes && props.selectedNodes.length > 0 ? ( + <> + +

+ Based on current selection of {props.selectedNodes.length} vertices: +

+ +
+ {props.selectedNodes.map(node => ( + + + + ))} + { + workspace.selectNone(); + props.notifyAngular(); + }} + /> +
+ + ) : ( + +

Based on vertices in the workspace

+ + )} + - Add all - - - - - - - - - ({ label: field.name }))} - selectedOptions={selectedField ? [{ label: selectedField.name }] : []} - onChange={choices => { - setSelectedField(props.fields.find(field => field.name === choices[0].label)); - }} - isClearable - /> - {selectedField && ( - <> - - !workspace.nodes || - !workspace.nodes.some( - (workspaceNode: any) => - workspaceNode.data.term === vertex.term && - workspaceNode.data.field === vertex.field - ) - ) - .map(vertex => ({ - label: `${vertex.field}: ${vertex.term}`, - icon: , - size: 's', - onClick: async () => { - await workspace.addNodes([vertex]); - workspace.getTermsForField(res => { - setTerms(res); - }, selectedField.name); - }, - }))} - /> - + listItems={significantVertices + .filter( + // filter out all vertices already added + vertex => + !workspace.nodes || + !workspace.nodes.some( + (workspaceNode: any) => + workspaceNode.data.term === vertex.term && + workspaceNode.data.field === vertex.field + ) + ) + .map(vertex => ({ + label: `${vertex.field}: ${vertex.term}`, + icon: , + size: 's', + onClick: async () => { + await workspace.addNodes([vertex]); + await loadInterestingNodes(workspace); + }, + }))} + /> + { - await workspace.addNodes(terms); - workspace.getTermsForField(res => { - setTerms(res); - }, selectedField.name); + await workspace.addNodes(significantVertices); + await loadInterestingNodes(workspace); }} > Add all - - )} - - - - - - - { - setFreeField(e.target.value); - }} - />{' '} - ={' '} - { - setFreeTerm(e.target.value); - }} - /> - { - await workspace.addNodes([ - { - color: '#aaa', - icon: iconChoices[0], - field: freeField, - term: freeTerm, - alwaysKeep: true, - }, - ]); - }} + + + + + + + +

Vertices by field

+ + } > - Add - - - - - + ({ label: field.name }))} + selectedOptions={selectedField ? [{ label: selectedField.name }] : []} + onChange={choices => { + setSelectedField( + props.fields.find(field => field.name === choices[0].label) + ); + }} + isClearable + /> + {selectedField && ( + <> + + !workspace.nodes || + !workspace.nodes.some( + (workspaceNode: any) => + workspaceNode.data.term === vertex.term && + workspaceNode.data.field === vertex.field + ) + ) + .map(vertex => ({ + label: `${vertex.field}: ${vertex.term}`, + icon: , + size: 's', + onClick: async () => { + await workspace.addNodes([vertex]); + workspace.getTermsForField(res => { + setTerms(res); + }, selectedField.name); + }, + }))} + /> + + { + await workspace.addNodes(terms); + workspace.getTermsForField(res => { + setTerms(res); + }, selectedField.name); + }} + > + Add all + + + )} + + + + + + +

Free vertex

+ + } + > + { + setFreeField(e.target.value); + }} + />{' '} + ={' '} + { + setFreeTerm(e.target.value); + }} + /> + { + await workspace.addNodes([ + { + color: '#aaa', + icon: iconChoices[0], + field: freeField, + term: freeTerm, + alwaysKeep: true, + }, + ]); + }} + > + Add + + + + + + )}
- )} -
+
+ ); } diff --git a/x-pack/legacy/plugins/graph/public/components/app.tsx b/x-pack/legacy/plugins/graph/public/components/app.tsx index 3c0e249db9e7f..2a27ed8ae8845 100644 --- a/x-pack/legacy/plugins/graph/public/components/app.tsx +++ b/x-pack/legacy/plugins/graph/public/components/app.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiButtonIcon, EuiSpacer } from '@elastic/eui'; +import { EuiButtonIcon, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { DataPublicPluginStart } from 'src/plugins/data/public'; import { Provider } from 'react-redux'; @@ -70,28 +70,41 @@ export function GraphApp(props: GraphAppProps) {
- {sidebarOpen && ( - - )} - {props.isInitialized && !sidebarOpen && ( - { - setSidebarOpen(true); - }} - iconType="menuLeft" - style={{ position: 'absolute', top: 122, right: 5, zIndex: 999 }} - color="text" - /> - )} - {!props.isInitialized && ( - { - setPickerOpen(true); - }} - /> - )} + +
+ + + {!props.isInitialized && ( + { + setPickerOpen(true); + }} + /> + )} + {props.isInitialized && !sidebarOpen && ( + { + setSidebarOpen(true); + }} + iconType="menuLeft" + color="text" + /> + )} + + + {sidebarOpen && ( + + + + )} + +
diff --git a/x-pack/legacy/plugins/graph/public/components/edit_nodes_panel.tsx b/x-pack/legacy/plugins/graph/public/components/edit_nodes_panel.tsx index baa53f7922d77..d20a1f190cd35 100644 --- a/x-pack/legacy/plugins/graph/public/components/edit_nodes_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/edit_nodes_panel.tsx @@ -48,13 +48,13 @@ function EditNodesPanelComponent(props: any) { const [refresher, setRefresher] = useState(0); return ( -
-
- + +
+

Edit Selection

 { @@ -62,105 +62,113 @@ function EditNodesPanelComponent(props: any) { }} />
- {workspace && ( -
- - -

Selected vertices

- +
+
+ {workspace && ( + + + + +

Selected vertices

+ - + - {workspace && - workspace.selectedNodes && - workspace.selectedNodes.length > 0 && - workspace.selectedNodes.map(node => ( - - { - node.label = e.target.value; - // super dirty hack to refresh component with only change in mutable data structure - setRefresher(refresher + 1); - props.notifyAngular(); - }} - prepend={ -
- -
- } - /> - - ))} - + {workspace && + workspace.selectedNodes && + workspace.selectedNodes.length > 0 && + workspace.selectedNodes.map(node => ( + + { + node.label = e.target.value; + // super dirty hack to refresh component with only change in mutable data structure + setRefresher(refresher + 1); + props.notifyAngular(); + }} + prepend={ +
+ +
+ } + /> + + ))} + + - - -

Styles

- + + + +

Styles

+ - + - {workspace && workspace.selectedNodes && workspace.selectedNodes.length > 0 && ( - <> - - { - workspace.selectedNodes.forEach(node => { - node.color = newColor; - }); + {workspace && workspace.selectedNodes && workspace.selectedNodes.length > 0 && ( + <> + + { + workspace.selectedNodes.forEach(node => { + node.color = newColor; + }); - setRefresher(refresher + 1); - props.notifyAngular(); - }} - /> - + setRefresher(refresher + 1); + props.notifyAngular(); + }} + /> + - - { - const { label, value } = option; - return ( - - {' '} - {label} - - ); - }} - options={iconChoices.map(currentIcon => ({ - label: currentIcon.label, - value: currentIcon, - }))} - selectedOptions={[ - { - label: workspace.selectedNodes[0].icon.label, - value: workspace.selectedNodes[0].icon, - }, - ]} - onChange={choices => { - workspace.selectedNodes.forEach(node => { - node.icon = choices[0].value!; - }); + + { + const { label, value } = option; + return ( + + {' '} + {label} + + ); + }} + options={iconChoices.map(currentIcon => ({ + label: currentIcon.label, + value: currentIcon, + }))} + selectedOptions={[ + { + label: workspace.selectedNodes[0].icon.label, + value: workspace.selectedNodes[0].icon, + }, + ]} + onChange={choices => { + workspace.selectedNodes.forEach(node => { + node.icon = choices[0].value!; + }); - setRefresher(refresher + 1); - props.notifyAngular(); - }} - compressed - /> - - - )} - + setRefresher(refresher + 1); + props.notifyAngular(); + }} + compressed + /> + + + )} + + + + )}
- )} -
+
+ ); } diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss index e1423b794dcd3..efd3cbebe0282 100644 --- a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss @@ -1,6 +1,8 @@ .gphGuidancePanel { max-width: 580px; - margin: $euiSizeL 0; + align-self: center; + margin-top: $euiSizeXL; + } .gphGuidancePanel__list { diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx index b4908c9b0aeb1..efc3d087a38e1 100644 --- a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx @@ -205,11 +205,7 @@ function GuidancePanelComponent(props: GuidancePanelProps) { ); } - return ( - - {content} - - ); + return
{content}
; } export const GuidancePanel = connect( From c3b4080134a210a1bdd77a72fd1b3faa573a64f8 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 3 Mar 2020 00:50:40 +0000 Subject: [PATCH 2/9] Toolbar styles --- .../plugins/graph/public/components/_app.scss | 5 +- .../components/add_data/add_data_panel.tsx | 466 +++++++++--------- .../plugins/graph/public/components/app.tsx | 12 +- .../_graph_visualization.scss | 43 ++ .../graph_visualization.tsx | 337 +++++++------ 5 files changed, 464 insertions(+), 399 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/components/_app.scss b/x-pack/legacy/plugins/graph/public/components/_app.scss index 5d85452cb9314..af4ab9ad779bc 100644 --- a/x-pack/legacy/plugins/graph/public/components/_app.scss +++ b/x-pack/legacy/plugins/graph/public/components/_app.scss @@ -13,11 +13,10 @@ $sidebarWidth: $euiSizeXXL * 10; .gphGraph__visContainer { position: absolute; - top: 116px; + top: 80px; left: 0; - width: 100%; - height: calc(100% - 116px); width: calc(100% - #{$sidebarWidth}); + height: 100%; .gphVisualization { height: 100%; diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx index 7f5d7bd74eca4..d2aa4bd1bb5f3 100644 --- a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx @@ -78,254 +78,256 @@ function AddDataPanelComponent(props: any) { return ; } return ( - -
- -

Add Data

- + + +
+ +

Add Data

+ - { - props.setSidebarOpen(false); - }} - /> -
-
-
- {workspace && ( - - - - -

Significant vertices

- - } - > - - {(query || !props.selectedNodes || !props.selectedNodes.length > 0) && ( - { - setQuery(query); - }} - /> - )} - - {query ? ( -

- Based on current search query{' '} - setQuery(undefined)} - color="danger" + { + props.setSidebarOpen(false); + }} + /> +

+
+
+ {workspace && ( + + + + +

Significant vertices

+ + } + > + + {(query || !props.selectedNodes || !props.selectedNodes.length > 0) && ( + { + setQuery(query); + }} /> -

- ) : props.selectedNodes && props.selectedNodes.length > 0 ? ( - <> - -

- Based on current selection of {props.selectedNodes.length} vertices: -

- -
- {props.selectedNodes.map(node => ( - - - - ))} + )} + + {query ? ( +

+ Based on current search query{' '} setQuery(undefined)} color="danger" - onClick={() => { - workspace.selectNone(); - props.notifyAngular(); - }} /> -

- - ) : ( - -

Based on vertices in the workspace

- - )} - - !workspace.nodes || - !workspace.nodes.some( - (workspaceNode: any) => - workspaceNode.data.term === vertex.term && - workspaceNode.data.field === vertex.field - ) - ) - .map(vertex => ({ - label: `${vertex.field}: ${vertex.term}`, - icon: , - size: 's', - onClick: async () => { - await workspace.addNodes([vertex]); - await loadInterestingNodes(workspace); - }, - }))} - /> - - { - await workspace.addNodes(significantVertices); - await loadInterestingNodes(workspace); +

+ ) : props.selectedNodes && props.selectedNodes.length > 0 ? ( + <> + +

+ Based on current selection of {props.selectedNodes.length} vertices: +

+ +
+ {props.selectedNodes.map(node => ( + + + + ))} + { + workspace.selectNone(); + props.notifyAngular(); + }} + /> +
+ + ) : ( + +

Based on vertices in the workspace

+ + )} + - Add all - - - - - - - - -

Vertices by field

- - } - > - ({ label: field.name }))} - selectedOptions={selectedField ? [{ label: selectedField.name }] : []} - onChange={choices => { - setSelectedField( - props.fields.find(field => field.name === choices[0].label) - ); - }} - isClearable - /> - {selectedField && ( - <> - - !workspace.nodes || - !workspace.nodes.some( - (workspaceNode: any) => - workspaceNode.data.term === vertex.term && - workspaceNode.data.field === vertex.field - ) - ) - .map(vertex => ({ - label: `${vertex.field}: ${vertex.term}`, - icon: , - size: 's', - onClick: async () => { - await workspace.addNodes([vertex]); - workspace.getTermsForField(res => { - setTerms(res); - }, selectedField.name); - }, - }))} - /> - + listItems={significantVertices + .filter( + // filter out all vertices already added + vertex => + !workspace.nodes || + !workspace.nodes.some( + (workspaceNode: any) => + workspaceNode.data.term === vertex.term && + workspaceNode.data.field === vertex.field + ) + ) + .map(vertex => ({ + label: `${vertex.field}: ${vertex.term}`, + icon: , + size: 's', + onClick: async () => { + await workspace.addNodes([vertex]); + await loadInterestingNodes(workspace); + }, + }))} + /> + { - await workspace.addNodes(terms); - workspace.getTermsForField(res => { - setTerms(res); - }, selectedField.name); + await workspace.addNodes(significantVertices); + await loadInterestingNodes(workspace); }} > Add all - - )} - - - - - - -

Free vertex

- - } - > - { - setFreeField(e.target.value); - }} - />{' '} - ={' '} - { - setFreeTerm(e.target.value); - }} - /> - { - await workspace.addNodes([ - { - color: '#aaa', - icon: iconChoices[0], - field: freeField, - term: freeTerm, - alwaysKeep: true, - }, - ]); - }} + + + + + + + +

Vertices by field

+ + } + > + ({ label: field.name }))} + selectedOptions={selectedField ? [{ label: selectedField.name }] : []} + onChange={choices => { + setSelectedField( + props.fields.find(field => field.name === choices[0].label) + ); + }} + isClearable + /> + {selectedField && ( + <> + + !workspace.nodes || + !workspace.nodes.some( + (workspaceNode: any) => + workspaceNode.data.term === vertex.term && + workspaceNode.data.field === vertex.field + ) + ) + .map(vertex => ({ + label: `${vertex.field}: ${vertex.term}`, + icon: , + size: 's', + onClick: async () => { + await workspace.addNodes([vertex]); + workspace.getTermsForField(res => { + setTerms(res); + }, selectedField.name); + }, + }))} + /> + + { + await workspace.addNodes(terms); + workspace.getTermsForField(res => { + setTerms(res); + }, selectedField.name); + }} + > + Add all + + + )} + + + + + + +

Free vertex

+ + } > - Add - - - - - - )} + { + setFreeField(e.target.value); + }} + />{' '} + ={' '} + { + setFreeTerm(e.target.value); + }} + /> + { + await workspace.addNodes([ + { + color: '#aaa', + icon: iconChoices[0], + field: freeField, + term: freeTerm, + alwaysKeep: true, + }, + ]); + }} + > + Add + + + + + + )} +
-
- + + ); } diff --git a/x-pack/legacy/plugins/graph/public/components/app.tsx b/x-pack/legacy/plugins/graph/public/components/app.tsx index 2a27ed8ae8845..a46d582b78865 100644 --- a/x-pack/legacy/plugins/graph/public/components/app.tsx +++ b/x-pack/legacy/plugins/graph/public/components/app.tsx @@ -95,13 +95,11 @@ export function GraphApp(props: GraphAppProps) { {sidebarOpen && ( - - - + )}
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss index 975e4e84d6b0d..f93a15ed5e0d6 100644 --- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss +++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss @@ -2,6 +2,13 @@ flex: 1; display: flex; flex-direction: column; + + &__toolbar { + + } + &__toolbarButton { + + } } .gphGraph { @@ -65,3 +72,39 @@ fill: $euiColorGhost; } } + +.gphVisualization__toolbar { + position: absolute; + top: $euiSizeM; + left: $euiSizeM; + + > div { + margin-bottom: $euiSizeS; + } +} + +.gphVisualization__toolbarButtonGroup { + @include euiBottomShadow; + background-color: $euiColorEmptyShade !important; + pointer-events: all; + border-radius: $euiBorderRadius; + + .euiButtonIcon { + @include size($euiSizeXL); + background-color: $euiColorEmptyShade !important; + pointer-events: all; + } +} + +.gphVisualization__toolbarButton { + @include size($euiSizeXL); + // sass-lint:disable-block no-important + background-color: $euiColorEmptyShade !important; + pointer-events: all; + + &:enabled, + &:enabled:hover, + &:enabled:focus { + @include euiBottomShadow; + } +} diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx index 1eb2ea67dcacd..575ed1875050c 100644 --- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx +++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx @@ -21,6 +21,8 @@ import { EuiPanel, EuiContextMenuPanel, EuiContextMenuItem, + EuiFlexGroup, + EuiFlexItem, } from '@elastic/eui'; import { WorkspaceNode, WorkspaceEdge, WorkspaceField, UrlTemplate } from '../../types'; import { makeNodeId } from '../../services/persistence'; @@ -173,175 +175,196 @@ function GraphVisualizationComponent({ return ( <> -
- - setOpen(!open)} - /> - - } - isOpen={open} - closePopover={() => setOpen(false)} +
+ - - { - setMinDocCount(e.target.valueAsNumber); - updateLayout(clientWorkspace, e.target.valueAsNumber); + + { + d3el.call(zoom.event); // https://github.com/mbostock/d3/issues/2387 + + // Record the coordinates (in data space) of the center (in screen space). + zoom.scale(zoom.scale() * 1.1); + + d3el + .transition() + .duration(300) + .call(zoom.event); }} - showInput /> - - -
-
- - { - d3el.call(zoom.event); // https://github.com/mbostock/d3/issues/2387 + + + { + d3el.call(zoom.event); // https://github.com/mbostock/d3/issues/2387 - // Record the coordinates (in data space) of the center (in screen space). - zoom.scale(zoom.scale() * 1.1); + // Record the coordinates (in data space) of the center (in screen space). + zoom.scale(zoom.scale() * 0.9); - d3el - .transition() - .duration(300) - .call(zoom.event); - }} - /> - -
-
- - { - d3el.call(zoom.event); // https://github.com/mbostock/d3/issues/2387 + d3el + .transition() + .duration(300) + .call(zoom.event); + }} + /> + + - // Record the coordinates (in data space) of the center (in screen space). - zoom.scale(zoom.scale() * 0.9); + + + { + d3el.call(zoom.event); // https://github.com/mbostock/d3/issues/2387 - d3el - .transition() - .duration(300) - .call(zoom.event); - }} - /> - -
-
- - { - d3el.call(zoom.event); // https://github.com/mbostock/d3/issues/2387 + // Record the coordinates (in data space) of the center (in screen space). + zoom.translate([0, 0]); + zoom.scale(1); - // Record the coordinates (in data space) of the center (in screen space). - zoom.translate([0, 0]); - zoom.scale(1); + d3el + .transition() + .duration(300) + .call(zoom.event); + }} + /> + + - d3el - .transition() - .duration(300) - .call(zoom.event); - }} - /> - -
-
- - clientWorkspace.undo()} - /> - -
-
- - clientWorkspace.redo()} - /> - -
-
- - setSelectionOpen(!selectionOpen)} - /> - - } - isOpen={selectionOpen} - closePopover={() => setSelectionOpen(false)} + - - { - clientWorkspace.selectAll(); - setRefresher(refresher + 1); - notifyAngular(); - }} - > - All - - { - clientWorkspace.selectNone(); - setRefresher(refresher + 1); - notifyAngular(); - }} - > - None - - { - clientWorkspace.selectInvert(); - setRefresher(refresher + 1); - notifyAngular(); - }} + + clientWorkspace.undo()} + /> + + + clientWorkspace.redo()} + /> + + + + + + setSelectionOpen(!selectionOpen)} + /> + } + isOpen={selectionOpen} + closePopover={() => setSelectionOpen(false)} > - Invert - - { - clientWorkspace.selectNeighbours(); - setRefresher(refresher + 1); - notifyAngular(); - }} + + { + clientWorkspace.selectAll(); + setRefresher(refresher + 1); + notifyAngular(); + }} + > + All + + { + clientWorkspace.selectNone(); + setRefresher(refresher + 1); + notifyAngular(); + }} + > + None + + { + clientWorkspace.selectInvert(); + setRefresher(refresher + 1); + notifyAngular(); + }} + > + Invert + + { + clientWorkspace.selectNeighbours(); + setRefresher(refresher + 1); + notifyAngular(); + }} + > + Linked + + + + + + setOpen(!open)} + /> + } + isOpen={open} + closePopover={() => setOpen(false)} > - Linked - - - + + { + setMinDocCount(e.target.valueAsNumber); + updateLayout(clientWorkspace, e.target.valueAsNumber); + }} + showInput + /> + + + +
Date: Tue, 3 Mar 2020 01:08:35 +0000 Subject: [PATCH 3/9] Sidebar border and small fixes --- x-pack/legacy/plugins/graph/public/components/_app.scss | 4 +++- .../graph/public/components/add_data/_add_data_panel.scss | 4 ++++ .../graph/public/components/add_data/add_data_panel.tsx | 8 -------- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/components/_app.scss b/x-pack/legacy/plugins/graph/public/components/_app.scss index af4ab9ad779bc..cd29dc3a782c8 100644 --- a/x-pack/legacy/plugins/graph/public/components/_app.scss +++ b/x-pack/legacy/plugins/graph/public/components/_app.scss @@ -24,7 +24,8 @@ $sidebarWidth: $euiSizeXXL * 10; } .gphGraph__bar { - margin: 0px $euiSizeS $euiSizeS $euiSizeS; + padding: 0px $euiSizeS $euiSizeS $euiSizeS; + border-bottom: 1px solid $euiBorderColor; } .gphGraph__mainWrapper { @@ -50,6 +51,7 @@ $sidebarWidth: $euiSizeXXL * 10; .gphGraphSidebar { background-color: $euiPageBackgroundColor; width: $sidebarWidth; + border-left: 1px solid $euiBorderColor; overflow: hidden; > * { diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss b/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss index 7ff96cfaee727..26ee83dde210a 100644 --- a/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss +++ b/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss @@ -41,6 +41,7 @@ align-items: center; justify-content: center; border-radius: 50%; + flex-shrink: 0; .gphLegacyIcon { margin-right: 0; @@ -95,7 +96,10 @@ } .gphAddData__nodesAddList { + @include euiScrollBar; box-sizing: border-box; + max-height: 300px; + overflow-y: auto; .gphAddData__circleIcon { margin-right: $euiSizeS; diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx index d2aa4bd1bb5f3..1d368c72736be 100644 --- a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx @@ -165,10 +165,6 @@ function AddDataPanelComponent(props: any) { Date: Tue, 3 Mar 2020 12:44:22 +0000 Subject: [PATCH 4/9] Fixing minor issues and spaces --- .../components/add_data/add_data_panel.tsx | 19 +- .../public/components/edit_nodes_panel.tsx | 226 +++++++++--------- 2 files changed, 126 insertions(+), 119 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx index 1d368c72736be..daa0a99ab5bf8 100644 --- a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx @@ -110,14 +110,17 @@ function AddDataPanelComponent(props: any) { > {(query || !props.selectedNodes || !props.selectedNodes.length > 0) && ( - { - setQuery(query); - }} - /> + <> + { + setQuery(query); + }} + /> + + )} - + {query ? (

Based on current search query{' '} @@ -211,6 +214,7 @@ function AddDataPanelComponent(props: any) { } > + } > + -

- -

Edit Selection

- - { - props.dataMode(); - }} - /> -
-
-
- {workspace && ( - - - - -

Selected vertices

- + + +
+ +

Edit Selection

+ + { + props.dataMode(); + }} + /> +
+
+
+ {workspace && ( + + + + +

Selected vertices

+ - + - {workspace && - workspace.selectedNodes && - workspace.selectedNodes.length > 0 && - workspace.selectedNodes.map(node => ( - - { - node.label = e.target.value; - // super dirty hack to refresh component with only change in mutable data structure - setRefresher(refresher + 1); - props.notifyAngular(); - }} - prepend={ -
- -
- } - /> - - ))} - - + {workspace && + workspace.selectedNodes && + workspace.selectedNodes.length > 0 && + workspace.selectedNodes.map(node => ( + + { + node.label = e.target.value; + // super dirty hack to refresh component with only change in mutable data structure + setRefresher(refresher + 1); + props.notifyAngular(); + }} + prepend={ +
+ +
+ } + /> + + ))} + + - - - -

Styles

- + + + +

Styles

+ - + - {workspace && workspace.selectedNodes && workspace.selectedNodes.length > 0 && ( - <> - - { - workspace.selectedNodes.forEach(node => { - node.color = newColor; - }); + {workspace && workspace.selectedNodes && workspace.selectedNodes.length > 0 && ( + <> + + { + workspace.selectedNodes.forEach(node => { + node.color = newColor; + }); - setRefresher(refresher + 1); - props.notifyAngular(); - }} - /> - + setRefresher(refresher + 1); + props.notifyAngular(); + }} + /> + - - { - const { label, value } = option; - return ( - - {' '} - {label} - - ); - }} - options={iconChoices.map(currentIcon => ({ - label: currentIcon.label, - value: currentIcon, - }))} - selectedOptions={[ - { - label: workspace.selectedNodes[0].icon.label, - value: workspace.selectedNodes[0].icon, - }, - ]} - onChange={choices => { - workspace.selectedNodes.forEach(node => { - node.icon = choices[0].value!; - }); + + { + const { label, value } = option; + return ( + + {' '} + {label} + + ); + }} + options={iconChoices.map(currentIcon => ({ + label: currentIcon.label, + value: currentIcon, + }))} + selectedOptions={[ + { + label: workspace.selectedNodes[0].icon.label, + value: workspace.selectedNodes[0].icon, + }, + ]} + onChange={choices => { + workspace.selectedNodes.forEach(node => { + node.icon = choices[0].value!; + }); - setRefresher(refresher + 1); - props.notifyAngular(); - }} - compressed - /> - - - )} - - - - )} + setRefresher(refresher + 1); + props.notifyAngular(); + }} + compressed + /> + + + )} + + + + )} +
-
- + + ); } From 873209e49807619dc0b232d28c1e945225ea86bb Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 3 Mar 2020 13:55:17 +0000 Subject: [PATCH 5/9] Graph visualization popover styles --- .../_graph_visualization.scss | 18 +- .../graph_visualization.tsx | 173 ++++++++++++------ 2 files changed, 128 insertions(+), 63 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss index f93a15ed5e0d6..1c50bf2a8a6ac 100644 --- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss +++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss @@ -4,10 +4,8 @@ flex-direction: column; &__toolbar { - } &__toolbarButton { - } } @@ -108,3 +106,19 @@ @include euiBottomShadow; } } + +.gphVisualizationPopover { + &__description { + border-bottom: 1px solid $euiBorderColor; + padding-bottom: $euiSizeS; + margin-bottom: $euiSizeS; + } +} + +.gphVisualizationToolTipAnchor { + margin-right: $euiSizeS; + + &:last-of-type { + margin-right: 0; + } +} diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx index 575ed1875050c..84bd9d4440f94 100644 --- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx +++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx @@ -18,11 +18,12 @@ import { EuiFormRow, EuiListGroup, EuiIcon, - EuiPanel, + EuiToolTip, EuiContextMenuPanel, EuiContextMenuItem, EuiFlexGroup, EuiFlexItem, + EuiText, } from '@elastic/eui'; import { WorkspaceNode, WorkspaceEdge, WorkspaceField, UrlTemplate } from '../../types'; import { makeNodeId } from '../../services/persistence'; @@ -33,7 +34,6 @@ import { templatesSelector, updateMetaData, } from '../../state_management'; -import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public/context'; import { urlTemplateRegex } from '../../helpers/url_template'; import { LegacyIcon } from '../legacy_icon'; import { VennDiagram } from '../venn_diagram'; @@ -420,7 +420,12 @@ function GraphVisualizationComponent({ setSelectedEdge(undefined); }} > - Connection summary +
+ +

Connection summary

+ +
+ {edgeSummary ? ( <>
@@ -503,6 +508,7 @@ function GraphVisualizationComponent({ y={node.ky} > } isOpen={!popoverForceClosed} @@ -516,64 +522,109 @@ function GraphVisualizationComponent({ // notifyAngular(); }} > - - {clientWorkspace.selectedNodes.length}{' '} - {clientWorkspace.selectedNodes.length === 1 ? 'vertex' : 'vertices'}{' '} - selected - -
- { - dataMode(); - }} - />{' '} - { - editMode(); - }} - />{' '} - { - setForceClosedPopover(true); - editMode(); - if (clientWorkspace.selectedNodes.length === 1) { - clientWorkspace.ungroup(clientWorkspace.selectedNodes[0]); - } else { - clientWorkspace.groupSelections( - clientWorkspace.selectedNodes[ - clientWorkspace.selectedNodes.length - 1 - ] - ); +
+ +

+ {' '} + {clientWorkspace.selectedNodes.length}{' '} + {clientWorkspace.selectedNodes.length === 1 ? 'vertex' : 'vertices'}{' '} + selected +

+ +
+ + + { + dataMode(); + }} + /> + + + { + editMode(); + }} + /> + + + {' '} - { - e.stopPropagation(); - setShowDrilldown(!showDrilldown); - }} - />{' '} - { - clientWorkspace.deleteSelection(); - }} - /> + onClick={() => { + setForceClosedPopover(true); + editMode(); + if (clientWorkspace.selectedNodes.length === 1) { + clientWorkspace.ungroup(clientWorkspace.selectedNodes[0]); + } else { + clientWorkspace.groupSelections( + clientWorkspace.selectedNodes[ + clientWorkspace.selectedNodes.length - 1 + ] + ); + } + }} + /> + + + { + e.stopPropagation(); + setShowDrilldown(!showDrilldown); + }} + /> + + + { + clientWorkspace.deleteSelection(); + }} + /> + {showDrilldown && ( ({ @@ -581,7 +632,7 @@ function GraphVisualizationComponent({ icon: template.icon ? ( ) : ( - + ), size: 's', onClick: () => { From 52335ccc8e44cdbb6f470b2ce068e2e9f8bc4aca Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 3 Mar 2020 18:42:28 +0000 Subject: [PATCH 6/9] guidance panel styles --- .../guidance_panel/_guidance_panel.scss | 63 ++++++- .../guidance_panel/guidance_panel.tsx | 153 +++++++++------ .../guidance_panel_illustration.js | 174 ++++++++++++++++++ 3 files changed, 324 insertions(+), 66 deletions(-) create mode 100644 x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel_illustration.js diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss index efd3cbebe0282..f746231aae8c2 100644 --- a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss @@ -1,8 +1,38 @@ .gphGuidancePanel { - max-width: 580px; + max-width: $euiSizeXL * 20; align-self: center; margin-top: $euiSizeXL; + &__mainSection { + padding: $euiSizeL; + } + &__illustration { + padding: $euiSizeL; + } + &__moreSection { + background: $euiColorLightestShade; + padding: $euiSizeM $euiSizeL; + + h2 { + padding-bottom: $euiSizeM; + } + &__list { + display: flex; + + li { + display: flex; + padding: 0 $euiSizeL; + align-items: center; + + > span { + padding-left: $euiSizeS; + } + &:first-child { + padding-left: 0; + } + } + } + } } .gphGuidancePanel__list { @@ -12,10 +42,8 @@ } .gphGuidancePanel__item { - display: block; - max-width: 420px; + display: flex; position: relative; - padding-left: $euiSizeXL; margin-bottom: $euiSizeL; } @@ -28,16 +56,31 @@ } .gphGuidancePanel__itemIcon { - position: absolute; - left: 0; - top: -($euiSizeXS / 2); + display: inline-flex; width: $euiSizeL; height: $euiSizeL; padding: $euiSizeXS; + align-items: center; + justify-content: center; + border-radius: 50%; + line-height: $euiSizeL; + flex-grow: 0; + font-size: $euiSizeM; + font-weight: $euiFontWeightMedium; + border: 1px solid $euiColorPrimary; + margin-right: $euiSizeS; - &--done { - background-color: $euiColorSecondary; + &--active { + background-color: $euiColorPrimary; color: $euiColorEmptyShade; - border-radius: 50%; } + &--isInactive { + background-color: transparent; + border-color: $euiColorDarkShade; + color: $euiColorDarkShade; + } +} + +.gphGuidancePanel__itemText { + flex: 1; } diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx index efc3d087a38e1..63da96019f6be 100644 --- a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx @@ -14,6 +14,8 @@ import { EuiLink, EuiCallOut, EuiScreenReaderOnly, + EuiTitle, + EuiSpacer, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import classNames from 'classnames'; @@ -32,6 +34,8 @@ import { openSourceModal } from '../../services/source_modal'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; +import { GuidancePanelIllustration } from './guidance_panel_illustration'; + export interface GuidancePanelProps { onFillWorkspace: () => void; onOpenFieldPicker: () => void; @@ -42,9 +46,11 @@ export interface GuidancePanelProps { } function ListItem({ + step, children, state, }: { + step: number; state: 'done' | 'active' | 'disabled'; children: ReactNode; }) { @@ -56,17 +62,31 @@ function ListItem({ aria-disabled={state === 'disabled'} aria-current={state === 'active' ? 'step' : undefined} > - {state !== 'disabled' && ( + {state !== 'disabled' && state === 'active' && ( + {step} + + )} + {state !== 'disabled' && state === 'done' && ( + - + )} - {children} + {state === 'disabled' && ( + + {step} + + )} + {children} ); } @@ -91,57 +111,78 @@ function GuidancePanelComponent(props: GuidancePanelProps) { }; let content = ( - - - - - - - -

- {i18n.translate('xpack.graph.guidancePanel.title', { - defaultMessage: 'Three steps to your graph', - })} -

- - - -
    - - - {i18n.translate( - 'xpack.graph.guidancePanel.datasourceItem.indexPatternButtonLabel', - { - defaultMessage: 'Select a data source.', - } - )} - - - - - {i18n.translate('xpack.graph.guidancePanel.fieldsItem.fieldsButtonLabel', { - defaultMessage: 'Add fields.', + +
    + + + +

    + {i18n.translate('xpack.graph.guidancePanel.title', { + defaultMessage: 'Three steps to your graph', })} - - - - - {i18n.translate('xpack.graph.guidancePanel.nodesItem.topTermsButtonLabel', { - defaultMessage: 'Graph the top terms', - })} - - ), - }} - /> - -

- - + + + +
    + + + {i18n.translate( + 'xpack.graph.guidancePanel.datasourceItem.indexPatternButtonLabel', + { + defaultMessage: 'Select a data source.', + } + )} + + + + + {i18n.translate('xpack.graph.guidancePanel.fieldsItem.fieldsButtonLabel', { + defaultMessage: 'Add fields.', + })} + + + + + {i18n.translate('xpack.graph.guidancePanel.nodesItem.topTermsButtonLabel', { + defaultMessage: 'Graph the top terms', + })} + + ), + }} + /> + +
+ + + + + +
+ +
+ + + +

Want to learn more?

+ +
    +
  • + + Watch video +
    • +
  • + + Read documentation +
    • +
+ + +
); diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel_illustration.js b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel_illustration.js new file mode 100644 index 0000000000000..2bd67955e292c --- /dev/null +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel_illustration.js @@ -0,0 +1,174 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; + +export const GuidancePanelIllustration = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); From a0eef2685dc9f0e54dfa5e9652306610d3d1334c Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 3 Mar 2020 19:05:51 +0000 Subject: [PATCH 7/9] more guidance panel styles --- .../components/guidance_panel/_guidance_panel.scss | 9 +++++++-- .../public/components/guidance_panel/guidance_panel.tsx | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss index f746231aae8c2..1c6ce08c5d5d9 100644 --- a/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/_guidance_panel.scss @@ -1,13 +1,18 @@ .gphGuidancePanel { - max-width: $euiSizeXL * 20; + max-width: $euiSizeXL * 22; align-self: center; margin-top: $euiSizeXL; + padding: $euiSize; &__mainSection { padding: $euiSizeL; } &__illustration { padding: $euiSizeL; + + @media (max-width: 1100px) { + display: none; + } } &__moreSection { background: $euiColorLightestShade; @@ -56,7 +61,7 @@ } .gphGuidancePanel__itemIcon { - display: inline-flex; + display: inline-flex; width: $euiSizeL; height: $euiSizeL; padding: $euiSizeXS; diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx index 63da96019f6be..15f0527f270fc 100644 --- a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx @@ -113,7 +113,7 @@ function GuidancePanelComponent(props: GuidancePanelProps) { let content = (
- +

From 172d2f73792b30826af8cf277eee81b97c27efdd Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 5 Mar 2020 00:08:10 +0000 Subject: [PATCH 8/9] Impriving edge summary popover --- .../_graph_visualization.scss | 21 ++++++++++ .../graph_visualization.tsx | 41 ++++++++++++------- 2 files changed, 47 insertions(+), 15 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss index 1c50bf2a8a6ac..ae3a9e5b7263f 100644 --- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss +++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/_graph_visualization.scss @@ -113,6 +113,27 @@ padding-bottom: $euiSizeS; margin-bottom: $euiSizeS; } + &__edgeSummary { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + } + &__edgeSummaryText, + &__fieldTerm { + margin-top: $euiSizeXS; + } + &__fieldTerm { + span:first-child { + margin-right: $euiSizeXS; + } + span:last-child { + margin-left: $euiSizeXS; + } + } + &__edgeSummaryOverlap { + margin: 0 $euiSizeS; + } } .gphVisualizationToolTipAnchor { diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx index 84bd9d4440f94..9ff0e06ead761 100644 --- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx +++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx @@ -408,6 +408,7 @@ function GraphVisualizationComponent({ y={(edge.topSrc.ky + edge.topTarget.ky) / 2} > } isOpen={!popoverForceClosed} @@ -420,28 +421,38 @@ function GraphVisualizationComponent({ setSelectedEdge(undefined); }} > -
+

Connection summary
{edgeSummary ? ( - <> -
- - - {edgeSummary.v1} ({edgeSummary.overlap}) {edgeSummary.v2} -
- {edge.topSrc.data.field}: {edge.topSrc.data.term}{' '} +
+ + + {edgeSummary.v1} + + ({edgeSummary.overlap}) + + {edgeSummary.v2} + + + + {edge.topSrc.data.field}: {edge.topSrc.data.term} + + {edge.topTarget.data.field}: {edge.topTarget.data.term} - -
- + + +
) : ( 'loading...' )} From 66225804fc289ea80d7e4d222124f3ef13f7d432 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 5 Mar 2020 16:11:53 +0000 Subject: [PATCH 9/9] Significant vertices items. Guidance illustration animation --- .../components/add_data/_add_data_panel.scss | 34 ++++++- .../components/add_data/add_data_panel.tsx | 88 ++++++++++++------- .../graph_visualization.tsx | 1 + .../guidance_panel/_guidance_panel.scss | 40 +++++++++ .../guidance_panel/guidance_panel.tsx | 4 +- .../guidance_panel_illustration.js | 2 +- 6 files changed, 129 insertions(+), 40 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss b/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss index 26ee83dde210a..e5929d36b4ee5 100644 --- a/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss +++ b/x-pack/legacy/plugins/graph/public/components/add_data/_add_data_panel.scss @@ -53,7 +53,7 @@ } } -.gphAddData__nodesArea { +.gphAddData__selectedNodesArea { position: relative; padding: $euiSize $euiSizeS; border: $euiBorderThin; @@ -75,7 +75,7 @@ &:hover, &:focus { - .gphAddData__nodesArea__delete { + .gphAddData__selectedNodesArea__delete { visibility: visible; opacity: 1; } @@ -97,11 +97,39 @@ .gphAddData__nodesAddList { @include euiScrollBar; + background: $euiColorLightestShade; + padding: $euiSizeS; + border-radius: $euiBorderRadius; box-sizing: border-box; - max-height: 300px; + max-height: $euiSizeXL * 10; overflow-y: auto; .gphAddData__circleIcon { margin-right: $euiSizeS; } + + &__item { + background: $euiColorEmptyShade; + transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance; + + &:hover { + @include euiBottomShadowSmall; + background: $euiColorEmptyShade !important; + } + + > button > span { + display: inline-flex; + flex: 1; + align-items: center; + } + } + &__itemText { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + &__itemIcon { + fill: $euiColorDarkShade; + } } diff --git a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx index daa0a99ab5bf8..bccf4d90ad843 100644 --- a/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/add_data/add_data_panel.tsx @@ -10,7 +10,7 @@ import { EuiButtonIcon, EuiListGroup, EuiPanel, - EuiToolTip, + EuiIcon, EuiComboBox, EuiAccordion, EuiFlexGroup, @@ -20,13 +20,12 @@ import { EuiSpacer, EuiText, EuiTextAlign, + EuiListGroupItem, } from '@elastic/eui'; import { connect } from 'react-redux'; -import classNames from 'classnames'; import { GraphState, metaDataSelector, selectedFieldsSelector } from '../../state_management'; import { SignificantSearchBar } from './significant_search_bar'; import { EditNodesPanel, NodeIcon } from '../edit_nodes_panel'; -import { LegacyIcon } from '../legacy_icon'; import { WorkspaceField } from '../../types'; import { iconChoices } from '../../helpers/style_choices'; @@ -77,6 +76,16 @@ function AddDataPanelComponent(props: any) { if (props.mode === 'edit') { return ; } + const significantVerticesNodesList = significantVertices.filter( + // filter out all vertices already added + vertex => + !workspace.nodes || + !workspace.nodes.some( + (workspaceNode: any) => + workspaceNode.data.term === vertex.term && workspaceNode.data.field === vertex.field + ) + ); + return ( @@ -104,7 +113,7 @@ function AddDataPanelComponent(props: any) { initialIsOpen={true} buttonContent={ -

Significant vertices

+

Add Significant vertices

 } > @@ -117,7 +126,7 @@ function AddDataPanelComponent(props: any) { setQuery(query); }} /> - + )} @@ -138,18 +147,18 @@ function AddDataPanelComponent(props: any) { Based on current selection of {props.selectedNodes.length} vertices:

-
+ {/*
{props.selectedNodes.map(node => ( ))} -
+
*/} ) : ( - +

Based on vertices in the workspace

 )} - - !workspace.nodes || - !workspace.nodes.some( - (workspaceNode: any) => - workspaceNode.data.term === vertex.term && - workspaceNode.data.field === vertex.field - ) - ) - .map(vertex => ({ - label: `${vertex.field}: ${vertex.term}`, - icon: , - size: 's', - onClick: async () => { - await workspace.addNodes([vertex]); - await loadInterestingNodes(workspace); - }, - }))} - /> + + + + {significantVerticesNodesList.length > 0 ? ( + + {significantVerticesNodesList.map(vertex => ( + { + await workspace.addNodes([vertex]); + await loadInterestingNodes(workspace); + }} + label={ + <> + + + {`${vertex.field}: ${vertex.term}`} + + + + } + /> + ))} + + ) : ( +
No vertices to add
+ )} + + + { diff --git a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx index 9ff0e06ead761..63fb55bedd1a9 100644 --- a/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx +++ b/x-pack/legacy/plugins/graph/public/components/graph_visualization/graph_visualization.tsx @@ -548,6 +548,7 @@ function GraphVisualizationComponent({ position="top" content="Add data" anchorClassName="gphVisualizationToolTipAnchor" + delay="long" > {i18n.translate('xpack.graph.guidancePanel.nodesItem.topTermsButtonLabel', { - defaultMessage: 'Graph the top terms', + defaultMessage: 'graph the top terms', })} ), diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel_illustration.js b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel_illustration.js index 2bd67955e292c..26d0a298a3eda 100644 --- a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel_illustration.js +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel_illustration.js @@ -67,7 +67,7 @@ export const GuidancePanelIllustration = () => ( - +