Remove unnecessary libs from browser (#407)

* Removed jquery from browser * Slightly amended the dot positions of BranchGraph * reduced repeating calls on componentWillUpdate by removing LOGENTRY_ITEM_HEIGHT_CALCULATED action * Apply styles only for origin "null" * removed react-scroll as it was pretty much unused (or not properly working)
DonJayamanne · Nov 26, 2019 · 8129209 · 8129209
1 parent 4951e7c
commit 8129209
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 257 deletions.
diff --git a/browser/src/actions/results.ts b/browser/src/actions/results.ts
@@ -255,26 +255,6 @@ function fetchAuthors(dispatch: Dispatch<any>, store: RootState) {
             console.error(err);
         });
 }
-// export const fetchLogEntries = (pageIndex: number, pageSize: number) => {
-//     return (dispatch: Dispatch<any>, getState: () => RootState) => {
-//         return axios.get(`/log?pageSize=${pageSize}&pageIndex=${pageIndex}`)
-//             .then(result => {
-//                 debugger;
-//                 const x = getState();
 
-//                 dispatch(addResults({ logEntries: result.data, pageIndex: pageIndex }));
-//             })
-//             .catch(err => {
-//                 debugger;
-//                 console.error('Result failed');
-//                 console.error(err);
-//             });
-//     };
-// };
+export const commitsRendered = createAction<number>(Actions.COMMITS_RENDERED);
 
-export const logViewSizeCalculated = createAction<{ height: string; width: string }>(Actions.LOGVIEW_SIZE_CALCULATED);
-export const logEntryHeightCalculated = createAction<number>(Actions.LOGENTRY_ITEM_HEIGHT_CALCULATED);
-export const commitsRendered = createAction(Actions.COMMITS_RENDERED);
-// export const doSomethingWithCommit = createAction<LogEntry>(Actions.SELECT_COMMIT);
-// export const closeCommitView = createAction(Actions.CLOSE_COMMIT_VIEW);
-// export const closeCommittedFile = createAction(Actions.CLOSE_COMMIT_VIEW);
diff --git a/browser/src/components/LogView/BranchGraph/index.tsx b/browser/src/components/LogView/BranchGraph/index.tsx
@@ -6,8 +6,6 @@ import { RootState } from '../../../reducers';
 type BranchGrapProps = {
     hideGraph: boolean;
     logEntries: LogEntry[];
-    height?: string;
-    width?: string;
     itemHeight?: number;
     updateTick?: number;
 };
@@ -48,11 +46,10 @@ function drawGitGraph(svg: SVGSVGElement, content: HTMLElement, startAt: number,
     }
     svg.style.display = '';
     // Draw the graph
-    const circleOffset = 0; //0.5 * logEntryHeight;
+    const circleOffset = 0;
     const standardOffset = (0 + 0.5) * logEntryHeight;
     let currentY = (0 + 0.5) * logEntryHeight;
     let topMostY = (0 + 0.5) * logEntryHeight;
-    // topMostY = (0 + 0.5) * logEntryHeight;
     let maxLeft = 0;
     let lastXOffset = 12;
     let maxXOffset = 12;
@@ -275,69 +272,31 @@ function drawGitGraph(svg: SVGSVGElement, content: HTMLElement, startAt: number,
         branch.path.setAttribute('d', branch.path.cmds + currentY);
     });
 
