Refine webui (#4548)

ts/webui/src/components/overview/count/EditExperimentParam.tsx → ts/webui/src/components/experiment/overview/count/EditExperimentParam.tsx

 import React, { useState, useCallback, useContext } from 'react';
 import axios from 'axios';
 import { Dropdown } from '@fluentui/react';
-import { EXPERIMENT } from '../../../static/datamodel';
-import { toSeconds } from '../../../static/experimentConfig';
-import { AppContext } from '../../../App';
+import { AppContext } from '@/App';
+import { MANAGER_IP, MAX_TRIAL_NUMBERS } from '@static/const';
+import { EXPERIMENT } from '@static/datamodel';
+import { toSeconds } from '@static/experimentConfig';
 import { EditExpeParamContext } from './context';
 import { durationUnit } from '../overviewConst';
-import { MANAGER_IP, MAX_TRIAL_NUMBERS } from '../../../static/const';
-import { Edit, CheckMark, Cancel } from '../../buttons/Icon';
-import MessageInfo from '../../modals/MessageInfo';
-import '../../../static/style/overview/count.scss';
+import { Edit, CheckMark, Cancel } from '@components/fluent/Icon';
+import MessageInfo from '@components/common/MessageInfo';
+import '@style/experiment/overview/count.scss';
 
 const DurationInputRef = React.createRef<HTMLInputElement>();
 

ts/webui/src/components/overview/count/ExpDuration.tsx → ts/webui/src/components/experiment/overview/count/ExpDuration.tsx

 import React from 'react';
 import { Stack, ProgressIndicator, TooltipHost, DirectionalHint } from '@fluentui/react';
-import { EXPERIMENT } from '../../../static/datamodel';
-import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR } from '../../../static/const';
-import { convertDuration, convertTimeAsUnit } from '../../../static/function';
+import { EXPERIMENT } from '@static/datamodel';
+import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR } from '@static/const';
+import { convertDuration, convertTimeAsUnit } from '@static/function';
 import { EditExperimentParam } from './EditExperimentParam';
 import { ExpDurationContext } from './ExpDurationContext';
 import { EditExpeParamContext } from './context';
 import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
-import '../../../static/style/overview/count.scss';
+import '@style/experiment/overview/count.scss';
 
 export const ExpDuration = (): any => (
     <ExpDurationContext.Consumer>

ts/webui/src/components/overview/count/TrialCount.tsx → ts/webui/src/components/experiment/overview/count/TrialCount.tsx

 import * as React from 'react';
 import { Stack, TooltipHost, ProgressIndicator, DirectionalHint, IStackTokens } from '@fluentui/react';
-import { EXPERIMENT, TRIALS } from '../../../static/datamodel';
-import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '../../../static/const';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '@static/const';
 import { EditExperimentParam } from './EditExperimentParam';
 import { EditExpeParamContext } from './context';
 import { ExpDurationContext } from './ExpDurationContext';

ts/webui/src/components/overview/params/BasicInfo.tsx → ts/webui/src/components/experiment/overview/params/BasicInfo.tsx

 import React, { useState, useCallback } from 'react';
 import { Stack, Callout, Link, IconButton } from '@fluentui/react';
-import LogDrawer from '../../modals/LogPanel';
-import { EXPERIMENT } from '../../../static/datamodel';
-import { formatTimestamp } from '../../../static/function';
 import { useId } from '@uifabric/react-hooks';
-import { BestMetricContext } from '../../Overview';
+import { EXPERIMENT } from '@static/datamodel';
+import { formatTimestamp } from '@static/function';
+import LogPanel from '@components/nav/slideNav/LogPanel';
+import { BestMetricContext } from '../Overview';
 import { styles } from './basicInfoStyles';
-import '../../../static/style/overview/probar.scss';
-import '../../../static/style/overview/basic.scss';
+import '@style/common/experimentStatusColor.scss';
+import '@style/experiment/overview/basic.scss';
 
 export const BasicInfo = (): any => {
     const labelId: string = useId('callout-label');
@@ -92,7 +92,7 @@ export const BasicInfo = (): any => {
                 </div>
             </Stack>
             {/* learn about click -> default active key is dispatcher. */}
-            {isShowLogDrawer ? <LogDrawer closeDrawer={closeLogDrawer} activeTab='dispatcher' /> : null}
+            {isShowLogDrawer ? <LogPanel closePanel={closeLogDrawer} activeTab='dispatcher' /> : null}
         </div>
     );
 };

ts/webui/src/components/overview/params/basicInfoStyles.ts → ts/webui/src/components/experiment/overview/params/basicInfoStyles.ts

@@ -48,5 +48,10 @@ export const styles = mergeStyleSets({
         {
             color: theme.palette.neutralPrimary
         }
-    ]
+    ],
+    buttons: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        padding: '0 24px 24px'
+    }
 });

