\n Display unfocused nodes. \n
\nDisplay overview. \n
\n \n \n \n )\n }\n}\n\n","import { DATASET_ID_CHANGE, INIT_DATASET_LIST, \n SELECTED_NODE_ID_LIST_CHANGE, \n SHOW_SOURCE_CHANGE, SPECIFIC_NODE_ID_LIST_CHANGE, SELECT_INSPECT_NODE_CHANGE,\n CLEAR_ID_INFO, PREV_GRAPH_JSON_CHANGE, EXTENDED_MODE_CHANGE, GRAPHVIEWSETTINGMODAL_VISIBLE_CHANGE,GRAPHVIEWSTATE_CHANGE, \n NLABEL_CHANGE, EWEIGHT_CHANGE, ENABLE_FORCE_DIRECTED_CHANGE, \n NLABEL_OPTIONS_CHANGE, EWEIGHT_OPTIONS_CHANGE} from '../constants';\n\nexport const changeDataset = (dataset_id:number | null) =>({\n type: DATASET_ID_CHANGE,\n dataset_id: dataset_id\n})\n\nexport const changeSelectedNodeIdList = (selectedNodeIdList: any) =>({\n type: SELECTED_NODE_ID_LIST_CHANGE,\n selectedNodeIdList: selectedNodeIdList\n})\nexport const changeExtendedMode = (extendedMode: number) =>({\n type: EXTENDED_MODE_CHANGE,\n extendedMode: extendedMode\n})\nexport const changeGraphViewSettingsModal_visible = (visible:boolean) =>({\n type: GRAPHVIEWSETTINGMODAL_VISIBLE_CHANGE,\n GraphViewSettingsModal_visible: visible\n})\nexport const changeGraphViewState = (state_dict:any) =>({\n type: GRAPHVIEWSTATE_CHANGE,\n GraphViewState: state_dict\n})\nexport const changeEnableForceDirected = (enableForceDirected:any) =>({\n type: ENABLE_FORCE_DIRECTED_CHANGE,\n enableForceDirected: enableForceDirected\n})\n\n\nexport const changeSpecificNodeIdList = (specificNodeIdList: any) =>({\n type: SPECIFIC_NODE_ID_LIST_CHANGE,\n specificNodeIdList: specificNodeIdList\n})\n\nexport const changeSelectInspectNode = (select_inspect_node:any)=>({\n type: SELECT_INSPECT_NODE_CHANGE,\n select_inspect_node: select_inspect_node\n})\n\nexport const changeShowSource = (showSource: boolean) =>({\n type: SHOW_SOURCE_CHANGE,\n showSource: showSource\n})\nexport const changePrevGraphJson = (prevGraphJson: any) =>({\n type: PREV_GRAPH_JSON_CHANGE,\n prevGraphJson: prevGraphJson\n})\n\nexport const clearIdInfo = () =>({\n type: CLEAR_ID_INFO\n})\n\nexport const initDatasetList = (datasetList:any) =>({\n type: INIT_DATASET_LIST,\n datasetList: datasetList\n})\n\nexport const changeNLabelOptions = (NLabelOptions: any) =>({\n type: NLABEL_OPTIONS_CHANGE,\n NLabelOptions: NLabelOptions\n})\n\nexport const changeEWeightOptions = (EWeightOptions: any) =>({\n type: EWEIGHT_OPTIONS_CHANGE,\n EWeightOptions: EWeightOptions\n})\n\nexport const changeNLabel = (NLabelList: any) =>({\n type: NLABEL_CHANGE,\n NLabelList: NLabelList\n})\n\nexport const changeEWeight = (eweightList: any) =>({\n type: EWEIGHT_CHANGE,\n eweightList: eweightList\n})\n\n","export const DATASET_ID_CHANGE = \"DATASET_ID_CHANGE\";\nexport type DATASET_ID_CHANGE = typeof DATASET_ID_CHANGE;\n\nexport const INIT_DATASET_LIST = \"INIT_DATASET_LIST\";\nexport type INIT_DATASET_LIST = typeof INIT_DATASET_LIST;\n\nexport const EWEIGHT_CHANGE = \"EWEIGHT_CHANGE\";\nexport type EWEIGHT_CHANGE = typeof EWEIGHT_CHANGE;\n\nexport const EWEIGHT_OPTIONS_CHANGE = \"EWEIGHT_OPTIONS_CHANGE\";\nexport type EWEIGHT_OPTIONS_CHANGE = typeof EWEIGHT_OPTIONS_CHANGE;\n\nexport const NLABEL_CHANGE = \"NLABEL_CHANGE\";\nexport type NLABEL_CHANGE = typeof NLABEL_CHANGE;\n\nexport const NLABEL_OPTIONS_CHANGE = \"NLABEL_OPTIONS_CHANGE\";\nexport type NLABEL_OPTIONS_CHANGE = typeof NLABEL_OPTIONS_CHANGE;\n\nexport const SELECTED_NODE_ID_LIST_CHANGE = \"SELECTED_NODE_ID_LIST_CHANGE\";\nexport type SELECTED_NODE_ID_LIST_CHANGE = typeof SELECTED_NODE_ID_LIST_CHANGE;\n\nexport const SHOW_SOURCE_CHANGE = \"SHOW_SOURCE_CHANGE\";\nexport type SHOW_SOURCE_CHANGE = typeof SHOW_SOURCE_CHANGE;\n\nexport const SPECIFIC_NODE_ID_LIST_CHANGE = \"SPECIFIC_NODE_ID_LIST_CHANGE\";\nexport type SPECIFIC_NODE_ID_LIST_CHANGE = typeof SPECIFIC_NODE_ID_LIST_CHANGE;\n\n\nexport const SELECT_INSPECT_NODE_CHANGE = \"SELECT_INSPECT_NODE_CHANGE\";\nexport type SELECT_INSPECT_NODE_CHANGE = typeof SELECT_INSPECT_NODE_CHANGE;\n\nexport const PREV_GRAPH_JSON_CHANGE = \"PREV_GRAPH_JSON_CHANGE\";\nexport type PREV_GRAPH_JSON_CHANGE = typeof PREV_GRAPH_JSON_CHANGE;\n\n\nexport const CLEAR_ID_INFO = \"CLEAR_ID_INFO\";\nexport type CLEAR_ID_INFO = typeof CLEAR_ID_INFO;\n\nexport const EXTENDED_MODE_CHANGE = \"EXTENDED_MODE_CHANGE\";\nexport type EXTENDED_MODE_CHANGE = typeof EXTENDED_MODE_CHANGE;\n\nexport const GRAPHVIEWSETTINGMODAL_VISIBLE_CHANGE = \"GRAPHVIEWSETTINGMODAL_VISIBLE_CHANGE\";\nexport type GRAPHVIEWSETTINGMODAL_VISIBLE_CHANGE = typeof GRAPHVIEWSETTINGMODAL_VISIBLE_CHANGE;\n\nexport const GRAPHVIEWSTATE_CHANGE = \"GRAPHVIEWSTATE_CHANGE\";\nexport type GRAPHVIEWSTATE_CHANGE = typeof GRAPHVIEWSTATE_CHANGE;\n\nexport const ENABLE_FORCE_DIRECTED_CHANGE = \"ENABLE_FORCE_DIRECTED_CHANGE\";\nexport type ENABLE_FORCE_DIRECTED_CHANGE = typeof ENABLE_FORCE_DIRECTED_CHANGE;\n\n\n/*// 定义增加 state 类型常量\nexport const INCREMENT = \"INCREMENT\";\nexport type INCREMENT = typeof INCREMENT;\n\n// 定义减少 state 类型常量\nexport const DECREMENT = \"DECREMENT\";\nexport type DECREMENT = typeof DECREMENT;\n*/","import { connect } from 'react-redux';\nimport { Dispatch } from 'redux';\nimport { StoreState } from '../types';\nimport GraphViewSettingsModal from '../components/DataRuns/GraphView/GraphViewSettingsModal';\nimport { changeGraphViewSettingsModal_visible,changeGraphViewState } from '../actions';\n\nconst mapStateToProps = (state: StoreState) => ({\n GraphViewSettingsModal_visible: state.GraphViewSettingsModal_visible,\n GraphViewState: state.GraphViewState\n})\n\nconst mapDispatchToProps = (dispatch: Dispatch) => ({\n changeGraphViewSettingsModal_visible: (visible:boolean) => dispatch(changeGraphViewSettingsModal_visible(visible)),\n changeGraphViewState: (state_dict:any) => dispatch(changeGraphViewState(state_dict))\n})\n\nexport default connect(mapStateToProps, mapDispatchToProps)(GraphViewSettingsModal);\n\n\n\n","import { color } from \"d3\";\n\n// Canvas Handle Function\nfunction drawRectStroke(context:any, x:any, y:any, width:any, height:any, strokeColor:any=\"#bbb\"){\n context.beginPath();\n context.strokeStyle = strokeColor;\n context.rect(x, y, width, height);\n context.stroke();\n}\nfunction drawRect(context:any, x:any, y:any, width:any, height:any, fillColor:any=\"#fff\", opacity:any=0.8){\n context.fillStyle = fillColor;\n context.globalAlpha = opacity;\n context.fillRect(x, y, width, height);\n context.globalAlpha = 1.0;\n}\nfunction drawCircleStroke(context:any, color:any, radius:any, x:any, y:any, lineWidth:number){\n context.lineWidth = lineWidth\n context.strokeStyle = color;\n context.beginPath();\n context.arc(x, y, radius, 0, 2 * Math.PI, true);\n context.stroke();\n}\n\nfunction drawCircle(context:any, color:any, radius:any, x:any, y:any, alpha:any=1){\n let original_globalAlpha = context.globalAlpha;\n context.globalAlpha = alpha;\n context.beginPath();\n context.arc(x, y, radius, 0, 2 * Math.PI, true);\n context.fillStyle = color;\n context.fill();\n context.globalAlpha = original_globalAlpha;\n\n}\n\nfunction drawOnePie(context:any, color:any, radius:any, x:any, y:any, startAngle:any, endAngle:any, alpha:any=1){\n let original_globalAlpha = context.globalAlpha;\n context.globalAlpha = alpha;\n context.beginPath();\n context.moveTo(x,y);\n context.arc(x, y, radius, startAngle, endAngle);\n context.fillStyle = color;\n context.closePath();\n context.fill();\n context.globalAlpha = original_globalAlpha;\n\n}\nfunction drawOneArc(context:any, color:any, radius:any, x:any, y:any, startAngle:any, endAngle:any){\n context.moveTo(x,y);\n context.beginPath();\n context.arc(x, y, radius, startAngle, endAngle);\n context.strokeStyle = color;\n context.stroke();\n}\n/*\n//Backup version\nfunction drawNodeGlyph(context:any, colorlist:any, inner_radius:any, radius:any, outer_radius:any, x:any, y:any, enableStroke:boolean=false){\n \n drawCircle(context, colorlist[4], outer_radius, x, y);\n if(enableStroke){\n drawCircleStroke(context, \"#000\", outer_radius, x, y, 2);\n }\n drawOnePie(context, colorlist[1], outer_radius, x, y, (-150)/180*Math.PI, (-30)/180*Math.PI);\n drawOnePie(context, colorlist[2], outer_radius, x, y, (-30)/180*Math.PI, (+90)/180*Math.PI);\n drawOnePie(context, colorlist[3], outer_radius, x, y, (+90)/180*Math.PI, (+210)/180*Math.PI);\n for(let i = 0; i<3; i++){\n let angle = (-150+120*i)/180*Math.PI;\n let x1 = x + radius*Math.cos(angle);\n let y1 = y + radius*Math.sin(angle);\n let x2 = x + outer_radius*Math.cos(angle);\n let y2 = y + outer_radius*Math.sin(angle);\n // drawLine(context, \"#ddd\", x1, y1, x2 ,y2, 0.5);\n drawLine(context, colorlist[4], x1, y1, x2 ,y2, radius-inner_radius);\n }\n drawCircle(context, colorlist[4], radius, x, y);\n drawCircle(context, colorlist[0], inner_radius, x, y);\n}*/\n\n/*\nfunction drawNodeGlyph(context:any, colorlist:any, inner_radius:any, radius:any, outer_radius:any, x:any, y:any, \n enableStroke:boolean=false, outer_arc_encoded_value:any=0.5, outer_arc_radius:any=2, enable_alpha_mode=true){\n let value = outer_arc_encoded_value;\n //let original_globalAlpha = context.globalAlpha;\n if(value<0) value = 0;\n else if(value>1) value = 1;\n let alpha = 1;\n if(enable_alpha_mode){\n alpha = value;\n }\n \n //context.globalAlpha = value;\n drawCircle(context, colorlist[4], outer_radius, x, y, alpha);\n if(enableStroke){\n drawCircleStroke(context, \"#000\", outer_radius, x, y, 2);\n }\n \n drawOnePie(context, colorlist[1], outer_radius, x, y, (-150)/180*Math.PI, (-30)/180*Math.PI, alpha);\n drawOnePie(context, colorlist[2], outer_radius, x, y, (-30)/180*Math.PI, (+90)/180*Math.PI, alpha);\n drawOnePie(context, colorlist[3], outer_radius, x, y, (+90)/180*Math.PI, (+210)/180*Math.PI, alpha);\n for(let i = 0; i<3; i++){\n let angle = (-150+120*i)/180*Math.PI;\n let x1 = x + radius*Math.cos(angle);\n let y1 = y + radius*Math.sin(angle);\n let x2 = x + outer_radius*Math.cos(angle);\n let y2 = y + outer_radius*Math.sin(angle);\n // drawLine(context, \"#ddd\", x1, y1, x2 ,y2, 0.5);\n drawLine(context, colorlist[4], x1, y1, x2 ,y2, radius-inner_radius, alpha);\n }\n drawCircle(context, colorlist[4], radius, x, y, alpha);\n drawCircle(context, colorlist[0], inner_radius, x, y, alpha);\n //context.globalAlpha = original_globalAlpha;\n\n //let degree = 360 * value - 90;\n //drawOneArc(context, colorlist[5], outer_arc_radius, x, y, (-90)/180*Math.PI, degree/180*Math.PI);\n}\n\nfunction drawNodeGlyph_v1(context:any, colorlist:any, inner_radius:any, radius:any, outer_radius:any, x:any, y:any, \n enableStroke:boolean=false, outer_arc_encoded_value:any=0.5, outer_arc_radius:any=2, enable_alpha_mode=true){\n let value = outer_arc_encoded_value;\n if(value<0) value = 0;\n else if(value>1) value = 1;\n let alpha = 1;\n if(enable_alpha_mode){\n alpha = value;\n }\n if(enableStroke){\n drawCircleStroke(context, \"#000\", outer_radius, x, y, 2);\n }\n drawCircle(context, colorlist[0], outer_radius, x, y, alpha);\n}\nfunction drawNodeGlyph(context:any, colorlist:any, inner_radius:any, radius:any, outer_radius:any, x:any, y:any, \n enableStroke:boolean=false, outer_arc_encoded_value:any=0.5, outer_arc_radius:any=2, enable_alpha_mode=true){\n let value = outer_arc_encoded_value;\n //let original_globalAlpha = context.globalAlpha;\n if(value<0) value = 0;\n else if(value>1) value = 1;\n let alpha = 1;\n if(enable_alpha_mode){\n alpha = value;\n }\n \n //context.globalAlpha = value;\n // Background circle\n \n \n \n // Pie chart drawing\n let length_model = colorlist.length - 1;\n if(length_model > 0){\n drawCircle(context, \"#fff\", outer_radius, x, y, alpha);\n if(enableStroke){\n drawCircleStroke(context, \"#000\", outer_radius, x, y, 2);\n }\n let step_angle = 360 / length_model;\n let current_angle = -90 - step_angle / 2; \n for(let i = 1; i\n
\n \n
\n \n\n )\n\n }\n}\n\n","import ForceDirectedGraphCanvas from '../components/DataRuns/GraphView/ForceDirectedGraphCanvas'\nimport { connect } from 'react-redux';\nimport { Dispatch } from 'redux';\n\n//import { decrement, increment } from '../actions';\nimport { StoreState } from '../types';\n\n\n// 将 reducer 中的状态插入到组件的 props 中\nconst mapStateToProps = (state: StoreState) => ({\n GraphViewState: state.GraphViewState\n})\n\n// 将 对应action 插入到组件的 props 中\nconst mapDispatchToProps = (dispatch: Dispatch) => ({\n\n})\n\n// 使用 connect 高阶组件对 Counter 进行包裹\nexport default connect(mapStateToProps, mapDispatchToProps)(ForceDirectedGraphCanvas);\n\n\n\n","\nimport * as React from \"react\";\nimport { Select, Button, Tag, InputNumber } from 'antd';\nimport {getNodeColor, constructNeighborSet, getNodeStatisticStr, \n constructGraphIn, skew_weight} from '../../../helper';\nimport { SettingOutlined } from '@ant-design/icons';\nimport GraphViewSettingsModalContainer from '../../../container/GraphViewSettingsModalContainer';\nimport ForceDirectedGraphCanvasContainer from '../../../container/ForceDirectedGraphCanvasContainer';\nconst Option = Select.Option;\n\n\nexport interface IProps {\n // For original graph object\n graph_object:any,\n model_nlabels:any,\n model_eweights:any,\n model_nweights:any,\n NLabelList:any,\n eweightList:any,\n // For subgraphs\n subgs:any,\n subgList:any,\n // For size of view.\n width: number,\n height: number,\n // For displayed nodes.\n selectedNodeIdList:any[],\n // For users selected node.\n changeSelectInspectNode:any,\n select_inspect_node : number,\n changeShowSource:any,\n showSource: boolean,\n // For extended mode. \n extendedMode: any,\n changeExtendedMode:any,\n // For Graph View Setting Modal.\n GraphViewSettingsModal_visible:any,\n changeGraphViewSettingsModal_visible:any,\n\n enableForceDirected: boolean,\n changeEnableForceDirected: any\n}\nexport interface IState {\n\n}\n\nexport default class GraphView extends React.Component\n
\n \n )}else{\n return \n }\n }\n}\n\n","import GraphView from './GraphView'\nexport default GraphView;\n\n\n","import GraphView from '../components/DataRuns/GraphView/'\nimport { connect } from 'react-redux';\nimport { Dispatch } from 'redux';\n\n//import { decrement, increment } from '../actions';\nimport { StoreState } from '../types';\nimport {changeSpecificNodeIdList, changeSelectInspectNode, changePrevGraphJson, \n changeShowSource, changeExtendedMode, changeGraphViewSettingsModal_visible, changeEnableForceDirected} from '../actions';\n\n// 将 reducer 中的状态插入到组件的 props 中\nconst mapStateToProps = (state: StoreState) => ({\n selectedNodeIdList : state.selectedNodeIdList,\n selectedMessagePassingNodeIdList: state.selectedMessagePassingNodeIdList,\n showSource: state.showSource,\n select_inspect_node: state.select_inspect_node,\n extendedMode : state.extendedMode,\n GraphViewSettingsModal_visible: state.GraphViewSettingsModal_visible,\n enableForceDirected : state.enableForceDirected\n})\n\n// 将 对应action 插入到组件的 props 中\nconst mapDispatchToProps = (dispatch: Dispatch) => ({\n changeSpecificNodeIdList: (specificNodeIdList:any) => dispatch(changeSpecificNodeIdList(specificNodeIdList)),\n changeSelectInspectNode : (select_inspect_node:number) => dispatch(changeSelectInspectNode(select_inspect_node)),\n changePrevGraphJson: (prevGraphJson:any) => dispatch(changePrevGraphJson(prevGraphJson)),\n changeShowSource: (showSource:boolean) => dispatch(changeShowSource(showSource)),\n changeExtendedMode: (extendedMode:any) => dispatch(changeExtendedMode(extendedMode)),\n changeGraphViewSettingsModal_visible: (visible:boolean) => dispatch(changeGraphViewSettingsModal_visible(visible)),\n changeEnableForceDirected: (enableForceDirected: boolean) => dispatch(changeEnableForceDirected(enableForceDirected))\n})\n\n// 使用 connect 高阶组件对 Counter 进行包裹\nexport default connect(mapStateToProps, mapDispatchToProps)(GraphView);\n\n\n\n","import axios from 'axios';\n\n// If enable, then it will load static data. Otherwise, it will load from remote backend.\n// Currently, it does not support remote backend mode. \nconst ENABLE_STATIC_JSON = false;\n// Remote Backend.\nconst URL = process.env.NODE_ENV === 'development'\n ? 'http://localhost:7777'\n : window.location.origin;\nconst axiosInstance1 = axios.create({\n baseURL: `${URL}/api/`,\n // timeout: 1000,\n headers: {\n 'Access-Control-Allow-Origin': '*'\n }\n});\n\n// Load Static Data.\nconst URL2 = window.location.origin;\nconst axiosInstance2 = axios.create({\n baseURL: `${URL2}/data/`,\n // timeout: 1000,\n headers: {\n 'Access-Control-Allow-Origin': '*'\n }\n});\n\nlet axiosInstance = (ENABLE_STATIC_JSON)?axiosInstance2:axiosInstance1;\n\n// Read graph dataset metainfo.\nexport async function getDatasetList(): PromiseGraph View\n
\n {/** Force Directed Graph */}\n \n \n {/** Input Id */}\n {(showSource)?[Id:,\n {this.onChangeSelectInspectNode(e,nodenum);}} />,\n ,\n ]:[]}\n {/** Setting Modal */}\n \n {extendedOptions.map((d:any)=>(\n \n ))}\n \n {/** Force Directed Layout Enabler */}\n \n {(this.props.enableForceDirected)?\n :\n }\n {/** Setting Modal Button */}\n \n \n {/** Node Num Info */}\n \n #Nodes: {getNodeStatisticStr(specificNodeIdList.length, nodenum)} \n \n
\n \n \n \n
\n \n
\n \n );\n }\n}\n","import ControlPanel from '../components/DataRuns/ControlPanel'\nimport { connect } from 'react-redux';\nimport { Dispatch } from 'redux';\n\n//import { decrement, increment } from '../actions';\nimport { StoreState } from '../types';\n\n\n// 将 reducer 中的状态插入到组件的 props 中\nconst mapStateToProps = (state: StoreState) => ({\n dataset_id : state.dataset_id\n})\n\n// 将 对应action 插入到组件的 props 中\nconst mapDispatchToProps = (dispatch: Dispatch) => ({\n})\n\n// 使用 connect 高阶组件对 Counter 进行包裹\nexport default connect(mapStateToProps, mapDispatchToProps)(ControlPanel);\n\n\n\n","import DataRuns from './DataRuns'\nexport default DataRuns;\n\n\n","\nimport './DataRuns.css'\nimport * as React from \"react\";\nimport GraphViewContainer from '../../container/GraphViewContainer';\nimport ControlPanelContainer from '../../container/ControlPanelContainer';\nimport { getGraphInfo, getModelList, getModelInfo, getSubgraphList, getSubgraphInfo } from '../../service/dataService';\nimport GridLayout from \"react-grid-layout\";\n\n\nexport interface IProps {\n dataset_id : number | null,\n contentWidth:number,\n contentHeight:number,\n NLabelList : any,\n eweightList: any,\n changeEnableForceDirected : any,\n changeNLabelOptions: any,\n changeEWeightOptions: any,\n changeNLabel: any,\n changeEWeight: any,\n changeShowSource: any,\n}\nexport interface IState {\n graph_object : any,\n model_list : any,\n model_nlabels : any,\n model_eweights: any,\n model_nweights: any,\n subg_list : any,\n subgs : any,\n layout_config: any,\n screenWidth: number,\n screenHeight: number\n}\n\nexport default class DataRuns extends React.ComponentControl Panel
\n \n \n
\n \n
\n \n
\n
\n \n {(dataset_id>=0 && this.getCurrentLayoutConfig(\"GraphView\"))?generateGraphView(graph_object, \n this.state.model_nlabels, this.state.model_eweights, this.state.model_nweights, this.state.subgs, \n this.props.NLabelList, this.props.eweightList, this.state.subg_list,\n this.getCurrentLayoutConfig(\"GraphView\")[\"width\"], \n this.getCurrentLayoutConfig(\"GraphView\")[\"height\"]):}\n
\n \n {generateControlPanel()}\n
\n \n {(contentWidth>0 && contentHeight >0)?:}\n
\n \n \n