-    // Commented only fo debugging
-    // circlesToAppend.forEach(svg.appendChild.bind(svg));
+    // calculate the height
+    if (entries.length > 0 && !isNaN(logEntryHeight)) {
+        svg.setAttribute('height', (entries.length * logEntryHeight).toString());
+    }
 }
 
 class BrachGraph extends React.Component<BranchGrapProps> {
     componentWillReceiveProps(newProps: BranchGrapProps) {
     }
     componentWillUpdate(newProps: BranchGrapProps) {
         if (newProps.hideGraph) {
-            this.grahWasHidden = true;
             drawGitGraph(this.svg, this.svg.nextSibling as HTMLElement, 0, newProps.itemHeight, [], true);
             return;
         }
-        if (this.props.hideGraph && !newProps.hideGraph) {
-            drawGitGraph(this.svg, this.svg.nextSibling as HTMLElement, 0, newProps.itemHeight, newProps.logEntries || []);
-        }
-        if (Array.isArray(newProps.logEntries) && newProps.logEntries.length === 0) {
-            drawGitGraph(this.svg, this.svg.nextSibling as HTMLElement, 0, newProps.itemHeight, []);
-        }
-        if (!newProps.height || !newProps.width || !newProps.itemHeight || !Array.isArray(newProps.logEntries)) {
-            return;
-        }
-        if (newProps.itemHeight > 0 && (!Array.isArray(newProps.logEntries) || newProps.logEntries.length === 0)) {
-            drawGitGraph(this.svg, this.svg.nextSibling as HTMLElement, 0, newProps.itemHeight, newProps.logEntries);
-            return;
-        }
-        if (newProps.itemHeight > 0 && newProps.itemHeight === this.props.itemHeight &&
-            Array.isArray(this.props.logEntries) && this.props.logEntries.length > 0 &&
-            newProps.updateTick === this.props.updateTick &&
-            newProps.logEntries.length === this.props.logEntries.length &&
-            newProps.logEntries[0].hash.full === this.props.logEntries[0].hash.full) {
-            return;
-        }
         if (newProps.updateTick === this.props.updateTick) {
             return;
-        }
-        if (!this.grahWasHidden && this.lastDrawnDetails && newProps.logEntries.length > 0 &&
-            this.lastDrawnDetails.count === newProps.logEntries.length &&
-            this.lastDrawnDetails.firstHash === newProps.logEntries[0].hash.full &&
-            this.lastDrawnDetails.firstHash === newProps.logEntries[0].hash.full) {
-            return;
-        }
-
-        // Hack (dependant components).
-        this.grahWasHidden = false;
-        this.lastDrawnDetails = {
-            count: newProps.logEntries.length,
-            firstHash: newProps.logEntries.length > 0 ? newProps.logEntries[0].hash.full : '',
-            lastHash: newProps.logEntries.length > 0 ? newProps.logEntries[newProps.logEntries.length - 1].hash.full : '',
-        };
-
-        this.svg.setAttribute('height', newProps.height);
-        this.svg.setAttribute('width', newProps.width);
+        }       
 
         // Hack, first clear before rebuilding.
         // Remember, we will need to support apending results, as opposed to clearing page
         drawGitGraph(this.svg, this.svg.nextSibling as HTMLElement, 0, newProps.itemHeight, []);
-        drawGitGraph(this.svg, this.svg.nextSibling as HTMLElement, 0, newProps.itemHeight, newProps.logEntries);
+        drawGitGraph(this.svg, this.svg.nextSibling as HTMLElement, 0, newProps.itemHeight, newProps.logEntries);        
     }
-    private lastDrawnDetails: { firstHash: string, lastHash: string, count: number };
-    private grahWasHidden: boolean;
+
     private svg: SVGSVGElement;
