Skip to content

Commit

Permalink
applied code review remarks
Browse files Browse the repository at this point in the history
  • Loading branch information
ggajos committed Apr 20, 2018
1 parent 0435774 commit 90407c2
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 70 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ app/node_modules/
.idea/
.vs/
.eslintcache
*.iml
*.iml
8 changes: 7 additions & 1 deletion app/src/models/diff/image.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,14 @@ export class Image {
*/
public readonly mediaType: string

public constructor(contents: string, mediaType: string) {
/**
* Size of the file in bytes
*/
public readonly bytes: number

public constructor(contents: string, mediaType: string, bytes: number) {
this.contents = contents
this.mediaType = mediaType
this.bytes = bytes
}
}
65 changes: 43 additions & 22 deletions app/src/ui/diff/image-diffs/two-up.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import * as React from 'react'
import { ImageContainer } from './image-container'
import { ICommonImageDiffProperties } from './modified-image-diff'
import { ISize } from './sizing'
import { formatBytes } from "../../lib/bytes";
import * as classNames from 'classnames'

/**
* The height of the Deleted/Added labels at the top and the image dimension
Expand All @@ -27,40 +29,59 @@ export class TwoUp extends React.Component<ITwoUpProps, {}> {
),
maxHeight: this.props.maxSize.height - ControlsHeight,
}
const percentDiff = (previous: number, current: number) => {
const diff = Math.round(100 * (current - previous) / previous)
return `${diff}%`
}

const zeroSize = { width: 0, height: 0 }
const previousImageSize = this.props.previousImageSize || zeroSize
const currentImageSize = this.props.currentImageSize || zeroSize
const diffPercent = percentDiff(this.props.previous.bytes, this.props.current.bytes)
const diffBytes = this.props.current.bytes - this.props.previous.bytes

return (
<div className="image-diff-two-up" ref={this.props.onContainerRef}>
<div className="image-diff-previous">
<div className="image-diff-header">Deleted</div>
<ImageContainer
image={this.props.previous}
onElementLoad={this.props.onPreviousImageLoad}
style={style}
/>
<div className="image-diff-container" ref={this.props.onContainerRef}>
<div className="image-diff-two-up">
<div className="image-diff-previous">
<div className="image-diff-header">Deleted</div>
<ImageContainer
image={this.props.previous}
onElementLoad={this.props.onPreviousImageLoad}
style={style}
/>

<div className="image-diff-footer">
<span className="strong">W:</span> {previousImageSize.width}px |{' '}
<span className="strong">H:</span> {previousImageSize.height}px
<div className="image-diff-footer">
<span className="strong">W:</span> {previousImageSize.width}px |{' '}
<span className="strong">H:</span> {previousImageSize.height}px |{' '}
<span className="strong">Size:</span>{' '} {formatBytes(this.props.previous.bytes)}
</div>
</div>
</div>

<div className="image-diff-current">
<div className="image-diff-header">Added</div>
<ImageContainer
image={this.props.current}
onElementLoad={this.props.onCurrentImageLoad}
style={style}
/>
<div className="image-diff-current">
<div className="image-diff-header">Added</div>
<ImageContainer
image={this.props.current}
onElementLoad={this.props.onCurrentImageLoad}
style={style}
/>

<div className="image-diff-footer">
<span className="strong">W:</span> {currentImageSize.width}px |{' '}
<span className="strong">H:</span> {currentImageSize.height}px
<div className="image-diff-footer">
<span className="strong">W:</span> {currentImageSize.width}px |{' '}
<span className="strong">H:</span> {currentImageSize.height}px |{' '}
<span className="strong">Size:</span> {formatBytes(this.props.current.bytes)}
</div>
</div>
</div>
<div className="image-diff-summary">
Diff:{' '}
<span className={classNames({
'added' : diffBytes > 0,
'removed': diffBytes < 0
})}>
{diffBytes != 0 ? `${formatBytes(diffBytes)} | ${diffPercent}` : 'No size difference'}
</span>
</div>
</div>
)
}
Expand Down
69 changes: 23 additions & 46 deletions app/src/ui/lib/bytes.ts
Original file line number Diff line number Diff line change
@@ -1,50 +1,27 @@
/**
* Manipulate bytes for displaying purposes.
* Number sign display mode
*/
export class Bytes {
public readonly bytes: number

public constructor(bytes: number) {
this.bytes = bytes
}

/**
* Display bytes in human readable format like:
* - 23gb
* - 43bytes
* @param {boolean} forceSign Show `+123kb` instead of `123kb`
* @return {string} formatted string
*/
public format(forceSign: boolean = false) {
if (!Number.isFinite(this.bytes)) {
return 'Unknown'
}
const sizes = ['bytes', 'kb', 'mb', 'gb', 'tb']
const i = Math.floor(Math.log(Math.abs(this.bytes)) / Math.log(1024))
const sign = forceSign && this.bytes > 0 ? '+' : ''
const value = Math.round(this.bytes / Math.pow(1024, i))
return `${sign}${value}${sizes[i]}`
}

/**
* Creates new Bytes object by adding or subtracting the bytes from
* current instance.
*
* @param {number} bytes Amount of bytes to add/remove
* @return {Bytes} New Bytes object.
*/
public diff(bytes: number) {
return new Bytes(bytes - this.bytes)
}
const enum Sign {
Normal,
Forced
}

/**
* Display difference percentage in comparison to provided number
* of bytes.
* @param {number} bytes Number of bytes.
* @return {string} Percentage difference like 45%
*/
public percentDiff(bytes: number) {
const diff = Math.round(100 * (bytes - this.bytes) / this.bytes)
return `${diff}%`
/**
* Display bytes in human readable format like:
* 23GB
* -43B
* It's also possible to force sign in order to get the
* plus sign in case of positive numbers like:
* +23GB
* -43B
*/
export const formatBytes = (bytes: number, signType: Sign = Sign.Normal) => {
if (!Number.isFinite(bytes)) {
return 'Unknown'
}
}
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
const sizeIndex = Math.floor(Math.log(Math.abs(bytes)) / Math.log(1024))
const sign = signType == Sign.Forced && bytes > 0 ? '+' : ''
const value = Math.round(bytes / Math.pow(1024, sizeIndex))
return `${sign}${value}${sizes[sizeIndex]}`
}

0 comments on commit 90407c2

Please sign in to comment.