ts/webui/src/components/public-child/DefaultMetric.tsx → ts/webui/src/components/experiment/overview/table/DefaultMetric.tsx

 import * as React from 'react';
-import { TRIALS } from '../../static/datamodel';
-import { formatAccuracy } from '../../static/function';
+import { TRIALS } from '@static/datamodel';
+import { formatAccuracy } from '@static/function';
 
 // oview page table: default metric column render
 interface DefaultMetricProps {

ts/webui/src/components/overview/table/SuccessTable.tsx → ts/webui/src/components/experiment/overview/table/SuccessTable.tsx

@@ -13,16 +13,16 @@ import {
     ScrollablePane,
     ScrollbarVisibility
 } from '@fluentui/react';
-import DefaultMetric from '../../public-child/DefaultMetric';
-import OpenRow from '../../public-child/OpenRow';
-import CopyButton from '../../public-child/CopyButton';
-import { convertDuration, copyAndSort } from '../../../static/function';
-import { TRIALS } from '../../../static/datamodel';
-import { SortInfo } from '../../../static/interface';
-import { DETAILTABS } from '../../stateless-component/NNItabs';
-import '../../../static/style/succTable.scss';
-import '../../../static/style/tableStatus.css';
-import '../../../static/style/openRow.scss';
+import DefaultMetric from './DefaultMetric';
+import OpenRow from '@components/common/OpenRow';
+import CopyButton from '@components/common/CopyButton';
+import { convertDuration, copyAndSort } from '@static/function';
+import { TRIALS } from '@static/datamodel';
+import { SortInfo } from '@static/interface';
+import { DETAILTABS } from '@components/nav/slideNav/NNItabs';
+import '@style/experiment/overview/succTable.scss';
+import '@style/common/trialStatus.css';
+import '@style/openRow.scss';
 
 interface SuccessTableProps {
     trialIds: string[];

ts/webui/src/components/modals/ChangeColumnComponent.tsx → ts/webui/src/components/experiment/trialdetail/ChangeColumnComponent.tsx

 import * as React from 'react';
 import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from '@fluentui/react';
 
+/**
+ * changeColumnComponent file is for [customized table column, customized hyper-parameter graph yAxis]
+ * and currently it uses localstorage to store the customized results
+ */
+
 interface ChangeColumnState {
     // buffer, not saved yet
     currentSelected: string[];

ts/webui/src/components/TrialsDetail.tsx → ts/webui/src/components/experiment/trialdetail/TrialsDetail.tsx

 import * as React from 'react';
 import { Stack, Pivot, PivotItem } from '@fluentui/react';
-import { EXPERIMENT, TRIALS } from '../static/datamodel';
-import { AppContext } from '../App';
-import DefaultPoint from './trial-detail/DefaultMetricPoint';
-import Duration from './trial-detail/Duration';
-import Para from './trial-detail/Para';
-import Intermediate from './trial-detail/Intermediate';
-import TableList from './trial-detail/TableList';
-import '../static/style/search.scss';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { AppContext } from '@/App';
+import DefaultPoint from './chart/DefaultMetricPoint';
+import Duration from './chart/Duration';
+import Para from './chart/Para';
+import Intermediate from './chart/Intermediate';
+import TableList from './table/TableList';
+import '@style/button.scss';
+import '@style/logPath.scss';
+import '@style/openRow.scss';
+import '@style/pagination.scss';
+import '@style/experiment/overview/overviewTitle.scss';
+import '@style/experiment/trialdetail/search.scss';
+import '@style/experiment/trialdetail/tensorboard.scss';
+import '@style/table.scss';
+import '@style/common/trialStatus.css';
+
+/**
+ * single experiment
+ * trial detail page
+ */
 
 interface TrialDetailState {
     whichChart: string;

ts/webui/src/components/trial-detail/DefaultMetricPoint.tsx → ts/webui/src/components/experiment/trialdetail/chart/DefaultMetricPoint.tsx

 import * as React from 'react';
 import { Toggle, Stack } from '@fluentui/react';
 import ReactEcharts from 'echarts-for-react';
-import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { Trial } from '../../static/model/trial';
-import { TooltipForAccuracy, EventMap } from '../../static/interface';
-import { reformatRetiariiParameter } from '../../static/function';
+import { Trial } from '@model/trial';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { TooltipForAccuracy, EventMap } from '@static/interface';
+import { reformatRetiariiParameter } from '@static/function';
 import 'echarts/lib/chart/scatter';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';

ts/webui/src/components/trial-detail/Duration.tsx → ts/webui/src/components/experiment/trialdetail/chart/Duration.tsx

 import * as React from 'react';
 import ReactEcharts from 'echarts-for-react';
-import { TableObj, EventMap } from '../../static/interface';
-import { filterDuration, convertDuration } from '../../static/function';
+import { TableObj, EventMap } from '@static/interface';
+import { filterDuration, convertDuration } from '@static/function';
 import 'echarts/lib/chart/bar';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';

ts/webui/src/components/trial-detail/Intermediate.tsx → ts/webui/src/components/experiment/trialdetail/chart/Intermediate.tsx

 import * as React from 'react';
 import { Stack, PrimaryButton, Toggle, IStackTokens } from '@fluentui/react';
-import { TooltipForIntermediate, TableObj, Intermedia, EventMap } from '../../static/interface';
-import { reformatRetiariiParameter } from '../../static/function';
+import { TooltipForIntermediate, TableObj, Intermedia, EventMap } from '@static/interface';
+import { reformatRetiariiParameter } from '@static/function';
 import ReactEcharts from 'echarts-for-react';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';

ts/webui/src/components/trial-detail/Para.tsx → ts/webui/src/components/experiment/trialdetail/chart/Para.tsx

+import * as React from 'react';
 import * as d3 from 'd3';
 import { Dropdown, IDropdownOption, Stack, DefaultButton } from '@fluentui/react';
 import ParCoords from 'parcoord-es';
+import { SearchSpace } from '@model/searchspace';
+import { filterByStatus } from '@static/function';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { TableObj, SingleAxis, MultipleAxes } from '@static/interface';
+import ChangeColumnComponent from '../ChangeColumnComponent';
+
 import 'parcoord-es/dist/parcoords.css';
-import * as React from 'react';
-import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { SearchSpace } from '../../static/model/searchspace';
-import { filterByStatus } from '../../static/function';
-import { TableObj, SingleAxis, MultipleAxes } from '../../static/interface';
-import '../../static/style/button.scss';
-import '../../static/style/para.scss';
-import ChangeColumnComponent from '../modals/ChangeColumnComponent';
+import '@style/button.scss';
+import '@style/experiment/trialdetail/para.scss';
 
 interface ParaState {
     dimName: string[];

ts/webui/src/components/trial-detail/TableList.tsx → ts/webui/src/components/experiment/trialdetail/table/TableList.tsx

@@ -10,31 +10,22 @@ import {
     DirectionalHint,
     Checkbox
 } from '@fluentui/react';
-import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { TOOLTIP_BACKGROUND_COLOR } from '../../static/const';
-import { convertDuration, formatTimestamp, copyAndSort, parametersType, parseMetrics } from '../../static/function';
-import { TableObj, SortInfo, SearchItems } from '../../static/interface';
-import { getTrialsBySearchFilters } from './search/searchFunction';
-import { blocked, copy, LineChart, tableListIcon } from '../buttons/Icon';
-import ChangeColumnComponent from '../modals/ChangeColumnComponent';
-import Compare from '../modals/Compare';
-import Customize from '../modals/CustomizedTrial';
-import TensorboardUI from '../modals/tensorboard/TensorboardUI';
-import Search from './search/Search';
-import KillJob from '../modals/Killjob';
-import ExpandableDetails from '../public-child/ExpandableDetails';
-import PaginationTable from '../public-child/PaginationTable';
-import CopyButton from '../public-child/CopyButton';
-import { Trial } from '../../static/model/trial';
-import '../../static/style/button.scss';
-import '../../static/style/logPath.scss';
-import '../../static/style/openRow.scss';
-import '../../static/style/pagination.scss';
-import '../../static/style/search.scss';
-import '../../static/style/table.scss';
-import '../../static/style/tableStatus.css';
-import '../../static/style/tensorboard.scss';
-import '../../static/style/overview/overviewTitle.scss';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
+import { convertDuration, formatTimestamp, copyAndSort, parametersType, parseMetrics } from '@static/function';
+import { TableObj, SortInfo, SearchItems } from '@static/interface';
+import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction';
+import { blocked, copy, LineChart, tableListIcon } from '@components/fluent/Icon';
+import ChangeColumnComponent from '../ChangeColumnComponent';
+import Compare from './tableFunction/Compare';
+import Customize from './tableFunction/CustomizedTrial';
+import TensorboardUI from './tableFunction/tensorboard/TensorboardUI';
+import Search from './tableFunction/search/Search';
+import KillJob from './tableFunction/killTrial/Killjob';
+import ExpandableDetails from '@components/common/ExpandableDetails';
+import PaginationTable from '@components/common/PaginationTable';
+import CopyButton from '@components/common/CopyButton';
+import { Trial } from '@model/trial';
 
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');

ts/webui/src/components/modals/Compare.tsx → ts/webui/src/components/experiment/trialdetail/table/tableFunction/Compare.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { renderToString } from 'react-dom/server';
 import { Stack, Modal, IconButton, IDragOptions, ContextualMenu, Dropdown, IDropdownOption } from '@fluentui/react';
 import ReactEcharts from 'echarts-for-react';
-import { TooltipForIntermediate, TableObj, SingleAxis } from '../../static/interface';
-import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
-import { convertDuration, parseMetrics } from '../../static/function';
-import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import '../../static/style/compare.scss';
+import { TooltipForIntermediate, TableObj, SingleAxis } from '@static/interface';
+import { contentStyles, iconButtonStyles } from '@components/fluent/ModalTheme';
+import { convertDuration, parseMetrics } from '@static/function';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import '@style/experiment/trialdetail/compare.scss';
 
 /***
- * Compare file is design for [each trial intermediate result and trials compare function]
- * if trial has dict intermediate result, graph support shows all keys that type is number
+ * Compare file is designed for [each trial intermediate result, trials compare model]
+ * if trial has dict intermediate result,
+ * graph only supports to show all keys that type is number
  */
 
 function _getWebUIWidth(): number {

ts/webui/src/components/modals/CustomizedTrial.tsx → ts/webui/src/components/experiment/trialdetail/table/tableFunction/CustomizedTrial.tsx

@@ -2,10 +2,16 @@ import * as React from 'react';
 import axios from 'axios';
 import { Stack, StackItem, PrimaryButton, DefaultButton } from '@fluentui/react';
 import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
-import { MANAGER_IP } from '../../static/const';
-import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { warining, errorBadge, completed } from '../buttons/Icon';
-import './customized.scss';
+import { MANAGER_IP } from '@static/const';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { warining, errorBadge, completed } from '@components/fluent/Icon';
+import '@style/experiment/trialdetail/customized.scss';
+
+/**
+ * customized trial file is for
+ * [rerun failed trial,
+ * change trial parameters and add this customized trial into the experiment]
+ */
 
 interface CustomizeProps {
     visible: boolean;