-
     render() {
         return (
             <svg className='commitGraph' ref={(ref) => this.svg = ref} xmlns='http://www.w3.org/2000/svg'></svg>
@@ -348,13 +307,12 @@ class BrachGraph extends React.Component<BranchGrapProps> {
 function mapStateToProps(state: RootState): BranchGrapProps {
     const hideGraph = (state && state.logEntries) && ((state.logEntries.searchText && state.logEntries.searchText.length > 0) ||
         (state.logEntries.file && state.logEntries.file.fsPath && state.logEntries.file.fsPath.length > 0) ||
-        (state.logEntries.author && state.logEntries.author.length > 0));
+        (state.logEntries.author && state.logEntries.author.length > 0) || state.logEntries.isLoading
+        );
 
     return {
         logEntries: state.logEntries.items,
         hideGraph,
-        height: state.graph.height,
-        width: state.graph.width,
         itemHeight: state.graph.itemHeight,
         updateTick: state.graph.updateTick
     };

diff --git a/browser/src/components/LogView/Commit/Author/index.tsx b/browser/src/components/LogView/Commit/Author/index.tsx
@@ -29,11 +29,6 @@ function formatDateTime(locale: string, date?: Date) {
         return date.toLocaleString(undefined, dateOptions);
     }
 }
-// function formatDate(date: Date) {
-//   const lang = process.env.language;
-//   const dateOptions = { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', hour: 'numeric', minute: 'numeric' };
-//   return date.toLocaleString(lang, dateOptions);
-// }
 
 function mapStateToProps(state: RootState, wrapper: { result: ActionedDetails }) {
     return {
@@ -42,18 +37,6 @@ function mapStateToProps(state: RootState, wrapper: { result: ActionedDetails })
     };
 }
 
-// function mapDispatchToProps(dispatch) {
-//   return {
-//     // ...bindActionCreators({ ...ResultActions }, dispatch),
-//     // fetchData: (pageIndex: number) => dispatch(ResultActions.fetchLogEntries(pageIndex))
-//     setSize: (size: Size) => dispatch(ResultActions.logViewSizeCalculated(size)),
-//     setHeight: (height: number) => dispatch(ResultActions.logEntryHeightCalculated(height)),
-//     commitsRendered: () => dispatch(ResultActions.commitsRendered()),
-//     onViewCommit: (hash: string) => dispatch(ResultActions.viewCommit(hash)),
-//     actionACommit: (logEntry: LogEntry) => dispatch(ResultActions.actionACommit(logEntry))
-//   };
-// }
-
 export default connect(
     mapStateToProps
 )(Author);
diff --git a/browser/src/components/LogView/Commit/Avatar/index.tsx b/browser/src/components/LogView/Commit/Avatar/index.tsx
@@ -29,18 +29,6 @@ function mapStateToProps(state: RootState, wrapper: { result: ActionedDetails })
     };
 }
 
-// function mapDispatchToProps(dispatch) {
-//   return {
-//     // ...bindActionCreators({ ...ResultActions }, dispatch),
-//     // fetchData: (pageIndex: number) => dispatch(ResultActions.fetchLogEntries(pageIndex))
-//     setSize: (size: Size) => dispatch(ResultActions.logViewSizeCalculated(size)),
-//     setHeight: (height: number) => dispatch(ResultActions.logEntryHeightCalculated(height)),
-//     commitsRendered: () => dispatch(ResultActions.commitsRendered()),
-//     onViewCommit: (hash: string) => dispatch(ResultActions.viewCommit(hash)),
-//     actionACommit: (logEntry: LogEntry) => dispatch(ResultActions.actionACommit(logEntry))
-//   };
-// }
-
 export default connect(
     mapStateToProps
 )(Avatar);
diff --git a/browser/src/components/LogView/LogEntryList/index.tsx b/browser/src/components/LogView/LogEntryList/index.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Element, Events, scrollSpy } from 'react-scroll';
 import { LogEntry } from '../../../definitions';
 import LogEntryView from '../LogEntry';
 
