Fixing the last niggling bugs around maintaining column positions bet…

…ween reloads

#26

django/scremsong/app/consumers.py

@@ -178,7 +178,7 @@ def build_on_connect_data_payload(user):
             },
             {
                 **{"msg_type": settings.MSG_TYPE_TWEETS_LOAD_TWEETS},
-                **fetch_tweets_for_columns(user.profile.settings["column_positions"] or None)
+                **fetch_tweets_for_columns(user.profile.settings["column_positions"] if ("column_positions" in user.profile.settings) else None)
             }
         ]
     }

django/scremsong/app/models.py

@@ -36,6 +36,15 @@ def __str__(self):
     def merge_settings(self, settings):
         for item, val in settings.items():
             if ProfileSettings.has_value(item) is True:
+                # If a specific column position object is null then we want to remove it completely
+                if item == "column_positions":
+                    columnId = next(iter(val.keys()))
+                    columnSettings = next(iter(val.values()))
+                    if columnSettings is None:
+                        if columnId in self.settings[item]:
+                            del self.settings[item][columnId]
+                        continue
+
                 if item not in self.settings and type(val) is dict:
                     self.settings[item] = {}
 

django/scremsong/app/twitter.py

@@ -93,7 +93,8 @@ def fetch_tweets_for_columns(columnPositions, columnIds=[]):
     tweets = {}
 
     for social_column in get_social_columns(SocialPlatformChoice.TWITTER, columnIds):
-        if columnPositions is not None and str(social_column.id) in columnPositions:
+        hasColumnPosition = columnPositions is not None and str(social_column.id) in columnPositions
+        if hasColumnPosition is True:
             sinceId = int(columnPositions[str(social_column.id)]["stopTweet"]) - 1
             column_tweets = get_tweets_for_column_by_tweet_ids(social_column, sinceId)
         else:
@@ -105,7 +106,7 @@ def fetch_tweets_for_columns(columnPositions, columnIds=[]):
         for tweet in column_tweets:
             tweets[tweet["tweet_id"]] = TweetsSerializer(tweet).data
 
-            if int(tweet["tweet_id"]) > int(columnPositions[str(social_column.id)]["firstTweet"]):
+            if hasColumnPosition is True and int(tweet["tweet_id"]) > int(columnPositions[str(social_column.id)]["firstTweet"]):
                 column_tweet_ids_buffered.append(tweet["tweet_id"])
             else:
                 column_tweet_ids.append(tweet["tweet_id"])
@@ -217,7 +218,10 @@ def notify_of_saved_tweets(tweets):
 
         for tweet in tweets:
             response["tweets"][tweet.tweet_id] = TweetsSerializer(tweet).data
-            response["columnIds"][tweet.tweet_id] = get_columns_for_tweet(tweet),
+
+            cols = get_columns_for_tweet(tweet)
+            if len(cols) > 0:
+                response["columnIds"][tweet.tweet_id] = cols,
 
         websockets.send_channel_message("tweets.new_tweets", response)
 

frontend/src/triage/TweetColumn/TweetColumn.tsx

@@ -78,6 +78,10 @@ class TweetColumn extends React.Component<TComponentProps, IState> {
                 this.props.onPositionUpdate(this.props.column.id, opts)
                 // We store it in the class rather than React state so we can avoid triggering the React update lifecycle
                 this._firstVisibleTweet = this.props.tweet_ids[opts.startIndex]
+                // if (this.props.column.id === 6) {
+                //     console.log(`oRR: _firstVisibleTweet is ${this._firstVisibleTweet}`)
+                //     console.log("oRR:", opts)
+                // }
             }
             onRowsRendered(opts)
         }
@@ -92,15 +96,16 @@ class TweetColumn extends React.Component<TComponentProps, IState> {
             if (ready === false) {
                 return <div>Loading...</div>
             }
-            return <div>No rows found!</div>
+            this.props.onPositionUpdate(this.props.column.id, null)
+            return <div>This column has no tweets!</div>
         }
     }
 
     public render() {
         const { column, tweet_ids, preFetchThreshold, minBatchSize, overscanRowCount, loadMoreRows } = this.props
         const { ready } = this.state
 
-        if (tweet_ids.length === 0) {
+        if (tweet_ids.length === 0 && ready === false) {
             return null
         }
 
@@ -188,6 +193,9 @@ class TweetColumn extends React.Component<TComponentProps, IState> {
             this.setState({ ready: true, firstVisibleTweet: position.firstVisibleTweet }, () => {
                 const tweetIndex = this.props.tweet_ids.findIndex((tweetId: string) => tweetId === this.state.firstVisibleTweet)
                 if (this._list !== undefined && tweetIndex !== -1) {
+                    // if (this.props.column.id === 6) {
+                    //     console.log("cDM: Move ", this.props.column.id, " to ", tweetIndex, " for ", position.firstVisibleTweet)
+                    // }
                     this._list.scrollToRow(tweetIndex)
                 }
             })
@@ -235,8 +243,10 @@ class TweetColumn extends React.Component<TComponentProps, IState> {
             // first visible tweet we'll check it's index
             const oldTweetIndex = prevProps.tweet_ids.findIndex((tweetId: string) => tweetId === snapshot.lastStartTweet)
             const tweetIndex = this.props.tweet_ids.findIndex((tweetId: string) => tweetId === snapshot.lastStartTweet)
+            // if (this.props.column.id === 6) {
+            //     console.log("cDU: Move ", this.props.column.id, " to ", tweetIndex, " for ", snapshot.lastStartTweet)
+            // }
             if (tweetIndex !== -1 && oldTweetIndex !== tweetIndex) {
-                // console.log("Move ", this.props.column.id, " to ", tweetIndex, " for ", snapshot.lastStartTweet)
                 this._list.scrollToRow(tweetIndex)
             }
         }

frontend/src/triage/TweetColumn/TweetColumnContainer.tsx

@@ -43,6 +43,29 @@ export interface IReactVirtualizedIndexes {
     stopIndex: number
 }
 
+const mapColumnListPropsToTweetPosition = (opts: any /*ListProps["onRowsRendered"]*/, tweetIds: string[]) => {
+    // Ref. onRowsRendered() https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md
+
+    if (tweetIds.length === 0) {
+        return null
+    }
+
+    const firstTweet = tweetIds[0]
+    let firstVisibleTweet = tweetIds[opts.startIndex]
+    const pageSizeEstimate = opts.overscanStopIndex + minBatchSize / 2 // (i.e. Take the last tweet that's currently rendered in the column [overscanStopIndex] and add half of the page size that we use to load new tweets as the user scrolls down [minBatchSize])
+    const stopTweet = tweetIds[pageSizeEstimate] !== undefined ? tweetIds[pageSizeEstimate] : tweetIds[tweetIds.length - 1] // If we're at the end of the available tweets in the column then our stopTweet is just the last tweet in the column
+
+    if (firstVisibleTweet > firstTweet) {
+        firstVisibleTweet = firstTweet
+    }
+
+    return {
+        firstTweet, // The most recent tweet that this column has i nit (i.e. the tweet at the very top of the column)
+        firstVisibleTweet, // The tweet that's currently visible at the top of the column
+        stopTweet, // The tweet that marks the end of the currently visible column "window" (i.e. this is usually 5 - 10 tweets below the currently visible column window, so in refreshing tweets we can safely stop at this tweet)
+    }
+}
+
 type TComponentProps = IProps & IStoreProps & IDispatchProps
 class TweetColumnContainer extends React.Component<TComponentProps, {}> {
     private loadMoreRows: any
@@ -54,13 +77,7 @@ class TweetColumnContainer extends React.Component<TComponentProps, {}> {
         this.loadMoreRows = (indexes: IReactVirtualizedIndexes) => props.loadMoreRows(this.props.column, indexes)
         this.onPositionUpdate = debounce(
             (columnId: number, opts: any /*ListProps["onRowsRendered"]*/) =>
-                this.props.onPositionUpdate(columnId, {
-                    firstTweet: this.props.tweet_ids[0],
-                    firstVisibleTweet: this.props.tweet_ids[opts.startIndex],
-                    stopTweet:
-                        this.props.tweet_ids[opts.overscanStopIndex + minBatchSize / 2] ||
-                        this.props.tweet_ids[this.props.tweet_ids.length - 1],
-                }),
+                this.props.onPositionUpdate(columnId, mapColumnListPropsToTweetPosition(opts, this.props.tweet_ids)),
             2500,
             { maxWait: 5000 }
         )
@@ -105,7 +122,7 @@ const mapDispatchToProps = (dispatch: Function): IDispatchProps => {
         loadMoreRows: (column: ITriageColumn, indexes: IReactVirtualizedIndexes) => {
             return dispatch(fetchTweets(indexes.startIndex, indexes.stopIndex, [column.id]))
         },
-        onPositionUpdate: (columnId: number, positions: IProfileColumnPosition) => {
+        onPositionUpdate: (columnId: number, positions: IProfileColumnPosition | null) => {
             const settings = { column_positions: {} }
             settings.column_positions[columnId] = positions
             dispatch(ws_changeUserProfileSettings(settings))