@@ -11,30 +10,27 @@ interface ResultProps {
 
 export default class LogEntryList extends React.Component<ResultProps> {
     // private scrolled;
-    private ref: HTMLDivElement;
+    public ref: HTMLDivElement;
     public componentDidUpdate() {
 
     }
     public componentDidMount() {
-        scrollSpy.update();
+
     }
     public componentWillUnmount() {
-        Events.scrollEvent.remove('begin');
-        Events.scrollEvent.remove('end');
+
     }
     public render() {
         if (!Array.isArray(this.props.logEntries)) {
             return null;
         }
 
         const results = this.props.logEntries.map(entry =>
-            <Element name={entry.hash.full} className='myItem' key={entry.hash.full}>
                 <LogEntryView
                     key={entry.hash.full}
                     logEntry={entry}
                     onViewCommit={this.props.onViewCommit}
                     onClick={this.props.onClick} />
-            </Element>
         );
         return (
             // tslint:disable-next-line:react-this-binding-issue

diff --git a/browser/src/components/LogView/LogView/index.tsx b/browser/src/components/LogView/LogView/index.tsx
@@ -1,4 +1,3 @@
-import * as jQuery from 'jquery';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as ResultActions from '../../../actions/results';
@@ -7,11 +6,8 @@ import { RootState } from '../../../reducers';
 import BranchGraph from '../BranchGraph';
 import LogEntryList from '../LogEntryList';
 
-type Size = { height: string, width: string };
 type LogViewProps = {
     logEntries: LogEntries;
-    setSize: typeof ResultActions.logViewSizeCalculated;
-    setHeight: typeof ResultActions.logEntryHeightCalculated;
     commitsRendered: typeof ResultActions.commitsRendered;
     onViewCommit: typeof ResultActions.selectCommit;
     actionACommit: typeof ResultActions.actionACommit;
@@ -26,41 +22,30 @@ class LogView extends React.Component<LogViewProps, LogViewState> {
     constructor(props?: LogViewProps, context?: any) {
         super(props, context);
         // this.state = { height: '', width: '', itemHeight: 0 };
+        this.ref = React.createRef<LogEntryList>();
     }
-    private calculatedHeight: string;
-    private calculatedWidth: string;
-    private calculatedItemHeight: number;
-    private ref: HTMLDivElement;
+    private ref: React.RefObject<LogEntryList>;
     public componentDidUpdate() {
-        // const $ref = jQuery(this.ref);
-        const $ref = jQuery(this.ref.children[1]);
-        const height = $ref.outerHeight().toString();
-        const width = $ref.outerWidth().toString();
-        const $logEntry = jQuery('.log-entry').filter(':first');
-        const logEntryHeight = $logEntry.outerHeight() + parseFloat($logEntry.css('marginTop'));
+        const el = this.ref.current.ref;
 
-        if (!isNaN(logEntryHeight) && (!this.state || this.calculatedHeight !== height ||
-            this.calculatedItemHeight !== logEntryHeight || this.calculatedWidth !== width)) {
-            // this.setState({ height, width, itemHeight: logEntryHeight, commitsUpdatedTime: new Date().getTime() });
-            this.props.setHeight(logEntryHeight);
-            this.props.setSize({ height, width });
-            this.props.commitsRendered();
+        if (this.props.logEntries.selected) {
             return;
         }
 
-        if (!isNaN(logEntryHeight) && this.props.logEntries &&
-            this.calculatedItemHeight > 0 &&
-            Array.isArray(this.props.logEntries.items) && this.props.logEntries.items.length > 0) {
-            this.props.commitsRendered();
+        if(el.hasChildNodes() && this.props.logEntries && !this.props.logEntries.isLoading && !this.props.logEntries.isLoadingCommit && Array.isArray(this.props.logEntries.items) && this.props.logEntries.items.length > 0) {          
+            // use the total height to be more accurate in positioning the dots from BranchGraph
+            const totalHeight = el.offsetHeight;
+            const logEntryHeight = totalHeight / this.props.logEntries.items.length;
+            this.props.commitsRendered(logEntryHeight);
         }
     }
 
     public render() {
         return (
             // tslint:disable-next-line:react-this-binding-issue
-            <div className='log-view' id='scrollCnt' ref={(ref) => this.ref = ref}>
-                <BranchGraph ></BranchGraph>
-                <LogEntryList logEntries={this.props.logEntries.items}
+            <div className='log-view' id='scrollCnt'>
+                <BranchGraph></BranchGraph>
+                <LogEntryList ref={this.ref} logEntries={this.props.logEntries.items}
                     onClick={this.onClick}
                     onViewCommit={this.onViewCommit}></LogEntryList>
             </div>
@@ -79,22 +64,12 @@ function mapStateToProps(state: RootState, wrapper: { logEntries: LogEntries })
         logEntries: wrapper.logEntries
     };
 }
-// function mapStateToProps(state: RootState) {
-//   return {
-//     logEntries: {
-//       items: state.logEntries.items,
-//       count: state.logEntries.count
-//     }
-//   };
-// }
 
 function mapDispatchToProps(dispatch) {
     return {
         // ...bindActionCreators({ ...ResultActions }, dispatch),
         // fetchData: (pageIndex: number) => dispatch(ResultActions.fetchLogEntries(pageIndex))
-        setSize: (size: Size) => dispatch(ResultActions.logViewSizeCalculated(size)),
-        setHeight: (height: number) => dispatch(ResultActions.logEntryHeightCalculated(height)),
-        commitsRendered: () => dispatch(ResultActions.commitsRendered()),
+        commitsRendered: (height: number) => dispatch(ResultActions.commitsRendered(height)),
         onViewCommit: (hash: string) => dispatch(ResultActions.selectCommit(hash)),
         actionACommit: (logEntry: LogEntry) => dispatch(ResultActions.actionACommit(logEntry))
     };

diff --git a/browser/src/constants/resultActions.ts b/browser/src/constants/resultActions.ts
@@ -1,10 +1,7 @@
 export const CLEAR_RESULTS = 'CLEAR_RESULTS';
-export const LOGENTRY_ITEM_HEIGHT_CALCULATED = 'LOGENTRY_ITEM_HEIGHT_CALCULATED';
 export const COMMITS_RENDERED = 'COMMITS_RENDERED';
 export const SELECT_COMMITTED_FILE = 'SELECT_COMMITTED_FILE';
 export const SELECT_COMMIT = 'SELECT_COMMIT';
-// export const CLOSE_COMMIT_VIEW = 'CLOSE_COMMIT_VIEW';
-export const LOGVIEW_SIZE_CALCULATED = 'LOGVIEW_SIZE_CALCULATED';
 export const SET_APPEND_RESULTS = 'SET_APPEND_RESULTS';
 export const ADD_RESULT = 'ADD_RESULT';
 export const FETCHED_COMMITS = 'FETCHED_COMMITS';

diff --git a/browser/src/index.ejs b/browser/src/index.ejs
@@ -11,6 +11,8 @@
       window['configuration'] = <%- JSON.stringify(config) %>;
 
       function receiveMessage(event) {
+        if(event.origin !== "null") return;
+
         console.log('Applying styles received from parent frame...');
         document.getElementById('_defaultStyles').innerHTML = ':root { ' + event.data +  '  }';
       }

diff --git a/browser/src/main.css b/browser/src/main.css
@@ -171,7 +171,7 @@ div.appRoot {
 	height:15px;
     width:15px;
     float:left;
-    margin:0.2em 0.4em 0.2em 0;
+    margin:0.2em 0.4em 0em 0em;
 }
 
 .authorAndCommitInfoContainer {

diff --git a/browser/src/reducers/graph.ts b/browser/src/reducers/graph.ts
@@ -10,19 +10,7 @@ export interface IGraphState {
 const initialState: IGraphState = {};
 
 export default handleActions<IGraphState, any>({
-  // [Actions.CLEAR_RESULTS]: (state, action) => {
-  //   return { ...state, logEntries: undefined } as IGraphState;
-  // },
-  // [Actions.ADD_RESULTS]: (state, action: ReduxActions.Action<LogEntries>) => {
-  //   return { ...state, logEntries: action.payload } as IGraphState;
-  // },
-  [Actions.LOGENTRY_ITEM_HEIGHT_CALCULATED]: (state, action: ReduxActions.Action<number>) => {
-    return { ...state, itemHeight: action.payload } as IGraphState;
+  [Actions.COMMITS_RENDERED]: (state, action: ReduxActions.Action<number>) => {
+    return { ...state, updateTick: new Date().getTime(), itemHeight: action.payload } as IGraphState;
   },
-  [Actions.COMMITS_RENDERED]: (state, action: any) => {
-    return { ...state, updateTick: new Date().getTime() } as IGraphState;
-  },
-  [Actions.LOGVIEW_SIZE_CALCULATED]: (state, action: ReduxActions.Action<{ height: string, widht: string }>) => {
-    return { ...state, ...action.payload } as IGraphState;
-  }
 }, initialState);